fela-plugin-theme-value
Advanced tools
Comparing version 12.0.0-rc.0 to 12.0.0-rc.1
{ | ||
"name": "fela-plugin-theme-value", | ||
"version": "12.0.0-rc.0", | ||
"version": "12.0.0-rc.1", | ||
"description": "Fela plugin to resolve values from a theme", | ||
@@ -17,5 +17,5 @@ "main": "lib/index.js", | ||
"scripts": { | ||
"setup": "yarn build", | ||
"setup": "pnpm build", | ||
"clean": "rimraf lib es coverage", | ||
"build": "yarn clean && yarn build:es && yarn build:lib", | ||
"build": "pnpm clean && pnpm build:es && pnpm build:lib", | ||
"build:es": "babel src --out-dir es --ignore **/__tests__", | ||
@@ -28,3 +28,3 @@ "build:lib": "cross-env BABEL_ENV=commonjs babel src --out-dir lib --ignore **/__tests__", | ||
"test": "jest --config=jest.config.js", | ||
"coverage": "yarn test --coverage" | ||
"coverage": "pnpm test --coverage" | ||
}, | ||
@@ -66,3 +66,3 @@ "repository": "https://github.com/robinweser/fela/", | ||
}, | ||
"gitHead": "00f02f410f17a7693479ea3349bb3a9f223359af" | ||
"gitHead": "20e073d04b1a97beb6a099e160b0813db845a5e9" | ||
} |
@@ -8,3 +8,3 @@ # fela-plugin-theme-value | ||
Yet, using values from the theme can be annoying since one has to access the theme manually and pick the correct values.<br> | ||
With tools like [theme-ui](https://theme-ui.com), a direct string based approach became very popular as it's easy to use and still easy to understand. | ||
With tools like [theme-ui](https://theme-ui.com), a direct string based approach became very popular as it's easy to use and still easy to understand. | ||
@@ -14,8 +14,11 @@ This plugin provides basic support for string-based theme values in Fela. | ||
## Installation | ||
```sh | ||
yarn add fela-plugin-theme-value | ||
``` | ||
You may alternatively use `npm i --save fela-plugin-theme-value`. | ||
## Usage | ||
Make sure to read the documentation on [how to use plugins](http://fela.js.org/docs/advanced/Plugins.html). | ||
@@ -28,3 +31,3 @@ | ||
const renderer = createRenderer({ | ||
plugins: [ themeValue() ] | ||
plugins: [themeValue()], | ||
}) | ||
@@ -34,2 +37,3 @@ ``` | ||
### Configuration | ||
In order to get the right values from the theme, we have to pass an object that maps each property to the respective theme object. | ||
@@ -42,5 +46,5 @@ | ||
const themeMapping = { | ||
color: theme => theme.colors, | ||
backgroundColor: theme => theme.colors, | ||
fontFamily: theme => theme.fonts | ||
color: (theme) => theme.colors, | ||
backgroundColor: (theme) => theme.colors, | ||
fontFamily: (theme) => theme.fonts, | ||
} | ||
@@ -51,3 +55,3 @@ | ||
const renderer = createRenderer({ | ||
plugins: [ themValuePlugin ] | ||
plugins: [themValuePlugin], | ||
}) | ||
@@ -59,3 +63,4 @@ ``` | ||
Let's imagine we have the following theme: | ||
```json | ||
```javascript | ||
{ | ||
@@ -80,2 +85,3 @@ colors: { | ||
#### Input | ||
```javascript | ||
@@ -88,3 +94,5 @@ { | ||
``` | ||
#### Output | ||
```javascript | ||
@@ -99,4 +107,5 @@ { | ||
## License | ||
Fela is licensed under the [MIT License](http://opensource.org/licenses/MIT).<br> | ||
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).<br> | ||
Created with ♥ by [@robinweser](http://weser.io) and all the great contributors. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
10234
102