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

Author
Por Darío Rivera
Publicado el 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()
  ]
}

Acerca de Darío Rivera

Author

Application Architect at Elentra Corp . Quality developer and passionate learner with 10+ years of experience in web technologies. Creator of EasyHttp , an standard way to consume HTTP Clients.

LinkedIn Twitter Instagram

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.