What Is PostCSS? Transforming CSS With Plugins
PostCSS is a tool that parses CSS into a structure and runs plugins over it, enabling transforms like autoprefixing, minification, and modern-syntax support.
Unlike a preprocessor with its own language, PostCSS works on plain CSS. It parses your stylesheet, hands it to a chain of plugins, and writes the transformed CSS back out. Because everything is a plugin, you assemble exactly the transforms you need. It is a near-universal part of modern CSS pipelines and runs as a build step in CI.
How PostCSS works
PostCSS parses CSS into a node tree, runs each configured plugin to modify that tree, then stringifies it back to CSS. The pipeline of plugins is what gives PostCSS its flexibility.
Common plugins
- Autoprefixer adds vendor prefixes based on browser targets.
- cssnano minifies the output.
- postcss-preset-env lets you use future CSS today.
- Tailwind runs as a PostCSS plugin in many setups.
Autoprefixing and browser targets
Autoprefixer reads your browser support list to decide which prefixes to add. Change the target list and the emitted prefixes change, which ties CSS output to the same configuration that drives JS polyfills.
Where it sits in the build
PostCSS usually runs after a preprocessor (if any) and as part of bundling, so the final CSS is prefixed, modernized, and minified before it ships. Bundlers integrate it so it runs automatically.
PostCSS in CI/CD
Because Autoprefixer depends on browser data, pinning the browser target and the browser data version in the repo keeps CI output reproducible across runs. The transformed, hashed CSS is part of the deployable artifact, and caching avoids reprocessing unchanged stylesheets.
Key takeaways
- PostCSS transforms plain CSS through a chain of JavaScript plugins.
- Autoprefixer and minification plugins are the most common uses.
- Pinning browser targets keeps PostCSS output reproducible in CI.