Skip to content

Commit

Permalink
Merge pull request #4188 from shaedrich/postcss
Browse files Browse the repository at this point in the history
Add topic "PostCSS"
  • Loading branch information
ahpook authored Jan 22, 2024
2 parents 88c7d0e + 01e2b93 commit 05f7152
Showing 1 changed file with 29 additions and 0 deletions.
29 changes: 29 additions & 0 deletions topics/postcss/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
---
topic: postcss
display_name: PostCSS
short_description: PostCSS is a tool for transforming CSS with JavaScript. It can be used to develop a template language such as Sass and LESS.
wikipedia_url: https://en.wikipedia.org/wiki/PostCSS
url: https://postcss.org/
github_url: https://github.com/postcss
created_by: Andrey Sitnik, Ben Briggs, Bogdan Chadkin
released: November 4, 2013
related: sass, less, ast
---
**PostCSS** is a tool for transforming CSS with JavaScript. It can be used to develop a template language such as Sass and LESS. The PostCSS core consists of:
* CSS parser that generates an [abstract syntax tree](/topics/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#

There are official tools making it possible to use PostCSS with build systems such as [Webpack](/topics/webpack), [Gulp](/topics/gulp), and [Grunt](/topics/grunt). There is also a console interface available. [Browserify](/topics/browserify) or Webpack can be used to open PostCSS in a browser.

The complete plugin list can be found on postcss.parts, with some examples listed below.
* [Autoprefixer](/topics/autoprefixer) to add and clear [browser prefixes](/topics/vendor-prefix).
* [CSS Modules](/topics/css-modules) to get [CSS selectors](/topics/css-selectors) isolated and code organized. It is supplied as part of Webpack.
* [stylelint](/topics/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 preprocessing functions.
* postcss-preset-env to emulate features from unfinished CSS specification drafts.
* [cssnano](/topics/cssnano) to make CSS smaller in size by getting rid of the spaces and rewriting the code.
* [RTLCSS](/RTLCSS) to change CSS code so that the design should be suitable for right-to-left writing (such is applied in Arabic and Hebrew).
* postcss-assets, postcss-inline-svg and postcss-sprites to work with graphics.

0 comments on commit 05f7152

Please sign in to comment.