npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jss-isolate

v5.1.0

Published

True rules isolation through automatic properties reset.

Downloads

59,613

Readme

True rules isolation through automatic properties reset

Gitter

Some of the CSS properties are 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 to every user's rule.

Optionally you can also reset non-inherited properties, which would lead to even stronger isolation, as a protection against "greedy" selectors.

Make sure you read how to use plugins in general.

Usage example

const styles = {
  // 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'
  }
}

Option isolate

Option isolate can be a boolean or a string. The default value is true, but you can override it in 3 different layers. For string value see Isolation by convention.

  1. Globally for all StyleSheets:

    jss.use(isolate({
      isolate: false
    }))
    
    const styles = {
      // Isolated.
      button: {
        isolate: true,
        color: 'red'
      },
      // Not isolated.
      a: {
        color: 'green'
      }
    }
  2. For a specific StyleSheet:

    const styles = {
      // Isolated.
      root: {
        isolate: true,
        color: 'red'
      },
      // Not isolated.
      a: {
        color: 'green'
      }
    }
    
    jss.createStyleSheet(styles, {isolate: false})
  3. For a specific Rule:

const styles = {
  button: {
    isolate: false,
    color: 'red'
  }
}

Isolation by convention

You can assign any string to the isolate option. It will be used to match a rule name to isolate. All other rules will remain unisolated.

jss.use(isolate({
  // Will match rule names `root` in all StyleSheets.
  isolate: 'root'
}))

const styles = {
  // Isolated.
  root: {
    color: 'red'
  },
  // Not isolated.
  a: {
    color: 'green'
  }
}

Option reset

Default value for reset option is inherited.

If you want to reset some properties additionally to inherited once, you can pass a map of props-values. For e.g. you can set box-sizing to be border-box by default for every isolated rule without messing around with greedy selectors like this: * {box-sizing: border-box}.

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

If you want to reset all properties, not just inherited, use {reset: 'all'}.

jss.use(isolate({
  reset: 'all'
}))

If you want to reset all properties and extend the reset with your props:

jss.use(isolate({
  reset: ['all', {
    boxSizing: 'border-box'
  }]
}))

Demo

Simple

Reseted properties

Here are all inherited and all non-inherited properties we reset.

Issues

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

Run tests

npm i
npm run test

License

MIT