PostCSS: Nueva fecha de juego de Sass

Últimamente, PostCSS es la herramienta que está dando vueltas en el front-end del desarrollo web.

PostCSS fue desarrollado por Andrey Sitnik, el creador de Autoprefixer. Es un paquete de Node.js desarrollado como una herramienta para transformar todo su CSS usando JavaScript, logrando así tiempos de compilación mucho más rápidos que otros procesadores.

A pesar de lo que parece implicar su nombre, no es un posprocesador (ni es un preprocesador), sino que es un transpilador para convertir la sintaxis específica de PostCSS (o específica del complemento PostCSS, para ser más precisos) en CSS vainilla.

Dicho esto, esto no significa que PostCSS y otros procesadores CSS no puedan funcionar juntos. De hecho, si eres nuevo en todo el mundo del procesamiento previo y posterior de CSS, usar PostCSS junto con Sass puede ahorrarte muchos dolores de cabeza, de los que hablaremos en breve.

PostCSS no reemplaza a otros procesadores CSS; más bien, mírelo como otra herramienta que puede ser útil cuando sea necesario, otra adición a su conjunto de herramientas.

El uso de PostCSS ha comenzado recientemente a aumentar exponencialmente, y lo utilizan hoy en día algunas de las empresas más grandes de la industria tecnológica, como Twitter, JetBrains y Wikipedia. Su amplia adopción y éxito se debe en gran parte a su modularidad.

Complementos, Complementos, Complementos

PostCSS se trata de complementos.

Le permite elegir los complementos que usará, eliminando las dependencias innecesarias y brindándole una configuración rápida y liviana para trabajar, con las características básicas de otros preprocesadores. Además, le permite crear una estructura más personalizada para su flujo de trabajo mientras lo mantiene eficiente.

A la fecha de redacción de este post, PostCSS cuenta con un repositorio de más de 200 complementos, cada uno de ellos encargado de diferentes tareas. En el repositorio GitHub de PostCSS, los complementos se clasifican por "Resolver problemas globales de CSS", "Usar CSS futuro, hoy", "Mejor legibilidad de CSS", "Imágenes y fuentes", "Linters" y "Otros".

Sin embargo, en el directorio de complementos encontrará una categorización más precisa. Le aconsejo que eche un vistazo allí para tener una mejor idea de las capacidades de algunos de ellos; son bastante amplias y bastante impresionantes.

Probablemente haya oído hablar del complemento PostCSS más popular, Autoprefixer, que es una biblioteca independiente popular. El segundo complemento más popular es CSSNext, un complemento que le permite usar la última sintaxis de CSS actual, como las nuevas propiedades personalizadas de CSS, por ejemplo, sin preocuparse por la compatibilidad del navegador.

Sin embargo, no todos los complementos de PostCSS son tan innovadores. Algunos simplemente le brindan capacidades que probablemente vienen de fábrica con otros procesadores. Tome el parent selector por ejemplo. Con Sass, puede comenzar a usarlo inmediatamente después de instalar Sass. Con PostCSS, debe usar el postcss-nested-ancestors . Lo mismo podría aplicarse a extends o mixins .

Entonces, ¿cuál es la ventaja de usar PostCSS y sus complementos? La respuesta es simple: puedes elegir tus propias batallas. Si cree que la única parte de Sass que alguna vez usará es el parent selector , puede ahorrarse el estrés de implementar algo como una instalación de la biblioteca Sass en su entorno para compilar su CSS y acelerar el proceso usando solo PostCSS y el postcss-nested-ancestors .

Ese es solo un caso de uso de ejemplo para PostCSS, pero una vez que comience a verificarlo usted mismo, sin duda se dará cuenta de muchos otros casos de uso para él.

Uso básico de PostCSS

Primero, cubramos algunos conceptos básicos de PostCSS y veamos cómo se usa normalmente. Si bien PostCSS es extremadamente poderoso cuando se usa con un ejecutor de tareas, como Gulp o Grunt, también se puede usar directamente desde la línea de comando usando postcss-cli.

Consideremos un caso de uso de ejemplo simple. Supongamos que nos gustaría usar el complemento postcss-color-rgba-fallback para agregar un valor HEX alternativo a todos nuestros colores con formato RGBA.

Una vez que hayamos instalado NPM postcss , postcss-cli y postcss-color-rgba-fallback , debemos ejecutar el siguiente comando:

 postcss --use postcss-color-rgba-fallback -o src/css/all.css dist/css/all.css

Con esta instrucción, le estamos diciendo a PostCSS que use el postcss-color-rgba-fallback , procese cualquier CSS que esté dentro de src/css/all.css a dist/css/all.css .

Bien, eso fue fácil. Ahora, veamos un ejemplo más complejo.

Uso de PostCSS junto con Task-runners y Sass

PostCSS se puede incorporar a su flujo de trabajo con bastante facilidad. Como ya se mencionó, se integra perfectamente con ejecutores de tareas como Grunt, Gulp o Webpack, e incluso se puede usar con scripts NPM. Un ejemplo del uso de PostCSS junto con Sass y Gulp es tan simple como el siguiente fragmento de código:

 var gulp = require('gulp'), concatcss = require('gulp-concat-css'), sass = require('gulp-sass'), postcss = require('gulp-postcss'), cssnext = require('postcss-cssnext'); gulp.task('stylesheets', function () { return ( gulp.src('./src/css/**/*.scss') .pipe(sass.sync().on('error', sass.logError)) .pipe(concatcss('all.css')) .pipe(postcss([ cssNext() ])) .pipe(gulp.dest('./dist/css')) ) });

Vamos a deconstruir el ejemplo de código anterior.

Almacena referencias a todos los módulos necesarios (Gulp, Contact CSS, Sass, PostCSS y CSSNext) en una serie de variables.

Luego, registra una nueva tarea de Gulp llamada stylesheets de estilo. Esta tarea busca archivos que están en ./src/css/ con la extensión .scss (independientemente de qué tan profundos estén en la estructura de subdirectorios), Sass los compila y los concatena a todos en un solo archivo all.css .

Una vez que se genera el archivo all.css , se pasa a PostCSS para transpilar todo el código relacionado con PostCSS (y el complemento) al CSS real, y luego el archivo resultante se coloca en ./dist/css .

Bien, configurar PostCSS con un ejecutor de tareas y un preprocesador es genial, pero ¿es eso suficiente para justificar trabajar con PostCSS en primer lugar?

Pongámoslo así: si bien Sass es estable, maduro y tiene una gran comunidad detrás, es posible que deseemos usar PostCSS para complementos como Autoprefixer, por ejemplo. Sí, podríamos usar la biblioteca Autoprefixer independiente, pero las ventajas de usar Autoprefixer como un complemento de PostCSS es la posibilidad de agregar más complementos al flujo de trabajo más adelante y evitar dependencias extrañas en una gran cantidad de bibliotecas de JavaScript.

Este enfoque también nos permite usar propiedades sin prefijo y prefijarlas en función de los valores obtenidos de las API, como el de Can I Use, algo que difícilmente se puede lograr solo con Sass. Esto es bastante útil si estamos tratando de evitar combinaciones complejas que podrían no ser la mejor manera de prefijar el código.

La forma más común de integrar PostCSS en su flujo de trabajo actual, si ya usa Sass, es pasar la salida compilada de su archivo .sass o .scss a través de PostCSS y sus complementos. Esto generará otro archivo CSS que tiene la salida de Sass y PostCSS.

Si está utilizando un ejecutor de tareas, usar PostCSS es tan fácil como agregarlo a la canalización de tareas que tiene actualmente, justo después de compilar su archivo .sass o .scss (o los archivos de su preprocesador de elección).

PostCSS funciona bien con otros y puede ser un alivio para algunos puntos débiles importantes que experimentamos todos los días como desarrolladores.

Echemos un vistazo a otro ejemplo de PostCSS (y un par de complementos como CSSNext y Autoprefixer) y Sass trabajando juntos. Podrías tener el siguiente código:

 :root { $sass-variable: #000; --custom-property: #fff; } body { background: $sass-variable; color: var(--custom-property); &:hover { transform: scale(.75); } }

Este fragmento de código tiene sintaxis estándar de CSS y Sass. Las propiedades personalizadas, al día de la redacción de este artículo, aún se encuentran en estado de recomendación de candidato (CR), y aquí es donde entra en acción el complemento CSSNext para PostCSS.

Este complemento se encargará de convertir cosas como propiedades personalizadas en el CSS de hoy. Algo similar sucederá con la propiedad de transform , que será prefijada automáticamente por el complemento Autoprefixer. El código escrito anteriormente dará como resultado algo como:

 body { background: #000; color: #fff; } body:hover { -webkit-transform: scale(.75); transform: scale(.75); }

Complementos de creación para PostCSS

Como se mencionó anteriormente, una característica atractiva de PostCSS es el nivel de personalización que permite. Gracias a su apertura, crear un complemento personalizado propio para PostCSS para cubrir sus necesidades particulares es una tarea bastante simple si se siente cómodo escribiendo JavaScript.

La gente de PostCSS tiene una lista bastante sólida para comenzar, y si está interesado en desarrollar un complemento, consulte sus artículos y guías recomendados. Si siente que necesita preguntar algo o discutir algo, Gitter es el mejor lugar para comenzar.

PostCSS tiene su API con una base bastante activa de seguidores en Twitter. Junto con otras ventajas de la comunidad mencionadas anteriormente en esta publicación, esto es lo que hace que el proceso de creación de complementos sea tan divertido y una actividad tan colaborativa.

Entonces, para crear un complemento PostCSS, necesitamos crear un módulo Node.js. (Por lo general, las carpetas de complementos de PostCSS en el directorio node_modules/ están precedidas por un prefijo como "postcss-", que es para hacer explícito que son módulos que dependen de PostCSS).

Para empezar, en el archivo index.js del nuevo módulo del complemento, debemos incluir el siguiente código, que será el envoltorio del código de procesamiento del complemento:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { // Rest of code } });

Llamamos al complemento replacecolors . El complemento buscará una palabra clave deepBlackText y la reemplazará con el valor de color #2e2e2e HEX:

 var postcss = require('postcss'); module.exports = postcss.plugin('replacecolors', function replacecolors() { return function(css) { css.walkRules(function(rule) { rule.walkDecls(function(decl, i) { var declaration = decl.value; if (declaration.indexOf('deepBlackText') !== -1) { declaration = 'color: #2e2e2e;'; } }); }); } });

El fragmento anterior acaba de hacer lo siguiente:

1. Usando walkRules() a través de todas las reglas CSS que están en el archivo .css actual que estamos revisando.
2. Usando walkDecls() a través de todas las declaraciones CSS que están dentro del archivo .css actual.
3. Luego almacenó la declaración dentro de la variable de declaración y verificó si la cadena deepBlackText estaba en ella. Si lo era, reemplazó toda la declaración por la siguiente declaración CSS: color: #2e2e2e; .

Una vez que el complemento esté listo, podemos usarlo así directamente desde la línea de comando:

 postcss --use postcss-replacecolors -o src/css/all.css dist/css/all.css

O, por ejemplo, cargado en un Guplfile como este:

 var replacecolors = require('postcss-replacecolors');

¿Debería deshacerme de mi procesador CSS actual para usar PostCSS?

Bueno, eso depende de lo que estés buscando.

Es común ver que tanto Sass como PostCSS se usan al mismo tiempo, ya que es más fácil para los recién llegados trabajar con algunas de las herramientas que ofrecen los pre/postprocesadores, junto con las características de los complementos de PostCSS. Su uso en paralelo también puede evitar la reconstrucción de un flujo de trabajo predefinido con herramientas relativamente nuevas y probablemente desconocidas, al tiempo que proporciona una forma de mantener las implementaciones actuales que dependen del procesador (como Sass mixins , extends , el selector principal, los selectores de marcadores de posición, y así).

Dale una oportunidad a PostCSS

PostCSS es lo nuevo (bueno, algo así) en el mundo del desarrollo front-end. Ha sido ampliamente adoptado porque no es un pre/postprocesador per se, y es lo suficientemente flexible para adaptarse al entorno en el que se inserta.

Gran parte del poder de PostCSS reside en sus complementos. Si lo que busca es modularidad, flexibilidad y diversidad, entonces esta es la herramienta adecuada para el trabajo.

Si está utilizando ejecutores de tareas o paquetes, lo más probable es que agregar PostCSS a su flujo actual sea pan comido. Consulte la guía de instalación y uso, y probablemente encontrará una manera fácil de integrarlo con las herramientas que ya está utilizando.

Muchos desarrolladores dicen que llegó para quedarse, al menos en el futuro previsible. PostCSS puede tener un gran impacto en la forma en que estructuramos nuestro CSS actual, y eso podría conducir potencialmente a una adopción mucho mayor de estándares en la comunidad de desarrollo web front-end.