CSS module scripts: `import` stylesheets like JavaScript modules

CSS module scripts: `import` stylesheets like JavaScript modules

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.
Source: CSS module scripts: `import` stylesheets like JavaScript modules