postcss-simple-scope

postcss-simple-scope

Input

body {
  background: red;
}

.header {
  background: black;
}

Output

body {
  background: red;
}

#scope .header {
  background: black;
}

Usage

npm i -D postcss-simple-scope

// .postcssrs.cjs
module.exports = {
  plugins: [
    require('postcss-simple-scope')({
      scope: '#scope', // required
      atRules: {
        exclude: ['keyframes', '-webkit-keyframes', '-moz-keyframes'], // default
      }, // optional
      selectors: {
        exclude: [':root', '*', 'html', 'body'], // default
      }, // optional
    }),
  ],
};