postcss-selector-scope

PostCSS plugin to scope styles using :not() pseudo-class

Adds the :not([your-selector]) pseudo-class to the allowed selectors of the processed CSS to prevent undesired styles having effect over certain elements.

A typical use case is to protect Web Components from styles inherited from the main document in browsers without Shadow DOM support.

Input

:root {
  --some-var: red;
}

html, 
body {
  margin: 0;
}

.some-class {
  color: red;
}

.parent .child {
  color: red;
}

Default output

:root {
  --some-var: red;
}

html:not(.style-scope),
body:not(.style-scope) {
  margin: 0;
}

.some-class:not(.style-scope) {
  color: red;
}

.parent .child:not(.style-scope) {
  color: red;
}

Installation

npm i -S postcss-selector-scope

Usage

const postcss = require('postcss');
const selectorScope = require('postcss-selector-scope');

const options = {
  not: '.custom-selector',
  exclude: ['.some-class']
};

postcss()
  .use(selectorScope(options))
  .process(cssFileContent)
  .then((result) => console.log(result.css));

Options

not

type: String
default: .style-scope

Selector used inside :not() pseudo-class.
The default value is the one used by ShadyCSS library.

exclude

type: Array
default: []

List of selectors to exclude.
Each value can be a string or a regular expression.
:root selector is excluded by default.

Contribute

If you want to contribute, please read the CONTRIBUTING.md.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See the list of contributors who participated in this project.

License

This project is licensed under the MIT License.