Prefix every rule with a selector.
$ npm install postcss-prefix-selectorconst prefixer = require('postcss-prefix-selector')
// css to be processed
const css = fs.readFileSync("input.css", "utf8")
const out = postcss().use(prefixer({
prefix: '.some-selector',
exclude: ['.c'],
// Optional transform callback for case-by-case overrides
transform: function (prefix, selector, prefixedSelector) {
if (selector === 'body') {
return 'body.' + prefix;
} else {
return prefixedSelector;
}
}
})).process(css).cssUsing this input.css:
body {
background: red;
}
.a, .b {
color: aqua;
}
.c {
color: coral;
}you will get:
body.some-selector {
background: red;
}
.some-selector .a, .some-selector .b {
color: aqua;
}
.c {
color: coral;
}exclude- It's possible to avoid prefixing some selectors by passing an array of selectors (strings or regular expressions).transform- In cases where you may want to use the prefix differently for different selectors, it is possible to pass in a custom transform method.