Importer des feuilles de style à l'aide de scripts de module CSS

Découvrez comment utiliser des scripts de module CSS pour importer des feuilles de style CSS à l'aide de la même syntaxe que les modules JavaScript.

Dan Clark

Grâce à la nouvelle fonctionnalité de scripts de module CSS, vous pouvez charger des feuilles de style CSS avec des instructions import, comme pour les modules JavaScript. Les feuilles de style peuvent ensuite être appliquées aux documents ou aux racines d'ombre de la même manière que les feuilles de style construesibles. Cela peut être plus pratique et plus performant que d'autres méthodes d'importation et d'application du CSS.

Navigateurs pris en charge

Les scripts de module CSS sont disponibles par défaut dans Chrome et Edge à partir de la version 93.

La compatibilité avec Firefox et Safari n'est pas encore disponible. Vous pouvez suivre la progression de l'implémentation sur les pages Bug Gecko et Bug WebKit, respectivement.

Prérequis

Utiliser des scripts de module CSS

Importez un script de module CSS et appliquez-le à un document ou à une racine fantôme comme ceci:

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

L'exportation par défaut d'un script de module CSS est une feuille de style construeuse dont le contenu est celui du fichier importé. Comme toute autre feuille de style pouvant être construite, elle est appliquée aux documents ou aux racines d'ombre à l'aide de adoptedStyleSheets.

Contrairement aux autres méthodes d'application du CSS à partir de JavaScript, il n'est pas nécessaire de créer des éléments <style> ni de s'occuper des chaînes JavaScript de texte CSS.

Les modules CSS présentent également certains des avantages des modules JavaScript.

  • Déduplication : si le même fichier CSS est importé à partir de plusieurs emplacements dans une application, il ne sera toujours extrait, instancié et analysé qu'une seule fois.
  • Ordre d'évaluation cohérent : lorsque le code JavaScript d'importation s'exécute, il peut s'appuyer sur la feuille de style qu'il importe, qui a déjà été récupérée et analysée.
  • Sécurité : les modules sont récupérés avec CORS et utilisent une vérification stricte du type MIME.

Importations d'assertions (pourquoi "assert" ?)

La partie assert { type: 'css' } de l'instruction import est une assertion d'importation. Cette opération est obligatoire. Sans elle, import est traité comme une importation de module JavaScript normale et échouera si le fichier importé possède un type MIME autre que 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".

Feuilles de style importées dynamiquement

Vous pouvez également importer un module CSS à l'aide de l'importation dynamique, avec un deuxième paramètre pour l'assertion d'importation type: 'css' :

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

@import règle n'est pas encore autorisée

Actuellement, les règles @import CSS ne fonctionnent pas dans les feuilles de style construesibles, y compris les scripts de module CSS. Si des règles @import sont présentes dans une feuille de style pouvant être construite, elles seront ignorées.

/* 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>

La prise en charge de @import dans les scripts du module CSS peut être ajoutée à la spécification. Suivez cette discussion sur les spécifications dans le problème GitHub.