From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
Philosopher’s stone, PostCSS logo
Developer(s)Andrey Sitnik, Ben Briggs, Bogdan Chadkin[1]
Initial releaseNovember 4, 2013; 6 years ago (2013-11-04)
Stable release
7.0.14, President Amy / January 22, 2019; 11 months ago (2019-01-22)[2]
Written inJavaScript
Operating systemCross-platform
Available inEnglish
TypeCSS development tool
LicenseMIT License[3]

PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations.[4] The tool has been used to develop the code of Wikipedia,[5][6] Facebook,[7], WordPress[8][9][10] and GitHub[11][12]. PostCSS is a top-favored CSS tool among npm users.[13] It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.[14]

How it works[edit]


PostCSS workflow

Unlike Sass and Less, PostCSS is not a CSS-compiled template language but a framework to develop CSS tools.[15] However, it can be used to develop a template language such as Sass and LESS.[16]

The PostCSS core consists of:[17]

  • CSS parser that generates an object tree (AST) for a line of CSS-code;
  • Set of classes that comprise the tree;
  • CSS generator that generates a CSS line for the object tree;
  • Code map generator for the CSS changes made.

All the useful 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, by turn, analyze and change the tree. Then the PostCSS core generates a new CSS string for the plugin-changed tree.


Both the PostCSS core and the plugins are written in JavaScript and distributed through npm.

PostCSS offers API for low-level JavaScript operations:

// Load the core and plugins from npm
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Indicate the plugins to use 
const processor = postcss([autoprefixer, precss])

// Indicate the CSS code and the names of the input/output file 
processor.process('a {}', { from: './app.css', to: './' })
  // Use Promise API in case there are asynchronous plugins
  .then(result => {
    // Get the post-processed CSS code displayed
    // Get the warning messages displayed
    for ( let message of result.warnings() ) {

There are official tools making it possible to use PostCSS with build systems such as Webpack,[18] Gulp,[19] and Grunt.[20] There is also a console interface available for download.[21] Browserify or Webpack can be used to open PostCSS in a browser.[22]


PostCSS allows changing the parser and generator. In this case, PostCSS could be used to work with the Less[23] and SCSS[24] 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.

Besides, PostCSS supports SugarSS, a syntax not unlike Sass and Stylus in its simplicity and succinctness.[25]


The number of PostCSS plugins amounts to more than 300.[26] PostCSS plugins can solve most CSS processing tasks ranging from analysis and properties sorting to minification. However, the plugins significantly vary in quality and popularity.

The complete plugin list can be found on Below are a few examples, with the what-fors explained:

  • Autoprefixer[27] to add and clear browser prefixes. It is the most popular PostCSS plugin. According to the SitePoint polling, 56% of respondents used Autoprefixer in March 2016.[28]
  • CSS Modules[29] to get CSS selectors isolated and code organized. It is supplied as part of the popular bundler Webpack.[30]
  • stylelint[31] to analyze CSS code for mistakes and check style consistency. It is used by Wikipedia,[6] Facebook[7] and GitHub.[12] Another plugin, stylefmt[32] fixes the CSS code according to the stylelint settings.
  • PreCSS[33] to perform some Sass/Less preprocessing functions.
  • postcss-preset-env[34] to emulate features from unfinished CSS specification drafts.
  • cssnano[35] to make CSS smaller in size by getting rid of the spaces and rewriting the code succinctly. Used by Webpack, BBC, and JSFiddle.[36]
  • RTLCSS[37] to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew). It is used by WordPress.[38]
  • postcss-assets,[39] postcss-inline-svg[40] and postcss-sprites[41] to work with graphics.

There are a number of tools expanding their functionality by PostCSS. For example, it is PostCSS that the popular bundler Webpack uses to work with CSS.[42]


Despite certain plugins having faced criticism,[43] some PostCSS plugins have become de facto standard. For instance, Google recommends using Autoprefixer to solve the problem of browser prefixes in CSS.[44]

The industry opinion of PostCSS is highly positive,[45] it going as far as Sass developers considering PostCSS a good addition to Sass.[46]

The biggest question is whether PostCSS plugins should be the only option to use when making a CSS build system. On the one hand, PreCSS or cssnext can perform many Sass and Less functions,[47] with SugarSS possibly being a good replacement for the minimalistic syntax of Sass and Stylus.[48] On the other hand, some experts, including the PostCSS creator himself, recommend sticking to Sass and Less for legacy projects.[49]


  • Features. Many PostCSS plugins one of a kind,[50] PostCSS is often used as an addition to Sass and Less.[51]
  • Unification. PostCSS plugins cover most CSS building tasks from checking the code for mistakes to minification. As a result, all CSS tools can share the same parser, architecture, and development tools. PostCSS allows for better performance by making all the plugins use the same object tree — in contrast to the common practice of each tool creating one of its own.[15]
  • Modules. The user is free in their choice of PostCSS plugins and can switch off the unnecessary ones for faster performance.[52] With different plugins solving the same problems, the user can choose whatever best fits their needs.[53] The PostCSS creator believes that the higher number of plugins compete for the user's attention, the better they will eventually become.[17]
  • Speed. PostCSS is equipped with one of the fastest JS-based CSS parsers.[54] It is up to twenty times faster than Ruby Sass and four times faster than Less in doing basic preprocessing.[55] However, real efficiency highly depends on the number of the plugins installed. In fact, the PostCSS creators themselves have confirmed that modern preprocessors work too fast for a speed up to be noticeable.[56]


  • Difficult to configure. Some developers tend to avoid the burden of choosing plugins and tuning them up to work together.[57] Ready-made plugin sets are only a partial solution to the problem.
  • Non-standard syntax. With each project using its own plugin set, a new developer might not understand that the function unknown is related to the unpopular PostCSS plugin.[46] It is recommended to indicate file plugins with postcss-use,[49] but some people find it unnecessary.[58]
  • Selectors and values using separate parsers. PostCSS saves CSS selectors and property values as lines without further parsing them. To parse them, plugins have to use extra parsers. The PostCSS team is going to fix this in future versions.[59]
  • Sequential processing. With the object tree being able to respond to only one plugin at a time, having a number of plugins might result in lower performance. Besides, there are functions no plugin can process. The PostCSS team is going to fix this in future versions.[60]


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

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

As Autoprefixer grew, Rework could no longer to meet its needs.[65] September 7, 2013,[66] Andrey Sitnik started to develop PostCSS based on the Rework ideas.[67]

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

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

The term postprocessor has caused some confusion.[73] 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[43] (for instance, -prefix-free). The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.[74]


  1. ^ Who can release PostCSS to npm
  2. ^ PostCSS Releases
  3. ^ License in PostCSS repo
  4. ^ First article about PostCSS in Tuts+ course
  5. ^ Adding PostCSS commit in Wikipedia repo
  6. ^ a b Wikimedia Stylelint Config
  7. ^ a b Improving CSS quality at Facebook and beyond
  8. ^ WordPress webpack PostCSS usage
  9. ^ WordPress Stylelint Config
  10. ^ PostCSS Themes plugin
  11. ^ PostCSS settings GitHub build tool
  12. ^ a b Primer Stylelint Config
  13. ^ CSS preprocessors downloads from npm
  14. ^ Evil Martians commit in PostCSS repo
  15. ^ a b What is PostCSS discussion
  16. ^ PostCSS Deep Dive: Preprocessing with “PreCSS”
  17. ^ a b Andrey Sitnik - PostCSS: The Future After Sass and LESS
  18. ^ postcss-loader
  19. ^ gulp-postcss
  20. ^ grunt-postcss
  21. ^ postcss-cli
  22. ^ Running postcss in the browser
  23. ^ postcss-less
  24. ^ postcss-scss
  25. ^ sugarss
  26. ^ PostCSS plugins list
  27. ^ autoprefixer
  28. ^ The Results of The Ultimate CSS Survey
  29. ^ css-modules
  30. ^ css-loader dependencies
  31. ^ stylelint
  32. ^ stylefmt
  33. ^ precss
  34. ^
  35. ^
  36. ^ cssnano users list
  37. ^
  38. ^ RTL CSS generation: Switch from CSSJanus to RTLCSS
  39. ^ postcss-assets
  40. ^ postcss-inline-svg
  41. ^ postcss-sprites
  42. ^ css-loader sources
  43. ^ a b The Trouble With Preprocessing Based on Future Specs
  44. ^ Set Up Your Build Tools
  45. ^ An Introduction To PostCSS
  46. ^ a b Extending Sass with PostCSS
  47. ^ Breaking up with Sass: it’s not you, it’s me
  48. ^ SugarSS discussion on Meteor forum
  49. ^ a b dotCSS 2015 - Andrey Sitnik - Fix Global CSS with PostCSS
  50. ^ PostCSS Mythbusting: Four PostCSS Myths Busted
  51. ^ Using PostCSS Together with Sass, Stylus, or LESS
  52. ^ PostCSS performance discussion in Twitter
  53. ^ PostCSS – Sass Killer or Preprocessing Pretender?
  54. ^ PostCSS parsers benchmark
  55. ^ PostCSS preprocessors benchmark
  56. ^ PostCSS becomes 1.5x faster
  57. ^ The Sad State of Web Development
  58. ^ postcss-use downloads
  59. ^ Integrate value & selector parsing into PostCSS core
  60. ^ Event based API
  61. ^ Holowaychuk, TJ (2012-09-01). "Initial commit · reworkcss/rework@0a7be25". GitHub. Retrieved 2019-07-21.
  62. ^ Holowaychuk, TJ (2013-02-28). "Modular CSS preprocessing with rework - TJ Holowaychuk". Tumblr. Retrieved 2014-09-18.
  63. ^ Sitnik, Andrey (2013-03-14). "Initial commit · postcss/autoprefixer@d36346e". GitHub. Retrieved 2019-07-21.
  64. ^ Sitnik, Andrey (2013-03-28). "Rename project to autoprefixer · postcss/autoprefixer@419a77d". GitHub. Retrieved 2019-07-21.
  65. ^ Gallagher, Nicolas (2014-06-04). "Facilitate autoprefixer needs · Issue #20 · reworkcss/css". GitHub. Retrieved 2019-07-21.
  66. ^ Sitnik, Andrey (2013-09-07). "Init project · postcss/postcss@2d96cea". GitHub. Retrieved 2019-07-21.
  67. ^ Sitnik, Andrey (2015-09-07). "PostCSS Second Birthday — Martian Chronicles, Evil Martians' team blog". Martian Chronicles, Evil Martians’ team blog. Retrieved 2019-07-21.
  68. ^ Rob, Wierzbowski (2013-12-14). "Initial commit · robwierzbowski/grunt-pixrem@0f7b662". GitHub. Retrieved 2019-07-21.
  69. ^ [Sitnik, Andrey (2013-12-21). "Release 1.0 "Plus ultra" · postcss/autoprefixer". GitHub. Retrieved 2019-07-20.
  70. ^ Tisäter, Marcus (2015-12-31). "Mockup · Issue #4 · postcss/". Retrieved 2019-07-21.
  71. ^ @PostCSS (2015-08-14). "PostCSS logo is a alchemy sign of philosopher's stone, which can transform metals to gold" (Tweet) – via Twitter.
  72. ^ @Autoprefixer (2013-12-17). "Every PostCSS version code name is taken from demons list in alchemy book "Lemegeton Clavicula Salomonis"" (Tweet) – via Twitter.
  73. ^ Marohnić, Matija (2014-09-07). "CSS pre- vs. post-processing | Silvenon's Blog". Silvenon's Blog. Retrieved 2017-11-09.
  74. ^ @PostCSS (2015-07-28). "It is time admit my mistakes. "Postprocessor" term was bad. PostCSS team stoped to use it" (Tweet) – via Twitter.

External links[edit]