PostCSS transforms CSS with JavaScript plugins

PostCSS is a JS tool that transforms styles

PostCSS is a tool for transforming styles with JS plugins. According to its README, those plugins can lint CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. The tool works by taking a CSS file and giving an API to analyze and modify its rules after turning them into an abstract syntax tree.

The README notes that PostCSS is used by industry leaders including Wikipedia, Twitter, Alibaba, and JetBrains, and that the Autoprefixer and Stylelint plugins are among the most popular CSS tools. PostCSS is built by Evil Martians, an American design and engineering consultancy focused on developer tools, AI, and cybersecurity startups.

A plugin model built on an abstract syntax tree

The core idea is that PostCSS parses CSS into an abstract syntax tree, and plugins operate on that tree through a documented API. The README says there are more than 200 plugins, all listed in the project's plugins list, and that writing a new plugin is straightforward.

Adopting PostCSS takes two steps: find and add PostCSS extensions for your build tool, then select plugins and add them to your PostCSS process. This design means the tool itself stays small while the plugins deliver the actual features.

Solving the global CSS problem

A group of plugins targets the global CSS problem, where styles leak across a whole document. postcss-modules and react-css-modules automatically isolate selectors within components, while postcss-autoreset offers an alternative to a global reset that suits isolatable components. postcss-initial adds support for all: initial to reset inherited styles, and cq-prolyfill adds container query support so styles respond to the width of the parent.

postcss-use lets authors set PostCSS plugins directly inside CSS and run them only for the current file, giving per-file control over which transformations apply.

Using future CSS and improving readability

For teams that want tomorrow's CSS today, autoprefixer adds vendor prefixes using data from Can I Use, and postcss-preset-env lets you use future CSS features now. On the readability side, postcss-nested unwraps nested rules the way Sass does, postcss-sorting sorts the content of rules and at-rules, and postcss-utilities bundles common shortcuts and helpers.

The short plugin adds and extends a number of shorthand properties. Together these plugins let authors write tighter stylesheets without leaving the PostCSS pipeline.

Images, fonts, and linting plugins

The images and fonts group covers asset handling: postcss-url rebases, inlines, or copies url() assets; postcss-sprites generates image sprites; and font-magician generates the @font-face rules a project needs. postcss-inline-svg inlines SVG and lets you customize its styles, and postcss-write-svg writes simple SVG directly in CSS.

On the web image side, webp-in-css and avif-in-css bring the WebP and AVIF formats to CSS backgrounds. For linting, stylelint is a modular stylesheet linter, stylefmt formats CSS according to stylelint rules, doiuse lints for browser support using Can I Use data, and colorguard helps keep a consistent color palette. Other plugins include cssnano for modular minification, lost for a calc() grid system, and rtlcss to mirror styles for right-to-left locales.

Syntaxes beyond plain CSS

PostCSS can transform styles in any syntax, not just CSS, and the README lists parsers and stringifiers for many of them. sugarss is an indent-based syntax like Sass or Stylus, postcss-syntax switches syntax by file extension, and postcss-html or postcss-markdown parse styles from HTML style tags or Markdown code blocks.

For CSS-in-JS, postcss-styled-syntax, postcss-jsx, and postcss-styled parse styles from template or object literals, and postcss-js works with style objects from React Inline Styles, Radium, or JSS. The SCSS, Sass, and Less integrations are explicit that they do not compile those languages to CSS, while postcss-less-engine does compile Less using true Less.js evaluation. postcss-safe-parser finds and fixes CSS syntax errors, and midas converts a CSS string to highlighted HTML.

Build tool integration and the JS API

PostCSS plugs into nearly every build tool. Parcel has built-in support and uses Autoprefixer and cssnano, Webpack uses postcss-loader, and Gulp uses gulp-postcss. A command-line path exists through postcss-cli, which processes files straight from the terminal, taking a plugin through the --use flag and writing to the file named after the -o flag.

The README also lists runners for Grunt, HTML, Stylus, Rollup, Brunch, Broccoli, Meteor, ENB, Taskr, Start, Connect or Express, and Svelte. The JS API reads a file, runs a plugin list, and writes the result plus an optional source map, and most runners accept a plugin array and an options object covering syntax, parser, stringifier, and map. To fail a build on warnings, add the postcss-fail-on-warn plugin at the end of the list.

Editors, enterprise support, and security contact

Editor and IDE support covers VS Code through the csstools.postcss and smallcase.postcssense extensions, Sublime Text through a syntax highlighting package, Vim through postcss.vim, and JetBrains IDEs such as WebStorm through a dedicated plugin. These integrations bring PostCSS awareness into the editors teams already use.

For organizations, PostCSS is part of the Tidelift Subscription, which coordinates commercial support and maintenance for open source dependencies. Security vulnerabilities are reported through the Tidelift security contact, which coordinates the fix and disclosure.

Editorial conclusion

PostCSS is a thin engine that parses CSS into an abstract syntax tree and leaves the real work to more than 200 plugins, from Autoprefixer and Stylelint to module isolation and future-syntax transpilation. It reaches beyond plain CSS through syntaxes like sugarss, SCSS, and CSS-in-JS, and it slots into Parcel, Webpack, Gulp, npm scripts, and a direct JS API. Backed by Evil Martians and used by large sites including Wikipedia and Twitter, it is a foundational layer in modern CSS tooling rather than a single feature.

Frequently asked questions

Official sources

1. License: MIT
2. postcss/postcss on GitHub
3. Project website
4. README
5. Releases