fela-plugin-native-media-query

This plugin is basically a convenient plugin for more readable code and better maintenance. It enables the use of named media query keys.

Installation

yarn add fela-plugin-native-media-query

You may alternatively use npm i --save fela-plugin-native-media-query.

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import namedMediaQuery from 'fela-plugin-native-media-query'

const renderer = createRenderer({
  plugins: [namedMediaQuery()],
})

Configuration

Parameters

|  Parameter | Value | Default | Description | | ------------- | ---------- | ------- | ----------------------------------------- | | mediaQueryMap | (Object) |  {} | An object with shorthand-mediaQuery pairs |

Example

import { createRenderer } from 'fela'
import namedMediaQuery from 'fela-plugin-native-media-query'

const namedMediaQueryPlugin = namedMediaQuery({
  desktop: '@media (min-width: 1024px)',
  tablet: '@media (min-width: 768px)',
})

const renderer = createRenderer({
  plugins: [namedMediaQueryPlugin],
})

Example

Using the above example code:

Input

{
  color: 'red',
  desktop: {
    color: 'blue'
  }
}

Output

{
  color: 'red',
  '@media (min-width: 1024px)': {
    color: 'blue'
  }
}

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.