It’s Time for Everyone to Learn About PostCSS

What we mean when we say “PostCSS”

With the word “PostCSS” we might alternately refer to two things:

  1. There is PostCSS, the tool itself — what you get when you run npm install postcss — and
  2. 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 with rule.eachDecl(). You can get the selector of a rule with rule.selector, or the name of an at-rule with atRule.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).

source

Leave a Reply

Your email address will not be published. Required fields are marked *