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

Author
By Darío Rivera
Posted on 2021-02-13 in 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()
  ]
}

Si te ha gustado este artículo puedes invitarme a tomar una taza de café


Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

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