postcss-scopeit

0.0.6 • Public • Published

postcss-scopeit

This is a PostCSS plugin to add additional specificity to your specified CSS. The plugin accepts a scope name and uses that to add the additional specificity. The scope name is assumed to be attached to body tag.

For e.g.

body * {
  color: red;
}

button.primary {
  color: blue;
  border: 1px solid black;
}

Running through this plugin with scope name of 'test' will alter it to be:

body.test * {
  color: red;
}

.test button.primary {
  color: blue;
  border: 1px solid black;
}

This is typically helpful when components are developed by external parties for your web application. This can avoid style bleed between the component and its parent.

What does it do ?

  1. Reads through every selector and appends the scopeName you provide to it like the example above.
  2. It appends "body" selectors with the scopeName.
  3. It ignores @keyframes.

Package Sidebar

Install

npm i postcss-scopeit

Weekly Downloads

1

Version

0.0.6

License

MIT

Last publish

Collaborators

  • archana-s