Firefox Goes CSS Modules

Firefox 147 just came out, and the flagship developer feature is clearly anchor positioning support, bringing that “to the baseline” as we’re supposed to say these days. That rules, but I’m also very hyped about CSS module scripts. Remember, they are a way of importing a stylesheet in JavaScript, that is, the only decent way of handling CSS in the Shadow DOM.

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

class MyComponent extends HTMLElement {
  constructor() {
    super(); 
    const shadowRoot = this.attachShadow({ mode: 'open' });
    shadowRoot.adoptedStyleSheets = [sheet];
  }
}
Code language: JavaScript (javascript)

For clarity, this is sometimes called “CSS Module Scripts” and the import syntax is called “Import Attributes”.