CSSPlugin

Scoped Selectors

CSS is transformed through the native CSS plugin. Class selectors become scoped class names for Ruby and Haml imports, and tag selectors are exposed through __-prefixed keys.

article {
  display: grid;
}

.featured {
  border-color: var(--color-accent);
}

Ruby and Haml imports receive a class-name map:

ClassNames = import("./Card.css")
ClassNames[:featured]
ClassNames[:__article]

CSS Imports

CSS imported from Ruby or Haml returns a class map. CSS imported from CSS records stylesheet dependencies and returns transformed asset paths.

The same stylesheet should appear once in a rendered document. Routed frameworks can use route-scoped asset traversal so root and layout CSS appear before page and component CSS.

CSS imported from JavaScript uses a separate graph module and emits an unscoped stylesheet asset for native browser CSS module imports:

import styles from "./Panel.css";

That import is rewritten to the emitted asset with with { type: "css" }, so the browser returns a CSSStyleSheet that custom elements can assign to shadowRoot.adoptedStyleSheets.

Assets

url(...) references are resolved through the graph and emitted as assets. External CSS imports can be owned by other plugins, such as GoogleFontsPlugin.

Source Maps And Minification

CSS assets emit source maps in development by default. Build mode disables source map assets by default and always minifies CSS output. Development output is readable unless the plugin is configured with minify: true.