css-selector-extract
With selector extracting, it is possible to extract certain CSS selectors form (S)CSS code. This is especially useful if you want to extract only a few CSS classes from a huge library or framework.
Demos
var cssSelectorExtract = require('css-selector-extract');
// CSS source code as string.
var css = '.btn { ... } .btn-alert { ... } .btn-success { ... }';
// Array of selectors which should get extracted.
var selectorFilters = ['.btn'];
// Asynchronous:
cssSelectorExtract.process(css, selectorFilters).then((extractedCss) => {
console.log(extractedCss); // Outputs: `.btn { ... }`.
});
// Synchronous:
var extractedCss = cssSelectorExtract.processSync(css, selectorFilters);
console.log(extractedCss); // Outputs: `.btn { ... }`.
Rename extracted selectors
var cssSelectorExtract = require('css-selector-extract');
// CSS source code as string.
var css = '.btn { ... } .btn-alert { ... } .btn-success { ... }';
// Array of selector filter objects with selectors
// which should get extracted and replaced.
var selectorFilters = [{ selector: '.btn', replacement: '.button' }];
// Asynchronous:
cssSelectorExtract.process(css, selectorFilters).then((extractedCss) => {
console.log(extractedCss); // Outputs: `.button { ... }`.
});
Usage with syntaxes other than pure CSS
Install the corresponding postcss syntax plugin (e.g. postcss-scss or postcss-less).
var cssSelectorExtract = require('css-selector-extract');
var postcssScss = require('postcss-scss');
var css = '.nested { .selector { ... } }';
var selectorFilters = ['.nested', '.selector'];
// Add the postcss syntax plugin as third parameter.
cssSelectorExtract.process(css, selectorFilters, postcssScss).then((extractedCss) => {
console.log(extractedCss);
});
Development
See CONTRIBUTING.md
Testing
npm test
About
Author
Markus Oberlehner
Twitter: https://twitter.com/MaOberlehner
License
MIT