PostCSS: Transform CSS with JavaScript

PostCSS changes the approach to CSS processing — instead of a monolithic preprocessor it offers a modular plugin system. Autoprefixer, cssnext, and the future of CSS tooling.

The End of Monolithic Preprocessors?¶

Sass and Less dominate CSS preprocessing, but they introduce their own syntax that drifts further and further from CSS. PostCSS offers an alternative — it parses CSS into an AST, applies JavaScript plugins, and generates the output.

The key difference: PostCSS does not add a new language. Plugins transform standard CSS (or future CSS syntax) and each team picks only the transformations it needs.

Autoprefixer and cssnext¶

The most popular PostCSS plugin is Autoprefixer — it automatically adds vendor prefixes based on Can I Use data:

/* Input */
.box {
  display: flex;
  user-select: none;
}

/* Output (Autoprefixer) */
.box {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

cssnext lets you use future CSS features (CSS Variables, nesting) today — the equivalent of Babel for CSS.

Plugin Ecosystem¶

The PostCSS ecosystem offers hundreds of plugins:

• postcss-import — inlines @import for bundling
• postcss-modules — CSS Modules for local scoping
• cssnano — minification and optimization
• stylelint — CSS linting
• postcss-custom-properties — CSS Variables fallback

By combining plugins you build exactly the pipeline your project needs.

Integration and Migration from Sass¶

PostCSS integrates with Webpack (postcss-loader), Gulp, Grunt, and as a standalone CLI. Migration from Sass is gradual — PostCSS and Sass can coexist in the same build.

Recommended approach:

• Start with Autoprefixer (you are probably already using it)
• Add cssnext for modern CSS features
• Gradually replace Sass features with PostCSS plugins
• Consider CSS Modules for a component-based approach

Conclusion: The Modular Future of CSS¶

PostCSS represents a shift from monolithic tools to a modular, plugin-based ecosystem. You do not have to abandon Sass — but Autoprefixer should be in every project, and cssnext points in the direction CSS tooling is heading.