csstools / super-postcss

Now you’re playing with PostCSS — Super PostCSS!

Super PostCSS

Now you’re playing with PostCSS — Super PostCSS!

npm install super-postcss

Super PostCSS is an experimental CSS parser that combines PostCSS, PostCSS Values Parser, and PostCSS Selector Parser and introduces a new way to write plugins that run simultaniously.

const superPostCSS = require('super-postcss');

superPostCSS({
  CustomSpacingDeclaration(node, result) {
    node.prop = 'margin';
    return result.refresh(node);
  },
  pxNumber(node, result) {
    if (node.value === '0') {
      node.unit = '';

      return result.refresh(node);
    }
  }
}).use({
  declaration(node, result) {
    if (node.prop === 'spacing') {
      node.prop = '-custom-spacing';
      return result.refresh(node);
    }
  }
}).process('body { spacing: 0px; }', { from: '<stdin>' }).then(
  ({ css }) => console.log(css) // body { margin: 0; }
);

Super PostCSS lets you add listener-style functions that respond to specific nodes in the CSS Tree.

rule

Any rule or at-rule.

customRule

A select at-rule, where custom is the name of an at-rule.

declaration

Any declaration.

customDeclaration

A select declaration, where custom is the property name of a declaration.

selector

Any selector in a selector list.

value

Any value in a declaration value.

number

Any number in a declaration value.

customNumber

A select number in a declaration value, where custom is the unit of the number.