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.
Overview
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
javascript.statements.import.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
Powered by web-features