Usa secuencias de comandos de módulos CSS para importar hojas de estilo

Aprende a usar secuencias de comandos de módulos de CSS para importar hojas de estilo de 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 de CSS con declaraciones import, al igual que los módulos de JavaScript. Luego, las hojas de estilo se pueden aplicar a documentos o raíces de sombra de la misma manera que las hojas de estilo construibles. Esto puede ser más conveniente y tener un mejor rendimiento que otras formas de importar y aplicar CSS.

Navegadores compatibles

Las secuencias de comandos de módulos de 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. El progreso de la implementación se puede seguir en el error de Gecko y el error de WebKit, respectivamente.

Requisitos previos

Usa secuencias de comandos de módulos de CSS

Importa una secuencia de comandos de módulo de CSS y aplícala a un documento o a una raíz de shadow 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 una hoja de estilo construible cuyo contenido es el del archivo importado. Al igual que cualquier otra hoja de estilo construible, se aplica a documentos o raíces de sombra con adoptedStyleSheets.

A diferencia de otras formas de aplicar CSS desde JavaScript, no es necesario crear elementos <style> ni interferir con las cadenas de JavaScript del texto de 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 el mismo archivo CSS se importa desde varias ubicaciones en una aplicación, solo se recuperará, se creará una instancia y se analizará una sola vez.
  • Orden de evaluación coherente: Cuando se ejecuta el JavaScript de importación, puede depender de la hoja de estilo que importa, ya que se recuperó y analizó.
  • Seguridad: Los módulos se recuperan con CORS y usan una verificación estricta de tipos de MIME.

Importar aserciones (¿qué pasa con 'assert'?)

La parte assert { type: 'css' } de la sentencia import es una aserción de importación. Esto es obligatorio; sin él, el import se trata como una importación normal de un módulo de JavaScript y fallará si el archivo importado tiene un tipo de 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 de CSS con la importación dinámica, con un segundo parámetro nuevo 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 de @import

Actualmente, las reglas @import de CSS no funcionan en las hojas de estilo construibles, incluidas las secuencias de comandos de módulos de CSS. Si hay reglas @import en una hoja de estilo construible, se ignorarán.

/* 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 de CSS a la especificación. Sigue esta discusión sobre la especificación en el problema de GitHub.