PostCSS

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search
PostCSS
DevelopersAndrey Sitnik, Ben Briggs, Bogdan Chadkin
Initial releaseNovember 4, 2013; 12 years ago (2013-11-04)
Repositorypostcss
Written inJavaScript
Engine
    Lua error in Module:EditAtWikidata at line 29: attempt to index field 'wikibase' (a nil value).
    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

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

    [edit | edit source]

    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

    [edit | edit source]

    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

    [edit | edit source]

    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

    [edit | edit source]
    1. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    2. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    3. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    4. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    5. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    6. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    7. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    8. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    9. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    10. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    11. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    12. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    13. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    14. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    15. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    16. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    17. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    18. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    19. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    20. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    21. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    22. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    23. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    24. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    25. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    26. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    27. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    28. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    29. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    30. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    31. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    32. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    33. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    34. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    35. ^ [Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    36. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    37. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    38. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    39. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    40. ^ The Trouble With Preprocessing Based on Future Specs
    41. ^ Lua error in Module:Citation/CS1/Configuration at line 2172: attempt to index field '?' (a nil value).
    [edit | edit source]
    • Lua error in Module:Official_website at line 94: attempt to index field 'wikibase' (a nil value).
    Retrieved from "http://70.231.62.181/index.php?title=PostCSS&oldid=5462849"