Jump to content
Wikipedia The Free Encyclopedia

PostCSS

From Wikipedia, the free encyclopedia
Software development tool that uses JavaScript-based plugins to automate routine CSS operations
PostCSS
Philosopher’s stone, PostCSS logo
Developers Andrey Sitnik, Ben Briggs, Bogdan Chadkin
Initial releaseNovember 4, 2013; 12 years ago (2013年11月04日)
Stable release
8.5.6[1]  Edit this on Wikidata / 16 June 2025; 4 months ago (16 June 2025)
Repository postcss
Written inJavaScript
Operating system Cross-platform
Available inEnglish
Type CSS development tool
License MIT License [2]
Websitepostcss.org

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]

Functionality

[edit ]
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

[edit ]

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

[edit ]

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

[edit ]

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]

References

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

AltStyle によって変換されたページ (->オリジナル) /