jss-isolate

True rules isolation through automatic inheritable properties reset

There is a category of css properties named 'inheritable'. It means that these properties apply to the child nodes from parent nodes. See this article for more details.

Due to this reason styles in reusable UI components can be broken if all inheritable properties were not defined explicitly for each element. It can cost You extra efforts to build strong isolation in a component.

This plugin protects styles from inheritance. It automatically creates a reset rule and applies it to every user's rule.

Make sure you read how to use plugins in general.

Demo - JSS


Usage example

import jss from 'jss'
import preset from 'jss-preset-default'
import isolate from 'jss-isolate'

jss.setup(preset()).use(isolate())

const sheet = jss.createStyleSheet({
  // All atRules will be ignored in reset.
  '@font-face': {
    fontFamily: 'MyHelvetica',
    src: 'local("Helvetica")',
  },
  title: {
    fontSize: 20,
    background: '#f00',
  },
  link: {
    fontSize: 12,
  },
  article: {
    isolate: false, // This rule will be ignored in reset.
    margin: '20px 10px 30px'
  }
})

Disable isolation locally.

There are 2 ways to avoid isolation if you want to.

1. For a rule

export default {
  button: {
    isolate: false
  }
}

1. For a style sheet

jss.createStyleSheet(styles, {isolate: false})

Additional reset.

If you want to pass additional properties that need to be resetted.

jss.use(isolate({
  reset: {
    boxSizing: 'border-box'
  }
}))

Inheritable properties.

A full list of currently resetted properties is here.

Issues

File a bug against cssinjs/jss prefixed with [jss-isolate].

Run tests

npm i
npm run test

License

MIT