What we mean when we say “PostCSS”
With the word “PostCSS” we might alternately refer to two things:
- There is PostCSS, the tool itself — what you get when you run
npm install postcss
— and- The PostCSS plugin ecosystem powered by that tool.
The tool itself is a Node.js module that parses CSS into an abstract syntax tree (AST); passes that AST through any number of “plugin” functions; and then converts that AST back into a string, which you can output to a file. Each function the AST passes through may or may not transform it; sourcemaps will be generated to keep track of any changes.
The AST provides a straightforward API that developers can use to write plugins. For example, you can cycle through each rule set in a file with
css.eachRule()
, or each declaration in a rule withrule.eachDecl()
. You can get the selector of a rule withrule.selector
, or the name of an at-rule withatRule.name
. From these few examples you can see that the PostCSS API makes it pretty easy to work with CSS source code (much easier and more accurately than if you were to rely on regular expressions, like a chump).