PostCSS is a

software development tool A programming tool or software development tool is a computer program that is used to develop another computer program, usually by helping the developer manage computer files. For example, a programmer may use a tool called a source code editor ...

that uses

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

-based plugins to automate routine CSS operations. It was designed by Andrey Sitnik with the idea taking its origin in his front-end work for Evil Martians.

Functionality

PostCSS is a framework to develop CSS tools. It can be used to develop a template language such as Sass and LESS. The PostCSS core consists of: * CSS

parser Parsing, syntax analysis, or syntactic analysis is a process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar by breaking it into parts. The term '' ...

that generates an

abstract syntax tree An abstract syntax tree (AST) is a data structure used in computer science to represent the structure of a program or code snippet. It is a tree representation of the abstract syntactic structure of text (often source code) written in a formal ...

* 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

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 Webpack is a free and open-source module bundler for JavaScript. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included. Webpack takes modules with depend ...

, Gulp, and

Grunt Grunt, grunts or grunting may refer to: Sound and music * Grunting (tennis), in tennis refers to the loud noise, sometimes described as "shrieking" or "screaming", made by some players during their strokes * Death grunt, the death metal singi ...

. There is also a console interface available. Browserify or

can be used to open PostCSS in a browser.

Syntaxes

PostCSS allows changing the

and generator. In this case, PostCSS could be used to work with the

Less Less or LESS may refer to: Computing * less (Unix), a Unix utility program * Less (style sheet language), a dynamic style sheet language * Large-Scale Scrum (LeSS), a product development framework that extends Scrum Other uses * -less, a priv ...

and SCSS 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.

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. * CSS Modules to get CSS selectors isolated and code organized. It is supplied as part of

. * stylelint to analyze CSS code for mistakes and check style consistency. * stylefmt fixes the CSS code according to the stylelint settings. * PreCSS to perform some

Sass Sass, Saß or SASS may refer to: Businesses and organizations * Safe Amplification Site Society, a Canadian non-profit organization * Shanghai Academy of Social Sciences, a Chinese think tank * Society for the Advancement of Scandinavian Study ...

preprocessing functions. * postcss-preset-env to emulate features from unfinished CSS specification drafts. * cssnano to make CSS smaller in size by getting rid of the spaces and rewriting the code. * RTLCSS to change CSS code so that the design should be suitable for

right-to-left A writing system comprises a set of symbols, called a ''script'', as well as the rules by which the script represents a particular language. The earliest writing appeared during the late 4th millennium BC. Throughout history, each independen ...

writing (such is applied in

Arabic Arabic (, , or , ) is a Central Semitic languages, Central Semitic language of the Afroasiatic languages, Afroasiatic language family spoken primarily in the Arab world. The International Organization for Standardization (ISO) assigns lang ...

and

Hebrew Hebrew (; ''ʿÎbrit'') is a Northwest Semitic languages, Northwest Semitic language within the Afroasiatic languages, Afroasiatic language family. A regional dialect of the Canaanite languages, it was natively spoken by the Israelites and ...

). * postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.

History

During the course of the Rework project, the idea of modular CSS processing was suggested by TJ Holowaychuk September 1, 2012. February 28, 2013, TJ expressed it in public. March 14, 2013, Andrey Sitnik's front-end work for Evil Martians resulted in Autoprefixer, a Rework-based plugin. Initially, the plugin name was rework-vendors. As Autoprefixer grew, Rework could no longer to meet its needs. September 7, 2013, Andrey Sitnik started to develop PostCSS based on the Rework ideas. In 3 months, the first PostCSS plugin, grunt-pixrem was released. December 22, 2013, Autoprefixer version 1.0 migrated to PostCSS. For PostCSS, the primary style focus is

alchemy Alchemy (from the Arabic word , ) is an ancient branch of natural philosophy, a philosophical and protoscientific tradition that was historically practised in China, India, the Muslim world, and Europe. In its Western form, alchemy is first ...

. The project logo represents the

philosopher's stone The philosopher's stone is a mythic alchemical substance capable of turning base metals such as mercury into gold or silver; it was also known as "the tincture" and "the powder". Alchemists additionally believed that it could be used to mak ...

. Major and minor PostCSS versions get their names after the

Ars Goetia ''The Lesser Key of Solomon'', also known by its Latin title ''Lemegeton Clavicula Salomonis'' or simply the ''Lemegeton'', is an anonymously authored grimoire on sorcery, mysticism and magic. It was compiled in the mid-17th century from mate ...

demons A demon is a malevolent supernatural entity. Historically, belief in demons, or stories about demons, occurs in folklore, mythology, religion, occultism, and literature; these beliefs are reflected in media including fiction, comics, film, t ...

. For instance, version 1.0.0 is called Marquis Decarabia. The term postprocessor has caused some confusion. 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).The Trouble With Preprocessing Based on Future Specs
/ref> The situation has become even more complicated after the release of PreCSS. Now, instead of postprocessor, the PostCSS team use the term processor.

References

External links

* {{Stylesheet languages Cascading Style Sheets Parsing Software using the MIT license Free and open source interpreters Free software programmed in JavaScript