loading...

Top 3 PostCSS Plugins in 2020

nickbulljs profile image Nick Bull Updated on ・3 min read

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

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's recommended by Google and used in Twitter and Alibaba.

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 follow me on Twitter

🔴 Join my newsletter and get more coding tips, job interview advice, and the latest tech news.

Posted on by:

nickbulljs profile

Nick Bull

@nickbulljs

Goal — help 1.000.000 people to become great developers by 2023 💻 Senior Software Engineer 💥 JavaScript, React, React Native Join 3-2-1 newsletter 👉 nickbulljs.com

Discussion

pic
Editor guide