VetoCSS

Remove style blocks matching a specific selector from a stylesheet.

Installation

Run the following command:

npm install vetocss

And require it in your script like so:

const vetoCss = require('vetocss');

Usage

With a stylesheet text content and an array of selectors (string or RegExp), you can remove blocklisted CSS:

vetoCss(stylesheet, [
    'p.warning',
    /\.opacity-(25|50)+/
]);

This would turn this stylesheet:

body { color: navy; }
.warning { color: red; }
p.warning { padding: 1em; }
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.50; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

… into the following:

body { color: navy; }
.warning { color: red; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.50; }
.opacity-100 { opacity: 1; }

Caveats

Media queries and other at-rules

This current implementation does not distinguish between inside or outside a media query or other @-rules.

Working on minified stylesheets

If used in a build process, keep in mind that minification tools will likely modify some more complex selectors, for example:

• spaces are removed for combinators (except for the general descendant combinator — a space): .parent > .child a turns into .parent>.child a
• attribute selectors can get unquoted: [href="#"] turns into [href=#]

If you want to remove a style block for a complex selector, you can either strategically run vetoCss at a predictable point of your build (say after minification) to consistently target a minified selector via a string, or you can provide a regular expression targetting both states, if you are uncertain of the state of the stylesheet when VetoCSS is running. Additionally, you can provide both, that works, too.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT