PostCSS: Qué es y cómo se utiliza

En este tutorial vamos a ver qué es y cómo se utiliza PostCSS, una herramienta que te ayuda a escribir código CSS según los estándares actuales.

Qué es PostCSS

PostCSS es una herramienta que permite a los desarrolladores crear y configurar tanto preprocesadores como postprocesadores de código CSS, que reciben el nombre de plugins. La cantidad de plugins de PostCSS existentes es enorme, proporcionando una innumerable cantidad de funcionalidades a los desarrolladores.

Los plugins de PostCSS se pueden ejecutar desde la terminal de comandos, aunque en la mayor parte de las ocasiones suelen ejecutarse en tiempo de compilación desde task runners como Gulp o Grunt, que permiten automatizar la ejecución de ciertas tareas, de modo que no tengas que invocarlas manualmente.

La arquitectura de PostCSS es ideal para todas las tareas relacionadas con el proceso de las hojas de estilo CSS. Es importante resaltar que PostCSS no realiza ningún proceso sobre el código CSS, sino que son los plugins creados con esta herramienta los que se encargan de dichas tareas.

La popularidad de PostCSS se debe a todas las mejoras que ofrece en lo referente a la creación de código CSS. A diferencia de otros preprocesadores CSS como Sass o Less, PostCSS tiene la ventaja de ser totalmente configurable, seleccionando o descartando aquellas funcionalidades que tú decidas.

Cómo instalar PostCSS

Para instalar PostCSS debes tener ciertos conocimientos básicos acerca de la línea de comandos. También necesitarás tener los gestores de paquetes npm o Yarn instalados en tu sistema.

Instalación global de PostCSS

Vamos a instalar PostCSS globalmente.

• Para instalar PostCSS globalmente con npm, introduce este comando:

  npm install -g postcss-cli

• Para instalar PostCSS globalmente con Yarn, introduce este comando:

  yarn global add postcss-cli

Una vez haya finalizado la instalación, ya podrás ejecutar el comando postcss desde la terminal de comandos.

Instalación local de PostCSS

También puedes instalar PostCSS localmente para cada proyecto. Para ello, debes acceder al directorio raíz de tu proyecto y ejecutar uno de los siguientes comandos:

• Para instalar PostCSS localmente con npm, introduce este comando:

  npm install -D postcss postcss-cli

• Para instalar PostCSS localmente con Yarn, introduce este comando:

  yarn add --dev package-name

En general, cuando crees un proyecto, querrás instalar PostCSS de forma local, de modo que cada proyecto pueda tener su propia configuración.

Cómo utilizar PostCSS

En general, usarás los plugins de PostCSS para procesar tus hojas de estilo. Para usar un plugin de PostCSS debes usar el comando postcss --use. En el siguiente ejemplo ejecutamos el plugin autoprefixer sobre los archivos del directorio css/ que tengan la extensión .css, dando como resultado el archivo resultado.css:

postcss --use autoprefixer -o resultado.css css/*.css

Si quieres configurar PostCSS para un proyecto en particular, tendrás que crear el archivo postcss.config.js en el directorio raíz del proyecto y agregar tanto los parsers como la lista de plugins que quieres utilizar. Vamos a ver un ejemplo:

module.exports = {
  parser: 'sugarss',
  plugins: [
    require('postcss-import')({ ...options }),
    require('postcss-url')({ url: 'copy', useHash: true }),
  ],
}

Un parser es una aplicación que permita transpilar el código escrito en una sintaxis a otra sintaxis. Por ejemplo, el parser sugarss de nuestro ejemplo nos permite convertir el código escrito mediante la sintaxis sugarss en código que use la sintaxis CSS, que es la que un navegador web entiende.

Tal y como ves en el ejemplo, hemos agregado un array con la lista de plugins a utilizar. Puedes instalar los plugins globalmente o localmente.

• Para instalar plugins de PostCSS usando npm, ejecuta el siguiente comando, reemplazando nombre_plugin por el nombre del plugin que quieras instalar:

  npm install -D nombre_plugin

  Puedes instalar varios plugins con un mismo comando separándolos por un espacio. En el siguiente ejemplo, instalamos algunos de los plugins más utilizados usando npm:

  npm install -D autoprefixer postcss-nested postcss-cli

• Para instalar plugins de PostCSS usando Yarn, ejecuta el siguiente comando, reemplazando nombre_plugin por el nombre del plugin que quieras instalar:

  yarn add --dev nombre_plugin

  Puedes instalar varios plugins con un mismo comando separándolos por un espacio. En en este otro ejemplo instalamos algunos de los plugins más utilizados usando yarn:

  yarn add --dev autoprefixer postcss-nested postcss-cli

Una vez hayas instalado un plugin, ya podrás comenzar a utilizarlo. A continuación vamos  ver cuáles son los plugins y los parsers de PostCSS más utilizados.

Plugins de PostCSS

PostCSS dispone de una gran cantidad de plugins. A continuación tienes una lista con los más utilizados:

• Autoprefixer: Autoprefixer analiza tu código CSS y determina si se deben aplicar prefijos propietarios o vendor prefixes, que son los prefijos como -webkit, -moz, -o o -ms que se anteponen a los nombres de algunas propiedades de forma que el navegador sea capaz de reconocer ciertas características experimentales que todavía no forman parte de la especificación CSS. De este modo, no te tendrás que preocupar de incluir los prefijos para todos y cada uno de los navegadores existentes. Tampoco serán un problema aquellos prefijos que se hayan quedado obsoletos. A continuación puedes ver un ejemplo:

  a {
    display: flex;
  }

  La propiedad anterior se compilará en las siguientes propiedades tras usar autoprefixer:

  a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  Puedes encontrar más información de autoprefixer aquí.

• Cssnext: Te permite usar las funcionalidades más modernas de CSS, que serán transpiladas o traducidas a reglas que todos los navegadores puedan entender. Este plugin es lo equivalente en CSS a Babel en JavaScript. Cssnext agregará los prefijos adecuados usando autoprefixer, por lo que ya no tendrás que utilizar este último plugin. Permite utilizar variables CSS y también acepta el código CSS anidado del mismo modo que en Sass. Puedes encontrar más información de cssnext aquí.
• CSS Modules: Este plugin te permite usar módulos CSS, que no son parte de la especificación de CSS. Permiten agregar selectores con ámbito (scope). Puedes encontrar más información de CSS Modules aquí.
• csslint: Este plugin te permite corregir tanto los errores como la presentación del código CSS; estandarizándolo y haciendo que sea más eficiente. Esto se consigue por medio de la herramienta stylelint.
• cssnano: Sirve para minificar el código CSS, optimizándolo para que sea más eficiente y ocupe menos espacio, algo muy importante en producción.
• PreCSS: Proporciona muchas de las funcionalidades que se incluyen con Sass, siendo lo más parecido a una alternativa real a Sass.

Puedes encontrar la lista completa de plugins de PostCSS aquí.

Parsers de PostCSS

Estos son los parsers de CSS más utilizados.

• sugars: Una sintaxis sin llaves que separa sus estructuras en base a la sangría o indentado del código. Más información aquí.
• postcss-syntax: Permite cambiar la sintaxis automáticamente en base a la extensión de los archivos. Más información aquí.
• postcss-html: Permite analizar los estilos de las etiquetas <style> de HTML. Más información aquí.
• postcss-markdown: Permite analizar los estilos de los bloques de código de los archivos Makdown. Más información aquí.
• postcss-jsx: Permite analizar el código CSS incluido en los literales de las plantillas JSX. Más información aquí.
• postcss-scss: Permite analizar el código CSS, aunque no se compilará el código SCSS en CSS.
• postcss-sass: Permite analizar el código Sass, aunque no se compilará el código Sass en CSS.
• postcss-less: Permite analizar el código Less, aunque no se compilará el código Less en CSS.
• postcss-less-engine: Permite analizar el código Less, compilando el código Less en CSS mediante Less.js.
• postcss-js: Permite usar estilos en JavaScript, aplicar estilos en línea en React o usar Radium o JSS.
• postcss-safe-parser: Sirve para buscar y arreglar errores de sintaxis CSS.
• midas: Se utiliza para convertir cadenas de código CSS en HTML.

Puedes encontrar una lista con más parsers de PostCSS aquí.

PostCSS vs Sass vs Less

La mayor ventaja de PostCSS con respecto a Saas o Less es que PostCSS te permite configurar por completo el resultado obtenido, escogiendo las herramientas que prefieres utilizar. Sass o Less sería lo equivalente a una buena película, mientras que con PostCSS tú eres el guionista de la película. Sass y Less incluyen un montón de funcionalidades que podrás o no utilizar, mientras que si usas PostCSS solamente incluirás aquellas que tú decidas.

Por otro lado, siempre puedes usar otras herramientas junto con PostCSS. Nada te impide usar Sass junto con ciertas funcionaldiades de PostCSS para realizar tareas adicionales que Sass no es capaz de realizar, como agregar prefijos o realizar comprobacione (linting) en el código.

Más información

Si quieres, puedes consultar la web oficial de PostCSS para encontrar más información de esta herramienta, o también su repositorio de Plugins.

---