PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more. PostCSS is used by industry leaders including Google, Twitter, Alibaba, and Shopify.
Currently, PostCSS has more than 200 plugins. Here are our favorite plugins which best demonstrate PostCSS’ power. You can find all of the plugins in the plugins list or in the searchable catalog.
PostCSS is neither a preprocessor, nor a postprocessor, as different PostCSS plugins may fall into either of these categories, or both of them; it depends entirely on you what you make of it.
In this article we have gathered 12 PostCSS plugins for developers, following plugins will help you with your development work and let you know the great things you can achieve with this awesome tool.
1. CSSnext
PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transformsnew CSS specs into more compatible CSS so you don’t need to wait for browser support. cssnext uses PostCSS which has a way faster CSS parser. It’s a good competitor to libsass, a bit faster than LESS and Stylecow, and way faster than Myth or original Ruby Sass.
2. PreCSS
PreCSS is a tool that allows you to use Sass-like markup in your CSS files. Enjoy a familiar syntax with variables, mixins, conditionals, and other goodies. By introducing PreCSS into your workflow you can use variables, if-elsestatements, for loops, mixins, @extend and @import rules, nesting, and many other handy features in your CSS code.
3. Autoprefixer
Autoprefixer is probably the most well-known PostCss plugin, as it’s used by notable tech companies such as Google, Twitter, and Shopify. Autoprefixer is a PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter, and Taobao.
4. Postcss Assets
PostCSS Assets is an asset manager for CSS. It isolates stylesheets from environmental changes, gets image sizes and inlines files. PostCSS Assets would look for the files relative to the source file, then in load paths, then in the base path.
5. Stylelint
A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. StyleLint understands the latest CSS syntax, so it can be used along with the previously mentioned PreCSS plugin. It also allows you to make your own configuration, and even checks if your settings are valid.
6. Short
Short lets you write styles more logically by extending shorthand properties in CSS.
7. CSSNano
CSSnano is a modular minifier that aims to utilise small modules from the PostCSS ecosystem, rather than being an all-encompassing module that may be difficult to contribute to. Because it is written on top of PostCSS, it is able to do more than simple whitespace transforms – including advanced optimisations such as custom identifier reduction, z-index rebasing, and adjacent selector merging.
8. Rucksack
Rucksack is a little bag of CSS superpowers. It makes CSS development fun again, with features the language should have come with out of the box. It’s built on PostCSS, it’s modular, it doesn’t add any bloat, and it’s lightening fast. Integrating Rucksack into your workflow is easy. There are plugins for most build tools, and an npm module to integrate it manually or process your CSS directly on the command line. Since it’s built on the PostCSS ecosystem it plays nice with all other CSS pre and post processors, and can even integrate into Stylus directly.
9. Font Magician
Font Magician is a PostCSS plugin that magically generates all of your @font-face rules. Never write a@font-face rule again. How it works is pretty straightforward, you only need to add the font-family: “My Fav Font”; CSS rule to an HTML element, and Font Magician does the rest of the work. It can add Google Fonts, the local copy of a font, Bootstrap typography, and can also load fonts asynchronously.
10. Postcss color palette
This plugin can transform color keywords such as aqua, blue, lime, etc. to any other color. Bundled with the webcolorspackage, making three beautiful color palettes available to use in your stylesheets: clrs.cc/mrmrs, FlatUI and Material — simply by using standard color names.
11. LostCSS
Lost Grid is a great PostCSS plugin that provides you with an impressive CSS grid system that doesn’t only works with plain CSS but also withpreprocessor languages (Sass, LESS, Stylus). It uses the calc() CSS function to create beautiful grids that you can easily use without spending too much time with customization.
12. PostCSS Sprites
The PostCSS Sprite plugin makes it easy to generate image sprites, i.e. collections of images placed into a single file. After setting a few options, the plugin takes the images from your stylesheet file, merges them into a sprite, then updates the image references wherever it’s necessary.
