Plugins de PostCSS que no puedes dejar de tener en tu proyecto

Por Darío Rivera

Publicado el 2021-02-13 en CSS

En nuestro anterior post vimos Qué es PostCSS, para qué sirve y cómo utilizarlo. En ese post vimos exactamente cómo funciona PostCSS y que su base principal son los plugins. Ahora que ya sabes esto vamos a ver los plugins de PostCSS más populares que no pueden faltar en tus proyectos.

Autoprefixer

Comencemos esta lista con uno de los plugins más populares de PostCSS, Autoprefixer. Este plugin permite agregar aquellos prefijos para funcionlidades de CSS que aún no soportan todos los navegadores. Permite por ejemplo solamente definir el siguiente estilo sin preocuparse por los prefijos.

::placeholder {
  color: gray;
}

Y al final obtener lo siguiente:

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

Para instalar este plugin debes agregarlo con npm y configurarlo en el archivo postcss.config.js.

npm i -D autoprefixer


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

PostCSS Preset Env

Este plugin permite convertir el CSS moderno en CSS que entiendan todos los navagadores. Observemos por ejemplo el uso de @custom-selector para crear un selector propio.

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

:--button {
  background: silver;
}

Al procesar estos estilos obtendrás lo siguiente:

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

Para instalar este plugin debes agregarlo con npm y configurarlo en el archivo postcss.config.js.

npm i -D postcss-preset-env

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

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

PreCSS

Este plugin te permite utilizar la sintaxis de Sass sin utilizar Sass. Con este plugin puedes por ejemplo convertir lo siguiente

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

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

En esto

body {
  background: white;
}

body h1 {
  color: black;
}

.col-3 {
  width: 30%;
}

.col-5 {
  width: 50%;
}

Este plugin es en realidad es un conjunto de otros plugins que incluye en tre otras cosas el anterior que hemos visto (PostCSS Preset Env). Hemos dedicado un artículo completo solamente para ver las funcionalidades de PreCSS.

Para instalar este plugin debes agregarlo con npm y configurarlo en el archivo postcss.config.js.

npm i -D precss

const precss = require('precss');

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

Autoprefixer

PostCSS Preset Env

PreCSS

Categorías