CSS Module Scripts are an extension of the ES Script Modules system that allows web developers to load CSS into a component definition in a manner that interacts seamlessly with other module types: import styleSheet from "./styles.css" assert { type: "css" };

Motivation

Solutions for including CSS in component definitions are lacking. Current practices all have one or more of the following rough edges: 1. Side effects like appending <style> elements to the document. If this is done in the top-level scope of the document then it breaks shadow root style scoping. If it is done inside a shadow root then each individual instance of the component must include its own <style> element in its shadow root instance. 2. Inlined CSS text as a string in JavaScript. This is not optimally performant (it's processed by both the JS and CSS parsers) and is a poor developer experience. 3. Dynamically fetch()ing CSS is generally not statically analyzable and requires careful dependency management by the developer for complex applications. CSS module scripts solves these issues by extending the ES modules infrastructure to allow importing a CSSStyleSheet object from a CSS file, which can then be added to the document or a shadowRoot via the adoptedStyleSheets array.

Documentation

Specification

Public discussion

Status in Chromium

Blink>HTML>Script


In developer trial (Behind a flag) (tracking bug)

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

  • No signal
  • Positive
  • No signal
  • Positive

Owners

Intent to Prototype url

Intent to Prototype thread

Search tags

css, module, import,

Last updated on 2021-07-14