¿Qué es PostCSS y cómo usarlo?

PostCSS es una "navaja suiza" para trabajar de manera automatizada con el código CSS de los proyectos frontend. En este webinar se habla de los principales plugins disponibles para sacar partido a PostCSS, a la hora de procesar y optimizar las hojas de estilo en cascada.

Conoce todo sobre PostCSS, la herramienta más completa para trabajar con CSS que existe en la actualidad. PostCSS permite una increíble cantidad de mejoras en los flujos de trabajo del desarrollador, para aumentar la productividad, conseguir todo tipo de optimizaciones en el código y una mayor compatibilidad en navegadores.

Ecosistema de CSS y PostCSS

Cuando pensamos en el ecosistema de CSS lo primero que se nos viene a la cabeza son los frameworks como Bootstrap o los preprocesadores como Sass. Hay pocos equipos de trabajo que no usen alguna de estas herramientas y sin embargo, todavía no todos conocen PostCSS, un set de utilidades que puede mejorar mucho las prestaciones del lenguaje y la optimización de las webs.

A PostCSS se le conoce como la «navaja suiza del CSS» y no es para menos. Técnicamente es un set de plugins escritos en Javascript (bajo la plataforma NodeJS) que permiten hacer transformaciones en el código CSS de los proyectos. Es decir a un CSS de entrada, obtenemos un CSS de salida, que lógicamente estará más optimizado o aumentará sus prestaciones por diversos motivos.

Además, PostCSS consigue aglutinar muchas de las herramientas que ya conocemos dentro del ecosistema de CSS. Por ejemplo tiene plugins para realizar las transformaciones del CSS que incorporan los preprocesadores, consigue paliar la falta de optimización de los frameworks CSS y mucho más.

¿Cuáles son los plugins más utilizados de PostCSS?

Como hemos dicho, PostCSS incorpora una cantidad notable de plugins para hacer innumerables transformaciones en el CSS. Solo para hacernos una idea del alcance de la herramienta, vamos a nombrar algunos de los plugins más utilizados.

PostCSSImport

Este plugin permite realizar las importaciones del CSS que tenemos en archivos dispersos, uniendo todo su contenido en un mismo fichero. Como sabes, servir un único archivo CSS es una importante optimización, pero escribir el código en archivos separados aumenta considerablemente la facilidad de mantenimiento.

Autoprefixer

Autoprefixer es uno de los plugins más sencillos. Simplemente permite aplicar los prefijos CSS que sean necesarios al código fuente, de modo que nos ahorra trabajo y mantiene una mejor compatibilidad con los navegadores actuales y antiguos.

PurgeCSS

PurgeCSS permite optimizar el CSS, eliminando de los ficheros que vamos a llevar a producción todas las reglas de estilos que no se usan en el proyecto. Este es un plugin esencial si trabajamos con cualquier framework CSS, ya que nos permite una radical optimización del código CSS.

CSSnano

Otro de los plugins más usados y recomendables es «nano», que nos permite compactar el código CSS y por tanto rebajar su peso.

Primeros pasos para usar PostCSS

Ahora vamos a ver qué podemos hacer para comenzar a usar PostCSS en un proyecto web.

1. Instalar NodeJS

Si no lo tenemos ya, debemos comenzar por instalar «Node», la plataforma de ejecución de Javascript sobre la que está construido PostCSS. Podemos saber más de NodeJS framework en este post de nuestro blog. Instalarlo en la mayoría de los sistemas es simplemente descargar el asistente o lanzar un par de comandos de consola.

2. Iniciar el proyecto con npm

Si no lo hemos hecho todavía, tenemos que crear el package.json para el proyecto con el que vamos a trabajar. Esto se puede hacer con npm y un único comando:

npm init -y

3. Instalar PostCSS y PostCSS-CLI

Ahora vamos a instalar en el proyecto las dependencias necesarias para trabajar con PostCSS.

npm install -D postcss postcss-cli

4. Instalar los plugins que necesitemos

Dependiendo de las transformaciones que necesitemos realizar y atendiendo a las necesidades del proyecto, tendremos que instalar todos los plugins que deseemos. Cada plugin tiene su comando de instalación que encontraremos en su página de documentación. Por ejemplo, así instalamos Autoprefixer:

npm install -D autoprefixer

5. Configurar PostCSS

La configuración de PostCSS incluye la declaración de todos los plugins que queremos usar en el proyecto. Se realiza sobre un archivo llamado postcss.config.js. Cada plugin nos indica en su documentación cómo se debe utilizar y qué valores de configuración nos permite definir. El código esencial que tendremos que incorporar en postcss.config.js para poder usar el plugin Autoprefixer es el siguiente:

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

6. Ejecutar PostCSS

Para poder lanzar los procesos de PostCSS tenemos que configurar los scripts npm necesarios, que se escriben en el archivo package.json en la propiedad «scripts»:

"scripts": {
	"build": "postcss origen/del/css/style.css --output destino/css/compilado/style.css"
},

Como puedes ver, se indica la ruta donde está el CSS de origen y la ruta donde se pondrá el CSS transformado, una vez se le hayan pasado todos los plugins configurados. Para ejecutar estos scripts lo hacemos desde el terminal, con el comando:

npm run build

Siendo «build» el nombre del script que hayamos configurado en el package.json.

Eso es todo! Ejecutado el comando veremos que se crea el archivo del CSS procesado, que es el que finalmente se tendrá que llevar a producción, obteniendo todas las ventajas de PostCSS que hayamos configurado.