Introduction to PostCSS

Introduction to PostCSS – Installation, Plugins Supported | Why Use PostCSS?

by

In this tutorial of PostCSS, you will learn What Exactly is PostCSS, the Advantages of using PostCSS, what are the Plugins supported by the PostCSS. You will be well versed with details such as How Different is PostCSS from Saas, etc. We have covered the PostCSS Installation using the yarn or npm.

What is PostCSS?

PostCSS is a tool for transforming CSS with JavaScript plugins. It provides features via its extensive plugin ecosystem to help improve your CSS writing experience. You can pick the plugins you need or even write a custom one for yourself.

Do note, however, that there are PostCSS plugins that do not transform plain CSS, but operate on Sass-like syntax. One example is the PostCSS Simple Variables plugin, which allows you to implement variables (just like in Sass) that you can reuse throughout your code, as shown below.

$color-brand: darkgrey;
$font-size: 1em;
body {
 color: $color-brand;
 font-size: $font-size;
}

PostCSS Installation

You can use yarn or npm to install PostCSS.

yarn global add postcss-cli
npm install -g postcss-cli

Once you are done, the postcss command would be available in your command line.

Why use PostCSS?

Let’s take a look at a few use cases for PostCSS via the power of its plugins.

Autoprefixing

As previously mentioned, the Autoprefixer plugin will add vendor prefixes to CSS properties using values from Can I Use. This reduces clutter in your code and improves readability. For example, this input:

:fullscreen {
}

Gives this output:

:-webkit-:full-screen {}
:-moz-:full-screen {}
:full-screen {}

Using CSSNext features that browsers understand

With the PostCSS Preset Env plugin, you can write future CSS syntax, and the plugin will convert it to CSS that browsers will understand by working out the necessary polyfill. For example, this input:

@custom-media --med (width <= 50rem);
@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

Gives this output:

@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
}

Avoiding errors in your CSS

The stylelint plugin points out errors in your CSS code. It supports the latest CSS syntax. For example, this input:

a { 
  color: #d3;
}

Gives this output:

app.css
2:10 Invalid hex color

Using locally scoped CSS class names

With the CSS Modules plugin, you can write CSS that is locally scoped to components, meaning there won’t be any conflicts between your CSS class names no matter how generic they are. For example, this input:

.name {
  color: grey;
}

Gives this output:

.Logo__name__SVK0g {
  color: gray;
}

Creating stunning grids

The LostGrid plugin uses calc() to create grids based on fractions you define without the need to pass a lot of options. For example, this input:

div {
  lost-column: 1/3 
}

Gives this output:

div {
  width: calc(99.9% * 1/3 -  
  (30px - 30px * 1/3)); 
}
div:nth-child(1n) {
  float: left; 
  margin-right: 30px; 
  clear: none; 
}
div:last-child {
  margin-right: 0; 
}
div:nth-child(3n) {
  margin-right: 0; 
  float: right; 
}
div:nth-child(3n + 1) {
  clear: both; 
}

PostCSS Plugins

PostCSS provides various tools for CSS Processing. Below is the list of popular plugins so that you can have an overview of what’s possible to do with PostCSS.

AutoPrefixer: It Parses your CSS and finds if some rules need a vendor prefix. Autoprefixer do so as per the Can I Use Data so you need not bother whether a feature needs a prefix, or if prefixes you use are unneeded because obsolete. You can write cleaner CSS with the help of the plugin.

cssnext: This is a Babel of CSS and permits you to use modern CSS features and takes care of transpiling them to a CSS digestible to older browsers.

  • Adds prefixes taking help of Autoprefixer.
  • You can use CSS Variables.
  • You can even use nesting same as in Sass.

CSS Modules: PostCSS allows you to use CSS Modules. These Modules aren’t a part of CSS Standard and are a build-step process to have a scoped selectors.

csslint: Linting allows us to write correct CSS and avoid errors. stylint plugin permits you to lint CSS during the build time.

cssnano: cssnano minimizes CSS and makes code optimizations so that the least amount of code is delivered in the production.

How PostCSS is different from Sass and Less?

PostCSS can do the same work as preprocessors like Sass, Less, and Stylus, but PostCSS is modular and, in my experience, faster.

The main difference between PostCSS and CSS preprocessors is that you can pick the features you need. Sass and Less give you lots of features you may or may not use, and which you can’t extend.

There are also PostCSS plugins like PostCSS Sass and PreCSS, which are essentially complete replacements for Sass. This means you could literally write your own preprocessor powered by PostCSS.