css-node-extract

Extract certain nodes from CSS code.

Filters

• at-rules: @media, @supports, @mixin,...
• declarations: $variable, @variable,...
• functions: @function
• mixins: @mixin and .less-mixin-selector()
• rules: .class-selector, #id-selector,...
• silent: Extract only nodes that do not compile to CSS code (mixins, placeholder selectors, variables,...)
• variables: $sass-variable and @less-variable
• make-your-own: Define custom filters

Demos

1const cssNodeExtract = require('css-node-extract');
2const postcssScssSyntax = require('postcss-scss');
3
4const options = {
5  // CSS source code as string.
6  css: '$variable: "value"; .selector { } .other-selector { }',
7  // Extract only variables.
8  filters: ['variables'],
9  // postcss syntax plugin to add support for SCSS code.
10  postcssSyntax: postcssScssSyntax
11};
12
13// Asynchronous:
14cssNodeExtract.process(options).then((extractedCss) => {
15  console.log(extractedCss); // Outputs: '$variable: "value";'.
16});
17
18// Synchronous:
19const extractedCss = cssNodeExtract.processSync(options);
20console.log(extractedCss); // Outputs: '$variable: "value";'.

Custom filter

1const cssNodeExtract = require('css-node-extract');
2
3const options = {
4  // CSS source code as string.
5  css: '@keyframes { } .selector { } .other-selector { }',
6  filters: ['my-keyframe-filter'],
7  customFilters: {
8    myKeyframeFilter: [
9      [
10        { property: 'type', value: 'atrule' },
11        { property: 'name', value: 'keyframes' }
12      ]
13    ]
14  }
15};
16
17cssNodeExtract.process(options).then((extractedCss) => {
18  console.log(extractedCss); // Outputs: '@keyframes { }'.
19});

Preserve lines

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

1const cssNodeExtract = require('css-node-extract');
2
3const options = {
4  css: '$variable: "value"; .selector { } .other-selector { }',
5  filters: ['variables'],
6  postcssSyntax: postcssScssSyntax,
7  preserveLines: true
8};
9
10cssNodeExtract.process(options).then((extractedCss) => {
11  // Outputs the extracted nodes with empty lines where
12  // other nodes got removed to preserve line numbers.
13  console.log(extractedCss);
14});

ES2015 named exports

1import { process, processSync } from 'css-node-extract';
2import postcssScssSyntax from 'postcss-scss';
3
4const options = {
5  // CSS source code as string.
6  css: '$variable: "value"; .selector { } .other-selector { }',
7  // Extract only variables.
8  filters: ['variables'],
9  // postcss syntax plugin to add support for SCSS code.
10  postcssSyntax: postcssScssSyntax
11};
12
13// Asynchronous:
14process(options).then((extractedCss) => {
15  console.log(extractedCss); // Outputs: '$variable: "value";'.
16});
17
18// Synchronous:
19processSync(options);
20console.log(extractedCss); // Outputs: '$variable: "value";'.

Upgrade from 1.x.x to 2.x.x

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.

Upgrade from 0.x.x to 1.x.x

With version 1.0.0 the filterNames option was renamed to filters.

1// New
2const options = {
3  css: '$variable: "value"; .selector { } .other-selector { }',
4  filters: ['variables'],
5  postcssSyntax: postcssScssSyntax
6};
7
8// Old
9const options = {
10  css: '$variable: "value"; .selector { } .other-selector { }',
11  filterNames: ['variables'],
12  postcssSyntax: postcssScssSyntax
13};

Development

See CONTRIBUTING.md

Testing

1npm test

About

Author

Markus Oberlehner
Website: https://markus.oberlehner.net
Twitter: https://twitter.com/MaOberlehner
PayPal.me: https://paypal.me/maoberlehner
Patreon: https://www.patreon.com/maoberlehner

License

MIT