PostCSS is a
software development tool that uses
JavaScript
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
-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 the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar. The term ''parsing'' comes from Lat ...
that generates an
abstract syntax tree
In computer science, an abstract syntax tree (AST), or just syntax tree, is a tree representation of the abstract syntactic structure of text (often source code) written in a formal language. Each node of the tree denotes a construct occurr ...
* 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
JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
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,
Gulp, and
Grunt. There is also a console interface available.
Browserify or
Webpack can be used to open PostCSS in a browser.
Syntaxes
PostCSS allows changing the
parser
Parsing, syntax analysis, or syntactic analysis is the process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar. The term ''parsing'' comes from Lat ...
and generator. In this case, PostCSS could be used to work with the
Less
Less or LESS may refer to: fewer than,: not as much.
Computing
* less (Unix), a Unix utility program
* Less (stylesheet language), a dynamic stylesheet language
* Large-Scale Scrum (LeSS), a product development framework that extends Scrum
Othe ...
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
Webpack.
* 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/
Less
Less or LESS may refer to: fewer than,: not as much.
Computing
* less (Unix), a Unix utility program
* Less (stylesheet language), a dynamic stylesheet language
* Large-Scale Scrum (LeSS), a product development framework that extends Scrum
Othe ...
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
In a script (commonly shortened to right to left or abbreviated RTL, RL-TB or R2L), writing starts from the right of the page and continues to the left, proceeding from top to bottom for new lines. Arabic, Hebrew, Persian, Pashto, Urdu, Kashmir ...
writing (such is applied in
Arabic
Arabic (, ' ; , ' or ) is a Semitic language spoken primarily across the Arab world.Semitic languages: an international handbook / edited by Stefan Weninger; in collaboration with Geoffrey Khan, Michael P. Streck, Janet C. E.Watson; Walter ...
and
Hebrew
Hebrew (; ; ) is a Northwest Semitic language of the Afroasiatic language family. Historically, it is one of the spoken languages of the Israelites and their longest-surviving descendants, the Jews and Samaritans. It was largely preserved ...
).
* 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 Arabic: ''al-kīmiyā''; from Ancient Greek: χυμεία, ''khumeía'') is an ancient branch of natural philosophy, a philosophical and protoscientific tradition that was historically practiced in China, India, the Muslim world, ...
. The project logo represents the
philosopher's stone
The philosopher's stone or more properly philosophers' stone (Arabic: حجر الفلاسفة, , la, lapis philosophorum), is a mythic alchemical substance capable of turning base metals such as mercury into gold (, from the Greek , "gold", ...
. Major and minor PostCSS versions get their names after the
Ars Goetia
''The Lesser Key of Solomon'', also known as ''Lemegeton Clavicula Salomonis'' or simply ''Lemegeton'', is an anonymous grimoire on demonology. It was compiled in the mid-17th century, mostly from materials a couple of centuries older.''Lemegeto ...
demons. 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](_blank)
/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 compilers and interpreters
Free software programmed in JavaScript