fela-plugin-isolation

Fela plugin that adds style isolation

Usage no npm install needed!

<script type="module">
  import felaPluginIsolation from 'https://cdn.skypack.dev/fela-plugin-isolation';
</script>

README

fela-plugin-isolation

npm version npm downloads Bundlephobia

Adds style isolation to every rule by attaching all: initial to every class.

If you just have classname collisions, please take a look at the advanced Renderer configuration first.

Installation

yarn add fela-plugin-isolation

You may alternatively use npm i --save fela-plugin-isolation.

Usage

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

import { createRenderer } from 'fela'
import isolation from 'fela-plugin-isolation'

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

Configuration

Parameters
 Parameter Value Default Description
exclude (Array) [] CSS properties that will not be isolated
Example
import { createRenderer } from 'fela'
import isolation from 'fela-plugin-isolation'

const isolationPlugin = isolation({
  exclude: ['boxSizing', 'display'],
})

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

Example

Using the above example code:

Input

{
  fontSize: 15,
  color: 'red'
}

Output

{
  all: 'initial',
  boxSizing: 'inherit',
  display: 'inherit',
  fontSize: 15,
  color: 'red'
}

Disable isolation

To disable style isolation for single rules, simply add the isolation: false property to that rule.

Example
const rule = (props) => ({
  isolation: false,
  fontSize: 15,
  color: 'red',
})

License

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