Uso de secuencias de comandos del módulo CSS para importar hojas de estilo

Aprende a usar secuencias de comandos de módulos CSS para importar hojas de estilo CSS con la misma sintaxis que los módulos de JavaScript.

Dan Clark

Con la nueva función de secuencias de comandos de módulos de CSS, puedes cargar hojas de estilo CSS con sentencias import, al igual que los módulos de JavaScript. Luego, las hojas de estilo se pueden aplicar a documentos o raíces de sombras de la misma manera que las hojas de estilo componibles. Esto puede ser más conveniente y más eficiente que otras formas de importar y aplicar CSS.

Navegadores compatibles

Las secuencias de comandos de módulos CSS están disponibles de forma predeterminada en Chrome y Edge en la versión 93.

La compatibilidad con Firefox y Safari aún no está disponible. Se puede hacer un seguimiento del progreso de la implementación en los errores de Gecko y los errores de WebKit, respectivamente.

Requisitos previos

Usa secuencias de comandos de módulos CSS

Importa una secuencia de comandos de módulo CSS y aplícala a un documento o a una raíz de sombra de la siguiente manera:

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

La exportación predeterminada de una secuencia de comandos de módulo CSS es un hoja de estilo componible cuyo contenido es el del archivo importado. Al igual que cualquier otro diseño de página componible, se aplica a los documentos o a las raíces de sombra con adoptedStyleSheets.

A diferencia de otras formas de aplicar CSS desde JavaScript, no es necesario crear elementos <style> ni desordenar las cadenas de JavaScript de texto CSS.

Los módulos de CSS también tienen algunos de los mismos beneficios que los módulos de JavaScript.

  • Anulación de duplicación: Si se importa el mismo archivo CSS desde varios lugares de una aplicación, solo se recuperará, creará una instancia y analizará una vez.
  • Orden de evaluación coherente: Cuando se ejecuta el código JavaScript de importación, puede depender de que el diseño de la página que importa ya se haya recuperado y analizado.
  • Seguridad: Los módulos se recuperan con CORS y usan una verificación estricta de tipos de MIME.

Aserciones de importación (¿qué sucede con “assert”?)

La parte assert { type: 'css' } de la sentencia import es una afirmación de importación. Esto es obligatorio. Sin él, import se trata como una importación normal de módulo de JavaScript y fallará si el archivo importado tiene un tipo MIME que no es de JavaScript.

import sheet from './styles.css'; // Failed to load module script:
                                  // Expected a JavaScript module
                                  // script but the server responded
                                  // with a MIME type of "text/css".

Hojas de estilo importadas de forma dinámica

También puedes importar un módulo CSS con la importación dinámica, con un nuevo segundo parámetro para la aserción de importación type: 'css':

const cssModule = await import('./style.css', {
  assert: { type: 'css' }
});
document.adoptedStyleSheets = [cssModule.default];

Aún no se permiten las reglas @import

Actualmente, las reglas @import de CSS no funcionan en los diseños de página componibles, incluidas las secuencias de comandos de módulos de CSS. Si las reglas @import están presentes en un hoja de estilo componible, se ignorarán esas reglas.

/* atImported.css */
div {
    background-color: blue;
}

/* styles.css */
@import url('./atImported.css'); /* Ignored in CSS module */
div {
    border: 1em solid green;
}

<!-- index.html -->
<script type="module">
    import styles from './styles.css' assert { type: "css" };
    document.adoptedStyleSheets = [styles];
</script>
<div>This div will have a green border but no background color.</div>

Es posible que se agregue compatibilidad con @import en las secuencias de comandos de módulos CSS a la especificación. Realiza un seguimiento de esta discusión sobre las especificaciones en el problema de GitHub.