Switch branches/tags
react-fela@8.0.2 react-fela@7.3.0 react-fela@7.2.0 react-fela@7.0.1 react-fela@6.2.4 react-fela@6.2.3 react-fela@6.2.2 react-fela@6.2.1 react-fela@6.2.0 react-fela@6.1.1 react-fela@6.0.2 react-fela@6.0.1 react-fela@6.0.0 react-fela@5.3.0 react-fela@5.2.1 react-fela@5.2.0 react-fela@5.0.0 preact-fela@8.0.2 preact-fela@7.3.0 preact-fela@7.2.0 preact-fela@7.0.1 preact-fela@6.2.4 preact-fela@6.2.3 preact-fela@6.2.2 preact-fela@6.2.1 preact-fela@6.2.0 preact-fela@6.1.1 preact-fela@6.0.2 preact-fela@6.0.1 preact-fela@6.0.0 preact-fela@5.3.0 preact-fela@5.2.1 preact-fela@5.2.0 preact-fela@5.0.0 performance-benchmarks@0.0.13 performance-benchmarks@0.0.12 performance-benchmarks@0.0.10 performance-benchmarks@0.0.9 performance-benchmarks@0.0.8 performance-benchmarks@0.0.7 performance-benchmarks@0.0.6 jest-react-fela@1.0.0 jest-preact-fela@1.0.0 jest-inferno-fela@1.0.0 jest-fela-bindings@1.0.0 inferno-fela@9.0.2 inferno-fela@8.2.0 inferno-fela@8.1.0 inferno-fela@7.0.1 inferno-fela@6.2.4 inferno-fela@6.2.3 inferno-fela@6.2.2 inferno-fela@6.2.1 inferno-fela@6.2.0 inferno-fela@6.1.1 inferno-fela@6.0.2 inferno-fela@6.0.1 inferno-fela@6.0.0 inferno-fela@5.3.0 inferno-fela@5.2.1 inferno-fela@5.2.0 inferno-fela@5.0.0 fela@6.2.2 fela@6.1.8 fela@6.1.7 fela@6.1.3 fela@6.1.2 fela@6.1.1 fela@6.1.0 fela@6.0.2 fela@6.0.1 fela@6.0.0 fela@5.2.0 fela@5.1.1 fela@5.1.0 fela@5.0.0 fela-utils@8.1.2 fela-utils@8.0.7 fela-utils@8.0.6 fela-utils@8.0.3 fela-utils@8.0.2 fela-utils@8.0.1 fela-utils@8.0.0 fela-utils@7.0.2 fela-utils@7.0.1 fela-utils@7.0.0 fela-utils@6.0.1 fela-utils@6.0.0 fela-utils@5.0.5 fela-utils@5.0.0 fela-tools@5.2.2 fela-tools@5.1.6 fela-tools@5.1.5 fela-tools@5.1.2 fela-tools@5.1.1 fela-tools@5.1.0 fela-tools@5.0.14 fela-tools@5.0.10 fela-tools@5.0.9 fela-tools@5.0.8
Nothing to show
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
src
LICENSE
README.md
package.json
yarn.lock

README.md

fela-plugin-named-keys

Note: This plugin was named fela-plugin-named-media-query before. It was renamed to semantically also match @supports rules.

npm version npm downloads Bundlephobia

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 Common License.
Created with ♥ by @rofrischmann and all the great contributors.