postcss-scoper

A [PostCSS] plugin to scoped css selectors.

/* source css file */

#selector { /* content */ }

.selector { /* content */ }

.selector:hover { /* content */ }

.selector__element { /* content */ }

/* when set option overwrites: ['html'] */
html { /* content */ }

/* when set option overwrites: ['body'] */
body { /* content */ }

/* when set option overwrites: [] */
html { /* content */ }

/* when set option overwrites: [] */
body { /* content */ }

/* output css file prefixed with ".scoped" */

.scoped #selector { /* content */ }

.scoped .selector { /* content */ }

.scoped .selector:hover { /* content */ }

.scoped .selector__element { /* content */ }

/* when set option overwrites: ['html'] */
.scoped { /* content */ }

/* when set option overwrites: ['body'] */
.scoped { /* content */ }

/* when set option overwrites: [] */
html { /* content */ }

/* when set option overwrites: [] */
body { /* content */ }

Usage

npm i -D postcss-scoper or yarn add -D postcss-scoper

create a postcss.config.js with:

module.exports = {
  plugins: [
    require('postcss-scoper')({
      scope: '.scoped',
      overwrites: ['html', 'body'],
    })
  ]
}

Refer to [PostCSS Usage] on how to use it with your preferred build tool.

Example

const postcss = require('postcss');
const scoper = require('postcss-scoper');

const input = fs.readFileSync('path/to/file.css',  'utf-8');

const output = postcss([
  scoper({
    scope: '.scoped',
    overwrites: ['html', 'body'],
  })
]).process(input);

Options

| Name | Description | |------------------|--------------------------------------------| |scope (string) | scoped style to be used | |overwrites (array) | replace selector in array by scope |