Repository navigation
Conversation
`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.
|
Updated 8:29 PM PT - Oct 18th, 2026
✅ @robobun, your commit 2ab9346f88e4122cedf1506037ec2ac89f2d5719 passed in 🧪 To try this PR locally: bunx bun-pr 45961That installs a local version of the PR into your 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.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info
WalkthroughThe CSS parser now treats ChangesCSS Modules parsing boundaries
Suggested reviewers: Priority: ➖ Normal Merge Risk: ⚪ Minimal · up to
|
There was a problem hiding this comment.
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.
`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.
b50dd48 to
757eba4
Compare
composes as CSS modules syntax only in a CSS module
There was a problem hiding this comment.
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.
|
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 ( echo '.g { color: red }' > g.css
echo '.k { composes: g from "./g.css" }' > composes.css
bun build ./composes.css --outdir outBoth printed PR: #45961 |
There was a problem hiding this comment.
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.
| 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; |
There was a problem hiding this comment.
🟣 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.
There was a problem hiding this comment.
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.
### 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.
|
Thanks. I checked main at 7942008 with a debug build:
Nothing else from this branch is necessary. |
Problem
.k { composes: g from "./g.css" }makesbun buildinlineg.css(Bundled 2 modules). A missing file fails:Could not resolve: "./missing-dir/x.css".composes: 12pxfails witherror: Invalid declaration.--no-bundlefails witherror: Unexpected token: url(./g.css) parsing.PropertyId::Composesarm ofProperty::parse(src/css/properties/properties_generated.rs:3687) runs in every stylesheet and creates an import record.Fix
StyleRule::to_css_base, one inparse_declaration_impl.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.: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
*.module.css),composes: a from "./b.module.css"is an import record: the bundler loads that file.input.flags, the file's mode:optionsis a default inside@keyframes.composesrecords: parse errors stay.Downsides
composes ... fromnames. That includesa.module.scssthat a plugin loads ascss.bun pm diffon main reports acomposestarget as a new import. 1.4.2 and this branch do not..text-256 B.composesin a CSS module: +2 instructions inProperty::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:
Before (1.4.2 and main):
Bundled 2 modules, andout/composes.csshas the rules ofg.cssandcomposes: 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::parsecreate 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 hadconditional: { css_modules: true }forcomposes, 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 pluginonResolvedoes not see the specifier. The metafile has nocomposesimport for it.composessyntax (12px,from "./x.css",a from,var(--x)) no longer fails the build.bun build --no-bundleno longer fails oncomposes ... from "<file>".@media),@page,@keyframes,@container style().composes: a from url(x.png)has an ordinaryurl()token. The bundler resolves it like each otherurl()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 eachurl()does there (bun build --no-bundle: keep css url() references instead of failing to parse #38528)..module.cssis not a CSS module. This includesa.module.scssthat a plugin returns withloader: "css". No release scoped such a file: its import gives{}before and after. A plugin gets a CSS module when itsonResolvereturns a path that ends in.module.css.Measured (release builds of
59003546239and of this branch on it):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)composesin a CSS module: +2 instructions, +1 branch per declaration (objdump diff ofProperty::parse. Dynamic, whole change: -12.9 instructions and +0.09 branches per rule over 50,000, noise floor 11,900 of 156.9G)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)composesimports 1 to 0, onResolve calls 2 to 1. 13-position sheet: composes records 13 to 0, url records 0 to 1composes: 12px,--no-bundle). Module fixtures: 0 differing output bytes, 0 differing metafile importsbun pm diff: reported composes imports 1 to 0 (.module.css), 1 to 0 (.css). A file withcomposes: 12px:not parsedtonormalizedHow: the objdump diff is
llvm-objdump -dofProperty::parsewith addresses removed. The two added instructions aretest byte ptr [r15 + 0x19], 0x1and ajeto the existing token-list fallback.RuleBodyParser::nexthasparse_declaration_implinlined. No other text symbol changes size. Instruction counts areinstructions:ufromperf_event_open, as medians of 5 interleaved runs ofbun build --no-bundle. Allocation counts are gdb breakpoint hit counts on themi_*entry points. Syscall counts are from gdbcatch syscall.perf,strace,valgrindandbloatyare not installed here. The module fixtures are thefilesof the module tests oftest/bundler/esbuild/css.test.ts(15) andtest/bundler/css/css-modules.test.ts(12), built with--metafileand compared withdiff -r.bun pm diffparses each stylesheet as plain CSS (src/runtime/cli/pm_diff_normalize.rs:928). On main it lists acomposestarget with a bare specifier undernew module imports, for a.module.cssfile 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@importtarget. To list thecomposestargets of.module.cssfiles 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
composesprobes (main: 4). The 4 others differ in the case ofCOMPOSES, lowered nesting, the space in an emptycomposes:value, andfrom 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 beforeComposes::parse, nocomposesimport record exists for a plain stylesheet, so no later layer has to skip one. Theoptionstest of lightningcss would also turncomposesin a@keyframesblock 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@keyframesfixture of #38538 does.Self-review items not taken.
:globalchange to this PR. A bare:globalin 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.KeyframesListParserandContainerCondition::parse, so thatoptionsand the parser flag always agree. It is a refactor of 30 to 50 lines with no output change.onResolvereturns a.module.csspath. It passes on main.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.
composesthat Bun rejects or ignores (nested rule, compound selector,@keyframes,@page) still imports its file. css modules: drop a rejected composes instead of failing the file at print time #38538 has that change. It rewrites the two blocks that this PR simplifies (StyleRule::to_css_base,parse_declaration_impl).@container style(composes: ...)in a CSS module is not in it.bun build --no-bundlehas no import record list, so eachurl()fails there, and so doescomposes ... from "<file>"in a CSS module (bun build --no-bundle: keep css url() references instead of failing to parse #38528).css/ComposesFromInPlainCSSPrintsAsWritten. With this PR that test repeatscss/ComposesInPlainCSSIsNotAnImport. The second of the two PRs to merge removes it..module.css(esbuild has thelocal-cssloader).@valuerule. lightningcss rejects@valuein a CSS module.unprefixed: false(box-orient,flex-pack,mask-box-image). Bun accepts those names with no prefix.@custom-mediaarm (src/css/css_parser.rs:1234) has noCUSTOM_MEDIAflag test.COMPOSES:prints ascomposes:. Bun prints each known property name in lower case.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 oftest/bundler/bundler_splitting.test.ts(7 pass),test/bundler/cli.test.ts. Incli.test.tsthe--compiletests 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.tsandtest/js/bun/css/css-fuzz.test.tspass.