postcss-container

PostCSS plugin that adds a user input scope to each selector, based on postcss-scopify

Usage no npm install needed!

<script type="module">
  import postcssContainer from 'https://cdn.skypack.dev/postcss-container';
</script>

README

PostCSS Container

Build status Test coverage Downloads

PostCSS plugin that adds a user input scope to each selector. for a command line interface.

Example input

.foo, .boo h1 {
    /* declarations */
}

& {
    /* declarations */
}

Example output scopify('#scope')

#scope .foo, #scope .boo h1 {
    /* declarations */
}

#scope {
    /* declarations */
}

Installation

npm install postcss-cotaniner

Usage

var fs                 = require('fs');
var postcss            = require('postcss');
var postcssContainer   = require('postcss-container');

var css = fs.readFileSync('css/my-file.css', 'utf8').toString();
var out = postcss()
          .use(postcssContainer('#scope'))
          .process(css)
          .css;

You can use PostCSS with your build tool. Note there are plugins for Grunt, Gulp, webpackBroccoli, Brunch and ENB. See PostCSS docs for examples for your environment.