PostCSS

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.^[3] It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.^[4]

PostCSS

Developer(s)	Andrey Sitnik, Ben Briggs, Bogdan Chadkin
Initial release	November 4, 2013; 11 years ago (2013-11-04)
Stable release	8.5.3[1]  / 19 February 2025; 53 days ago (19 February 2025)
Repository	postcss
Written in	JavaScript
Operating system	Cross-platform
Available in	English
Type	CSS development tool
License	MIT License[2]
Website	postcss.org

Functionality

PostCSS workflow

PostCSS is a framework to develop CSS tools.^[5] It can be used to develop a template language such as Sass and LESS.^[6]

The PostCSS core consists of:^[7]

• CSS parser that generates an abstract syntax tree
• Set of classes that comprises the tree
• CSS generator that generates a CSS line for the object tree
• Code map generator for the CSS changes made

Features are made available through plugins. The plugins are small programs working with the object tree. After the core has transformed a CSS string into an object tree, the plugins analyze and change the tree. Then PostCSS generates a new CSS string for the plugin-changed tree.

PostCSS and its plugins are written in JavaScript and distributed through npm, which offer APIs for low-level JavaScript operations.

There are official tools making it possible to use PostCSS with build systems such as Webpack,^[8] Gulp,^[9] and Grunt.^[10] There is also a console interface available.^[11] Browserify or Webpack can be used to open PostCSS in a browser.^[12]

Syntaxes

PostCSS allows changing the parser and generator. In this case, PostCSS could be used to work with the Less^[13] and SCSS^[14] sources. However, PostCSS on its own cannot compile Sass or Less to CSS. What it does is change the original files — for instance, by sorting the CSS properties or checking the code for mistakes. PostCSS supports SugarSS.^[15]

Plugins

PostCSS plugins perform different CSS processing tasks ranging from analysis and properties sorting to minification.

The complete plugin list can be found on postcss.parts, with some examples listed below.

• Autoprefixer to add and clear browser prefixes.^[16]
• CSS Modules to get CSS selectors isolated and code organized. It is supplied as part of Webpack.^[17][18]
• stylelint to analyze CSS code for mistakes and check style consistency.^[19]
• stylefmt fixes the CSS code according to the stylelint settings.^[20]
• PreCSS to perform some Sass/Less preprocessing functions.^[21]
• postcss-preset-env to emulate features from unfinished CSS specification drafts.^[22]
• cssnano to make CSS smaller in size by getting rid of the spaces and rewriting the code.^[23]
• RTLCSS to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew).^[24]
• postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.^[25][26][27]

History

During the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012.^[28] February 28, 2013, TJ expressed it in public.^[29]

March 14, 2013, Andrey Sitnik's front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin.^[30] Initially, the plugin name was rework-vendors.^[31]

As Autoprefixer grew, Rework could no longer to meet its needs.^[32] September 7, 2013,^[33] Andrey Sitnik started to develop PostCSS based on the Rework ideas.^[34]

In 3 months, the first PostCSS plugin, grunt-pixrem was released.^[35] December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS.^[36]

For PostCSS, the primary style focus is alchemy.^[37] The project logo represents the philosopher's stone.^[38] Major and minor PostCSS versions get their names after the Ars Goetia demons.^[39] For instance, version 1.0.0 is called Marquis Decarabia.

The term postprocessor has caused some confusion.^[40] The PostCSS team used the term to show that PostCSS was not a template language (preprocessor) but a CSS tool. However, some developers think the term postprocessor would better suit browser tools (for instance, -prefix-free).^[41] The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.^[42]