css-node-extract

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

var cssNodeExtract = require('css-node-extract');
var postcssScssSyntax = require('postcss-scss');

var 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:
var extractedCss = cssNodeExtract.processSync(options);
console.log(extractedCss); // Outputs: '$variable: "value";'.

Custom filter

var cssNodeExtract = require('css-node-extract');

var 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 { }'.
});

ES2015 named exports

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";'.

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.

// New
var options = {
  css: '$variable: "value"; .selector { } .other-selector { }',
  filters: ['variables'],
  postcssSyntax: postcssScssSyntax
};

// Old
var options = {
  css: '$variable: "value"; .selector { } .other-selector { }',
  filterNames: ['variables'],
  postcssSyntax: postcssScssSyntax
};

Development

See CONTRIBUTING.md

Testing

npm test

About

Author

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

License

MIT