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
• custom: Define a custom filter

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: ['custom'],
  customFilter: [
    [
      { 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 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