Run certain filters on (S)CSS / LESS code.
MIT License
Extract certain nodes from CSS code.
@media
, @supports
, @mixin
,...$variable
, @variable
,...@function
@mixin
and .less-mixin-selector()
.class-selector
, #id-selector
,...$sass-variable
and @less-variable
const cssNodeExtract = require('css-node-extract');
const postcssScssSyntax = require('postcss-scss');
const options = {
// CSS source code as string.
css: '$variable: "value"; .selector { } .other-selector { }',
// Extract only variables.
filters: ['variables'],
// postcss syntax plugin to add support for SCSS code.
postcssSyntax: postcssScssSyntax
};
// Asynchronous:
cssNodeExtract.process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '$variable: "value";'.
});
// Synchronous:
const extractedCss = cssNodeExtract.processSync(options);
console.log(extractedCss); // Outputs: '$variable: "value";'.
const cssNodeExtract = require('css-node-extract');
const options = {
// CSS source code as string.
css: '@keyframes { } .selector { } .other-selector { }',
filters: ['my-keyframe-filter'],
customFilters: {
myKeyframeFilter: [
[
{ property: 'type', value: 'atrule' },
{ property: 'name', value: 'keyframes' }
]
]
}
};
cssNodeExtract.process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '@keyframes { }'.
});
Usually css-node-extract
removes all nodes which do not match the given filters. However under some circumstances it might be useful to preserve the original line numbers (e.g. to keep source map references intact).
const cssNodeExtract = require('css-node-extract');
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filters: ['variables'],
postcssSyntax: postcssScssSyntax,
preserveLines: true
};
cssNodeExtract.process(options).then((extractedCss) => {
// Outputs the extracted nodes with empty lines where
// other nodes got removed to preserve line numbers.
console.log(extractedCss);
});
import { process, processSync } from 'css-node-extract';
import postcssScssSyntax from 'postcss-scss';
const options = {
// CSS source code as string.
css: '$variable: "value"; .selector { } .other-selector { }',
// Extract only variables.
filters: ['variables'],
// postcss syntax plugin to add support for SCSS code.
postcssSyntax: postcssScssSyntax
};
// Asynchronous:
process(options).then((extractedCss) => {
console.log(extractedCss); // Outputs: '$variable: "value";'.
});
// Synchronous:
processSync(options);
console.log(extractedCss); // Outputs: '$variable: "value";'.
With version 2.0.0 the handling of custom filters was changed. The customFilter
option was renamed to customFilters
and this option now takes an object instead of an array. Instead of defining one custom filter named custom
, you can now define unlimited custom filters with custom names.
With version 1.0.0 the filterNames
option was renamed to filters
.
// New
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filters: ['variables'],
postcssSyntax: postcssScssSyntax
};
// Old
const options = {
css: '$variable: "value"; .selector { } .other-selector { }',
filterNames: ['variables'],
postcssSyntax: postcssScssSyntax
};
See CONTRIBUTING.md
npm test
Markus Oberlehner Website: https://markus.oberlehner.net Twitter: https://twitter.com/MaOberlehner PayPal.me: https://paypal.me/maoberlehner Patreon: https://www.patreon.com/maoberlehner
MIT