Limited support Useful in toolchains and component systems that want explicit CSS module loading semantics.

CSS import attributes

CSS module imports let JavaScript import CSS through the module system with explicit type information. This brings styling assets into the same dependency graph as other modules.

ModulesCSSStyling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
import attributes type css
123
123
147
123
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

JAVASCRIPT 
import sheet from './styles.css' with { type: 'css' };

document.adoptedStyleSheets = [sheet];
// Can also be used in the Shadow DOM
shadowRoot.adoptedStyleSheets = [sheet];

Use cases

  • Component-scoped styling

    Load CSS as part of a module-driven component boundary rather than through separate global conventions.

  • Typed asset imports

    Keep import intent explicit when a build pipeline distinguishes CSS modules from other assets.

Cautions

  • This depends on runtime and tooling support, so keep the expected import contract well documented.
  • Importing CSS through JavaScript changes ownership boundaries and can complicate styling order if used carelessly.

Accessibility

  • Module-based styling should still preserve focus styles, contrast, and reduced-motion behavior.
  • Clear styling ownership can help teams maintain accessible defaults more consistently.

Related links