Software:PostCSS

From HandWiki
Short description: Software development tool that uses JavaScript-based plugins to automate routine CSS operations
PostCSS
Philosopher’s stone, PostCSS logo
Developer(s)Andrey Sitnik, Ben Briggs, Bogdan Chadkin
Initial releaseNovember 4, 2013; 10 years ago (2013-11-04)
Repositoryon GitHub
Written inJavaScript
Operating systemCross-platform
Available inEnglish
TypeCSS development tool
LicenseMIT License[1]
Websitepostcss.org

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 workflow

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]

  • 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,[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.

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

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]

References

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

External links



Retrieved from "https://handwiki.org/wiki/index.php?title=Software:PostCSS&oldid=317693"