postcss-prefixer

postcss-prefixer

A PostCSS plugin to prefix css selectors.

/* source css file */

#selector { /* content */ }

.selector { /* content */ }

.selector:hover { /* content */ }

.selector__element { /* content */ }

/* output css file prefixed with "prfx__" */

#prfx__selector { /* content */ }

.prfx__selector { /* content */ }

.prfx__selector:hover { /* content */ }

.prfx__selector__element { /* content */ }

Usage

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

create a postcss.config.js with:

module.exports = {
  plugins: [
    require('postcss-prefixer')({ /* options */ })
  ]
}

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

Example

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

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

const output = postcss([
  prefixer({
        prefix: 'prefix-',
        ignore: [ /selector-/, '.ignore', '#ignore' ]
    })
]).process(input);

Options

Name	Description
prefix (string)	prefix value to be used
ignore (array)	list of selectors to ignore, accepts regex

Credits

Plugin based on postcss-class-prefix create by thompsongl.