Postcss-selector-scope NPM

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));