Skip to content

css: parse composes as CSS modules syntax only in a CSS module - #45961

Closed
robobun wants to merge 4 commits into
mainfrom
robobun/c888b159/css-composes-plain-stylesheet
Closed

robobun wants to merge 4 commits into
mainfrom
robobun/c888b159/css-composes-plain-stylesheet

Conversation

@robobun

@robobun robobun commented Oct 18, 2026 •

Copy link
Copy Markdown
Collaborator

Problem

  • In a plain stylesheet (not a CSS module), .k { composes: g from "./g.css" } makes bun build inline g.css (Bundled 2 modules). A missing file fails: Could not resolve: "./missing-dir/x.css".
  • composes: 12px fails with error: Invalid declaration. --no-bundle fails with error: Unexpected token: url(./g.css) parsing.
  • The PropertyId::Composes arm of Property::parse (src/css/properties/properties_generated.rs:3687) runs in every stylesheet and creates an import record.

Fix

  • The arm runs only with the CSS modules parser flag, like lightningcss. Otherwise the value is a token list: printed as written, no import record.
  • Three tests it makes redundant are gone: two in StyleRule::to_css_base, one in parse_declaration_impl.
  • Verified: test/bundler/esbuild/css.test.ts (10 new fail on main), test/js/bun/css/css.test.ts (4 new fail). 27 CSS module fixtures: byte-identical output.
  • Self-reviewed: 19 concerns raised, 15 addressed. Not taken: bare :global (open in css: only reject bare :global / :local pseudo-classes in CSS modules #38534), a refactor with no output change, a test that passes on main, fewer tests.

Background

  • In a CSS module (*.module.css), composes: a from "./b.module.css" is an import record: the bundler loads that file.
  • The guard reads input.flags, the file's mode: options is a default inside @keyframes.
  • Considered a bundler gate for plain-file composes records: parse errors stay.

Downsides

  • A plain stylesheet no longer bundles the file its composes ... from names. That includes a.module.scss that a plugin loads as css.
  • bun pm diff on main reports a composes target as a new import. 1.4.2 and this branch do not.
  • Cost: .text -256 B. composes in a CSS module: +2 instructions in Property::parse, -12.9 in total. Other declarations: +0.
Notes

Report. There is no GitHub issue and no user report. The case was found while #45604 changed the printed specifier of it. Repro:

echo '.g { color: red }' > g.css
echo '.k { composes: g from "./g.css" }' > composes.css
bun build ./composes.css --outdir out

Before (1.4.2 and main): Bundled 2 modules, and out/composes.css has the rules of g.css and composes: g from "/abs/build/dir/g.css". After: Bundled 1 module, and the declaration is as written. esbuild 0.21.5 gives the same bytes.

History. #17958 (v1.2.5) made Specifier::parse create the import record (src/css/properties/css_modules.rs:156) and made the arm return its error directly. The property table of the old generator had conditional: { css_modules: true } for composes, and the generator never read that field.

What changes for users. All of it is in a stylesheet that is not a CSS module.

  • composes: <names> from "<file>" prints as written. The file is not resolved, loaded or inlined. A plugin onResolve does not see the specifier. The metafile has no composes import for it.
  • A value that is not valid composes syntax (12px, from "./x.css", a from, var(--x)) no longer fails the build.
  • bun build --no-bundle no longer fails on composes ... from "<file>".
  • This applies to each place a declaration can be: style rules (also nested, and in @media), @page, @keyframes, @container style().
  • composes: a from url(x.png) has an ordinary url() token. The bundler resolves it like each other url() in a declaration. Until css: keep a url() in an at-rule prelude as written, and never print the resolved path of a url() #45604 it prints the resolved path of a target with no URL form. It still fails under --no-bundle, as each url() does there (bun build --no-bundle: keep css url() references instead of failing to parse #38528).
  • A stylesheet whose path does not end in .module.css is not a CSS module. This includes a.module.scss that a plugin returns with loader: "css". No release scoped such a file: its import gives {} before and after. A plugin gets a CSS module when its onResolve returns a path that ends in .module.css.

Measured (release builds of 59003546239 and of this branch on it):

  • release binary: Property::parse +16 B (16,895 to 16,911), StyleRule::to_css_base -179 B (3,255 to 3,076), RuleBodyParser::next -16 B (5,828 to 5,812). .text -256 B (81,372,501 to 81,372,245), file size +0 B (106,927,840), 0 new symbols (nm -S, llvm-size -A)
  • non-composes declaration: +0 instructions (objdump diff: 0 instructions added outside the Composes arm. Dynamic: -270 of 880.12M over 200,000 declarations, noise floor 2,096)
  • composes in a CSS module: +2 instructions, +1 branch per declaration (objdump diff of Property::parse. Dynamic, whole change: -12.9 instructions and +0.09 branches per rule over 50,000, noise floor 11,900 of 156.9G)
  • plain-sheet composes: name: +0 heap allocations, -1,720 instructions per declaration (51,290 to 51,257 mimalloc calls and 108.50M to 91.30M instructions over 10,000 declarations)
  • repro: inputs 2 to 1, composes imports 1 to 0, onResolve calls 2 to 1. 13-position sheet: composes records 13 to 0, url records 0 to 1
  • syscalls naming the composes target: 1 to 0 (existing target), 2 to 0 (missing target)
  • probe exit codes 0/1/1/1 to 0/0/0/0 (existing target, missing target, composes: 12px, --no-bundle). Module fixtures: 0 differing output bytes, 0 differing metafile imports
  • bun pm diff: reported composes imports 1 to 0 (.module.css), 1 to 0 (.css). A file with composes: 12px: not parsed to normalized

How: the objdump diff is llvm-objdump -d of Property::parse with addresses removed. The two added instructions are test byte ptr [r15 + 0x19], 0x1 and a je to the existing token-list fallback. RuleBodyParser::next has parse_declaration_impl inlined. No other text symbol changes size. Instruction counts are instructions:u from perf_event_open, as medians of 5 interleaved runs of bun build --no-bundle. Allocation counts are gdb breakpoint hit counts on the mi_* entry points. Syscall counts are from gdb catch syscall. perf, strace, valgrind and bloaty are not installed here. The module fixtures are the files of the module tests of test/bundler/esbuild/css.test.ts (15) and test/bundler/css/css-modules.test.ts (12), built with --metafile and compared with diff -r.

bun pm diff parses each stylesheet as plain CSS (src/runtime/cli/pm_diff_normalize.rs:928). On main it lists a composes target with a bare specifier under new module imports, for a .module.css file and for a plain file. Released 1.4.2 does not print that note, and this branch does not. On each of the three builds it lists no @import target. To list the composes targets of .module.css files again, its normalizer has to parse those files as CSS modules. That also changes the text it prints for them (scoped class names), so it is not in this PR.

esbuild 0.21.5 prints the same bytes for 22 of 26 plain-sheet composes probes (main: 4). The 4 others differ in the case of COMPOSES, lowered nesting, the space in an empty composes: value, and from url(x.css), which esbuild rejects.

Design. lightningcss and esbuild both decide this where the parser picks the grammar. The lightningcss property table has "composes": Composes(Composes<'i>) if css_modules. The arm is the one place that every declaration path and every parse entry point passes (the bundler, --no-bundle, bun pm diff, the test hooks). With the test before Composes::parse, no composes import record exists for a plain stylesheet, so no later layer has to skip one. The options test of lightningcss would also turn composes in a @keyframes block of a CSS module into a token list. #38538 removes that declaration with a warning, as esbuild does. No test on this branch tells the two tests apart. The @keyframes fixture of #38538 does.

Self-review items not taken.

  • Add the bare :global change to this PR. A bare :global in a plain stylesheet fails the build because of the same kind of missing test (src/css/selectors/parser.rs:1324). css: only reject bare :global / :local pseudo-classes in CSS modules #38534 is open and has that change with tests. The two PRs complete one class and are best merged together.
  • Pass the real options to KeyframesListParser and ContainerCondition::parse, so that options and the parser flag always agree. It is a refactor of 30 to 50 lines with no output change.
  • A second plugin test where onResolve returns a .module.css path. It passes on main.
  • Fewer bundler tests. Each one has a different input class.

Question for a maintainer. Should composes ... from "<file>" in a plain stylesheet give a warning? lightningcss and esbuild give none, and this PR gives none.

Not in this PR.

Suites run with the debug build: test/bundler/esbuild/css.test.ts (66 pass, 1 todo), test/js/bun/css/css.test.ts (1318 pass), test/bundler/css/ (183 pass), test/bundler/bundler_loader.test.ts (59 pass), test/bake/dev/css.test.ts (15 pass), the CSS module tests of test/bundler/bundler_splitting.test.ts (7 pass), test/bundler/cli.test.ts. In cli.test.ts the --compile tests hit their own 5 s limit on the debug build, as they do on a debug build of main. On the release build, test/bundler/esbuild/css.test.ts and test/js/bun/css/css-fuzz.test.ts pass.

`Property::parse` ran the CSS modules `composes` grammar in every
stylesheet. In a stylesheet that is not a CSS module,
`composes: a from "./file.css"` created an import record, so the
bundler resolved, loaded and inlined the file.

The `composes` arm now reads the parser flag for CSS modules. Without
the flag the declaration is parsed as a token list, like any other value
the parser does not know, and is printed as written.
@robobun

robobun commented Oct 18, 2026 •

Copy link
Copy Markdown
Collaborator Author
Updated 8:29 PM PT - Oct 18th, 2026

✅ @robobun, your commit 2ab9346f88e4122cedf1506037ec2ac89f2d5719 passed in Build #128603! 🎉


🧪   To try this PR locally:

bunx bun-pr 45961

That installs a local version of the PR into your bun-45961 executable, so you can run:

bun-45961 --bun

… true

A `Property::Composes` now exists only in a stylesheet that is parsed as
a CSS module, and the printer of such a stylesheet always has
`css_module` set. `StyleRule::to_css_base` asserts this in debug builds
and no longer tests it.

Tests: in a stylesheet that is not a CSS module, a `url()` after
`composes ... from` is an ordinary `url()` token. A stylesheet that a
plugin loads with the `css` loader is not a CSS module.
@coderabbitai

coderabbitai Bot commented Oct 18, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Repository: oven-sh/bun/.coderabbit.yaml
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: 5a82bc70-5669-4821-abc6-0e9b34c36fca
📥 Commits

Reviewing files that changed from the base of the PR and between 757eba4 and 2ab9346.

📒 Files selected for processing: 1
  • src/css/rules/style.rs

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

Walkthrough

The CSS parser now treats composes as a CSS Modules value only when CSS Modules are enabled. Tests cover plain-CSS declaration preservation, import behavior, minification, plugin-loaded CSS, and non-bundled builds.

Changes

CSS Modules parsing boundaries

Layer / File(s) Summary
Composes parsing and handling
src/css/properties/properties_generated.rs, src/css/declaration.rs, src/css/rules/style.rs, test/js/bun/css/css.test.ts
Composes parsing depends on the CSS Modules flag. Declaration and style-rule handling use composition context. Minification tests cover composes values and local and global pseudo-classes without CSS Modules.
Bundler handling and validation
test/bundler/esbuild/css.test.ts
Bundler tests check preserved plain-CSS composes declarations and import behavior across build modes, CSS Modules, and plugin-loaded CSS.

Suggested reviewers: jarred-sumner

Priority: ➖ Normal

Merge Risk: ⚪ Minimal · up to 2ab93

Plain stylesheets no longer interpret composes as CSS Modules syntax. The parser and printer state remain aligned, and no actionable merge risk is established by the reviewed change context.

Pre-merge checks: Passed 4
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: restricting composes CSS Modules parsing to CSS modules.
Description check Passed The description explains the problem, fix, scope, tradeoffs, and verification results. It uses different headings from the template, but it includes the required information for what the PR does and h…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, fix, scope, tradeoffs, and verification results. It uses different headings from the template, but it includes the required information for what the PR does and how it was verified.

✨ Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@claude claude Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.

Beyond the inline findings, I also checked the new debug_assert!(dest.css_module.is_some()) in src/css/rules/style.rs: Property::Composes has a single constructor (Property::parse, now gated on the parser's CSS_MODULES flag), that flag is derived from the same options.css_modules that StyleSheet::parse stores and StyleSheet::to_css later uses to install printer.css_module, and StyleAttribute prints through DeclarationBlock, not StyleRule — so the removed css_module.is_some() checks were indeed always true on that path.

Extended reasoning...

The change gates two CSS-modules-only grammars (composes and bare :global/:local) on the stylesheet being a CSS module, removes now-redundant printer checks in favor of a debug assertion, and adds bundler and unit tests; it touches no security-sensitive surface. Two inline findings were posted (a now-dead sibling guard in src/css/declaration.rs and a pre-existing silent drop inside forgiving selector lists), so a human look is already signaled; this note only records the invariant trace that was verified for the new debug assertion.

Comment thread src/css/selectors/parser.rs Resolved
`parse_declaration_impl` tested the CSS modules flag of the parser before
it looked for a `Composes` value. `Property::parse` now makes that value
only when the flag is set.
@robobun
robobun force-pushed the robobun/c888b159/css-composes-plain-stylesheet branch from b50dd48 to 757eba4 Compare October 18, 2026 21:32
Comment thread src/css/rules/style.rs Resolved
@robobun robobun changed the title css: parse CSS modules syntax only in a CSS module css: parse composes as CSS modules syntax only in a CSS module Oct 18, 2026

@claude claude Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.

The declaration.rs change in 757eba4 resolves the redundant-guard nit from the earlier review. Beyond the inline findings, I also checked the new debug_assert!(dest.css_module.is_some()) and the now-unconditional continue in src/css/rules/style.rs: every printer that can see a Property::Composes has css_module set, because StyleSheet.css_modules is copied from the same ParserOptions that sets the CSS_MODULES parser flag, the bundler's chunk ASTs shallow-copy that header, and the test hooks (css_internals.rs) and bun pm diff both parse with CSS modules off, so the removed is_some() branches were unreachable.

Extended reasoning...

The diff gates the composes arm of Property::parse on the parser's css_modules flag, drops the outer flag check in declaration.rs, replaces two css_module.is_some() printer checks in style.rs with a debug assertion, and adds bundler and minify tests; it touches no security-sensitive surface. Two confirmed findings are posted inline (the :global arm named in the PR description is not in this diff, and bun pm diff loses its composes-import note), so this note only records what else was examined and ruled out.

Still open from earlier reviews (1):

  • Unresolved: 1 minor or pre-existing.

@robobun

robobun commented Oct 18, 2026 •

Copy link
Copy Markdown
Collaborator Author

Status: closed. The fix is on main in #47025 (7942008).

Reproduced before the fix with bun 1.4.2 and with a release build of main (59003546239):

echo '.g { color: red }' > g.css
echo '.k { composes: g from "./g.css" }' > composes.css
bun build ./composes.css --outdir out

Both printed Bundled 2 modules, and out/composes.css had the rules of g.css and composes: g from "/abs/build/dir/g.css". A debug build of main at 7942008 prints Bundled 1 module and keeps the declaration as written.

PR: #45961

@claude claude Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nothing blocking. The comments below are optional suggestions. There is no need to push a fix for them before merging.

The latest push drops the now-dead css_modules guard in src/css/declaration.rs, which closes the point raised earlier. Beyond the inline note, I also checked the invariant behind the new debug_assert!(dest.css_module.is_some()) in src/css/rules/style.rs: Property::Composes is only built when the parser's CSS_MODULES flag is set, that flag is derived from options.css_modules.is_some() at both parse entry points in src/css/css_parser.rs, and to_css_with_writer_impl (the only printer entry, including the bundler's per-file chunk printing) sets printer.css_module from that same stored field — so the removed is_some() checks were unreachable-false and the unconditional continue/nesting error cannot change output for any existing stylesheet.

Extended reasoning...

The change gates the composes parse arm on the CSS-modules parser flag, removes the guards that gating makes redundant in the declaration parser and the style-rule printer, and adds unit and bundler tests for plain-CSS composes. It touches no security-sensitive surface. The one inline finding is a pre-existing minify nit unrelated to the gating; the earlier dead-guard note was addressed in this push, and the other prior threads were author-resolved without a corresponding code change, so a human maintainer should still weigh those.

Comment thread src/css/rules/style.rs
Comment on lines 203 to +231
if let Property::Composes(composes) = decl {
if dest.is_nested() && dest.css_module.is_some() {
// `Property::parse` makes this property only in a CSS module.
debug_assert!(dest.css_module.is_some());
if dest.is_nested() {
return dest.new_error(
PrinterErrorKind::invalid_composes_nesting,
Some(composes.cssparser_loc),
);
}

if dest.css_module.is_some() {
// `handle_composes` needs `&mut dest` while the
// module also lives in `dest.css_module`. Move the
// module out for the duration of the call, then put
// it back before any `dest.new_error` early return.
let mut cm = dest.css_module.take();
let err = if let Some(css_module) = &mut cm {
css_module
.handle_composes(
dest,
&self.selectors,
composes,
self.loc.source_index,
)
.err()
} else {
None
};
dest.css_module = cm;
if let Some(error_kind) = err {
return dest.new_error(error_kind, Some(composes.cssparser_loc));
}
continue;
// Move the module out of `dest`: `handle_composes` also takes `&mut dest`.
let mut cm = dest.css_module.take();
let err = if let Some(css_module) = &mut cm {
css_module
.handle_composes(
dest,
&self.selectors,
composes,
self.loc.source_index,
)
.err()
} else {
None
};
dest.css_module = cm;
if let Some(error_kind) = err {
return dest.new_error(error_kind, Some(composes.cssparser_loc));
}
continue;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟣 pre-existing, not blocking: pre-existing nit: a minified CSS module whose rule has a composes declaration gets a stray ; before the closing } (.a_x{color:red;}). len at src/css/rules/style.rs:168 counts the Composes entries, but the continue at src/css/rules/style.rs:231 skips the i += 1 at style.rs:241, so for the last printed declaration i != len - 1 is always true and the ; at style.rs:238 is written even with dest.minify. Fix: count only printed declarations (e.g. compute len excluding Property::Composes, or decide the trailing ; by whether another printable declaration follows), so every minified module rule with composes prints without the trailing separator.
A small fix can ride a push you are already making; otherwise a short reply is enough.

Why this was flagged

A CSS module such as .a { composes: b; color: red } is bundled with minify (bun build --minify or Bun.build minify.whitespace) so dest.minify is true. In StyleRule::to_css_base, len at src/css/rules/style.rs:168-169 is 2 (declarations plus important declarations, composes included). The Property::Composes entry hits the continue at src/css/rules/style.rs:231 after handle_composes, so i stays 0. For color: red, the check at src/css/rules/style.rs:236 evaluates i != len - 1 as 0 != 1, true, and ; is written at style.rs:238, giving .a_x{color:red;} instead of .a_x{color:red}. The base branch behaves the same for CSS modules (its continue ran whenever dest.css_module.is_some()), so this is pre-existing; the diff touches this exact continue and reorganizes the arm, which is why it is reported here. No test covers minified output of a module rule with composes.

Verification: pre-existing (nit-sized): triggered whenever a CSS module rule contains a composes declaration and the printer runs with dest.minify. In /home/claude/bun/src/css/rules/style.rs, len at lines 168-169 counts Property::Composes entries; the Composes arm ends with continue; (line 231), which jumps past i += 1 at line 241, so ; is written at line 238. The base branch had the identical continue;, so the behavior is unchanged by this PR.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed, and it is the same without this change. bun build --minify of a CSS module with .a { composes: b; color: red } prints .a_5WBUVQ{color:red;} on 1.4.3-canary (367d939d9). len counts the Composes entry, and the continue skips i += 1, as you describe.

This PR does not change it. It leaves the output of a CSS module byte-identical, and this fix changes minified CSS module output. It needs its own change, with a test for a minified module rule that has composes.

Jarred-Sumner added a commit that referenced this pull request Oct 27, 2026
### What does this PR do?

Consolidates the open pull requests on the CSS parser (`src/css`:
parsing, minifying, lowering, printing, CSS modules) into one.

179 open pull requests were in scope. Each was judged by one rule: **the
output must mean to a browser what the input meant.** Every claim was
run through a build of `main`, a build with the change, lightningcss
1.33 and Chromium 156 (CSSOM, computed values, painted pixels for colors
and gradients), and counted against 10,116 real stylesheets: the
published CSS of about 190 popular npm packages, plus stylesheets from
open source repositories. 107 land here, whole or in part, most of them
cut down. The source diff is net negative.

Of the 10,116, 9,509 are stylesheets that someone ships. The rest are
test fixtures of other tools (521), Tailwind v4 source that needs its
plugin (59) and SCSS, PostCSS or template source (27).

| 9,509 shipped stylesheets | `main` | this branch |
|---|---|---|
| fail to build | 71 | 35 |
| ... of those, valid CSS that Bun rejects | | 0 |
| minified output reads differently in Chromium than the input | 552 | 2
|
| CSS modules with a name that is referenced but not defined, or
exported but not defined | 166 | 0 |

| all 10,116 | `main` | this branch |
|---|---|---|
| fail to build | 192 | 141 |
| minified output reads differently in Chromium than the input | 593 |
15 |
| build on `main`, fail here | | 0 |
| right on `main`, wrong here (minified, and at the default targets) | |
0 |
| size of the minified output, no targets | 162.32 MB | 162.47 MB
(+0.093%) |
| size of the output at the default targets | 224.1 MB | 210.2 MB
(-6.2%) |

A syntax error is a build error, with one exception: the IE star hack
`*zoom: 1` is skipped, because tachyons and handsontable ship it. The 35
shipped stylesheets that fail are invalid CSS: 28 have a selector that
Chromium drops (semantic-ui-css, swiper, @ionic/core, Adobe Spectrum,
xp.css), 2 an `@import` after other rules, and one each `@supports not X
and Y`, a nested `@keyframes`, a stray comma, a selector list in
`::slotted()`, `@media screen\0` (govuk-frontend). The 2 that read
differently fold a `color-mix()` inside a gradient (see the known gaps).

The growth of the minified output is rules and declarations that `main`
deleted by mistake: 87 KB of rules, 45 KB of prefixed declarations that
only browser targets can rule out.

#### Popular CSS that `main` breaks today

- normalize.css, modern-normalize, sanitize.css: `font-family:
monospace, monospace` is collapsed to `monospace`, which changes the
font size from 16px to 13px (#46662).
- CKEditor 5, Tabler, Carbon, VitePress, Ionic, PatternFly, Excalidraw:
a rule of custom properties is deleted as a "duplicate" of a later rule
with the same selector and other custom properties. 37 stylesheets lose
1,681 custom properties (#33684).
- Material Components, daisyUI, DocSearch, plyr: a `var()` size loses to
its own fallback (#42101).
- nextra, daisyUI, CKEditor: declarations written after a nested rule
are moved above it (#45462).
- antd 4, purecss, govuk-frontend: browser hacks in selector lists start
to apply everywhere (#42100).
- foundation-sites, flatpickr, 98.css, blueprintjs, scalar,
react-datepicker: the build fails on valid CSS (#46756, #38552, #38534).
tachyons, handsontable: it fails on the IE star hack (#46751).
- nodejs.org, Mantine: a CSS module exports classes that no rule
defines, because the `@apply` or `@mixin` in them is moved out of the
rule (#46759).
- hint.css and 42 more: `z-index: 1000001` and `1000000` become the same
number (#46715).
- Adobe Spectrum: `--version: 5.0.1` prints as `5.1`.
- A quarter of all stylesheets: minified output has a stray space in
`align-items: center` (#41993).

#### Behavior changes to look at first

1. **`light-dark()` is kept as written at the default browser targets**
(#42009). The lowered form `var(--buncss-light, a) var(--buncss-dark,
b)` is invalid unless a compiled `color-scheme` covers the element: 184
of the 215 real stylesheets that get it never define the variable, so
every browser drops the declaration. The docs section on the polyfill is
removed.
2. **`border` is not built from longhands** (#42072):
`border-width:0;border-style:solid;border-color:red` stays three
declarations, because `border` also resets `border-image`. 305 real
stylesheets grow by 30 KB in total; `bootstrap.min.css` by 113 bytes, 5
gzipped. No real stylesheet was found where the old merge shows, so this
is the one to drop if size matters more. 14 existing expectations
change.
3. **A CSS module no longer exports names that only occur inside
`:global(...)`** (#45487). 73 real modules lose 202 export keys, all of
them names that no rule has. `import { g }` or `composes: g` of such a
name becomes a build error.
4. **Container names and `@counter-style` names stay global in a CSS
module** (#45247 by @mikamikasuki). `main` hashes the `@container` name
but not `container-name`, so a named query never matches.
postcss-modules (Vite, css-loader, Next.js) keeps them global;
lightningcss and esbuild hash both. Global keeps a container that is
queried from another file or from JS working.
5. **Syntax errors are build errors, also two that `main` lets
through**: a media query that stops short (`@media screen and {`,
`@media not {`, `@import "a.css" screen and;`) and `@media (width <) foo
{`. No stylesheet of the 10,116 has either. A condition that is valid by
the grammar though no browser knows it, `( ... )` or `fn( ... )`, is
kept as written (#46756): `(min-width:0\0)`, `(not(hover))`.
6. **Declarations after a nested rule stay where they were written**, as
a nested declarations rule (#45462). Changes the output of 199 real
stylesheets; in a fuzz of 2,850 nested programs compared by computed
style, `main` was wrong in 1,056 and the pull request's code, before it
was trimmed here, in none.
7. **`Bun.color`**: `color()` inputs are converted instead of returned
as a string (`Bun.color("color(srgb 1 0 0)", "hex")` was `"color(srgb 1
0 0)"`); `currentColor`, system colors and `light-dark()` give `null` in
the converting formats instead of the keyword as a string; a relative
color or `color-mix()` outside sRGB is clipped, not gamut-mapped
(`hsl(from oklch(100% .399 336.3) h s l)` is `#ff5bff`, was `#fff`).
8. The `:-moz-any()` and `:-webkit-any()` copies of rules with `:is()`
are gone at the default targets (#45945, #42029). The `:-webkit-any()`
copy outranked the original rule: `.title{color:blue}
:is(h1,h2,h3){color:red}` painted red. 5.8% of all default-target output
was the `:-moz-any()` copies.
9. `Property` grows from 216 to 224 bytes: `Url` stores its text as a
slice so that two `url()` values can be compared (#46895). The pull
request packed a pointer and a `u32` behind `unsafe` to avoid that.

#### Not in this PR, needs a decision

- **Raise the default browser targets (#40369) and add a `cssTarget`
option (#40368).** Today: Chrome 80, Edge 80, Firefox 78, Safari 14,
Opera 67, and no public way to change them. At Vite 8's floor the output
of the 9,924 stylesheets is 15.3% smaller (3.9% gzipped). About a dozen
fixes here only matter at today's floor, and code for older targets is
unreachable without the option.
- Vendor prefixes for `user-select`, `appearance`, `hyphens` and five
more (#45814): 1,116 real stylesheets lack a prefix they need at the
default targets. And for `backdrop-filter` (#44648): 173.
- Clip instead of gamut-map in the sRGB fallback of a plain wide-gamut
color: deletes about 90 lines, changes every pinned fallback hex. If the
mapping stays, #44647 by @oddharsh makes it closer to what browsers
paint (colors off by 2/255 or more: 168 to 110 of 3,170 real ones).

#### Changes

**Rules: duplicates, merging, nesting, fallbacks**

- The `:-moz-any()` copy of every rule with `:is()` or `:not(a, b)` is
gone: Firefox 78 has `:is()` (#45945). 1,164 real stylesheets
- Keep declarations written after a nested rule in place with a nested
declarations rule (#45462). 379 real stylesheets
- With nesting compiled away, an unknown at-rule inside a style rule was
moved out of it: `.wrapper{@apply flex}` printed a bare `@apply flex;`
and the rule was gone, so a CSS module exported a class that no rule
defines. It now stays in a block under the compiled selector. 72 real
modules with Tailwind's `@apply`, 25 with Mantine's `@mixin` (#46759).
316 real stylesheets
- Keep !important in the rules generated for logical properties and
color-scheme (#38597). 311 real stylesheets
- With browser targets, remove an earlier duplicate rule only when its
declaration block is equal (#46861). 171 real stylesheets
- Compare custom property names in `PropertyId` equality and importance
in duplicate-rule detection (#33684). 40 real stylesheets
- Keep same-condition @supports rules and empty named @layer blocks
(#46733). 31 real stylesheets
- Keep target-added vendor prefix passes on cloned and re-minified
rules, and never print a bare `:full-screen` (#43339). 12 real
stylesheets
- Keep the selectors on rules added for color fallbacks and logical
properties (#43240). 3 real stylesheets
- A later declaration of a property drops the `@supports` color copies
of the earlier one, which printed after the rule and won (#45560). 2
real stylesheets
- Do not merge style rules in a stylesheet that holds `revert-rule`
(#46953). 1 real stylesheets
- `@import ... supports(-webkit-mask: none)` kept its prefix (#38589)

**Properties and shorthands**

- Print align-items:center without a stray space when no safe/unsafe
keyword is given (#41993). 3,317 real stylesheets
- Emit the physical longhands instead of the inset shorthand for targets
without it (#38583). 1,452 real stylesheets
- Keep the stops of an upward gradient as written, and drop a `50%` hint
only at the midpoint (#46790). 104 real stylesheets
- Emit unparsed border-block-* declarations when compiling logical
borders (#38582). 89 real stylesheets
- Keep repeated font families and dedupe only the inserted system-ui
fallbacks (#46662). 88 real stylesheets
- A `width` / `height` / `min-*` / `max-*` with `var()` or `env()` was
printed before the plain fallback written above it, so the fallback won
(#42101). 26 real stylesheets
- Keep box-orient and box-direction when flex-direction or flex-flow
follows (#45672). 16 real stylesheets
- Write held prefixed background declarations at every flush (#46882). 6
real stylesheets
- Derive equality for Size2D and BorderRadius, and keep every prefix in
the border-radius handler (#45665). 2 real stylesheets
- Print `none` instead of an empty border-image, mask-border or
mask-box-image value (#45143). 2 real stylesheets
- Keep font/transition sub-properties on the side of the shorthand they
were written on (#41990). 2 real stylesheets
- CSS-wide keywords are not names: `font:12px Arial;font-family:inherit`
printed `font:12px inherit`, `color-scheme:inherit` and
`color-scheme:auto` printed `normal`, `transition-property:unset` was
folded into `transition` (#42022). 2 real stylesheets
- Only fold font longhands into `font` when the rule declared a `font`
(#45459)
- Keep a font family name quoted when its identifiers do not read back
as the same name (#46606)
- Stop rewriting valid positions into ones browsers reject (#45197)
- `border` is no longer built from longhands unless the rule also sets
what `border` resets (`border-image`), and an author's `border-image`
reset is no longer dropped. `transition` is likewise only written where
the rule wrote one, because it resets `transition-behavior` (#42072)
- `border; border-image: <gradient>; border-image-slice: 1` lost the
gradient in every default build (#42018)
- A prefixed `linear-gradient` keeps its direction, written or
generated: the prefixed syntax names the starting side and measures
angles differently (#46697)

**At-rules**

- Print @font-face format() keywords as strings (#37979). 439 real
stylesheets
- Print @supports `not` conditions without a leading space (#38559). 88
real stylesheets
- Reset after the number token of a unicode-range (#45835). 33 real
stylesheets
- Keep `<general-enclosed>` media and container conditions as written
(#46756). 24 real stylesheets
- A strict range such as `(width < 768px)` lowered for old targets still
matched at exactly 768px. The step is now `.02px`. The `not all and`
form for other units is not taken (#46806). 18 real stylesheets
- Keep scanning an @supports condition after a nested block (#38552). 9
real stylesheets
- Every `@counter-style name` printed as `@counter-stylename`, which
browsers drop (also #46692). In a CSS module the name now stays global,
like the `list-style` that refers to it (#33679). 9 real stylesheets
- Keep a keyframe whose block has an invalid item (#46288). 2 real
stylesheets
- Read an @Property initial-value on the stylesheet's parser, keep an
unmatched value as written (#45806). 2 real stylesheets
- `@media {}` is `all`. A media query that stops after `and`, `or` or
`not` (`@media screen and {`) is a build error; `main` printed `not all`
or dropped the condition, silently. The `@layer` and type selector parts
are not taken (#46869). 2 real stylesheets
- Accept a name-only `@container` and a `style()` feature with no value
(#46689). 1 real stylesheets
- Parse `<timeline-range-name> <percentage>` keyframe selectors (#45652)
- Allow `or` inside parentheses after a media type (#45088)
- Print the `=` comparison in media and container queries as `=`
(#45071)
- Parse the @font-palette-values font-family descriptor as a list of
family names (#45484)

**Selectors**

- Never wrap a selector list in :is() (#46787). 414 real stylesheets
- Stop emitting :-webkit-any() copies of :is() that outrank the original
rule (#42029). 373 real stylesheets
- With browser targets, a selector list with a vendor-prefixed member
was split, which revives hacks that rely on other engines dropping the
whole list: `.s *::-ms-backdrop,.s{flex:auto}` applied everywhere.
Rewritten; the list is printed as written (#42100). 42 real stylesheets
- Print the vendor prefix on downleveled :any-link, :read-only,
:read-write, :placeholder-shown and :autofill (#42131). 12 real
stylesheets
- Fix nesting lowering of a `&` that does not lead its selector
(#43047). 8 real stylesheets
- `@scope`: `&` and implicit selectors compile to `:where(:scope)`,
relative selectors and bare declarations parse (#43165). 7 real
stylesheets
- Only reject bare :global / :local pseudo-classes in CSS modules
(#38534). 5 real stylesheets
- Stop truncating `@scope to (...)` and stop replacing `&` in the
scope-end selector (#43146). 2 real stylesheets
- `[xl|href$=".pdf"]` lost its namespace prefix (#45159). 2 real
stylesheets
- Match An+B keywords exactly and take only `+` as the leading sign
(#42953). 1 real stylesheets
- Parse ::details-content and ::picker() like ::part() (#45504). 1 real
stylesheets
- Parse :window-inactive as an ordinary pseudo-class, and accept it
after ::selection (#45815)
- Print :nth-col(1) and :nth-last-col(1) in functional form (#41575)
- `li::before::marker` failed the build (#45810)
- `&` inside `:nth-child(... of S)` is resolved when nesting is compiled
away. The second selector serializer (326 lines) is deleted (#43024)

**Colors and `Bun.color`**

- Keep light-dark() as written under the default browser targets
(#42009). 227 real stylesheets
- Number and percentage channels parse in `lab()`, `lch()`, `oklab()`,
`oklch()`, `hsl()` and `hwb()`; the hue of `lch` / `oklch` is no longer
scaled by alpha (#45084). 130 real stylesheets
- `Bun.color` returns `null` for `currentColor`, system colors and
`light-dark()` in the converting formats, instead of the CSS keyword as
a string (#33047). 130 real stylesheets
- Relative colors: channel keywords are on the scale of their function
(`rgb(from #369 calc(r + 10) g b)`), the origin's alpha is kept, a
relative color kept as written gets no `@supports` copies, and a result
outside sRGB is not folded (#45362). 31 real stylesheets
- Keep rotate: 0deg out of none, and keep the origin alpha in relative
colors (#38486). 13 real stylesheets
- Compute the D50 reference white in f32 so greys convert to lab(l 0 0)
like lightningcss (#38535). 7 real stylesheets
- Return a missing hue for a grey from conversions into lch, oklch, hsl
and hwb (#45201). 5 real stylesheets
- Fix color(a98-rgb), srgb-linear relative colors and color-mix(in
xyz-d50) (#38487). 4 real stylesheets
- Match named colors without regard to ASCII case (#45092). 3 real
stylesheets
- Fold min(), max() and clamp() over plain numbers (#39515)
- `calc(l - .08)` in a percentage channel of a relative color became NaN
and printed `#000` (also #45970) (#45971)
- Bun.color: convert color() inputs instead of returning them as a CSS
string (#38488)
- A `color-mix(in srgb, ...)` result outside sRGB prints `color(srgb
...)` instead of a gamut-mapped hex (#39269)

**`calc()` and numbers**

- Rounding to 6 significant digits ate into the integer part:
`z-index:2147483647` became `2147480000`, `max-width:9999999px` became
`10000000px`, `--x:1234567.5` became `1234570`. It now only cuts a
fraction short: a value kept as tokens prints its source text, a typed
value prints every integer digit and at least one digit of the fraction
(#46715). 43 real stylesheets
- A number without a unit is no longer repaired into `px`
(`height:1.5715` is dropped by a standards-mode browser, so it prints as
written), `calc(-1 * 0)` is not a length, and on a property of the range
[0,∞] (sizes, border radii, padding, border and outline widths, gap,
`flex-basis`, `font-size`) a `calc()` that folds below zero prints `0`
instead of an invalid negative literal, and a negative literal no longer
replaces the valid declaration before it (`width:10px;width:-5px`
printed `width:-5px`) (#42104). 24 real stylesheets
- Print numbers from the f32's shortest digits, not its f64 expansion
(#38565). 17 real stylesheets
- Print negative numbers below 1 with a single minus sign (#38516)
- Keep math functions over two different length units as written
(#38489)
- Fold rem() with a truncated quotient, so it keeps the sign of the
dividend (#32286)
- A one-argument `min()` / `max()` around a sum printed without any
function (`width:100% - 20px`) (#46145)
- `round()` breaks ties upward and handles a negative step as browsers
do (#45249)

**CSS modules**

- A CSS module exports its `@keyframes` names (`styles.spin`). Hashing
is unchanged (#46720). 145 real stylesheets
- A name inside `:global(...)` prints plain but was exported as
`name_<hash>`, a class no rule has (also #38573) (#45487). 90 real
stylesheets
- Keep container names global in CSS modules (#45247). 6 real
stylesheets
- Tag the keyframes name when an `animation` value falls back to raw
tokens (#46034). 6 real stylesheets
- In a plain stylesheet `composes: a from "./b.css"` was treated as an
import: the file was inlined and an absolute path printed (#45961). 4
real stylesheets
- Drop a rejected composes instead of failing the file at print time
(#38538). 1 real stylesheets
- Keep every rule's custom properties for the composes conflict check
(#38523)
- Keep composes working after a nested rule in the same block (#38520)
- `IdentOrRef::hash` read 2 of 16 bytes, so in release builds every
class of a module hashed alike (#30784)

**Tokens, `url()`, diagnostics**

- The block skip stack no longer allocates on every block exit (#39533)
- Report the diagnostic's line without its line breaks in
position.lineText (#38342). 192 real stylesheets
- Compare `url()` values by their text (#46895). 26 real stylesheets
- Values kept as tokens keep the blanks they were written with instead
of having them re-invented at print time: `attr(x type(<number>))`
printed `type(< number> )`, which browsers drop. Minified output still
drops the blanks that cannot matter (#45577). 19 real stylesheets
- The IE star hack (`*zoom:1`) failed the whole build. The declaration
is skipped, as every browser does. It is the one syntax error that
builds: tachyons, handsontable and jasmine ship it (#46751). 8 real
stylesheets
- The path of a copied asset spliced into `url()` is always quoted, so a
file name with a space or a parenthesis cannot end the `url()` (#41557).
7 real stylesheets
- Move the skip loop of parse_until_before out of the generic body
(#39520)
- Remove dead code from bun_css: the unused `impl Default for Property`
(#45618)
- Default the at-rule and qualified-rule parser traits, drop the
url_to_css shim (#31999)

**Speed**

Four inputs that took quadratic or exponential time, or produced output
out of proportion, are now linear, with no new limit and no extra pass
(#31639, #42243, #38531, #43421).

**Tests only**

- `css-fuzz.test.ts` never ran in CI and timed out on debug builds; it
is a deterministic table now (#38500)
- `nth-anplusb-ident.test.ts` counts heaps in a child process (#46331)
- `color.test.ts` checks the ansi-16 sweep with one `expect()` (#42824)
- Not CSS, but it failed this PR's CI and fails on `main` too:
`ws-proxy.test.ts` on Windows, "a message sent during a TLS
renegotiation arrives after it". The helper server now renegotiates from
the callback of the frame's write (#46170)

**No pull request covered these**

- `--v: 5.0.1` printed as `5.1`, `--w: 1.0.0` as `10`, `--x: 1+2` as
`12`, `2n+1` as `2n1`: a number token that touches another keeps its
source text.
- `color-scheme: auto` printed as `normal`, and `color-scheme: dark
light` as `light dark`.
- A bare `:global` or `:local` in a CSS module sets the scope of the
names after it, up to the end of the selector, as in css-loader. It was
a build error.
- The scrollbar states (`a:horizontal`,
`::-webkit-scrollbar{&:horizontal{}}`) are valid in a plain compound, as
in WebKit and Blink.
- Without browser targets, `-webkit-box-align`, `-ms-flex-align` and the
like were dropped next to their standard form (flatpickr,
foundation-sites, materialize-css: 28 stylesheets), and
`-webkit-fill-available` before `-moz-available` (beercss).
- `(-o-min-device-pixel-ratio: 2/1)` printed as `2`.
- `sin()`, `cos()` and `tan()` are exact at multiples of 90deg:
`calc(100px * cos(90deg))` printed `-.00000437114px`.
- A `display-p3` color at targets that have P3 but not the other
`color()` spaces (Safari 10.1 to 14) got itself as a fallback.
- `width: rem(-18px, 5px)` folds to a negative literal once `rem()` is
right; it prints `0`.
- Consecutive nested declarations rules, which arise when same-query
`@media` blocks in one rule merge, are folded into one and count against
the existing selector expansion limit as the `&{}` rules they replace
did.

#### Known and not fixed here

- Four longhands are still folded into a `transition` the author did not
write where the targets add a prefixed copy of a property (`mask-image`
at Chrome 80): only the shorthand gives the copy its own times.
- A later `background`, `box-shadow` or `border-*` declaration still
loses to the `@supports` copy of an earlier `var()` value of the same
property with a wide-gamut color. Same on `main`; #45560 is taken for
the properties of the fallback handler and for unparsed values only.
- A merged rule prints the unprefixed name in the passes of the rule it
absorbed: `.d::-webkit-input-placeholder{}.d::-moz-placeholder{}` prints
`::placeholder` for the second (#42106, not taken: it breaks the merge
of prefix-equivalent rules).
- The `border`, `outline` and `font` shorthands, `line-height`,
`scroll-padding`, `background-size` and a few more still print a
`calc()` that folds below zero as a negative literal. No real stylesheet
has one.
- `all` is not a property Bun knows, so `a{margin-top:1px;all:unset}`
prints `all` first. Same on `main`.
- A selector kept as raw tokens loses the blank before `*` when
minified: `--sel: .dark *` prints `.dark*`. Same on `main`.
- `width:calc(0% + 12px)` folds to `12px`, which lays out differently in
a table cell. Same on `main`.
- The `:dir()` / `:lang()` rules of a lowered logical property print
before the nested rules of their rule, so a logical declaration written
after a nested rule of equal specificity still loses to it. Same on
`main`.
- A fraction is still rounded to 6 significant digits (`12345.678`
prints `12345.7`, `33.3333333333%` prints `33.3333%`). Keeping every
digit would add up to 282 KB over the corpus.
- `@keyframes "quoted"` is hashed in a module but not exported.
- In a module, a keyframes name inside a `var()` fallback is not hashed:
`animation: var(--enter, fade 1s)`. Same on `main`.
- A `color-mix()` or relative color folded to a hex inside a gradient
changes the interpolation from Oklab to sRGB (VS Code, clawhub).
Printing `color(srgb ..)` instead needs a fallback for `mask-image`,
`list-style-image` and custom properties at the default targets, which
have none.
- A comma list in `@container` still fails the build.
- After a bare `:global`, names that are hashed at print time
(`::view-transition-old(foo)`) are still hashed; inside `:global(...)`
they are not.

#### Pull requests in scope that do not land here

- Duplicates of a pull request that lands here: #36961 (of #37979),
#38478 (of #46662), #38480 (of #46733), #38482 (of #46715), #38491 (of
#38500), #38508 (of #45201), #38513 (of #45362), #38573 (of #45487),
#38640 (of #38500), #45525 (of #45247), #45589 (of #46756), #45970 (of
#45971)
- Already fixed on `main`: #38674
- Right, but for input nobody writes (0 of 10,116 stylesheets, and not
new syntax): #31916, #38526, #38592, #39349, #41139, #41801, #42042,
#42484, #43078, #45604, #45908, #46086, #46221, #46224, #46273, #46694,
#46707, #46737, #46755, #46816, #46870, #46934
- Right or harmless, but not worth their code, their bigger output or
the behavior they change: #30905, #31924, #33332, #34426, #36225,
#38006, #38512, #38547, #38551, #38561, #38572, #38576, #38607, #38623,
#38667, #38692, #42106, #42912, #42918, #43407, #43434, #44700, #45442,
#45546, #45747, #45759, #45825, #45946, #46061, #46127, #46206
- Need a decision (see above), stay open: #40368, #40369, #44647,
#44648, #45814
- Stays open: #45787

Out of scope: CSS linking and chunking in the bundler, the dev server,
docs-only pull requests, and repository-wide sweeps that touch `src/css`
in passing.

Thanks to @mikamikasuki (#45247), @alii (#39520, #31999) and @oddharsh,
whose measurements on #40369 and #41990 were used.

Fixes #16727.
Fixes #24770.
Fixes #30772.
Fixes #44704.
Fixes #45089.
Fixes #45237.
Fixes #46872.

### How did you verify your code works?

- The 35 CSS test files pass on a debug build, also with
`FORCE_COLOR=1`. 600+ of the tests in this branch fail on a build of
`main`. An earlier head of this branch passed all 179 CI jobs that ran.
- The reproduction of each issue listed above was run on `main` (wrong)
and on this branch (right).
- Differential run over the 10,116 stylesheets, `main` against this
branch, minified without targets and through `Bun.build` at the default
targets: no stylesheet that builds on `main` fails; Chromium 156
compares the output with the input rule by rule (CSSOM, then computed
values on a sized element in a standards-mode document, colors as
painted pixels in sRGB and P3). The comparison has 195 control pairs
that must read equal or different. For stylesheets that read differently
on both builds, mostly because of lowering, the sets of differences were
compared; the three new ones are two minifier fixtures that are wrong on
both and one comparison artifact.
- CSS modules are checked for consistency instead, since hashed names
defeat the comparison: every reference points at a name the output
defines, every export exists.
- `Bun.color`: 59 inputs in 13 formats on both builds; every changed
cell was read.
@Jarred-Sumner

Copy link
Copy Markdown
Collaborator

Part of this landed in #47025 (7942008). Its description says what was taken.

In a plain stylesheet composes: a from "./b.css" was treated as an import: the file was inlined and an absolute path printed. 4 real stylesheets

@robobun

robobun commented Oct 27, 2026

Copy link
Copy Markdown
Collaborator Author

Thanks. I checked main at 7942008 with a debug build:

  • The repro of this PR builds 1 module and prints composes: g from "./g.css" as written. A missing target and composes: 12px build. bun build --no-bundle of the file exits 0.
  • The 14 tests of this branch (10 bundler tests, 4 parser tests) pass on that commit.

Nothing else from this branch is necessary.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants