Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

fela-plugin-theme-value

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

fela-plugin-theme-value - npm Package Compare versions

Comparing version 12.0.0-rc.0 to 12.0.0-rc.1

10

package.json
{
"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.
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc