Qué es PostCSS, para qué sirve y cómo utilizarlo

Author
By Darío Rivera
Posted on 2021-02-12 in CSS

PostCSS es una herramienta de desarrollo basada en plugins de JavaScript para automatizar operaciones de rutina en CSS. Para darte un ejemplo, con PostCSS puedes agregar automáticamente esos prefijos a features de CSS que no son completamente compatibles en todos los navegadores.

No se debe confundir el uso de JavaScript para realizar tareas automátizadas sobre el CSS, con cosas como que los estilos CSS se agreguen por medio de JavaScript o algo similar. Al final, tendrás un archivo puro de CSS que entederá el navegador, solamente que lo hemos optimizado o de cierta forma generado con JavaScript para agregar prefijos, soportar mixins, soportar variables y otras cosas. Puedes ver la lista completa de plugins aquí.

Instalación de PostCSS

Exiten varias formas de integrar PostCSS, entre ellas están Parcel, Webpack, Gulp, entre otras. Para probar PostCSS vamos a crear un proyecto en NPM. Seguramente tu ya tienes un proyecto corriendo en Laravel o cualquier otro framework de desarrollo web. No debería ser complejo después de seguir estos pasos agregarlo en tu proyecto específico.

Lo primero que vamos a hacer es crear un proyecto inicial en npm con el siguiente comando.

npm init -y

Este comando creará el archivo package.json en donde estará la configuración de dependencias de nuestro proyecto. Lo siguiente será instalar postcss y postcss-cli como dependencias de desarrollo.

npm i -D postcss postcss-cli

Seguido a esto deberás crear el archivo de configuración de postcss llamado postcss.config.js.

module.exports = {
  plugins: [
  ]
}

Instalación de plugins en PostCSS

Debido a que postcss está basado en plugins necesitamos al menos instalar nuestro primer plugin. Para esto vamos a utilizar el plugin más popular de postcss llamado autoprefixer.

npm i -D autoprefixer

Cada vez que instalamos un plugin necesitamos agregarlo a archivo de configuración.

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

Ejecución de PostCSS

Para ejecutar postcss vamos a crear dos comandos en la zona de scripts de nuestro archivo package.json.

"scripts": {
    "build": "postcss src/styles.css --output css/styles.css",
    "watch": "postcss src/styles.css --output css/styles.css --watch"
}

El primer comando toma lo que está en el archivo src/styles.css aplica el procesamiento de nuestros plugins y finalmente genera el archivo css/styles.css. El segundo comando hace exactamente lo mismo con la diferencia que el comando quedará en ejecución en la terminal para que a medida que modifiquemos nuestros estilos se genere automáticamente el output.

Lo siguiente será crear el archivo src/styles.css con alguna feature que requiera prefijos. Por ejemplo, puedes utilizar el siguiente CSS.

::placeholder {
  color: gray;
}

Al correr el comando build con npm obtendrás el CSS con prefijos.

npm run build
::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

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.