MENU


PostCSS

PostCSS is a tool for transforming styles with JavaScript plugins. It takes your existing CSS file, turns it into JavaScript-readable data, lets the plugins perform modifications, and returns the altered version of the original file.

The core part of PostCSS is a Node.js module that you can install with npm. With PostCSS, you don't need to learn a different syntax like in the case of Sass or LESS; you can immediately start to use it.

Currently, PostCSS has more than 200 plugins:

Autoprefixer is a popular PostCSS plugin that parses CSS and adds vendor prefixes to CSS rules, using data from 'caniuse.com'.

This saves the output to 'dist/styles.css': > npm install -g postcss-cli > npm install -g autoprefixer > mkdir dist > postcss -u autoprefixer styles.css -d dist

CSSnext is a CSS transpiler that allows you to use futuristic CSS syntax.

Working like a preprocessor, PreCSS makes it possible to take advantage of Sass-like markup in your stylesheet.

StyleLint is a modern CSS linter that proofreads and validates your CSS code.

PostCSS Assets plugin is a handy asset manager to deal with URL paths, as it isolates your stylesheet files from environmental changes.

If you need optimized and minified CSS files for a production site, it's worthwhile to check out CSSNano.

For sophisticated typography, you can use the Font Magician plugin, which automatically generates all the necessary @font-face rules.

With the help of the Write SVG plugin, you can easily write SVG right into your CSS files.

LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

The PostCSS Sprite plugin makes it easy to generate image sprites, i.e. collections of images placed into a single file.