Using CSS Module Scripts to import style sheets

Learn how to use CSS module scripts to import CSS style sheets the usage of the identical syntax as JavaScript modules.

With the new CSS module scripts feature, you can load CSS fashion sheets with import statements, simply like JavaScript modules. The fashion sheets can then be utilized to archives or shadow roots in the equal manner as construct able style sheets. This can be extra handy and greater perform ant than different methods of importing and making use of CSS.

Browser Support #

CSS module scripts are available by default in Chrome and Edge in version 93.

Support in Firefox and Safari is not yet available. Implementation progress can be tracked at the Gecko bug and WebKit bug, respectively.

Prerequisites #

  • Familiarity with JavaScript modules.
  • Familiarity with constructable stylesheets.

Using CSS module scripts #

Import a CSS module script and apply it to a document or a shadow root like this:

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

The default export of a CSS module script is a constructable stylesheet whose contents are those of the imported file. Like any other constructable stylesheet, it is applied to documents or shadow roots using adoptedStyleSheets.

Unlike other ways of applying CSS from JavaScript, there is no need to create <style> elements or mess with JavaScript strings of CSS text.

CSS modules also have some of the same benefits as JavaScript modules.

  • Deduplication: if the same CSS file is imported from multiple places in an application, it will still only be fetched, instantiated, and parsed a single time.
  • Consistent order of evaluation: when the importing JavaScript is running, it can rely on the stylesheet it imports having already been fetched and parsed.
  • Security: modules are fetched with CORS and use strict MIME-type checking.

Import Assertions (what’s with the ‘assert‘?) #

The assert { type: 'css' } part of the import statement is an import assertion. This is required; without it, the import is treated as a normal JavaScript module import, and will fail if the imported file has a non-JavaScript MIME type.

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".

Dynamically imported stylesheets #

You can also import a CSS module using dynamic import, with a new second parameter for the type: 'css' import assertion:

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

Gotchas!Note that it’s cssModule.default (not cssModule itself) that is added to adoptedStyleSheets. This is because the object returned from dynamic import() is a module namespace object. The CSSStyleSheet is the default export of the module, so it’s accessed at cssModule.default.

@import rules not yet allowed #

Currently CSS @import rules don’t work in constructable stylesheets, including CSS module scripts. If @import rules are present in a constructable stylesheet, those rules will be ignored.

/* 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];
<div>This div will have a green border but no background color.</div>

Support for @import in CSS module scripts may be added to the specification. Track this specification discussion in the GitHub issue.

Leave a Comment

Your email address will not be published.

eskort bodrum - adana eskort bayan - eskort - eskort adana - adana eskort