PostCSS: The 'Babel for CSS' Transformer

WHY IT EXISTS: CSS development involves repetitive tasks, like adding vendor prefixes for cross-browser compatibility, and a time lag between new CSS features being specified and browsers supporting them. PostCSS was created to automate these tasks and bridge that gap using a simple, plugin-based system.

THE MENTAL MODEL: PostCSS is best understood as a "Babel for CSS." It's not a new styling language like Sass or Less. Instead, it's a tool that takes your existing CSS, parses it into a structure that can be manipulated, and then uses JavaScript plugins to perform transformations on it before outputting a new CSS file.

HOW IT WORKS: The core of PostCSS is a parser that turns CSS code into an Abstract Syntax Tree (AST). You configure PostCSS in your build process (e.g., Vite, Webpack) and select the plugins you need. When your build runs, PostCSS feeds the AST to your chosen plugins in sequence. Each plugin can read or change the tree. Finally, PostCSS converts the modified AST back into a string of CSS.

WHEN TO USE IT: Use PostCSS to automate routine CSS operations. Common uses include: first, automatically adding vendor prefixes with the Autoprefixer plugin; second, using future CSS features today with postcss-preset-env; third, linting and formatting your code with Stylelint; and fourth, minifying CSS for production with cssnano.

WHEN NOT TO USE IT: If your project has no build step, PostCSS is overkill. If you want a complete language with built-in variables, functions, and mixins without configuring plugins, a dedicated preprocessor like Sass might be a simpler starting point. PostCSS can replicate that functionality with plugins, but it's not its out-of-the-box purpose.

ONE CANONICAL EXAMPLE: The most famous use case is Autoprefixer. You write a modern CSS rule like user-select: none;. You don't have to worry about browser support. After running PostCSS with Autoprefixer, your final stylesheet will automatically include the necessary versions for compatibility, like -webkit-user-select: none; and -moz-user-select: none;, based on your configured browser targets.