Top 3 PostCSS Plugins in 2020

If you don’t know what PostCSS is, in short, it’s a tool for transforming styles with JS plugins.

It can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

Here are my top 3 plugins for PostCSS that will make you a CSS wizard.

1. Autoprefixer

Forget about vendor prefixes — Autoprefixer

Autoprefixer parses CSS and adds vendor prefixes to CSS rules using values from Can I Use.

For example, you have the following CSS:

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

After the transformation it will look like this:

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}
@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Autoprefixer uses the data based on current browser popularity and property support to apply prefixes for you.

It is recommended by Google and used in Twitter and Alibaba.

You can try the interactive demo of Autoprefixer.

2. PostCSS Preset Env

PostCSS Preset Env convert modern CSS into something most browsers can understand.

For example, you have the following CSS:

@custom-media --viewport-medium (width <= 50rem);
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:root {
  --mainColor: #12345678;
}

body {
  color: var(--mainColor);
  font-family: system-ui;
  overflow-wrap: break-word;
}

:--heading {
  background-image: image-set(url(img/heading.png) 1x, url(img/heading@2x.png) 2x);

  @media (--viewport-medium) {
    margin-block: 0;
  }
}

a {
  color: rgb(0 0 100% / 90%);

  &:hover {
    color: rebeccapurple;
  }
}

After the transformation it will look like this:

:root {
  --mainColor: rgba(18, 52, 86, 0.47059);
}

body {
  color: rgba(18, 52, 86, 0.47059);
  color: var(--mainColor);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  background-image: url(img/heading.png);
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  h1, h2, h3, h4, h5, h6 {
    background-image: url(img/heading@2x.png)
  }
}

@media (max-width: 50rem) {
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0;
  }
}

a {
  color: rgba(0, 0, 255, 0.9)
}

a:hover {
  color: #639;
}

It determined the polyfills based on your targeted browsers and runtime environments.

3. PostCSS Modules

PostCSS Modules is a plugin to use CSS Modules everywhere. Not only on the client-side.

For example, you have the following CSS:

/* styles.css */
:global .page {
  padding: 20px;
}
.title {
  composes: title from "./mixins.css";
  color: green;
}
.article {
  font-size: 16px;
}
/* mixins.css */
.title {
  color: black;
  font-size: 40px;
}
.title:hover {
  color: red;
}

After the transformation it will look like this:

._title_116zl_1 {
  color: black;
  font-size: 40px;
}
._title_116zl_1:hover {
  color: red;
}
.page {
  padding: 20px;
}
._title_xkpkl_5 {
  color: green;
}
._article_xkpkl_10 {
  font-size: 16px;
}

And the plugin will give you a JSON object for transformed classes:

{
  "title": "_title_xkpkl_5 _title_116zl_1",
  "article": "_article_xkpkl_10"
}

In the end…

I hope you’ll find these plugins useful.

🔴 If you like this article share it with your friends and check me on Twitter.

🔴 🔴 Every week, I send out my “3-2-1” newsletter with 3 tech news, 2 articles, 1 advice, and 1 Secret BONUS for you. Join my 3-2-1 Newsletter

No Comments Yet