turbopack-css

CSS support for Turbopack: plain .css, CSS Modules (.module.css), and inline-via-JS imports. Uses Lightning CSS under the hood for parsing, transforms, and minification.

Source: turbopack/crates/turbopack-css/src/. The heart is process.rs at 30 KB.

Pipeline

graph LR
    File[.css source] --> Parse[Lightning CSS parser]
    Parse --> Stylesheet
    Stylesheet --> Transform[CSS Modules<br/>+ syntax transforms]
    Transform --> CodeGen[serialize to CSS]
    CodeGen --> Out[CSS chunk + JS module<br/>for class-name imports]

Components

lib.rs

Tiny — the crate's public surface: CssModuleAsset, CssOptions, etc.

asset.rs (12 KB)

CssModuleAsset — the asset type for CSS files. Knows how to:

• Hash itself for caching.
• Walk references (other @import-ed sheets, url(...) references).
• Produce a chunk item.

module_asset.rs (13 KB)

The CSS-Modules variant: assets where each class name becomes a JS export. Adds:

• A unique-per-file class-name prefix (preventing collisions across the bundle).
• A JS sibling module that exports the local-to-prefixed mapping.

process.rs (30 KB)

The transform engine. Handles:

• CSS Modules class-name rewriting.
• @import resolution (turning into module references).
• url(...) rewriting (turning into asset references with cache-busted paths).
• Minification.
• Source map output.

The size reflects the number of CSS quirks the transform has to be correct about.

references/

Typed references for @import, url(), and composes (CSS Modules' inheritance keyword).

chunk/

CSS chunker — emits a .css output and, for CSS Modules, the JS sibling exporting class names.

code_gen.rs, embed.rs, lifetime_util.rs

Small helper files for the transform engine.

CSS Modules

Imports like:

import styles from './foo.module.css';

console.log(styles.button);

Resolve to two assets:

1. The CSS chunk with rewritten class names (button → foo_module__button__abc123).
2. The JS sibling that exports { button: 'foo_module__button__abc123', ... }.

The transform pipeline is data-flow-driven: the JS chunker emits a reference to the JS sibling, which carries a reference to the CSS chunk, which carries a reference to whatever the CSS imports.

Composes

CSS Modules' composes: x from './other.module.css' cross-file class composition is implemented in process.rs. The composed class names get concatenated (button becomes foo__button__abc123 other__x__def456).

Source maps

Lightning CSS's source maps thread through unchanged.

Integration

• Loaded by user JS code via reference type CssReference.
• Composes with turbopack-ecmascript when CSS imports get pulled into JS chunk graphs.
• Lightning CSS handles browser-targeted polyfilling automatically based on the Environment from turbopack-core/src/environment.rs.

Key source files

File	Purpose
turbopack/crates/turbopack-css/src/lib.rs	Public surface
turbopack/crates/turbopack-css/src/asset.rs	CssModuleAsset
turbopack/crates/turbopack-css/src/module_asset.rs	CSS Modules variant
turbopack/crates/turbopack-css/src/process.rs	Transform engine (Lightning CSS)
turbopack/crates/turbopack-css/src/references/	Typed references
turbopack/crates/turbopack-css/src/chunk/	CSS chunker