[robobun]

Parked draft on #41572. It waits for two answers (this comment) and for #46733, #46232 and #46357.

Problem

• bun build takes a layer that a CSS file declares only inside @media or @supports as always declared. g.css = @media print{@layer a{.g{color:green}}} ahead of x.css, y.css, x.css prints @media print{@layer a{.g{color:green}}}@layer u{.t{color:#00f}}@layer a{.t{color:red}}. On a screen the sources give .t blue, the bundle red.
• css: emit @layer statements that precede @import before the imported files #41572 keeps the earlier copy of such a file only behind an @layer statement ahead of an @import (layers_matter, findImportedFilesInCSSOrder.rs:404).

Fix

• Commit 1 (offered to css: emit @layer statements that precede @import before the imported files #41572): the flag for such a file ignores a layer that the file declares earlier with no condition.
• Commit 2: layers_matter is also on when the import order has such a file.
• Verified: 56 new cases in test/bundler/esbuild/css.test.ts, 37 fail on css: emit @layer statements that precede @import before the imported files #41572.
• Self-reviewed: 17 concerns raised, 10 addressed, 7 wait for the answers (Notes).

Background

• A cascade layer gets its priority where its name first appears. Inside @media or @supports the name counts only while the condition holds (css-cascade-5 "Layer Ordering").
• For a file imported twice the bundler prints the last copy, and a plain list of layer names for the earlier one.
• esbuild 0.28.2 prints the bundle of main. No user reported this.
• Considered: a list with the rule around each name (Notes).

Downsides

• Such a file prints once more per list of import conditions (92 KB file, two style sheets: 272,487 bytes, 136,284 before).
• Six inputs that are right on main are wrong here (todo cases, Notes).
• Parse: +5 instructions per @media block. .text +2,816 bytes.

Notes

Status. This draft is parked. The two questions are in this comment. Commit 1 does not depend on the answers and is offered to #41572 there. Commit 2 is the part that waits.

Repro (main at 5c6d4e2, bun 1.4.3 and #41572 at 1bae41a print the same bytes, and esbuild 0.28.2 prints the same rules in the same order):

printf '@import "./g.css";\n@import "./x.css";\n@import "./y.css";\n@import "./x.css";\n' > entry.css
printf '@media print { @layer a { .g { color: green } } }\n' > g.css
printf '@layer a { .t { color: red } }\n' > x.css
printf '@layer u { .t { color: blue } }\n' > y.css
bun build ./entry.css --minify
# main: @media print{@layer a{.g{color:green}}}@layer u{.t{color:#00f}}@layer a{.t{color:red}}
# here: @media print{@layer a{.g{color:green}}}@layer a;@layer u{.t{color:#00f}}@layer a{.t{color:red}}

The second read of the flat list is the list that stands for a duplicate import:

printf '@import "./tokens.css";\n@import "./other.css";\n@import "./tokens.css";\n' > entry.css
printf '@media (prefers-color-scheme: dark) { @layer theme { :root { --bg: black } } }\n' > tokens.css
printf '@layer base { .t { color: blue } }\n@layer theme { .t { color: red } }\n' > other.css
bun build ./entry.css --minify
# main: @layer theme;@layer base{.t{color:#00f}}@layer theme{.t{color:red}}@media (prefers-color-scheme:dark){@layer theme{:root{--bg:black}}}
# here: @media (prefers-color-scheme:dark){@layer theme{:root{--bg:black}}}@layer base{.t{color:#00f}}@layer theme{.t{color:red}}@media (prefers-color-scheme:dark){@layer theme{:root{--bg:black}}}

In light mode the source files give .t red. The bundle of main gives blue (Chrome 153). A file that is imported first and states the order (@layer base, theme;) makes the bundle of main right.

The two commits.

• Commit 1 (129b6ca64b, +112/-33 in src/css/css_parser.rs, 14 cases css/CSSAtLayerOrderFirstDeclaration*, 4 fail on css: emit @layer statements that precede @import before the imported files #41572). css: emit @layer statements that precede @import before the imported files #41572 sets has_conditional_layer_names in on_layer_rule: for each name inside a conditional block it scans every earlier name for an equal one. That scan is quadratic (20,000 layers that 20,000 @media blocks name again: a build takes 7,022 M instructions on css: emit @layer statements that precede @import before the imported files #41572, 803 M on main and 816 M here). It also flags a file that needs no copy: @layer a.b {...} @media print { @layer a {...} } (the sublayer name declares a), @media all { @layer a {...} }, and a file whose own @import "./x.css" layer(a) declares a. Here the parser notes which names were registered inside a conditional block (mark_conditional_layer_names, cold, called from the end of a block that has a name in it). At the end of the parse one pass with a trie of layer names answers the question (first_declares_a_layer_under_a_condition, cold). A file with no layer inside a conditional block runs neither. The trie is keyed by (parent, segment): a set of whole name prefixes gives the same answer and is quadratic in the segments of one name. @media not all counts as a condition: the minifier removes the rule, so the kept copy declares nothing, as the file, and a list would declare the names.
• Commit 2 (+20/-9 in findImportedFilesInCSSOrder.rs). layers_matter is visitor.has_conditional_layer_file || <a pre-import entry>. With it on, the passes of css: emit @layer statements that precede @import before the imported files #41572 do the rest: such a file does not stand for a list, its earlier copy stays whole, and of several earlier copies under one list of import conditions only the first stays. A CSS module with composes keeps its earlier copy when that copy has no import conditions (css/CSSAtLayerConditionalComposesModule). A copy under import conditions is still a list, because such a module fails to print inside a wrapper (css modules: drop a rejected composes instead of failing the file at print time #38538).

Which rules count. Chrome 153, one page per case:

• @media and @supports: a layer named inside (block or statement, also a sublayer of a named layer) is in the layer order only while the condition holds.
• @-moz-document url-prefix(): Chrome and Safari do not have the rule, so they declare nothing. Firefox applies it to every page (not run here: Firefox is not installed).
• @container, @scope, @starting-style, and a style rule: a browser that has the rule declares the layer in every case, so these stay plain names, as in css: emit @layer statements that precede @import before the imported files #41572. A browser that has @layer and not the rule drops the rule (for example Chrome 99 to 104 for @container), and the flat list is wrong there, with the bytes of main.

A page with two style sheets (css/CSSAtLayerConditionalTwoStyleSheetsOfAPage). index.html links a.css and b.css, and both import tokens.css from the second repro. bun build ./index.html makes one import order from both style sheets, so the first copy of tokens.css is a list on main: .t is blue there and red from the source page. The dev server makes one import order per style sheet, but it links the style sheets in reverse order (#28117), so this page is blue under bun ./index.html on main and here.

Generated graphs. Two checks. A graph is right when, in every state of its conditions, .t gets the rule that the sources give it and every layer has its sublayers in the same order.

The check in the tree (test/bundler/css-layer-order.ts, scripts/css-layer-fuzz.ts) has a new conditions option: some rules are inside @media (min-width: Npx) or @supports (top: Npx), and each state of those conditions is evaluated. Five graphs are pinned in css.test.ts. bun scripts/css-layer-fuzz.ts <bun> 4000 1 <baseline> --conditions:

4,000 graphs each	Right on the baseline, wrong here	Repaired
against #41572	0	204
against #41572, --empty-blocks	3	39
against main, --empty-blocks --no-leading-statements	24	239

The --empty-blocks rows are the empty named @layer block that the minifier removes from a kept copy (#46733).

A larger generator (not in the tree) also writes @-moz-document, @container, @scope, @starting-style, @media all and @media not all, nested conditions, @layer statements ahead of imports, cyclic imports, and imports with layer(x), supports() and media conditions. Its model agrees with Chrome 153 on 1,070 cases, and the check in the tree agrees with it on 15,064 states.

20,000 graphs each	Wrong on #41572	Wrong here	Right on #41572, wrong here	Right on main, wrong here
options above	2,206	157	0	0
plus bare layer imports	2,620	810	2	0
plus external imports	15,033	14,467	0	not run

• Whole graphs hide single states. First row: one graph (seed 10702) has states that go from right to wrong, and .t alone goes from right to wrong in one graph (8476). Second row against main: .t alone in 4 graphs, a state in 2. Third row: .t alone in 1 graph (14347). Each of these graphs is wrong on the baseline in another state or in a layer list.
• Second row, against css: emit @layer statements that precede @import before the imported files #41572: main is wrong on both graphs. css: emit @layer statements that precede @import before the imported files #41572 flags one file for a layer that a sublayer name declares and one for a name under @media all. It keeps every copy of that file, also the copy under a bare layer, and is right by that. Commit 1 alone has the same two.
• Third row: the model counts a block ahead of an external @import as wrong and cannot read a data: import, which is in 58% of these bundles.
• With no @media, @supports or @-moz-document rule in any file (10,000 graphs, every other option): 0 bundles differ from css: emit @layer statements that precede @import before the imported files #41572.
• Commit 1 alone against css: emit @layer statements that precede @import before the imported files #41572 (first row): the bytes of 416 bundles change, and no cascade.

Inputs that are right on main and wrong here (todo cases, each checked in Chrome). A file with a conditional layer turns layers_matter on for the whole import order, and the kept copies and lists of that handling are not right everywhere yet:

• css/CSSAtLayerConditionalKeptCopyUnderABareLayer: a copy under a bare layer import prints as an unnamed layer of its own. The import order cannot tell two bare layer imports apart.
• css/CSSAtLayerConditionalEmptyBlockInAKeptCopy: the minifier removes an empty @layer a {} from the kept copy (css: keep same-condition @supports rules and empty named @layer blocks #46733).
• css/CSSAtLayerConditionalNamespaceBehindALayeredCopy and css/CSSAtLayerConditionalCopyAheadOfNamespace: a kept copy is a block, and a block ahead of @namespace makes that rule invalid (css bundler: print misplaced @namespace rules once, after the @import rules of the chunk #46232). Main prints the same kind of block for a list under import conditions.
• css/CSSAtLayerConditionalUnnamedBlockWithImportantAndAnotherFile: a file with an unnamed @layer {} block and !important, imported bare and under layer(v). A list cannot declare an unnamed layer, and the list under layer(v) now stays between the bare list and the file.
• css/CSSAtLayerConditionalTwoEntryPointsWithOneKey: two JS entry points whose import orders differ only in import conditions get one style sheet, because the key of a CSS chunk leaves the conditions out (bundler: compare CSS import orders before two entry points share a stylesheet #46357).

Open concerns from the self-review. Seventeen were raised. Ten are done: the split into two commits, the corrected account (esbuild's changelog, the real price of a kept copy, counts against main, the dev server), the cases for the flag, the two cases with external imports, five pinned graphs, and the todo cases above. Seven wait for the answers, because they change the remedy or need more test tools:

• The keep rule does not ask whether the earlier copy is needed. A copy stays also when nothing between it and the next copy declares a layer, and when an earlier file already declares the layer in every case. Two pages that share a style sheet on main can get two here.
• A file under several lists of import conditions (bare, screen, print) keeps one copy per list.
• Each composes ... from statement is a visit, so the number of statements can decide whether a module prints twice.
• @namespace is also lost through a cyclic import's layer entry and through a list that stays. Only two paths have a todo case.
• The checks write no !important, no unnamed @layer {} block, no @namespace and only one entry point.
• The dev server calls the pass once per style sheet, and no test reads what it serves for such a file.

The compact list that this draft does not have. A first version (branch robobun/99b5b433/css-conditional-layer-names, no PR) recorded each conditional name with its rule in the parser and printed @media print{@layer a;} in place of the earlier copy. That is the form of esbuild's list, with the condition added. It is +442/-151 lines in src/ against +132/-42 here.

	Kept copy (this draft)	Compact list
First row above, wrong graphs	157	160
Second row, right on #41572 and wrong	2	57
An unnamed @layer {} with !important in such a file (css/CSSAtLayerConditionalUnnamedBlockWithImportant)	right	wrong
A 92 KB file that two style sheets import, raw bytes	272,487	136,320
Release .text against #41572	+2,816	+10,752

Measurements. Release builds of main 5c6d4e2, of #41572 at 1bae41a, and of this branch.

• Instructions for one top-level block with no layer in it, counted by single-step in gdb from the entry of parse_block to its return:

Block	main	#41572	here
@media (min-width:1px){.a{color:red}}	5,991	5,994	5,999
@supports (display:grid){.a{color:red}}	5,993	5,996	5,995
@-moz-document url-prefix(){.a{color:red}}	6,003	6,006	6,008

• A file with a layer inside a conditional block: daisyui.css (1.1 MB, 528 layer names, 255 conditional blocks with a name in them) runs mark_conditional_layer_names 255 times (27,502 instructions) and the end pass once (334,739 instructions). The scan that this replaces takes 163,740 instructions on css: emit @layer statements that precede @import before the imported files #41572 for that file, so the file pays 198,501 instructions more here (0.04% of its build). The 15 stylesheets in test/js/bun/css/files run neither.
• size_of: BundlerAtRuleParser 120 bytes (104 on css: emit @layer statements that precede @import before the imported files #41572, 72 on main). StyleSheet (520), CssImportOrder (104) and Layers (24) are as on css: emit @layer statements that precede @import before the imported files #41572.
• Release .text: 82,242,969 bytes (82,240,153 on css: emit @layer statements that precede @import before the imported files #41572, 82,231,705 on main).
• Bundle bytes: first repro 86 to 95, second repro 134 to 188. pico.css (92 KB) with one conditional layer, imported by two style sheets: 136,284 to 272,487 raw, 13,345 to 26,217 with gzip -9, 11,112 to 11,138 with brotli. A 92 KB file that css: emit @layer statements that precede @import before the imported files #41572 flags by mistake (@layer theme.dark {...} ahead of @media print { @layer theme {...} }), under two style sheets behind a statement: 272,534 on css: emit @layer statements that precede @import before the imported files #41572, 136,325 with commit 1.

Suites. bun bd test (debug build with ASAN): test/bundler/esbuild/css.test.ts 149 pass and 15 todo, test/bundler/css/ 184 pass, test/js/bun/css/css.test.ts 1,315 pass, test/bundler/bundler_html.test.ts 26 pass, test/bake/dev/css.test.ts 18 pass, test/regression/issue/20546.test.ts and 28914.test.ts pass.

Other open PRs.

• css: keep same-condition @supports rules and empty named @layer blocks #46733 keeps an empty named @layer block as a statement.
• css bundler: print misplaced @namespace rules once, after the @import rules of the chunk #46232 (draft, on css: keep bundled @import rules in StyleSheet.imports, out of the printable rule list #46040) moves @namespace rules to the top of the chunk. css: keep bundled @import rules in StyleSheet.imports, out of the printable rule list #46040 takes @import rules out of the rule list, which is where commit 1 reads the file's own @import ... layer(x) rules. Whichever merges second has to read them from the new place.
• bundler: compare CSS import orders before two entry points share a stylesheet #46357 compares import orders before two entry points share a style sheet.
• css modules: drop a rejected composes instead of failing the file at print time #38538 lets a CSS module with composes print inside a wrapper.

---

[human-review] gate passed · iteration 0 · 5 files touched

fails on main (without fix)

ASAN without fix: 37 failed, 15 skipped
$ BUN_DEBUG_QUIET_LOGS=1 bun scripts/build.ts --profile=debug --quiet test "--reporter=junit" "--reporter-outfile=/tmp/pr_gate.xml" test/bundler/esbuild/css.test.ts
bun test v1.4.4 (367d939d9)

test/bundler/esbuild/css.test.ts:
(pass) bundler > css/CSSEntryPoint [487.97ms]
(pass) bundler > css/CSSEntryPointEmpty [79.85ms]
(pass) bundler > css/CSSNesting [96.28ms]
(pass) bundler > css/CSSAtImportMissing [90.47ms]
(pass) bundler > css/CSSAtImportSimple [94.49ms]
(pass) bundler > css/CSSAtImportDiamond [95.26ms]
(pass) bundler > css/CSSAtImportCycle [85.08ms]
(pass) bundler > css/CSSUrlImport [86.51ms]
(pass) bundler > css/ImportCSSFromJSComposes [117.47ms]
(pass) bundler > css/ImportCSSFromJSComposesFromMissingImport [300.95ms]
(pass) bundler > css/ImportCSSFromJSComposesFromNotCSS [86.88ms]
(pass) bundler > css/ImportCSSFromJSComposesCircular [102.31ms]
(pass) bundler > css/ImportCSSFromJSComposesFromCircular [114.66ms]
(pass) bundler > css/ImportCSSFromJSComposesIDSelector [75.31ms]
(pass) bundler > css/ImportCSSFromJSComposesElementSelector [80.07ms]
(pass) bundler > css/ImportCSSFromJSComposesCompoundSelector [86.64ms]
(pass) bundler > css/ImportCSSFromJSComposesC
... (truncated)

release without fix: 33 failed, 15 skipped
bun test v1.4.4-canary.1 (1bae41a98)

test/bundler/esbuild/css.test.ts:
(pass) bundler > css/CSSEntryPoint [75.22ms]
(pass) bundler > css/CSSEntryPointEmpty [17.58ms]
(pass) bundler > css/CSSNesting [11.32ms]
(pass) bundler > css/CSSAtImportMissing [14.98ms]
(pass) bundler > css/CSSAtImportSimple [23.56ms]
(pass) bundler > css/CSSAtImportDiamond [16.21ms]
(pass) bundler > css/CSSAtImportCycle [10.63ms]
(pass) bundler > css/CSSUrlImport [21.32ms]
(pass) bundler > css/ImportCSSFromJSComposes [17.31ms]
(pass) bundler > css/ImportCSSFromJSComposesFromMissingImport [46.43ms]
(pass) bundler > css/ImportCSSFromJSComposesFromNotCSS [14.56ms]
(pass) bundler > css/ImportCSSFromJSComposesCircular [14.93ms]
(pass) bundler > css/ImportCSSFromJSComposesFromCircular [15.33ms]
(pass) bundler > css/ImportCSSFromJSComposesIDSelector [11.65ms]
(pass) bundler > css/ImportCSSFromJSComposesElementSelector [7.59ms]
(pass) bundler > css/ImportCSSFromJSComposesCompoundSelector [13.03ms]
(pass) bundler > css/ImportCSSFromJSComposesComplexSelector [20.36ms]
(pass) bundler > css/ImportCSSFromJSComposesPseudoClass [31.93ms]
(pass) bundler > css/ImportCSSFromJSComposesAttributeSelector [11.59ms]
... (truncated)

passes on PR (with fix)

ASAN with fix: 15 skipped
$ BUN_DEBUG_QUIET_LOGS=1 bun scripts/build.ts --profile=debug --quiet test "--reporter=junit" "--reporter-outfile=/tmp/pr_gate.xml" test/bundler/esbuild/css.test.ts
bun test v1.4.4 (367d939d9)

test/bundler/esbuild/css.test.ts:
(pass) bundler > css/CSSEntryPoint [477.84ms]
(pass) bundler > css/CSSEntryPointEmpty [96.12ms]
(pass) bundler > css/CSSNesting [90.69ms]
(pass) bundler > css/CSSAtImportMissing [77.49ms]
(pass) bundler > css/CSSAtImportSimple [95.23ms]
(pass) bundler > css/CSSAtImportDiamond [85.71ms]
(pass) bundler > css/CSSAtImportCycle [76.22ms]
(pass) bundler > css/CSSUrlImport [89.70ms]
(pass) bundler > css/ImportCSSFromJSComposes [124.05ms]
(pass) bundler > css/ImportCSSFromJSComposesFromMissingImport [322.34ms]
(pass) bundler > css/ImportCSSFromJSComposesFromNotCSS [68.45ms]
(pass) bundler > css/ImportCSSFromJSComposesCircular [108.99ms]
(pass) bundler > css/ImportCSSFromJSComposesFromCircular [120.91ms]
(pass) bundler > css/ImportCSSFromJSComposesIDSelector [98.70ms]
(pass) bundler > css/ImportCSSFromJSComposesElementSelector [117.08ms]
(pass) bundler > css/ImportCSSFromJSComposesCompoundSelector [84.58ms]
(pass) bundler > css/ImportCSSFromJSComposes
... (truncated)

release with fix: 15 skipped
$ bun scripts/build.ts --profile=release
[configured] bun-profile → bun (stripped) in 1283ms (unchanged)
ninja: Entering directory `/workspace/bun/build/release'
[1/110] build.rs build_script_build
[2/110] rustc bun_platform 
[3/110] rustc bun_core 
[4/110] rustc bun_safety 
[5/110] rustc bun_output 
[6/110] rustc bun_zlib_sys 
[7/110] rustc bun_zstd 
[8/110] rustc bun_brotli 
[9/110] rustc bun_picohttp 
[10/110] rustc bun_base64 
[11/110] rustc bun_boringssl_sys 
[12/110] rustc bun_ptr 
[13/110] rustc bun_cares_sys 
[14/110] rustc bun_lsquic_sys 
[15/110] rustc bun_errno 
[16/110] rustc bun_clap 
[17/110] rustc bun_valkey 
[18/110] rustc bun_tcc_sys 
[19/110] rustc bun_text_diff 
[20/110] rustc bun_paths 
[21/110] rustc bun_shell_parser 
warning: `feature(generic_const_exprs)` is not supported with the next-generation trait solver
 --> src/shell_parser/lib.rs:1:30
  |
1 | #![feature(adt_const_params, generic_const_exprs, allocator_api)]
  |                              ^^^^^^^^^^^^^^^^^^^
  |
  = note: `-Znext-solver=globally` is currently enabled by default for testing
  = note: reverted the setting to `-Znext-solver=coherence` for this crate
  = note: the curre
... (truncated)

diff hotspot

scripts/css-layer-fuzz.ts                          |   5 +-
 .../linker_context/findImportedFilesInCSSOrder.rs  |  29 +-
 src/css/css_parser.rs                              | 145 +++-
 test/bundler/css-layer-order.ts                    |  72 +-
 test/bundler/esbuild/css.test.ts                   | 801 +++++++++++++++++++++
 5 files changed, 993 insertions(+), 59 deletions(-)

gate history · 1 passed · 0 rejected · iteration 0

evidence per changed file

file                                                      reads  edits  tests
scripts/css-layer-fuzz.ts                                     0      0     51
…c/bundler/linker_context/findImportedFilesInCSSOrder.rs      4      0     49
src/css/css_parser.rs                                         6      1     49
test/bundler/css-layer-order.ts                               0      0     53
test/bundler/esbuild/css.test.ts                              5      2     49

[robobun]

^{Updated 5:41 PM PT - Oct 25th, 2026}

✅ @robobun, your commit 8a5d5309286f570bb6b51c225eb09af861a12025 passed in Build #132830! 🎉

---

🧪   To try this PR locally:

bunx bun-pr 46934

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

bun-46934 --bun

[robobun]

Status

Reproduced on main at 5c6d4e2 and on #41572 at 1bae41a:

printf '@import "./g.css";\n@import "./x.css";\n@import "./y.css";\n@import "./x.css";\n' > entry.css
printf '@media print { @layer a { .g { color: green } } }\n' > g.css
printf '@layer a { .t { color: red } }\n' > x.css
printf '@layer u { .t { color: blue } }\n' > y.css
bun build ./entry.css --minify

The bundle is @media print{@layer a{.g{color:green}}}@layer u{.t{color:#00f}}@layer a{.t{color:red}}. On a screen the source files give .t blue and the bundle gives red (Chrome 153). With this branch the bundle keeps @layer a; and gives blue.

PR: #46934 (draft, parked until the two questions on #41572 have an answer).

[Jarred-Sumner]

Not taken in #47025 (7942008), which consolidated the open CSS parser pull requests. The fix is right, but none of the 10,116 real stylesheets it was checked against has this input, and it is not new syntax. Reopen it if the input shows up in real CSS.

[robobun]

Understood. Two notes for a later reopen:

• Branch robobun/99b5b433/css-conditional-layer-gate (8a5d530) keeps both commits and their tests. It is based on css: emit @layer statements that precede @import before the imported files #41572.
• Until then, a file that is imported first and states the layer order (for example @layer base, theme;) gives the right bundle on main.