Módulos CSS (Los Nativos) | Programar Plus

En realidad, se denominan “Secuencias de comandos del módulo CSS” y son una característica nativa del navegador, a diferencia del popular proyecto de código abierto que esencialmente crea estilos de alcance mediante la creación de identificadores de nombre de clase únicos tanto en HTML como en CSS.

Los módulos CSS nativos son parte de los módulos ES (muy parecidos a los módulos JSON que cubrimos recientemente):

// Regular ES Modules
import React from "https://cdn.skypack.dev/[email protected]";

// Newfangled JSON Modules
import configData from './config-data.json' assert { type: 'json' };

// Newfangled CSS Modules
import styleSheet from "./styles.css" assert { type: "css" };

Vi esto por primera vez en el tweet de Justin:

Esto es una cosa de Chrome por ahora. Enlaces relevantes:

  • Intención de Implementar: Módulos CSS V1
  • Estado de la plataforma Chrome: secuencias de comandos del módulo CSS
  • GitHub/WhatWG: Introducir el script del módulo CSS

Mientras escribo, solo funciona en Chrome Canary con las características de la plataforma web experimental activadas. Si su pregunta es, ¿cuándo puedo usar esto en proyectos de producción con una amplia variedad de usuarios que usen el navegador que deseen? Yo diría: no tengo ni idea. Probablemente años de distancia. Tal vez nunca. Pero sigue siendo interesante comprobarlo. Tal vez el soporte se mueva rápido. Tal vez trabaje en un proyecto de Electron o algo en lo que pueda contar con características específicas del navegador.

Esto parece una extensión de las Hojas de estilo constructivas, que también son solo para Chrome, por lo que los navegadores que están “atrasados” en esto tendrían que comenzar allí.

Le di un giro a la idea de Justin aquí:

Si registro lo que obtengo de la importación de Módulos CSS, es un CSSStyleSheet:

Mostrando un árbol de estilos con nodos para reglas CSS, medios, reglas y prototipo.

Si realmente vas a usar los estilos… eso depende de ti. La idea de Justin básicamente aplica el estilo como una sola línea porque da la casualidad de que lit-html admite CSSStyleSheet (Esos documentos no lo aclaran, pero imagino que lo harán en algún momento). Para los componentes web nativos, no es muy diferente: lo importas, obtienes el CSSStyleSheet, luego aplíquelo al componente web como:

this.shadowRoot.adoptedStyleSheets = [myCSSStyleSheet];

Creo que el punto de todo esto es:

  • necesitábamos una forma de importar una hoja de estilo en JavaScript y esta es básicamente la primera grieta realmente clara que conozco,
  • ahora tenemos acceso programático para manipular el CSS antes de usarlo, si queremos, y
  • se ve particularmente bien para el uso de componentes web, pero es genérico. Haz lo que quieras con la hoja de estilo una vez que la tengas.

(Visited 5 times, 1 visits today)