fela-plugin-named-keys
v12.2.1
Published
Fela plugin to replace named keys
Downloads
76,304
Readme
fela-plugin-named-keys
Note: This plugin was named
fela-plugin-named-media-query
before. It was renamed to semantically also match@supports
rules.
This plugin is basically a convenient plugin for more readable code and better maintenance. It allows to define custom key names that are later replaced for valid keys.
Installation
yarn add fela-plugin-named-keys
You may alternatively use npm i --save fela-plugin-named-keys
.
Usage
Make sure to read the documentation on how to use plugins.
import { createRenderer } from 'fela'
import namedKeys from 'fela-plugin-named-keys'
const renderer = createRenderer({
plugins: [namedKeys()],
})
Configuration
Parameters
| Parameter | Value | Default | Description |
| ---------- | ---------- | ------- | ------------------------------------ |
| keyMap | (Object) | {}
| An object with key-replacement pairs |
Example
import { createRenderer } from 'fela'
import namedKeys from 'fela-plugin-named-keys'
const namedKeysPlugin = namedKeys({
desktop: '@media (min-width: 1024px)',
tablet: '@media (min-width: 768px)',
supportsFlex: '@supports (display: flex)',
supportsGrid: '@supports (display: grid)',
})
const renderer = createRenderer({
plugins: [namedKeysPlugin],
})
Example
Using the above example code:
Input
{
color: 'red',
supportsGrid: {
color: 'green'
},
desktop: {
color: 'blue',
supportsGrid: {
color: 'yellow'
}
}
}
Output
{
color: 'red',
'@supports (display: grid)' : {
color: 'green'
},
'@media (min-width: 1024px)': {
color: 'blue',
'@supports (display: grid)' : {
color: 'yellow'
},
}
}
License
Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.