Deprecated!
The dynamic prefixer plugin (fela-plugin-dynamic-prefixer) is deprecated, please remove it from your Fela configuration.
inline-style-prefixer will remove its dynamic version due to increasing issues with newer browers, browser detection and false prefixing.
Use the static prefixer plugin (fela-plugin-prefixer) instead. See https://github.com/rofrischmann/fela/tree/master/packages/fela-plugin-prefixer`)

fela-plugin-dynamic-prefixer

Uses inline-style-prefixer to add vendor prefixes by evaluating the userAgent.

Requires to use fela-plugin-fallback-value afterwards in order to resolve alternative prefix values which get returned as an array by default.

Installation

yarn add fela-plugin-dynamic-prefixer

You may alternatively use npm i --save fela-plugin-dynamic-prefixer.

Usage

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

import { createRenderer } from 'fela'
import dynamicPrefixer from 'fela-plugin-dynamic-prefixer'
 
const renderer = createRenderer({
  plugins: [ dynamicPrefixer() ]
})

Configuration

It can be configured using the same options as inline-style-prefixer's Prefixer.

import { createRenderer } from 'fela'
import dynamicPrefixer from 'fela-plugin-dynamic-prefixer'
 
const dynamicPrefixerPlugin = dynamicPrefixer({
  userAgent: navigator.userAgent,
  keepUnprefixed: true
})
 
const renderer = createRenderer({
  plugins: [ dynamicPrefixerPlugin ]
})

Example

Assuming we are using e.g. Chrome 25.

Input

{
  transition: '200ms all linear',
  userSelect: 'none',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
}

Output

{
  transition: '200ms all linear',
  WebkitUserSelect: 'none',
  boxSizing: 'border-box',
  display: '-webkit-flex',
  color: 'blue'
}

License

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