La definici贸n oficial de PostCSS Preset Env dice:

PostCSS Preset Env le permite convertir CSS moderno en algo que la mayor铆a de los navegadores pueden entender, determinando los polyfills(1) que necesita en funci贸n de sus navegadores de destino o entornos de tiempo de ejecuci贸n, utilizando cssdb(2).

Lo primero que me llam贸 la atenci贸n de la definici贸n es lo de CSS moderno, pero creo que encajar铆a mejor si dijera "Funcionalidades CSS de la especificaci贸n". Espera, 驴eso qu茅 quiere decir?

Pues que podemos utilizar las funcionalidades que se est谩n definiendo en el CSSWG(3) antes de que acaben como un est谩ndar de la W3C(4) y lo tengamos disponible en los navegadores.

驴C贸mo funciona el est谩ndar CSS?

El CSS Working Group es un grupo de personas profesionales de la web, la mayor铆a de ellas empleadas de las grandes marcas que est谩n detr谩s de los navegadores, sistemas operativos y dispositivos, como Apple, Google, Microsoft, Adobe, Mozilla o Amazon, aqu铆 os dejo un enlace a la lista completa de miembros de la CSSWG

El foco de ese grupo de trabajo es estandarizar las funcionalidades de CSS, as铆 como la definici贸n de nuevas. Es aqu铆 donde nos vamos a centrar. Esas nuevas funcionalidades en muchas ocasiones tardan mucho en llegar a los navegadores de los usuarios. S铆, s铆, de los usuarios. Nosotros como freakis de la tecnolog铆a tenemos las 煤ltimas versiones de los navegadores, adem谩s tenemos m谩s de uno para poder validar el correcto funcionamiento de nuestros desarrollos, pero los usuarios suelen tener el navegador instalado por defecto en los dispositivos y muchos de ellos no actualizan el software por miedo a perder configuraciones.

Aqu铆 es donde en muchas ocasiones sentimos una gran frustraci贸n, vemos que aparecen nuevas e impresionantes funcionalidades en las que est谩n trabajando, pero tardan en llegar al usuario.

驴Qu茅 tiene que ver esto con Babel?

De igual forma que para CSS existe el CSSWG, para Javascript existe el TC39(5), donde de forma similar, un grupo de personas debaten y definen las nuevas funcionalidades para el lenguaje de la web.

La adopci贸n de esas nuevas funcionalidades no tienen la misma velocidad de implementaci贸n por parte de los diferentes navegadores, en la tabla compat-table podemos ver una lista del soporte por cada una de las features.

alt Aqu铆 podemos ver la tabla para ES2016+

Para gestionar y versionar las propuestas, el TC39 defini贸 los siguientes estados:

Estado Descripci贸n
stage-0 (Strawman) En este estado se suben ideas del comit茅 TC39 o de alguien registrado como contribuidor. De estas caracter铆sticas, algunas se llegan a implementar y otras s贸n descartadas.
stage-1 (proposal) El "champion" se convierte en el responsable de la propuesta. En este punto ya existe una descripci贸n formal de la idea, descrita en forma de ejemplos, una API, sem谩ntica y algoritmos.
stage-2 (draft) Es una primera versi贸n de lo que se incluir谩 en la especificaci贸n. Normalmente cuando se llega a este punto suele ser segura su inclusi贸n en el est谩ndar. Se necesita tener una descripci贸n usando el lenguaje de ECMAScript. Adem谩s, se requiere dos implementaciones experimentales, pero una de ellas puede ser haciendo uso de un transpilador como Babel.
stage-3 (candidate) La propuesta est谩 casi finalizada y ahora se necesitan las opiniones de los usuarios de las implementaciones para progresar. El texto de la especificaci贸n debe estar completo. Los evaluadores designados por el TC39 deben finalizar la especificaci贸n. Debe haber al menos dos implementaciones funcionales. Los cambios s贸lo se har谩n en respuesta a problemas cr铆ticos que se hayan descubierto por las implementaciones y su uso.
stage-4 (finished) La propuesta est谩 lista para ser incluida en el est谩ndar.

Como podemos ver en la descripci贸n del stage-2, para poder utilizar las nuevas funcionalidades debemos transpilar el c贸digo para que lo pueda entender el navegador. Para ello podemos utilizar Babel, pero hay otros, como Traceur de Google.

Babel

Babel(6) es un transpilador que se encarga de convertir nuestro c贸digo JavaScript, con las nuevas funcionalidades y sintaxis, a un c贸digo que sea capaz de interpretar el navegador.

Para hacer esta transpilaci贸n Babel nos ofrece @babel/preset-env, para poder configurar el soporte de navegador que deseamos para nuestro proyecto.

PostCSS Preset Env

Aqu铆 es donde encontramos la similitud con Babel, PostCSS Preset Env, creado por Jonathan Neal, nos ofrece la opci贸n de trabajar con las nuevas funcionalidades CSS que est谩n en modo borrador en la W3C.

Para hacerlo se basa en cssdb, que es una lista completa de caracter铆sticas CSS y sus posiciones en el proceso de convertirse en est谩ndares web implementados.

Al igual que lo hace Babel, dispone de varios estados:

Estado Descripci贸n
Stage 0: Aspirational
"Esta es una idea loca"
Un borrador no oficial o un borrador de editor defendido por un miembro del W3C Working Group. Debe considerarse altamente inestable y sujeto a cambios. Las caracter铆sticas de la etapa 0 est谩n abiertas a ideas y discusi贸n, pero no pueden considerarse serias.
Stage 1: Experimental
"Esta idea podr铆a no ser una locura"
Un borrador de editor o un borrador de trabajo inicial defendido por un miembro del W3C Working Group. Debe considerarse altamente inestable y sujeto a cambios. Las caracter铆sticas de la etapa 1 se reconocen como un problema real, pero pueden no estar vinculadas a ninguna soluci贸n en particular.
Stage 2: Allowable
"Esta idea no es una locura"
Un borrador de trabajo inicial defendido por un miembro del W3C Working Group. Debe considerarse relativamente inestable y sujeto a cambios. Las caracter铆sticas de la etapa 2 est谩n vinculadas a una forma particular de resolver un problema.
Stage 3: Embraced
"Esta idea se est谩 convirtiendo en parte de la web"
Una recomendaci贸n candidata defendido por un miembro del W3C Working Group, generalmente implementado por al menos 2 proveedores de navegadores reconocidos, posiblemente detr谩s de un flag. Debe considerarse estable y sujeto a pocos cambios. Las caracter铆sticas de la etapa 3 probablemente se convertir谩n en un est谩ndar.
Stage 4: Standardized
"Esta idea es parte de la web"
Una recomendaci贸n defendido por el W3C. Debe ser implementado por todos los proveedores de navegadores reconocidos. Las caracter铆sticas de la etapa 4 s贸n est谩ndares web.

En PostCSS Preset Env actualmente disponemos de 33 propiedades CSS repartidas entre los diferentes estados.

  • Stage 3: 6 propiedades
  • Stage 2: 20 propiedades
  • Stage 1: 6 propiedades
  • Stage 0: 1 propiedades

En la web podemos ver un listado muy detallado de todas las propiedades CSS en desarrollo que tenemos disponible, indicando el estado, un enlace a la especificaci贸n en la W3C, un enlace al plugin PostCSS que se encarga de transpilar nuestro c贸digo y finalmente un ejemplo de c贸digo.

Funci贸n CSS image-set()

Instalaci贸n

Vamos a ver c贸mo podemos instalar PostCSS Preset Env. Como la mayor铆a de herramientas que tenemos hoy en d铆a en el desarrollo frontend, lo tenemos disponible como un paquete de npm. Hay varias maneras de utilizar PostCSS Preset Env, lo podemos integrar con Node, PostCSS CLI, Webpack, Create React App, Gulp, Grunt y recientemente con Rollup. En el fichero INSTALL.md del repositorio oficial podemos ver detalladamente cada una de esas instalaciones.

Para el ejemplo nos vamos a basar en PostCSS CLI.

npm install postcss-preset-env --save-dev

Esto nos instalar谩 el paquete postcss-preset-env en nuestro proyecto, pero ahora necesitamos utilizarlo con PostCSS CLI. Vamos a instalarlo:

npm install postcss-cli --save-dev

Utilizaremos el fichero postes.config.js para configurarlo, esto es lo que tendremos en su interior:

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [postcssPresetEnv(/* pluginOptions */)]
};

En el ejemplo estamos definiendo s贸lo la parte que afecta a postcss-preset-env, pero en este fichero podr铆amos a帽adir otros plugins, como postcss-import para poder importar archivos CSS, ya que import no est谩 en la especificaci贸n.

Ahora vamos a adentrarnos en las opciones de configuraci贸n que tenemos disponibles. En lugar del comentario pluginOptions pasaremos un objeto. Veamos algunos ejemplos.

Configuraci贸n por estado

Si configuramos Stage 0 tenemos disponibles todas las nuevas funcionalidades:

...
    postcssPresetEnv({ stage: 0 })
...

Configuraci贸n por funcionalidad

En este ejemplo adem谩s de definir el estado, en este caso el 3, a帽adimos la clave feature al objeto y le indicamos la funcionalidad que queremos.

...
    postcssPresetEnv({
      /* use stage 3 features + css nesting rules */
      stage: 3,
      features: {
        'nesting-rules': true
      }
    })
...

Con esta configuraci贸n estamos definiendo que queremos las propiedades con estado 3, que s贸n las previas a formar parte del est谩ndar, pero tambi茅n queremos que se a帽ada nesting-rukes, que actualmente pertenece al grupo con estado 1. Esta es una de las cosas que m谩s me gusta de PostCSS Preset Env, podemos configurar y adaptar el entorno de desarrollo en cada proyecto.

Configuraci贸n por navegador

Otra manera que tenemos de configurar las funcionalidades CSS es definiendo el soporte de los navegadores:

...
    postcssPresetEnv({ browsers: 'last 2 versions' })
...

Como indica la propia documentaci贸n en este caso tambi茅n podr铆amos utilizar una clave browserlist en package.json o a帽adir el fichero .browserlist(7).

Configuraciones avanzadas

Hay dos de las opciones de configuraci贸n que me parecen una aut茅ntica maravilla, s贸n importFrom y exportTo.

importFrom nos permite definir, uno o varios archivos, donde tengamos configuradas variables como Custom Media, Custom Properties, Custom Selectors. Y he dicho variables porque podemos importar CSS, Javascript o Json.

Si tenemos un archivo src/themes/sw_crafters/settings.css con el contenido:

@custom-media --small-viewport (max-width: 30em);
@custom-selector :--seo-headings h1, h2, h3;
:root {
  --color-primary: #434343;
  --font-family: Monserrat, HelveticaNeue, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

Podremos importar el archivo de configuraci贸n del tema sw_creafter de la siguiente forma:

...
    postcssPresetEnv({
      stage: 0,
      importFrom: 'src/themes/sw_crafters/settings.css'
    })
...

Al contrario que importFrom, exportTo se encarga de exportar las Custom Media, Custom Properties y Custom Selectors de nuestro proyecto. De igual manera, podemos hacerlo en formato CSS, Javascript y Json, solo tenemos que indicar la ruta, y la extensi贸n del archivo definir谩 el formato de salida.

...
    postcssPresetEnv({
      stage: 0,
      esportTo: 'data/themes/sw_crafters/settings.js'
    })
...

As铆 quedar铆a la exportaci贸n de la configuraci贸n del tema sw_crafters:

module.exports = {
  customMedia: {
    "--small-viewport": "(max-width: 30em)"
  },
  customProperties: {
    "--color-primary": "#434343",
    "--font-family":
      'Monserrat, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif'
  },
  customSelectors: {
    ":--seo-headings": "h1,h2,h3"
  }
};

Estas dos opciones nos van a permitir tener un mayor control de los tokens(8) de nuestro Design System(9).

Recursos

El recurso principal es la web oficial https://preset-env.cssdb.org/

Web PostCSS Preset Env

En ella encontraremos todas las nuevas funcionalidades CSS, un playground donde poder probarlo directamente en nuestro navegador.

PostCSS Playground

A la izquierda podemos escribir nuestro c贸digo CSS, y a la derecha tendremos el c贸digo transpilado para dar soporte a los navegadores actuales seg煤n el estado y soporte de navegadores que hayamos elegido.

En la web tambi茅n encontraremos un enlace a soporte, donde nos lleva a una room(10) de Gitter(11), donde encontraremos soporte de una gran comunidad de PostCSS.

Gitter

Por 煤ltimo tambi茅n tenemos el enlace al repositorio en GitHub.

Ask Me Anything!

Como 煤ltimo recurso os quiero compartir este repositorio ama(12) en GitHub, donde a trav茅s de los issues estoy abierto a resolver cualquier duda de temas relacionados con CSS, PostCSS, SVG, CSS Houdini, Web Animation y Media Optimization. As铆 que si ten茅is alguna duda sobre PostCSS o alguno de los otros temas, estar茅 encantado de ayudar en lo que pueda.

Ask Me Anything!

Conclusiones

Yo apost茅 por PostCSS desde hace tiempo, a煤n a d铆a de hoy veo que hay gente que se confunde al acercarse a este preprocesador. Es normal, hay tanta flexibilidad que puede llevar a confusi贸n. Pero creo que utilizar PostCSS Preset Env, que funciona como un paquete para poder seguir desarrollando en CSS nativo, es una gran puerta de entrada, y podemos ampliar y adaptar nuestro entorno de desarrollo poco a poco.

Os invito a utilizarlo en vuestro nuevo proyecto o integrarlo en el proyecto actual, ya que PostCSS puede convivir sin problema con otros preprocesadores como Sass. Seguro que mucha gente ya lo est谩 haciendo鈥 驴sabes que si est谩s utilizando Autoprefixer, ya est谩s utilizando PostCSS?

Notas

Descrubre nuestro e-book

Si quieres continuar mejorando como desarrollador Javascript te recomendamos nuestro e-book de Clean Code, SOLID y Testing aplicado a JavaScript .

Profundizamos en temas como la deuda t茅cnica y cuales son los tipos, Clean Code desde el punto de vista de mejorar la legibilidad, SOLID para obtener un c贸digo m谩s intuitivo y tolerante a cambios, y Unit testing para obtener proyectos de mayor calidad y seguridad... Adem谩s, puedes empezar a leer los primeros cap铆tulos gratis.

e-book de Clean Code, SOLID y Testing aplicado a JavaScript