Plugins de PostCSS que no puedes dejar de tener en tu proyecto --> PostCSS plugins that you can't miss in your project.

By Darío Rivera

Posted On in CSS

In our previous post we saw What is PostCSS, what it is for and how to use it. In that post we saw exactly how PostCSS works and that its main basis are the plugins. Now that you already know this, let's see the most popular PostCSS plugins that cannot be missing in your projects.

Autoprefixer

Let's begin this list with one of the most popular PostCSS plugins, Autoprefixer. This plugin allows adding prefixes for CSS features not yet supported by all browsers. For example, it allows defining the following style without worrying about prefixes.

::placeholder {
  color: gray;
}

And in the end, obtaining the following:

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

To install this plugin you must add it with npm and configure it in the postcss.config.js file.

npm i -D autoprefixer


module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

PostCSS Preset Env

This plugin allows converting modern CSS to CSS that all browsers understand. For example, let's observe the use of @custom-selector to create a custom selector.

@custom-selector :--button button, .btn, input[type="submit"];

:--button {
  background: silver;
}

When processing these styles, you will get the following:

button,.btn,input[type="submit"] {
  background: silver;
}

To install this plugin you must add it with npm and configure it in the postcss.config.js file.

npm i -D postcss-preset-env

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
    postcssPresetEnv({ stage: 0 }),
  ]
}

PreCSS

This plugin allows you to use Sass syntax without using Sass. With this plugin you can, for example, convert the following

body {
  background: white;
  h1 {
    color: black;
  }
}

@for $count from 1 to 5 by 2 {
  @if $count > 2 {
    .col-$count {
      width: #{$count}0%;
    }
  }
}

Into this

body {
  background: white;
}

body h1 {
  color: black;
}

.col-3 {
  width: 30%;
}

.col-5 {
  width: 50%;
}

This plugin is actually a set of other plugins that includes among other things the one we have seen before (PostCSS Preset Env). We have dedicated a complete article just to see the features of PreCSS.

To install this plugin you must add it with npm and configure it in the postcss.config.js file.

npm i -D precss

const precss = require('precss');

module.exports = {
  plugins: [
    precss()
  ]
}

Autoprefixer

PostCSS Preset Env

PreCSS

Categories