Utiliser des scripts de module CSS pour importer des feuilles de style

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

La nouvelle fonctionnalité de scripts de module CSS vous permet de charger des feuilles de style CSS avec des instructions import, tout comme les modules JavaScript. Les feuilles de style peuvent ensuite être appliquées aux documents ou aux racines fantômes de la même manière que les feuilles de style constructibles. Cette méthode peut être plus pratique et plus performante que les autres méthodes d'importation et d'application de CSS.

Prise en charge des navigateurs

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. La progression de l'implémentation peut être suivie respectivement dans le bug Gecko et le bug WebKit.

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 suit :

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 constructible dont le contenu est celui du fichier importé. Comme toute autre feuille de style constructible, elle est appliquée aux documents ou aux racines fantômes à l'aide de adoptedStyleSheets.

Contrairement à d'autres méthodes d'application de CSS à partir de JavaScript, il n'est pas nécessaire de créer des éléments <style> ni de manipuler 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é depuis plusieurs emplacements dans une application, il ne sera récupéré, instancié et analysé qu'une seule fois.
  • Ordre d'évaluation cohérent : lorsque le code JavaScript d'importation est en cours d'exécution, il peut s'appuyer sur la feuille de style qu'il importe, car elle 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.

Assertions d'importation (à quoi sert assert ?)

La partie assert { type: 'css' } de l'instruction import est une assertion d'importation. Cette étape 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 non 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 nouveau 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ègles pas encore autorisées

Actuellement, les règles CSS @import ne fonctionnent pas dans les feuilles de style constructibles, y compris les scripts de module CSS. Si des règles @import sont présentes dans une feuille de style constructible, 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 de module CSS peut être ajoutée à la spécification. Suivez cette discussion sur les spécifications dans le problème GitHub.