Can PostCSS change the content of CSS before another plugin? - postcss

Question

Say that you have a PostCSS plugin that parse at-rules like #remove and then removes them. Here’s an example program:
const fs = require('fs');
const postcss = require('postcss');
const plugin = func => {
func.postcss = true;
return func;
};
fs.readFile('test.css', (err, css) => {
postcss([
plugin(() => ({
postcssPlugin: 'postcss-remove',
Root(root) {
console.log('---BEFORE postcss-remove---')
console.log(root.source.input.css);
root.walkAtRules('remove', atRule => {
atRule.remove();
});
console.log('---AFTER postcss-remove---')
console.log(root.source.input.css);
}
})),
plugin(() => ({
postcssPlugin: 'postcss-another',
Root(root) {
console.log('---BEFORE postcss-another---')
console.log(root.source.input.css);
console.log('---AFTER postcss-another---')
}
}))
]).process(css).then(result => {
console.log(result.css);
})
});
This is the test.css file:
#remove 'foo.js';
.foo {
color: red;
}
And this is the output:
---BEFORE postcss-remove---
#remove 'foo.js';
.foo {
color: red;
}
---AFTER postcss-remove---
#remove 'foo.js';
.foo {
color: red;
}
---BEFORE postcss-another---
#remove 'foo.js';
.foo {
color: red;
}
---AFTER postcss-another---
.foo {
color: red;
}
As you can see from the output, postcss-another still see #remove rules. Only the CSS output has #remove removed. The next plugin in the chain should not see #remove at all. I thought it was the default behavior, but it's not.
Is there a way to completely process #remove BEFORE any other plugin?

Answer 1

As the name implies, the .source.input.css property of CSS nodes contains the CSS code as originally fed to PostCSS, not the state of the stylesheet as subsequently manipulated. It exists mostly for the sake of being able to make use of offsets that point to the rules’ location in the original input:
root.walkAtRules('remove', atRule => {
const src = atRule.source;
atRule.remove();
console.info('removed this rule: ', src.input.css.substr(src.start.offset, src.end.offset));
});
The stylesheet data is passed between plugins not in the form of source code, but as a syntax tree, since that is what the plugins operate on anyway.
If you want to obtain source code that reflects the current state of the stylesheet, all you need to do is to convert the syntax node that interests you to a string:
module.exports = () => {
return {
postcssPlugin: 'postcss-another',
Root(root) {
console.log('---BEFORE postcss-another---')
console.log(root.toString());
console.log('---AFTER postcss-another---')
}
}
};
module.exports.postcss = true;