Skip to content
PostCSS plugin to prefix all classes and ids
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib fix attribute selectors with trailing whitespace (#9), Oct 9, 2019
test
.editorconfig update editorconfig settings Jun 6, 2017
.eslintrc.js change eslint config Apr 7, 2018
.gitattributes add git attributes Jun 6, 2017
.gitignore update gitignore Apr 8, 2018
.travis.yml add node 10 to travis builds Jan 10, 2019
LICENSE Initial commit Aug 21, 2016
README.md add license badge Apr 8, 2018
package-lock.json Merge branch 'master' into dev Oct 9, 2019
package.json 2.1.2 Oct 9, 2019

README.md

postcss-prefixer

Build Status dependencies Status devDependencies Status License: MIT

PostCSS plugin to add a prefix to all css selectors classes and ids.

Usage

With PostCSS cli:

Install postcss-cli and postcss-prefixer on your project directory:

npm install postcss-cli postcss-prefixer --save-dev

and at your package.json

"scripts": {
    "postcss": "postcss input.css -u postcss-prefixer -o output.css"
}

Others

postcss([ require('postcss-prefixer')({ /* options */ }) ])

Options

prefix

Type: string
Default: none

String to be used as prefix

ignore

Type: array
Default: []

Array of selectors to be ignored by the plugin, accepts string and regex.

Example

Example of usage with results generated by the plugin.

Code

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

Input:

#selector-one .example {
  /* content */
}

.selector-two .example2 {
  /* content */
}

#ignore .ignore {
  /* content */
}

#ignore .other {
  /* content */
}

Output:

#selector-one .prefix-example {
  /* content */
}

.selector-two .prefix-example2 {
  /* content */
}

#ignore .ignore {
  /* content */
}

#ignore .prefix-other {
  /* content */
}

Credits

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

You can’t perform that action at this time.