Eogen: 1 revision imported

2018-09-19T08:19:15Z

1 revision imported

GreenC bot: Rescued 2 archive links; reformat 2 links. Wayback Medic 2.1

2018-04-13T20:45:40Z

Rescued 2 archive links; reformat 2 links. Wayback Medic 2.1

New page

{{Infobox software
| name = PostCSS
| logo = PostCSS Logo.svg
| logo alt = Philosopher’s stone, PostCSS logo
| logo caption =
| author =
| developer = Andrey Sitnik, Ben Briggs, Bogdan Chadkin<ref>[https://www.npmjs.com/package/postcss/access Who can release PostCSS to npm]</ref>
| released = {{Start date and age|2013|11|04}}
| discontinued =
| ver layout =
| latest release version = 6.0.2, Marquis Orias
| latest release date = {{Start date and age|2017|06|12}}<ref>[https://github.com/postcss/postcss/releases PostCSS Releases]</ref>
| status = Active
| programming language = [[JavaScript]]
| operating system = [[Cross-platform]]
| platform =
| size =
| language = English
| genre = CSS development tool
| license = [[MIT License]]<ref>[https://github.com/postcss/postcss/blob/master/LICENSE License in PostCSS repo]</ref>
| website = [http://postcss.org postcss.org]
| repo = [https://github.com/postcss/postcss github.com/postcss/postcss]
}}

'''PostCSS''' is a [[Programming tool|software development tool]] that uses [[JavaScript]]-based [[Plug-in (computing)|plugins]] to automate routine [[Cascading Style Sheets|CSS]] operations.<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-what-you-need-to-know--cms-24535 First article about PostCSS in Tuts+ course]</ref> The tool has been used to develop the code of [[Wikipedia]],<ref name="postcss-wiki">[https://github.com/wikimedia/portals/commit/998d7ce74c1f68397a52434ce9b85064de7d0008 Adding PostCSS commit in Wikipedia repo]</ref><ref name="stylelint-wiki">[https://github.com/wikimedia/stylelint-config-wikimedia Wikimedia Stylelint Config]</ref> [[Facebook]],<ref name="stylelint-fb">[https://code.facebook.com/posts/879890885467584/improving-css-quality-at-facebook-and-beyond/ Improving CSS quality at Facebook and beyond]</ref> and [[GitHub]].<ref>[https://archive.is/20160823060733/https://github.com/primer/primer/blob/master/.postcss.json PostCSS settings GitHub build tool]</ref><ref name="stylelint-gh">[https://github.com/primer/stylelint-config-primer Primer Stylelint Config]</ref> PostCSS is a top-favored CSS tool among [[npm (software)|npm]] users.<ref>[http://www.npmtrends.com/postcss-vs-less-vs-node-sass-vs-stylus CSS preprocessors downloads from npm]</ref> It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.<ref>[https://github.com/postcss/postcss/commit/513f9c1b46a7085ac215e4de9bac5c617d5b2f26 Evil Martians commit in PostCSS repo]</ref>

== How it works ==

=== Structure ===

[[File:PostCSS scheme.svg|thumb|right|PostCSS workflow]]

Unlike [[Sass (stylesheet language)|Sass]] and [[Less (stylesheet language)|Less]], PostCSS is not a CSS-compiled template language but a [[Software framework|framework]] to develop CSS tools.<ref name="why-postcss">[https://github.com/postcss/postcss/issues/861 What is PostCSS discussion]</ref> However, it can be used to develop a template language such as Sass and LESS.<ref>[http://webdesign.tutsplus.com/tutorials/postcss-deep-dive-preprocessing-with-precss--cms-24583 PostCSS Deep Dive: Preprocessing with “PreCSS”]</ref>

The PostCSS core consists of:<ref name="cssconfus">[https://www.youtube.com/watch?v=1yUFTrAxTzg Andrey Sitnik - PostCSS: The Future After Sass and LESS]</ref>

* '''CSS [[parser]]''' that generates an object tree ([[Abstract syntax tree|AST]]) for a line of CSS-code;
* '''Set of [[Object-oriented programming|classes]]''' that comprise the tree;
* '''CSS generator''' that generates a CSS line for the object tree;
* '''Code map generator''' for the CSS changes made.

All the useful features are made available through plugins. The plugins are small programs working with [[Abstract syntax tree|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.

=== Usage ===

Both the PostCSS core and the plugins are written in [[JavaScript]] and distributed through [[npm (software)|npm]].

PostCSS offers [[Application programming interface|API]] for low-level JavaScript operations:

<source lang="js">
// Load the core and plugins from npm
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const precss = require('precss')

// Indicate the plugins to use
const processor = postcss([autoprefixer, precss])

// Indicate the CSS code and the names of the input/output file
processor.process('a {}', { from: './app.css', to: './app.build.css' })
// Use Promise API in case there are asynchronous plugins
.then(result => {
// Get the post-processed CSS code displayed
console.log(result.css)
// Get the warning messages displayed
for ( let message of result.warnings() ) {
console.warn(message.toString())
}
})
</source>

There are official tools making it possible to use PostCSS with build systems such as [[Webpack]],<ref>[https://github.com/postcss/postcss-loader postcss-loader]</ref> [[Gulp.js|Gulp]],<ref>[https://github.com/postcss/gulp-postcss gulp-postcss]</ref> and [[Grunt (software)|Grunt]].<ref>[https://github.com/nDmitry/grunt-postcss grunt-postcss]</ref> There is also a console interface available for download.<ref>[https://github.com/postcss/postcss-cli postcss-cli]</ref> [[Browserify]] or [[Webpack]] can be used to open PostCSS in a browser.<ref>[https://github.com/postcss/postcss/issues/830 Running postcss in the browser]</ref>

=== Syntaxes ===

PostCSS allows changing the [[parser]] and generator. In this case, PostCSS could be used to work with the [[Less (stylesheet language)|Less]]<ref>[https://github.com/webschik/postcss-less postcss-less]</ref> and [[Sass (stylesheet language)|SCSS]]<ref>[https://github.com/postcss/postcss-scss postcss-scss]</ref> 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 (stylesheet language)|Sass]] and [[Stylus (stylesheet language)|Stylus]] in its simplicity and succinctness.<ref>[https://github.com/postcss/sugarss sugarss]</ref>

== Plugins ==

The number of PostCSS plugins amounts to more than 300.<ref>[https://github.com/himynameisdave/postcss-plugins PostCSS plugins list]</ref> PostCSS plugins can solve most CSS processing tasks ranging from analysis and properties sorting to [[Minification (programming)|minification]]. However, the plugins significantly vary in quality and popularity.

The complete plugin list can be found on [http://postcss.parts/ postcss.parts]. Below are a few examples, with the what-fors explained:

* '''Autoprefixer'''<ref>[https://github.com/postcss/autoprefixer autoprefixer]</ref> to add and clear browser prefixes. It is the most popular PostCSS plugin. According to the [[SitePoint]] polling, 56% of respondents used Autoprefixer in March 2016.<ref>[https://www.sitepoint.com/results-ultimate-css-survey/ The Results of The Ultimate CSS Survey]</ref>
* '''CSS Modules'''<ref>[https://github.com/css-modules/css-modules css-modules]</ref> to get CSS selectors isolated and code organized. It is supplied as part of the popular bundler [[Webpack]].<ref>[https://github.com/webpack/css-loader/blob/5a003e00645d2ed0b3e759db06f58a08fbdd6745/package.json#L17-L20 css-loader dependencies]</ref>
* '''stylelint'''<ref>[http://stylelint.io/ stylelint]</ref> to [[Static program analysis|analyze]] CSS code for mistakes and check style consistency. It is used by [[Wikipedia]],<ref name="stylelint-wiki" /> [[Facebook]]<ref name="stylelint-fb" /> and [[GitHub]].<ref name="stylelint-gh" /> Another plugin, '''stylefmt'''<ref>[https://github.com/morishitter/stylefmt stylefmt]</ref> fixes the CSS code according to the stylelint settings.
* '''PreCSS'''<ref>[https://github.com/jonathantneal/precss precss]</ref> to perform some [[Sass (stylesheet language)|Sass]]/[[Less (stylesheet language)|Less]] preprocessing functions.
* '''postcss-cssnext'''<ref>[http://cssnext.io/ cssnext.io]</ref> to emulate features from unfinished CSS specification drafts. Used by [[Wikipedia]].<ref name="postcss-wiki" />
* '''cssnano'''<ref>[http://cssnano.co/ cssnano.co]</ref> to make CSS smaller in size by getting rid of the spaces and rewriting the code succinctly. Used by [[Webpack]], [[BBC]], and JSFiddle.<ref>[https://github.com/ben-eb/cssnano/issues/45 cssnano users list]</ref>
* '''RTLCSS'''<ref>[http://rtlcss.com/ rtlcss.com]</ref> to change CSS code so that the design should be suitable for [[right-to-left]] writing (such is applied in [[Arabic]] and [[Hebrew]]). It is used by [[WordPress]].<ref>[https://bbpress.trac.wordpress.org/ticket/2848 RTL CSS generation: Switch from CSSJanus to RTLCSS]</ref>
* '''postcss-assets''',<ref>[https://github.com/assetsjs/postcss-assets postcss-assets]</ref> '''postcss-inline-svg'''<ref>[https://github.com/TrySound/postcss-inline-svg postcss-inline-svg]</ref> and '''postcss-sprites'''<ref>[https://github.com/2createStudio/postcss-sprites postcss-sprites]</ref> to work with graphics.

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.<ref>[https://github.com/webpack/css-loader/blob/5a003e00645d2ed0b3e759db06f58a08fbdd6745/lib/processCss.js#L18 css-loader sources]</ref>

== Criticism ==

Despite certain plugins having faced criticism,<ref name="trouble-future-specs">[https://css-tricks.com/the-trouble-with-preprocessing-based-on-future-specs/ The Trouble With Preprocessing Based on Future Specs]</ref> some PostCSS plugins have become de facto standard. For instance, [[Google]] recommends using Autoprefixer to solve the problem of browser prefixes in CSS.<ref>[https://developers.google.com/web/tools/setup/setup-buildtools#dont-trip-up-with-vendor-prefixes Set Up Your Build Tools]</ref>

The industry opinion of PostCSS is highly positive,<ref>[https://www.smashingmagazine.com/2015/12/introduction-to-postcss/ An Introduction To PostCSS]</ref> it going as far as Sass developers considering PostCSS a good addition to Sass.<ref name="sass-postcss">[https://css-tricks.com/extending-sass-with-postcss/ Extending Sass with PostCSS]</ref>

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,<ref>[https://benfrain.com/breaking-up-with-sass-postcss/ Breaking up with Sass: it’s not you, it’s me]</ref> with SugarSS possibly being a good replacement for the minimalistic syntax of Sass and Stylus.<ref>[https://forums.meteor.com/t/css-modules-for-meteor-without-webpack/19682/25 SugarSS discussion on Meteor forum]</ref> On the other hand, some experts, including the PostCSS creator himself, recommend sticking to Sass and Less for legacy projects.<ref name="dotcss">[https://www.youtube.com/watch?v=cGnlKFtAb64 dotCSS 2015 - Andrey Sitnik - Fix Global CSS with PostCSS]</ref>

=== Advantages ===

* '''Features.''' Many PostCSS plugins one of a kind,<ref>[https://www.sitepoint.com/postcss-mythbusting/ PostCSS Mythbusting: Four PostCSS Myths Busted]</ref> PostCSS is often used as an addition to Sass and Less.<ref>[http://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591 Using PostCSS Together with Sass, Stylus, or LESS]</ref>
* '''Unification.''' PostCSS plugins cover most CSS building tasks from [[Static program analysis|checking the code]] for mistakes to [[Minification (programming)|minification]]. As a result, all CSS tools can share the same parser, architecture, and development tools. PostCSS allows for better performance by making all the plugins use the same object tree — in contrast to the common practice of each tool creating one of its own.<ref name="why-postcss" />
* '''Modules.''' The user is free in their choice of PostCSS plugins and can switch off the unnecessary ones for faster performance.<ref>[https://twitter.com/elmd_/status/766254562135113728 PostCSS performance discussion in Twitter]</ref> With different plugins solving the same problems, the user can choose whatever best fits their needs.<ref>[https://ashleynolan.co.uk/blog/postcss-a-review PostCSS – Sass Killer or Preprocessing Pretender?]</ref> The PostCSS creator believes that the higher number of plugins compete for the user’s attention, the better they will eventually become.<ref name="cssconfus" />
* '''Speed.''' PostCSS is equipped with one of the fastest JS-based CSS parsers.<ref>[https://github.com/postcss/benchmark/blob/master/parsers.js PostCSS parsers benchmark]</ref> It is up to twenty times faster than Ruby Sass and four times faster than Less in doing basic preprocessing.<ref>[https://github.com/postcss/benchmark/blob/master/preprocessors.js PostCSS preprocessors benchmark]</ref> However, real efficiency highly depends on the number of the plugins installed. In fact, the PostCSS creators themselves have confirmed that modern preprocessors work too fast for a speed up to be noticeable.<ref>[https://evilmartians.com/chronicles/postcss-1_5x-faster PostCSS becomes 1.5x faster]</ref>

=== Disadvantages ===

* '''Difficult to configure.''' Some developers tend to avoid the burden of choosing plugins and tuning them up to work together.<ref>[https://medium.com/@wob/the-sad-state-of-web-development-1603a861d29f The Sad State of Web Development]</ref> Ready-made plugin sets are only a partial solution to the problem.
* '''Non-standard syntax.''' With each project using its own plugin set, a new developer might not understand that the function unknown is related to the unpopular PostCSS plugin.<ref name="sass-postcss" /> It is recommended to indicate file plugins with postcss-use,<ref name="dotcss" /> but some people find it unnecessary.<ref>[https://npm-stat.com/charts.html?package=postcss-use postcss-use downloads]</ref>
* '''Selectors and values using separate parsers.''' PostCSS saves CSS selectors and property values as lines without further parsing them. To parse them, plugins have to use extra parsers. The PostCSS team is going to fix this in future versions.<ref>[https://github.com/postcss/postcss/issues/754 Integrate value & selector parsing into PostCSS core]</ref>
* '''Sequential processing.''' With the object tree being able to respond to only one plugin at a time, having a number of plugins might result in lower performance. Besides, there are functions no plugin can process. The PostCSS team is going to fix this in future versions.<ref>[https://github.com/postcss/postcss/issues/296 Event based API]</ref>

== History ==

Born in the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012.<ref>[https://github.com/reworkcss/rework/commit/0a7be255bfe753d03f93c7072351266fa636e80a First Rework commit]</ref> February 28, 2013, TJ expressed it in public.<ref>[https://web.archive.org/web/20140918100709/http://tjholowaychuk.tumblr.com/post/44267035203/modular-css-preprocessing-with-rework Modular CSS preprocessing with rework]</ref>

March 14, 2013, Andrey Sitnik’s front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin.<ref>[https://github.com/postcss/autoprefixer/commit/d36346effe999e82fa8064076dc5f0e8f37e7e48 First Autoprefixer commit]</ref> Initially, the plugin name was rework-vendors.<ref>[https://github.com/postcss/autoprefixer/commit/419a77d4d871a1d7be34ff7129e3cbf7fb755b0c Autoprefixer rename commit]</ref>

As Autoprefixer grew, Rework could no longer to meet its needs.<ref>[https://github.com/reworkcss/css/issues/20 Facilitate autoprefixer needs]</ref> September 7, 2013,<ref>[https://github.com/postcss/postcss/commit/2d96cea96e3a96f616c28f897358086a69caa506 First PostCSS commit]</ref> Andrey Sitnik started to develop PostCSS based on the Rework ideas.<ref>[https://evilmartians.com/chronicles/postcss-second-birthday PostCSS Second Birthday]</ref>

In 3 months, the first PostCSS plugin, grunt-pixrem was released.<ref>[https://github.com/robwierzbowski/grunt-pixrem/commit/0f7b662277edfc12f02f5615c66630be5d137b3a First grunt-pixrem commit]</ref> December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS.<ref>[https://github.com/postcss/autoprefixer/releases/tag/1.0 Autoprefixer release 1.0 “Plus ultra”]</ref>

For PostCSS, the primary style focus is [[alchemy]].<ref>[https://github.com/postcss/postcss.org/issues/4 PostCSS website design discussion]</ref> The project logo represents the [[philosopher's stone]].<ref>[https://twitter.com/postcss/status/632182461108240384 Tweet about PostCSS logo]</ref> Major and minor PostCSS versions get their names after the [[Goetia|Ars Goetia]] [[List of demons in the Ars Goetia|demons]].<ref>[https://twitter.com/autoprefixer/status/413085919420219392 Tweet about PostCSS releases]</ref> For instance, version 1.0.0 is called Marquis Decarabia.

The term postprocessor has caused some confusion.<ref>[http://silvenon.com/css-pre-vs-post-processing/ CSS pre- vs. post-processing]</ref> 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<ref name="trouble-future-specs" /> (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.<ref>[https://twitter.com/PostCSS/status/626046993006239744 Tweet about stop using postprocessor word]</ref>

== References ==
{{Reflist|30em}}

== External links ==

* [http://postcss.org/ Official website]
* {{GitHub|postcss|postcss}}
* [http://postcss.parts/ Plugin list]

[[Category:Cascading Style Sheets]]
[[Category:Parsing]]
[[Category:Software using the MIT license]]
[[Category:Free compilers and interpreters]]
[[Category:Free software programmed in JavaScript]]

← Older revision	Revision as of 08:19, 19 September 2018
(No difference)

PostCSS - Revision history

Eogen: 1 revision imported

GreenC bot: Rescued 2 archive links; reformat 2 links. Wayback Medic 2.1