There seems to still be a buzz around PostCSS, as it has become the new cool guy in web development circles, and rightfully so, as it offers a great way to speed up the workflow of frontend development, and overall improve the quality of CSS.
It’s an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins and its flexibility lies within the way it been built.
The core part of PostCSS is a Node.js module that you can install with npm, and it has more than 200 plugins you can choose to use in your project.
Plus it’s 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. 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.
Below in this round up we gathered up 10 PostCSS plugins for developers, following plugins will help you with your development work and let you achieve greatness.
1. Autoprefixer
Autoprefixer is probably the most well-known PostCSS plugin, as this plugin been 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.
2. 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.
3. Lost Grid
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 with preprocessor 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 customisation.
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. PostCSS Logical Props
PostCSS plugin Converts CSS Logical Property declarations to vanilla CSS in either ltr or rtl versions. It is currently very simplistic in it’s determination of how to apply the properties and only supports 1d transforms (left or right).
6. PostCSS Font Magician
Font Magician is a plugin that magically generates all of your @font-face rules. You will never write a @font-face rule again. It’s pretty straightforward, you only need to add the font-family: “Font Name”; 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.
7. PostCSS Responsive Type
PostCSS plugin for automagical responsive typography. Adds a responsive property to font-size that generates complex calc and vw based font sizes.
8. 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.
9. 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.
10. Rucksack
Rucksack is a little bag pack full 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, so it’s modular, and doesn’t add any bloat, plus 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.
