词条 | PostCSS |
释义 |
| name = PostCSS | logo = PostCSS Logo.svg | logo alt = Philosopher’s stone, PostCSS logo | logo caption = | author = | developer = Andrey Sitnik, Ben Briggs, Bogdan Chadkin[1] | released = {{Start date and age|2013|11|04}} | discontinued = | ver layout = | latest release version = 7.0.14, President Amy | latest release date = {{Start date and age|2019|01|22}}[2] | programming language = JavaScript | operating system = Cross-platform | platform = | size = | language = English | genre = CSS development tool | license = MIT License[3] | website = {{URL|https://postcss.org/}} | repo = {{URL|https://github.com/postcss/postcss}} }}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] and GitHub.[8][9] PostCSS is a top-favored CSS tool among npm users.[10] It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.[11] How it worksStructureUnlike Sass and Less, PostCSS is not a CSS-compiled template language but a framework to develop CSS tools.[12] However, it can be used to develop a template language such as Sass and LESS.[13] The PostCSS core consists of:[14]
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. UsageBoth the PostCSS core and the plugins are written in JavaScript and distributed through npm. PostCSS offers API for low-level JavaScript operations: There are official tools making it possible to use PostCSS with build systems such as Webpack,[15] Gulp,[16] and Grunt.[17] There is also a console interface available for download.[18] Browserify or Webpack can be used to open PostCSS in a browser.[19] SyntaxesPostCSS allows changing the parser and generator. In this case, PostCSS could be used to work with the Less[20] and SCSS[21] 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.[22] PluginsThe number of PostCSS plugins amounts to more than 300.[23] 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 postcss.parts. Below are a few examples, with the what-fors explained:
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.[39] CriticismDespite certain plugins having faced criticism,[40] some PostCSS plugins have become de facto standard. For instance, Google recommends using Autoprefixer to solve the problem of browser prefixes in CSS.[41] The industry opinion of PostCSS is highly positive,[42] it going as far as Sass developers considering PostCSS a good addition to Sass.[43] 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,[44] with SugarSS possibly being a good replacement for the minimalistic syntax of Sass and Stylus.[45] On the other hand, some experts, including the PostCSS creator himself, recommend sticking to Sass and Less for legacy projects.[46] Advantages
Disadvantages
HistoryBorn in the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012.[58] February 28, 2013, TJ expressed it in public.[59] March 14, 2013, Andrey Sitnik's front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin.[60] Initially, the plugin name was rework-vendors.[61] As Autoprefixer grew, Rework could no longer to meet its needs.[62] September 7, 2013,[63] Andrey Sitnik started to develop PostCSS based on the Rework ideas.[64] In 3 months, the first PostCSS plugin, grunt-pixrem was released.[65] December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS.[66] For PostCSS, the primary style focus is alchemy.[67] The project logo represents the philosopher's stone.[68] Major and minor PostCSS versions get their names after the Ars Goetia demons.[69] For instance, version 1.0.0 is called Marquis Decarabia. The term postprocessor has caused some confusion.[70] 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[40] (for instance, [https://leaverou.github.io/prefixfree/ -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.[71] References1. ^[https://www.npmjs.com/package/postcss/access Who can release PostCSS to npm] 2. ^[https://github.com/postcss/postcss/releases PostCSS Releases] 3. ^[https://github.com/postcss/postcss/blob/master/LICENSE License in PostCSS repo] 4. ^First article about PostCSS in Tuts+ course 5. ^[https://github.com/wikimedia/portals/commit/998d7ce74c1f68397a52434ce9b85064de7d0008 Adding PostCSS commit in Wikipedia repo] 6. ^1 [https://github.com/wikimedia/stylelint-config-wikimedia Wikimedia Stylelint Config] 7. ^1 [https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/ Improving CSS quality at Facebook and beyond] 8. ^[https://archive.is/20160823060733/https://github.com/primer/primer/blob/master/.postcss.json PostCSS settings GitHub build tool] 9. ^1 [https://github.com/primer/stylelint-config-primer Primer Stylelint Config] 10. ^CSS preprocessors downloads from npm 11. ^[https://github.com/postcss/postcss/commit/513f9c1b46a7085ac215e4de9bac5c617d5b2f26 Evil Martians commit in PostCSS repo] 12. ^1 [https://github.com/postcss/postcss/issues/861 What is PostCSS discussion] 13. ^PostCSS Deep Dive: Preprocessing with “PreCSS” 14. ^1 [https://www.youtube.com/watch?v=1yUFTrAxTzg Andrey Sitnik - PostCSS: The Future After Sass and LESS] 15. ^[https://github.com/postcss/postcss-loader postcss-loader] 16. ^[https://github.com/postcss/gulp-postcss gulp-postcss] 17. ^[https://github.com/nDmitry/grunt-postcss grunt-postcss] 18. ^[https://github.com/postcss/postcss-cli postcss-cli] 19. ^[https://github.com/postcss/postcss/issues/830 Running postcss in the browser] 20. ^[https://github.com/webschik/postcss-less postcss-less] 21. ^[https://github.com/postcss/postcss-scss postcss-scss] 22. ^[https://github.com/postcss/sugarss sugarss] 23. ^[https://github.com/himynameisdave/postcss-plugins PostCSS plugins list] 24. ^[https://github.com/postcss/autoprefixer autoprefixer] 25. ^[https://www.sitepoint.com/results-ultimate-css-survey/ The Results of The Ultimate CSS Survey] 26. ^[https://github.com/css-modules/css-modules css-modules] 27. ^[https://github.com/webpack/css-loader/blob/5a003e00645d2ed0b3e759db06f58a08fbdd6745/package.json#L17-L20 css-loader dependencies] 28. ^stylelint 29. ^[https://github.com/morishitter/stylefmt stylefmt] 30. ^[https://github.com/jonathantneal/precss precss] 31. ^[https://preset-env.cssdb.org/ preset-env.cssdb.org] 32. ^cssnano.co 33. ^[https://github.com/ben-eb/cssnano/issues/45 cssnano users list] 34. ^rtlcss.com 35. ^[https://bbpress.trac.wordpress.org/ticket/2848 RTL CSS generation: Switch from CSSJanus to RTLCSS] 36. ^[https://github.com/assetsjs/postcss-assets postcss-assets] 37. ^[https://github.com/TrySound/postcss-inline-svg postcss-inline-svg] 38. ^[https://github.com/2createStudio/postcss-sprites postcss-sprites] 39. ^[https://github.com/webpack/css-loader/blob/5a003e00645d2ed0b3e759db06f58a08fbdd6745/lib/processCss.js#L18 css-loader sources] 40. ^1 [https://css-tricks.com/the-trouble-with-preprocessing-based-on-future-specs/ The Trouble With Preprocessing Based on Future Specs] 41. ^[https://developers.google.com/web/tools/setup/setup-buildtools#dont-trip-up-with-vendor-prefixes Set Up Your Build Tools] 42. ^[https://www.smashingmagazine.com/2015/12/introduction-to-postcss/ An Introduction To PostCSS] 43. ^1 [https://css-tricks.com/extending-sass-with-postcss/ Extending Sass with PostCSS] 44. ^[https://benfrain.com/breaking-up-with-sass-postcss/ Breaking up with Sass: it’s not you, it’s me] 45. ^[https://forums.meteor.com/t/css-modules-for-meteor-without-webpack/19682/25 SugarSS discussion on Meteor forum] 46. ^1 [https://www.youtube.com/watch?v=cGnlKFtAb64 dotCSS 2015 - Andrey Sitnik - Fix Global CSS with PostCSS] 47. ^[https://www.sitepoint.com/postcss-mythbusting/ PostCSS Mythbusting: Four PostCSS Myths Busted] 48. ^Using PostCSS Together with Sass, Stylus, or LESS 49. ^[https://twitter.com/elmd_/status/766254562135113728 PostCSS performance discussion in Twitter] 50. ^[https://ashleynolan.co.uk/blog/postcss-a-review PostCSS – Sass Killer or Preprocessing Pretender?] 51. ^[https://github.com/postcss/benchmark/blob/master/parsers.js PostCSS parsers benchmark] 52. ^[https://github.com/postcss/benchmark/blob/master/preprocessors.js PostCSS preprocessors benchmark] 53. ^[https://evilmartians.com/chronicles/postcss-1_5x-faster PostCSS becomes 1.5x faster] 54. ^[https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f The Sad State of Web Development] 55. ^[https://npm-stat.com/charts.html?package=postcss-use postcss-use downloads] 56. ^[https://github.com/postcss/postcss/issues/754 Integrate value & selector parsing into PostCSS core] 57. ^[https://github.com/postcss/postcss/issues/296 Event based API] 58. ^[https://github.com/reworkcss/rework/commit/0a7be255bfe753d03f93c7072351266fa636e80a First Rework commit] 59. ^[https://web.archive.org/web/20140918100709/http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework Modular CSS preprocessing with rework] 60. ^[https://github.com/postcss/autoprefixer/commit/d36346effe999e82fa8064076dc5f0e8f37e7e48 First Autoprefixer commit] 61. ^[https://github.com/postcss/autoprefixer/commit/419a77d4d871a1d7be34ff7129e3cbf7fb755b0c Autoprefixer rename commit] 62. ^[https://github.com/reworkcss/css/issues/20 Facilitate autoprefixer needs] 63. ^[https://github.com/postcss/postcss/commit/2d96cea96e3a96f616c28f897358086a69caa506 First PostCSS commit] 64. ^[https://evilmartians.com/chronicles/postcss-second-birthday PostCSS Second Birthday] 65. ^[https://github.com/robwierzbowski/grunt-pixrem/commit/0f7b662277edfc12f02f5615c66630be5d137b3a First grunt-pixrem commit] 66. ^[https://github.com/postcss/autoprefixer/releases/tag/1.0 Autoprefixer release 1.0 “Plus ultra”] 67. ^[https://github.com/postcss/postcss.org/issues/4 PostCSS website design discussion] 68. ^[https://twitter.com/postcss/status/632182461108240384 Tweet about PostCSS logo] 69. ^[https://twitter.com/autoprefixer/status/413085919420219392 Tweet about PostCSS releases] 70. ^CSS pre- vs. post-processing 71. ^[https://twitter.com/PostCSS/status/626046993006239744 Tweet about stop using postprocessor word] External links
5 : Cascading Style Sheets|Parsing|Software using the MIT license|Free compilers and interpreters|Free software programmed in JavaScript |
随便看 |
开放百科全书收录14589846条英语、德语、日语等多语种百科知识,基本涵盖了大多数领域的百科知识,是一部内容自由、开放的电子版国际百科全书。