PostCSS explained

PostCSS
Logo Alt:Philosopher’s stone, PostCSS logo
Developer:Andrey Sitnik, Ben Briggs, Bogdan Chadkin
Programming Language:JavaScript
Operating System:Cross-platform
Language:English
Genre:CSS development tool
License:MIT License[1]

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

Functionality

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

The PostCSS core consists of:[6]

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,[7] Gulp,[8] and Grunt.[9] There is also a console interface available.[10] Browserify or Webpack can be used to open PostCSS in a browser.[11]

Syntaxes

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

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.

History

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

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

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

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

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

The term postprocessor has caused some confusion.[39] 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).[40] The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.[41]

Notes and References

  1. Web site: postcss/LICENSE at main · postcss/postcss. 2013-09-24. 2021-03-19. GitHub.
  2. Web site: PostCSS Deep Dive: What You Need to Know. 2015-09-23. 2021-03-19. Envato Tuts+. Bracey. Kezz.
  3. Web site: Add Evil Martians badge · postcss/postcss@513f9c1. 2014-12-13. 2021-03-19. Sitnik. Andrey. GitHub.
  4. Web site: Why we need PostCSS if we have Webpack o_O? · Issue #861 · postcss/postcss. 2016-08-04. 2021-03-19. uMaxmaxmaximus. Sitnik. Andrey. GitHub.
  5. Web site: PostCSS Deep Dive: Preprocessing with "PreCSS". 2015-10-21. 2021-03-19. Bracey. Kezz. GitHub.
  6. Andrey Sitnik - PostCSS: The Future After Sass and LESS - YouTube. 2015-06-24. 2021-03-19. BocoupLLC. Sitnik. Andrey. Videotape. YouTube.
  7. Web site: webpack-contrib/postcss-loader: PostCSS loader for webpack. webpack-contrib. 2014-10-03. 2021-03-19. GitHub.
  8. Web site: postcss/gulp-postcss: Pipe CSS through PostCSS processors with a single parse. Kuzmin. Andrey. 2014-08-17. 2021-03-19. GitHub.
  9. Web site: nDmitry/grunt-postcss: Apply several post-processors to your CSS using PostCSS.. Nikitenko. Dmitry. 2014-09-25. 2021-03-19. GitHub.
  10. Web site: postcss/postcss-cli: CLI for postcss. Krzeminski. Damian. Zimmerman. Ryan. Ciniawsky. Michael. GitHub. 2015-03-11. 2021-03-19.
  11. Web site: Running postcss in the browser · Issue #830 · postcss/postcss. Niemelä. Matias. 2016-09-23. 2021-03-19. GitHub.
  12. Web site: shellscape/postcss-less: PostCSS Syntax for parsing LESS. Powell. Andrew. 2016-01-26. 2021-03-19. GitHub.
  13. Web site: postcss/postcss-scss: SCSS parser for PostCSS.. Sitnik. Andrew. 2015-08-09. 2021-03-19. GitHub.
  14. Web site: postcss/sugarss: Indent-based CSS syntax for PostCSS. Sitnik. Andrew. 2016-01-04. 2021-03-20. GitHub.
  15. Web site: postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use. 2021-03-19. GitHub.
  16. Web site: css-modules/css-modules: Documentation about css-modules. 2021-03-19. GitHub.
  17. Web site: css-loader/package.json at 5a003e00645d2ed0b3e759db06f58a08fbdd6745 · webpack-contrib/css-loader. 2016-08-15. 2021-03-19. GitHub.
  18. Web site: stylelint/stylelint. 2021-03-19. GitHub.
  19. Web site: morishitter/stylefmt: stylefmt is a tool that automatically formats stylesheets.. 2021-03-19. GitHub.
  20. Web site: jonathantneal/precss: Use Sass-like markup in your CSS. 2021-03-19. GitHub.
  21. Web site: csstools/postcss-preset-env: Convert modern CSS into something browsers understand. 2021-03-19. GitHub.
  22. Web site: cssnano/cssnano: A modular minifier, built on top of the PostCSS ecosystem. 2021-03-19. GitHub.
  23. Web site: MohammadYounes/rtlcss: Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL). 2021-03-19. GitHub.
  24. Web site: borodean/postcss-assets: An asset manager for PostCSS. 2021-03-19. GitHub.
  25. Web site: TrySound/postcss-inline-svg: PostCSS plugin to reference an SVG file and control its attributes with CSS syntax. 2021-03-19. GitHub.
  26. Web site: 2createStudio/postcss-sprites: Generate sprites from stylesheets.. 2021-03-19. GitHub.
  27. Web site: Initial commit · reworkcss/rework@0a7be25. TJ. Holowaychuk. GitHub. 2012-09-01. 2019-07-21.
  28. Web site: Modular CSS preprocessing with rework - TJ Holowaychuk. https://web.archive.org/web/20140918100709/http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework. dead. 2014-09-18. TJ. Holowaychuk. 2013-02-28. Tumblr. 2014-09-18.
  29. Web site: Initial commit · postcss/autoprefixer@d36346e. Andrey. Sitnik. GitHub. 2013-03-14. 2019-07-21.
  30. Web site: Rename project to autoprefixer · postcss/autoprefixer@419a77d. Andrey. Sitnik. GitHub. 2013-03-28. 2019-07-21.
  31. Web site: Facilitate autoprefixer needs · Issue #20 · reworkcss/css. Gallagher. Nicolas. GitHub. 2014-06-04. 2019-07-21.
  32. Web site: Init project · postcss/postcss@2d96cea. GitHub. Andrey. Sitnik. 2013-09-07. 2019-07-21.
  33. Web site: PostCSS Second Birthday — Martian Chronicles, Evil Martians' team blog. Martian Chronicles, Evil Martians’ team blog. Andrey. Sitnik. 2015-09-07. 2019-07-21.
  34. Web site: Initial commit · robwierzbowski/grunt-pixrem@0f7b662. Wierzbowski. Rob. 2013-12-14. GitHub. 2019-07-21.
  35. Web site: Release 1.0 "Plus ultra" · postcss/autoprefixer. Sitnik. Andrey. GitHub. 2013-12-21. 2019-07-20.
  36. Web site: Mockup · Issue #4 · postcss/postcss.org. Tisäter. Marcus. . 2015-12-31. 2019-07-21.
  37. PostCSS. 632182461108240384. 2015-08-14. PostCSS logo is a alchemy sign of philosopher's stone, which can transform metals to gold.
  38. Autoprefixer. 413085919420219392. 2013-12-17. Every PostCSS version code name is taken from demons list in alchemy book "Lemegeton Clavicula Salomonis".
  39. Web site: CSS pre- vs. post-processing Silvenon's Blog. https://web.archive.org/web/20171109091234/http://silvenon.com/css-pre-vs-post-processing/. dead. 2017-11-09. Silvenon's Blog. Matija. Marohnić. 2014-09-07. 2017-11-09.
  40. https://css-tricks.com/the-trouble-with-preprocessing-based-on-future-specs/ The Trouble With Preprocessing Based on Future Specs
  41. PostCSS. 626046993006239744. 2015-07-28. It is time admit my mistakes. "Postprocessor" term was bad. PostCSS team stopped to use it..

This article is licensed under the GNU Free Documentation License. It uses material from the Wikipedia article "PostCSS".

Except where otherwise indicated, Everything.Explained.Today is © Copyright 2009-2024, A B Cryer, All Rights Reserved. Cookie policy.