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.
Any rule or at-rule.
A select at-rule, where custom
is the name of an at-rule.
Any declaration.
A select declaration, where custom
is the property name of a declaration.
Any selector in a selector list.
Any value in a declaration value.
Any number in a declaration value.
A select number in a declaration value, where custom
is the unit of the
number.