Now Reading:
15 Amazing PostCSS Plugins to Make You a CSS Expert

15 Amazing PostCSS Plugins to Make You a CSS Expert

Built with node.js, PostCSS a tool straight from the future. The official GitHub page of PostCSS says:

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.

To be honest, initially, I thought it was a tool for post processing CSS files. It turns out I was wrong. PostCSS is a versatile tool that can be used as a CSS pre-processor, CSS post-processor or both. The official GitHub page of PostCSS does a great job explaining this.

Unlike traditional CSS pre-processors, PostCSS follows a modular approach. All the power of PostCSS comes from plugins. Today, we explore some of the best PostCSS plugins available.

1. Autoprefixer

github.com/postcss/autoprefixer

Autoprefixer is the most popular of all PostCSS plugins. I use autoprefixer for all my projects. It is recommended by Google, used by Twitter and Alibaba. Autoprefixes parses CSS files and adds all required vendor prefixes.

You don’t need to learn any new syntax. Just write pure CSS following the latest W3C standards and autoprefixer will take care of the rest. Try out the interactive demo at autoprefixer.github.io.

Autoprefixer relies on  Can I Use data to add vendor prefixes. This is a CSS post-processor that can work all by itself or with tools like

autoprefixer PostCSS Plugins

2. PreCSS

github.com/jonathantneal/precss

PreCSS is a CSS pre processor just like Sass. PreCSS is not a single plugin but a plugin pack. A plugin pack is a set of plugins distributed as a single plugin. PostCSS plugins are modular and only meant to perform a single task. So, instead of doing lots of tasks all by itself, a plugin pack combines modular plugins which combine to do the needed tasks.

With  PreCSS you can use Sass like markup in  your CSS files. PreCSS offers all sorts of Sass goodness which include nesting, variables, loops, conditions, mixins and other handy features.

Some syntax like mixins don’t match the Sass syntax though. You can try out PreCSS live online at jonathantneal.github.io/precss.

PreCSS PostCSS Plugins

3. cssnext

github.com/MoOx/postcss-cssnext

CSSNext is the Babel.js of the CSS world. Just like Babel.js, CSSNext is a transpiler that compiles next gen CSS syntax to more compatible current gen syntax.

You can start writing  future CSS today with this PostCSS plugin. Some cool CSS features that you will be able to use include custom media queries, custom selectors, nesting and more. You can check out CSSNext playground at cssnext.io/playground

cssnext PostCSS Plugins

4. cssnano

github.com/ben-eb/cssnano

CSSNano is an aggressive CSS minifier plugin pack for PostCSS. It follows the modular approach of PostCSS and uses other single-responsibility plugins instead of doing everything all by itself.

CSSNano goes beyond normal whitespace removal. Some advanced minifications include rebasing of z-index values, custom comments removal, removal of unused @keyframes, @font-face, duplicate & empty rules.

cssnano PostCSS Plugins

5. Rucksack

github.com/simplaio/rucksack

Rucksack is a modular PostCSS plugin that comes with a bag full of tricks. Rucksack is all about shortcuts. Some cool features include responsive typography, short-hand positioning, shorthand property aliases, native clearfix, font source generation.

This plugin is fast and modular. You can selectively turn features on or off. It also has an impressive documentation to help you get started. You can check out the docs at simplaio.github.io/rucksack/docs.

rucksack PostCSS Plugins

6. stylelint

github.com/stylelint/stylelint

If you want to maintain consistency in your stylesheet files, then stylelint is just the plugin you need. Stylelint is a CSS linter with over a hundred rules. Just enable the rules that you need and configure the linter to your requirements.

Stylelint can help you avoid errors in your CSS files by enforcing strict standards. Powered by PostCSS, stylelint can parse any source that PostCSS can understand including Scss.

7. Bem

github.com/ileri/postcss-bem

BEM and SUIT are two methodologies for organizing CSS source code. BEM methodology was invented by Yandex.  SUIT is a modified version of the BEM methodology. Both can help you write high quality, organized and maintainable CSS.

PostCSS Bem is a plugin to implement SUIT and BEM rules in your CSS. The Bem plugin speeds up writing CSS following these methodologies. By default, the plugin is configured in SUIT mode. You can switch to BEM if you want.

8. Assets

github.com/borodean/postcss-assets

PostCSS assets is an asset manager for CSS. Instead of specifying an asset path yourself, you let the plugin handle the path for you. The plugin will automatically resolve the path. This isolates environmental changes.

One of the best features of this plugin is Cachebuster, where the plugin changes the asset URL to invalidate the  cached version of an asset whenever the asset changes. This feature is disabled by default.

Another nice feature is the ability to calculate image dimensions for PNG, JPEG, GIF, SVG and WebP images. You can also inline images.

9. FontAwesome

github.com/dan-gamble/postcss-font-awesome

Here’s one of my favorite PostCSS plugins. The FontAwesome plugin takes care of FontAwesome Unicode values. Just type the name of the icon and the plugin will replace it with the Unicode value.

.twitter::before {
    font-awesome: twitter;
}

10. PostCSS Sprites

github.com/2createStudio/postcss-sprites

Sprite generation is one of the best features available in Compass. Sprites PostCSS plugin brings sprite generation to PostCSS. This plugin will scan CSS file for images, generate a sprite from all found images and update the CSS to display the images from the generated image sprite.

11. BrandColors

github.com/postcss/postcss-brand-colors

Effortlessly work with brand colors using the PostCSS Brand Colors plugin. Branding colors of all popular brands are available. The plugin makes use of brand colors available at github.com/reimertz/brand-colors.

The usage is as simple as they come. Here’s an example.

.twitter {
    color: twitter-color;
}

12. Lost Grid

github.com/corysimmons/lost

Lost Grid is a powerful grid generation plugin for PostCSS. This plugin works using the CSS calc function. Lost Grid can work with any other pre processors and vanilla CSS.

Lost Grid is very simple to use. It has an extensive documentation that further simplifies the learning curve.

13. RtlCSS

github.com/MohammadYounes/rtlcss

If you are creating a website for a wider audience, then one of the tasks that you will have to do is add RTL support. But this is a challenging task and many things can go wrong. This is where RtlCSS can help. RTLCSS is a plugin that completely automates the task of generating CSS files from Left-To-Right (LTR) to Right-To-Left (RTL).

RtlCSS is one of the best PostCSS plugins and offloads some heavy work. It is very popular and used by clients like WordPress.

14. CSSFmt

github.com/morishitter/cssfmt

CSSFmt is a plugin for formatting your cascading style sheet files. CSSFmt works with vanilla CSS, nested syntax of SCSS, LESS, Stylus and future CSS syntax using cssnext.

Besides being available for task runners like Gulp and Grunt, this plugin is also available for popular text editors like Sublime Text and Atom.

15. Font Magician

github.com/jonathantneal/postcss-font-magician

With Font Magician, you can forget about writing @font-face rule. Font Magician automatically generates all @font-face rules by scanning source CSS files.

Using Font Magician is straightforward. Just use font and font-family pro

Can I Use Browser Compatibility Check from Command Line

Next Article

Can I Use Browser Compatibility Check from Command Line

Tapas Pal

Tapas pal is the founder of layerpoint.com and he is an avid Internet geek enthusiast and writer has deep interest in technology, Digital Marketing and love tools that increase human productivity.

Posts 92

Leave a Comment