10 Awesome PostCSS Plugins to Make You a CSS Wizard

PostCSS is an incredibly versatile tool that makes it possible to transform CSS styles with JavaScript plugins. Its flexibility lies in the way it’s built.

The core part of PostCSS is a Node.js module that you can install with npm, and it has an ecosystem of more than 200 plugins you can choose to use in your project.

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. 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.

PostCSS takes your existing CSS file and turns it into JavaScript-readable data, then the JavaScript plugins perform the modifications, and PostCSS returns the altered version of the original file. Sounds cool, doesn’t it?

In this post, we will take a look at 10 PostCSS plugins to give you an insight into some of the great things you can achieve with this awesome tool.

1. Autoprefixer

Autoprefixer is probably the most well-known PostCss plugin, as it’s used by notable tech companies such as Google, Twitter, and Shopify. It adds vendor prefixes to CSS rules where it’s necessary.

Autoprefixer uses data from Can I Use. This way, it doesn’t get dated and can always apply the most recent rules. You can check out how it works on its interactive demo site.

2. CSSnext

CSSnext is a CSS transpiler that allows you to use future CSS syntax on current sites. W3C has many new CSS rules that aren’t currently implemented by browsers but could enable developers to write more sophisticated CSS faster and easier. CSSnext has been made to bridge this gap.

It’s worth to take a look at its features to see what you can accomplish with it, for example you can use custom media queries, custom selectors, colour modifiers, SVG filters, and new pseudoclasses in your designs.

3. PreCSS

PreCSS is one of the PstCSS plugins that work like a CSS preprocessor. It makes it possible to take advantage of a Sass-like markup in your stylesheet files.

By introducing PreCSS into your workflow you can use variables, if-else statements, for loops, mixins, @extend and @import rules, nesting, and many other handy features in your CSS code. PreCSS’s Github documentation gives you detailed instructions on how to make the most of it.

4. StyleLint

StyleLint is a modern CSS linter that proofreads and validates your CSS code. It makes it easy to avoid errors and pushes you to follow consistent coding conventions.

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.

5. PostCSS Assets

The PostCSS Assets plugin is a handy asset manager for your CSS files. It can be a great choice if you tend to have trouble with URL paths, as PostCSS Assets isolates your stylesheet files from environmental changes.

You need to define load paths, relative paths, and a base path, and the plugin will automatically look up the assets you need. For example you can write the following code if you need the proper URL of the foobar.jpg image:

body {
 background: resolve('foobar.jpg');
}

PostCSS Assets also takes care of the assets cache, as you can set the cachebuster variable to true if you want URL paths to be automatically changed in case an asset is modified. This smart plugin also calculates the dimensions (width and height) of image files or even resizes them using a preset ratio.

6. CSSNano

If you need optimized and minified CSS files for a production site, it’s worth to check out CSSNano. It’s a modular plugin that consists of many smaller, single-responsibility PostCSS plugins. It doesn’t only perform basic minification techniques such as removing whitespaces but also has advanced options that make focused optimizations possible.

Among many other features, CSSNano is capable of rebasing z-index values, reducing custom identifiers, converting length, time, and colour values, and removing outdated vendor prefixes.

7. Font Magician

If you are a fan of sophisticated typography, you will surely like the Font Magician PostCSS plugin. The magic of Font Magician relies in its capability of automatically generating all the necessary @font-face rules.

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. Here’s its interactive demo site.

8. Write SVG

Have you ever wondered about how cool it would be to write SVG right into your CSS files? With the help of the Write SVG PostCSS plugin you can easily achieve this goal.

This handy plugin, for example, makes it possible to store your SVG backgrounds and icons in your CSS file, and later add them to the relevant HTML element in the following way:

@svg square {
 @rect {
  fill: var(--color, black);
  width: 100%;
  height: 100%;
 }
}

.example {
 background: white svg(square param(--color #00b1ff)) cover;
}

9. 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 customization.

Lost Grid has pretty much straightforward rules, for example defining a column with 25% width doesn’t takes more than this little code snippet:

div {
 lost-column: 1/4;
}

10. 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.

You can use different filters and groupers to determine which images you want to put into the sprite, and you can set the dimensions of the output image as well.