PostCSS

> Temas > PostCSS
Editar

Todo un set de herramientas y plugins para transformaciones del CSS mediante Javascript útil para proyectos frontend.

PostCSS es una herramienta moderna para la gestión del código CSS que permite aumentar la productividad a la vez que libera al desarrollador de trabajos adicionales así como conocimientos técnicos del estado actual del lenguaje y el soporte en los navegadores.

PostCSS por si solo no hace trabajo alguno sobre el CSS. En cambio es necesario instalar plugins que nos permitan indicar qué tipo de transformaciones serán realizadas sobre el CSS que tenemos de entrada, generando un CSS de salida acorde con las necesidades de cada proyecto o las tecnologías con las que se trabaje.

Existen más de 200 plugins de PostCSS para realizar todo tipo de transformaciones, que se pueden encontrar en la página de GitHub de PostCSS.

PostCSS se puede integrar con herramientas frontend existentes en un proyecto dado, como pueden ser Webpack o Parcel, o también se puede usar directamente por medio de su propia CLI.

Más información:

Instalar PostCSS

PostCSS se instala en el proyecto donde lo desees utilizar. Es una herramienta que funciona bajo NodeJS, por lo que previamente tendrás que haber instalado esa plataforma en tu equipo. Por cierto, PostCSS también es compabible con Deno.

Lo puedes instalar como un añadido a cualquier sistema de build que vengas utilizando, como podría ser Webpack, aununque también lo puedes usar de manera autónoma gracias a su CLI. Ahora vamos a explicar cómo instalar PostCSS con PostCSS-CLI.

Lo instalas vía npm, por lo que necesitas haber inicializado el proyecto con npm:

npm init

Vas contestando el asistente de inicialización y luego tienes que instalar dos dependencias, como dependencias de desarrollo, en el proyecto:

npm install -D postcss postcss-cli

Además, necesitas instalar todos los plugins que consideres necesarios de PostCSS para tu proyecto. Una alternativa muy popular es "autoprefixer", que se encarga de procesar tu CSS y colocar los prefijos en los atributos CSS que sean necesarios.

npm install -D autoprefixer

Este paso de instalación lo debes completar luego con la configuración de PostCSS, en la que indicarás qué plugins se deben usar.

Editar

Configuración de PostCSS

Una vez tienes instaladas todas las dependencias, incluido el número de plugins que veas conveniente, debes crear un archivo de configuración de PostCSS, llamado "postcss.config.js". Ese archivo contendrá el código Javascript que NodeJS debe utilizar para configurar la ejecución de PostCSS. En él básicamente indicarás los plugins que se van a usar y su configuración.

Un ejemplo sencillo de configuración de PostCSS en postcss.config.js sería el siguiente:

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

Como puedes apreciar, PostCSS se ejecuta con NodeJS, por eso usamos la sentencia "module.exports", que es la manera de exponer un módulo de Javascript hacia afuera que se usa en NodeJS, que se llama "CommonJS".

Editar

Uso de PostCSS

Para comenzar a usar PostCSS nos queda un último paso, que es crear un script de npm para ejecutar PostCSS cada vez que necesites procesar tu CSS. Ese script de npm lo tienes que colocar dentro del archivo "package.json".

El archivo "package.json", tiene una propiedad llamada "scripts", en la que puedes colocar cualquier número de scripts npm que puedas necesitar en un proyecto. Su forma sería como esta:

"scripts": {
    "build": "postcss src/css/estilos.css --output dist/estilos.css"
},

En nuestro caso hemos creado un script llamado "build", que hace la invocación al CLI de PostCSS, indicando dos informaciones:

  • src/css/estilos.css sería la ruta inicial donde se encuentra el archivo CSS que se desea procesar.
  • --output dist/estilos.css sería la ruta de destino donde se colocará el CSS una vez procesado.

Una vez creado el script npm, lo ejecutas con la consola, desde la raíz de tu proyecto con el comando "npm run" seguido del nombre del script que hayas puesto.

npm run build

Esto realizará el procesamiento del archivo de origen, aplicando todas las transformaciones de todos los plugins que hayas configurado, y escribiendo el archivo de destino en la ruta indicada.

Por ejemplo, si tuvieras un CSS como este:

.myGrid {
  display: grid;
  grid-template-columns: 12px 12px 12px;
  grid-template-rows: 12px 12px 12px;
  column-gap: 1rem; 
}

Lo que tendríamos como salida es esto:

.myGrid {
  display: grid;
  grid-template-columns: 12px 12px 12px;
  grid-template-rows: 12px 12px 12px;
  -moz-column-gap: 1rem;
       column-gap: 1rem; 
}

Sin embargo ten en cuenta que esta salida puede ser variable, ya que autoprefixer tiene en cuenta un rango de navegadores de destino y, a medida que los navegadores se actualizan hay ciertos prefijos que ya no son necesarios.

Si deseas cambiar los navegadores de destino puedes hacerlo de diversas maneras, por ejemplo creando un archivo ". browserslistrc" en la raíz de tu proyecto. Mira la documentación para encontrar más detalles.

Editar

Lanzar el proceso de build de manera automática

En tiempo de desarrollo realizamos cambios en el código CSS con mucha frecuencia. Como nuestro código CSS es generado, para ver los cambios en el CSS necesitaríamos lanzar el proceso de build, con el comando que ejecuta el correspondiente script npm.

Resulta muy incómodo tener que lanzar el proceso de build con cada cambio que hagamos para poder ver el nuevo aspecto que tiene nuestra página en el navegador, así que lo ideal es crear un sistema de "watch" que esté pendiende de los cambios en los archivos de origen, para compilarlos de nuevo automáticamente cada vez que se modifican.

Esto se puede configurar de una manera muy sencilla, con el flag --watch en la llamada a PostCSS. Lo ideal es tener un script npm para el build y otro para el watch, lo que nos quedaría más o menos así.

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

Ahora, para lanzar el proceso de watch y realizar cambios automáticamente en el CSS generado ejecutaremos el comando siguiente:

npm run watch

Editar

Plugin de importado de PostCSS

Una de las utilidades más interesantes de PostCSS es la capacidad de hacer imports de distintos archivos de CSS dentro del CSS principal del proyecto. De este modo podemos desarrollar el código CSS de un proyecto en varios archivos pequeños, en lugar de una grande y difícil de mantener.

Para hacer el importado de otros archivos CSS se usa el plugin postcss-import. Se debe de instalar así:

npm install -D postcss-import

Una vez instalado lo podemos incluir en nuestro archivo de configuración postcss.config.js.

module.exports = {
  plugins: [
    require('postcss-import'),
    // otros plugins...
  ]
}

Generalmente lo querrás incluir como primer elemento, para construir un gran archivo CSS con todo el código junto, antes de pasarle las siguientes transformaciones.

Los imports en CSS se realizan con la directiva @import, indicando la ruta donde esta el archivo que deseas importar. Preprocesadores como Sass usan la misma técnica. El código CSS sería más o menos como este:

@import "./componentes/navegador.css";

A la hora de importar otros archivos de código CSS necesitas tener en cuenta:

  • Los imports se deben realizar siempre al principio de los archivos
  • Para organizar tus imports es muy habitual hacer un archivo raíz en el que no tengas CSS, solo los imports de otros archivos.
  • Puedes importar cosas instaladas en node-modules, simplemente usando los nombres de los packages y la ruta del archivo dentro de ese package.

Editar

¿Quieres añadir algo sobre PostCSS?

Crea artículos, recursos o comparte información sobre PostCSS

Crear un bloque

PostCSS

Temas relacionados

Preguntas y respuestas

Se han recibido 0 faqs en PostCSS

Hacer una pregunta