feat(service): treat html style attributes as CSS - #11080
Conversation
🦋 Changeset detectedLatest commit: ee221cf The changes in this PR will be included in the next version bump. This PR includes changesets to release 13 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Organic activityNo automation signals detected in the analyzed events. This is an automated analysis by AgentScan |
Merging this PR will degrade performance by 13.58%
Warning Please fix the performance issues or acknowledge them on CodSpeed. Performance Changes
Tip Investigate this regression by commenting Comparing Footnotes
|
a504b59 to
dd070ed
Compare
97ae9ff to
2338c67
Compare
b4753c2 to
c4aeb59
Compare
1964c70 to
c3db5ce
Compare
Parser conformance results onjs/262
jsx/babel
markdown/commonmark
symbols/microsoft
ts/babel
ts/microsoft
|
c3db5ce to
6cbffa6
Compare
a671e44 to
2f475a3
Compare
6cbffa6 to
b992bf0
Compare
2f475a3 to
4933150
Compare
b992bf0 to
8033925
Compare
4933150 to
981488b
Compare
8033925 to
27084d1
Compare
1d70e8c to
72bcb2d
Compare
3317649 to
d757695
Compare
72bcb2d to
57e5916
Compare
d757695 to
4cb13b7
Compare
57e5916 to
bd0901c
Compare
c9522ff to
80d2d11
Compare
9233ee9 to
016da58
Compare
80d2d11 to
b7736aa
Compare
016da58 to
5393bde
Compare
b7736aa to
e01d8b4
Compare
The value of a `style` attribute is a list of CSS declarations, but it was printed exactly as written, so whatever spacing it was pasted with stayed. It now goes through the CSS formatter, the way a `<style>` element already did. An attribute is not a block: the declarations stay on the tag's line while they fit and break onto their own lines once they do not, and the last one only takes a semicolon in the broken form. That is what `CssEmbeddingKind::HtmlStyleAttribute` selects, reusing the snippet root that already parses a bare declaration list. Such a list ends at the end of its input rather than at a `}`, so the final semicolon is now optional there — `style="color: red"` is how everyone writes it. Two supporting fixes: The trailing hard line break after embedded content moves from the `EndEmbedded` tag into the callers that wrap it. A block wants that break; an attribute value must not have one, since it would force the attribute onto its own line whatever its length. The formatter now knows which ranges have a parsed document waiting, as the JavaScript formatter already did. A hole nothing fills prints as nothing, so leaving one for a value that was never parsed would silently empty the attribute. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
e01d8b4 to
ee221cf
Compare
This PR contains the following updates: | Package | Type | Update | Change | Pending | |---|---|---|---|---| | [@biomejs/biome](https://biomejs.dev) ([source](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome)) | imports | patch | [`2.5.7` -> `2.5.8`](https://renovatebot.com/diffs/npm/@biomejs%2fbiome/2.5.7/2.5.8) | `2.5.9` | --- ### Release Notes <details> <summary>biomejs/biome (@​biomejs/biome)</summary> ### [`v2.5.8`](https://github.com/biomejs/biome/blob/HEAD/packages/@​biomejs/biome/CHANGELOG.md#258) [Compare Source](https://github.com/biomejs/biome/compare/@biomejs/biome@2.5.7...@biomejs/biome@2.5.8) ##### Patch Changes - [#​10710](biomejs/biome#10710) [`0a0fbc1`](biomejs/biome@0a0fbc1) Thanks [@​dyc3](https://github.com/dyc3)! - Added a new nursery rule [`useReactCompiler`](https://biomejs.dev/linter/rules/use-react-compiler/), which reports diagnostics from React Compiler lint mode. - [#​11251](biomejs/biome#11251) [`ea9dd8a`](biomejs/biome@ea9dd8a) Thanks [@​dyc3](https://github.com/dyc3)! - Improved performance of [`noImportCycles`](https://biomejs.dev/linter/rules/no-import-cycles/). - [#​11247](biomejs/biome#11247) [`52b44d6`](biomejs/biome@52b44d6) Thanks [@​dyc3](https://github.com/dyc3)! - Added the nursery rule [`noSvelteLegacyConst`](https://biomejs.dev/linter/rules/no-svelte-legacy-const/), which disallows legacy Svelte `{@const}` tags and recommends declaration tags with `$derived()`. Invalid: ```svelte {#each boxes as box} {@const area = box.width * box.height} <p>{area}</p> {/each} ``` Valid: ```svelte {#each boxes as box} {const area = $derived(box.width * box.height)} <p>{area}</p> {/each} ``` - [#​11252](biomejs/biome#11252) [`d5f5704`](biomejs/biome@d5f5704) Thanks [@​Turtle-Hwan](https://github.com/Turtle-Hwan)! - Fixed [#​11250](biomejs/biome#11250): [`useAwait`](https://biomejs.dev/linter/rules/use-await/) no longer reports async functions that contain an `await using` declaration. - [#​11143](biomejs/biome#11143) [`6be7be1`](biomejs/biome@6be7be1) Thanks [@​vznh](https://github.com/vznh)! - Fixed [#​11017](biomejs/biome#11017): [`noUselessUndefined`](https://biomejs.dev/linter/rules/no-useless-undefined/) no longer reports `return undefined` when the enclosing function has a return type annotation other than `undefined` or `void`. - [#​11234](biomejs/biome#11234) [`caefe39`](biomejs/biome@caefe39) Thanks [@​subotac](https://github.com/subotac)! - Fixed [#​11228](biomejs/biome#11228): CSS block comments between a declaration colon and value now preserve their source indentation. ```diff :root { --font-stack: -/* comment */ + /* comment */ system-ui; } ``` - [#​11285](biomejs/biome#11285) [`bca1f73`](biomejs/biome@bca1f73) Thanks [@​denbezrukov](https://github.com/denbezrukov)! - Fixed [#​11280](biomejs/biome#11280): CSS formatting keeps comments inside functional pseudo-classes and pseudo-elements instead of moving them before the function name. ```diff -:/* comment */ where(div) {} +:where(/* comment */ div) {} ``` - [#​11080](biomejs/biome#11080) [`af16a0b`](biomejs/biome@af16a0b) Thanks [@​dyc3](https://github.com/dyc3)! - HTML `style` attribute values are now parsed as CSS. All Biome CSS lint rules are applied to the `style` attributes. - [#​11195](biomejs/biome#11195) [`6a85588`](biomejs/biome@6a85588) Thanks [@​dyc3](https://github.com/dyc3)! - Fixed Svelte files failing to parse when an expression begins with an object literal. Now the following snippet is correctly parsed: ```svelte <p>{{ a: true }}</p> <div class={{ active: isActive }}></div> ``` - [#​11173](biomejs/biome#11173) [`481d008`](biomejs/biome@481d008) Thanks [@​Austin1serb](https://github.com/Austin1serb)! - Fixed [#​10242](biomejs/biome#10242): JavaScript GritQL patterns with multiple metavariables now match snippets consistently in WebAssembly. - [#​11187](biomejs/biome#11187) [`23c0369`](biomejs/biome@23c0369) Thanks [@​ematipico](https://github.com/ematipico)! - Added the nursery rule [`noInvalidPropertyInitValue`](https://biomejs.dev/linter/rules/no-invalid-property-init-value/), which reports an `@property` whose `initial-value` does not match its `syntax` descriptor. For example, the following declaration triggers the rule because `red` is not a `<length>`: ```css @Property --size { syntax: "<length>"; inherits: false; initial-value: red; } ``` - [#​11272](biomejs/biome#11272) [`73896e6`](biomejs/biome@73896e6) Thanks [@​ematipico](https://github.com/ematipico)! - Improved the diagnostic emitted by [`noRootType`](https://biomejs.dev/linter/rules/no-root-type). - [#​11240](biomejs/biome#11240) [`bd0b68d`](biomejs/biome@bd0b68d) Thanks [@​ematipico](https://github.com/ematipico)! - Fixed [#​11223](biomejs/biome#11223): Improved the performance of [`noMisusedPromises`](https://biomejs.dev/linter/rules/no-misused-promises/) when analyzing async class methods that call other methods through `this`. - [#​11172](biomejs/biome#11172) [`4a0bc5c`](biomejs/biome@4a0bc5c) Thanks [@​saberoueslati](https://github.com/saberoueslati)! - Fixed [#​10806](biomejs/biome#10806): [`noUselessFragments`](https://biomejs.dev/linter/rules/no-useless-fragments/) no longer causes Biome to panic when its unsafe fix removes a fragment used as a JSX attribute value. - [#​11227](biomejs/biome#11227) [`4d603b0`](biomejs/biome@4d603b0) Thanks [@​saberoueslati](https://github.com/saberoueslati)! - Fixed [#​11178](biomejs/biome#11178): [`noUndeclaredVariables`](https://biomejs.dev/linter/rules/no-undeclared-variables/) no longer reports Vue's built-in instance properties, such as `$slots` and `$attrs`, in template expressions or `$event` in inline event-handler expressions. The instance properties are still reported inside `<script setup>`, where they are not defined. - [#​11187](biomejs/biome#11187) [`23c0369`](biomejs/biome@23c0369) Thanks [@​ematipico](https://github.com/ematipico)! - Fixed CSS parsing of registered custom properties: Biome now correctly validates the `syntax` descriptor of `@property` rules. </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4zMC4zIiwidXBkYXRlZEluVmVyIjoiNDQuMzAuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Reviewed-on: https://git.oirnoir.dev/OIRNOIR/YouTube-Helper-Client/pulls/17
This PR contains the following updates: | Package | Type | Update | Change | Pending | |---|---|---|---|---| | [@biomejs/biome](https://biomejs.dev) ([source](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome)) | imports | patch | [`2.5.7` -> `2.5.8`](https://renovatebot.com/diffs/npm/@biomejs%2fbiome/2.5.7/2.5.8) | `2.5.9` | --- ### Release Notes <details> <summary>biomejs/biome (@​biomejs/biome)</summary> ### [`v2.5.8`](https://github.com/biomejs/biome/blob/HEAD/packages/@​biomejs/biome/CHANGELOG.md#258) [Compare Source](https://github.com/biomejs/biome/compare/@biomejs/biome@2.5.7...@biomejs/biome@2.5.8) ##### Patch Changes - [#​10710](biomejs/biome#10710) [`0a0fbc1`](biomejs/biome@0a0fbc1) Thanks [@​dyc3](https://github.com/dyc3)! - Added a new nursery rule [`useReactCompiler`](https://biomejs.dev/linter/rules/use-react-compiler/), which reports diagnostics from React Compiler lint mode. - [#​11251](biomejs/biome#11251) [`ea9dd8a`](biomejs/biome@ea9dd8a) Thanks [@​dyc3](https://github.com/dyc3)! - Improved performance of [`noImportCycles`](https://biomejs.dev/linter/rules/no-import-cycles/). - [#​11247](biomejs/biome#11247) [`52b44d6`](biomejs/biome@52b44d6) Thanks [@​dyc3](https://github.com/dyc3)! - Added the nursery rule [`noSvelteLegacyConst`](https://biomejs.dev/linter/rules/no-svelte-legacy-const/), which disallows legacy Svelte `{@const}` tags and recommends declaration tags with `$derived()`. Invalid: ```svelte {#each boxes as box} {@const area = box.width * box.height} <p>{area}</p> {/each} ``` Valid: ```svelte {#each boxes as box} {const area = $derived(box.width * box.height)} <p>{area}</p> {/each} ``` - [#​11252](biomejs/biome#11252) [`d5f5704`](biomejs/biome@d5f5704) Thanks [@​Turtle-Hwan](https://github.com/Turtle-Hwan)! - Fixed [#​11250](biomejs/biome#11250): [`useAwait`](https://biomejs.dev/linter/rules/use-await/) no longer reports async functions that contain an `await using` declaration. - [#​11143](biomejs/biome#11143) [`6be7be1`](biomejs/biome@6be7be1) Thanks [@​vznh](https://github.com/vznh)! - Fixed [#​11017](biomejs/biome#11017): [`noUselessUndefined`](https://biomejs.dev/linter/rules/no-useless-undefined/) no longer reports `return undefined` when the enclosing function has a return type annotation other than `undefined` or `void`. - [#​11234](biomejs/biome#11234) [`caefe39`](biomejs/biome@caefe39) Thanks [@​subotac](https://github.com/subotac)! - Fixed [#​11228](biomejs/biome#11228): CSS block comments between a declaration colon and value now preserve their source indentation. ```diff :root { --font-stack: -/* comment */ + /* comment */ system-ui; } ``` - [#​11285](biomejs/biome#11285) [`bca1f73`](biomejs/biome@bca1f73) Thanks [@​denbezrukov](https://github.com/denbezrukov)! - Fixed [#​11280](biomejs/biome#11280): CSS formatting keeps comments inside functional pseudo-classes and pseudo-elements instead of moving them before the function name. ```diff -:/* comment */ where(div) {} +:where(/* comment */ div) {} ``` - [#​11080](biomejs/biome#11080) [`af16a0b`](biomejs/biome@af16a0b) Thanks [@​dyc3](https://github.com/dyc3)! - HTML `style` attribute values are now parsed as CSS. All Biome CSS lint rules are applied to the `style` attributes. - [#​11195](biomejs/biome#11195) [`6a85588`](biomejs/biome@6a85588) Thanks [@​dyc3](https://github.com/dyc3)! - Fixed Svelte files failing to parse when an expression begins with an object literal. Now the following snippet is correctly parsed: ```svelte <p>{{ a: true }}</p> <div class={{ active: isActive }}></div> ``` - [#​11173](biomejs/biome#11173) [`481d008`](biomejs/biome@481d008) Thanks [@​Austin1serb](https://github.com/Austin1serb)! - Fixed [#​10242](biomejs/biome#10242): JavaScript GritQL patterns with multiple metavariables now match snippets consistently in WebAssembly. - [#​11187](biomejs/biome#11187) [`23c0369`](biomejs/biome@23c0369) Thanks [@​ematipico](https://github.com/ematipico)! - Added the nursery rule [`noInvalidPropertyInitValue`](https://biomejs.dev/linter/rules/no-invalid-property-init-value/), which reports an `@property` whose `initial-value` does not match its `syntax` descriptor. For example, the following declaration triggers the rule because `red` is not a `<length>`: ```css @Property --size { syntax: "<length>"; inherits: false; initial-value: red; } ``` - [#​11272](biomejs/biome#11272) [`73896e6`](biomejs/biome@73896e6) Thanks [@​ematipico](https://github.com/ematipico)! - Improved the diagnostic emitted by [`noRootType`](https://biomejs.dev/linter/rules/no-root-type). - [#​11240](biomejs/biome#11240) [`bd0b68d`](biomejs/biome@bd0b68d) Thanks [@​ematipico](https://github.com/ematipico)! - Fixed [#​11223](biomejs/biome#11223): Improved the performance of [`noMisusedPromises`](https://biomejs.dev/linter/rules/no-misused-promises/) when analyzing async class methods that call other methods through `this`. - [#​11172](biomejs/biome#11172) [`4a0bc5c`](biomejs/biome@4a0bc5c) Thanks [@​saberoueslati](https://github.com/saberoueslati)! - Fixed [#​10806](biomejs/biome#10806): [`noUselessFragments`](https://biomejs.dev/linter/rules/no-useless-fragments/) no longer causes Biome to panic when its unsafe fix removes a fragment used as a JSX attribute value. - [#​11227](biomejs/biome#11227) [`4d603b0`](biomejs/biome@4d603b0) Thanks [@​saberoueslati](https://github.com/saberoueslati)! - Fixed [#​11178](biomejs/biome#11178): [`noUndeclaredVariables`](https://biomejs.dev/linter/rules/no-undeclared-variables/) no longer reports Vue's built-in instance properties, such as `$slots` and `$attrs`, in template expressions or `$event` in inline event-handler expressions. The instance properties are still reported inside `<script setup>`, where they are not defined. - [#​11187](biomejs/biome#11187) [`23c0369`](biomejs/biome@23c0369) Thanks [@​ematipico](https://github.com/ematipico)! - Fixed CSS parsing of registered custom properties: Biome now correctly validates the `syntax` descriptor of `@property` rules. </details> --- ### Configuration 📅 **Schedule**: (UTC) - Branch creation - At any time (no schedule defined) - Automerge - At any time (no schedule defined) 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4zMC4zIiwidXBkYXRlZEluVmVyIjoiNDQuMzAuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Reviewed-on: https://git.oirnoir.dev/OIRNOIR/YouTube-Helper-Server/pulls/36
Summary
This PR makes it so
styleattributes in HTML are treated as embedded css declaration snippets.This PR originally implemented formatting too, but I've chosen to defer that to make decisions regarding these things:
<div style="background: url('/img.png')">gets formatted as<div style="background: url("/img.png")">, which is invalidimplemented by opus 5, but gpt 5.6 sol helped clean it up
supercedes and closes #10159
Test Plan
Docs
Stack created with GitHub Stacks CLI • Give Feedback 💬