CSS module scripts: `import` stylesheets like JavaScript modules

This post has been republished via RSS; it originally appeared at: Windows Blog.

Microsoft and Google have collaborated to bring support for CSS module scripts to Chromium, and they will be available starting in Microsoft Edge and Chrome version 93. The new CSS module scripts feature can be used to load CSS style sheets with import statements just like JavaScript modules. The imported sheets are constructable stylesheets that can be directly applied to documents or shadow roots like this:
import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];
Loading a stylesheet without needing to create a style or link element can be more convenient and even more performant than other ways of importing and applying CSS from JavaScript. CSS module scripts will be available starting in Microsoft Edge and Chrome version 93. Read more about the feature over at web.dev: Using CSS Module Scripts to import stylesheets.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.