fix(print): handle svelte:body and fix keyframe percentage double-printing (#18234)

Fixes #18206 and fixes #18207 — both are printer bugs in
`packages/svelte/src/compiler/print/index.js`.

## Changes

### Fix 1: `svelte:body` crashes the printer (#18206)

`SvelteBody` was missing from the visitor map, causing a crash with
`Error: Not implemented: SvelteBody`. Added the handler (same one-liner
pattern as `SvelteDocument`, `SvelteHead`, etc.) and added `SvelteBody`
to the `is_block_element` check so whitespace is handled consistently.

### Fix 2: Keyframe percent stops print as `0%%` (#18207)

`Percentage.value` already includes the `%` sign (captured by
`/\d+(\.\d+)?%/y`), but the printer was writing `` `${node.value}%` `` —
appending a second `%`. Changed to `context.write(node.value)` to match
the `Nth` printer pattern directly above it.

Also updated the existing `style` snapshot which had `50%%` (the bug was
silently baked in), and added dedicated test samples for both fixes.
pull/18239/head
OfirHaf 2 weeks ago committed by GitHub
parent 2bc3592eb1
commit ca3f35bf7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
"svelte": patch
---
fix(print): handle `svelte:body` and fix keyframe percentage double-printing

@ -247,7 +247,7 @@ const css_visitors = {
},
Percentage(node, context) {
context.write(`${node.value}%`);
context.write(node.value);
},
PseudoClassSelector(node, context) {
@ -417,6 +417,7 @@ const svelte_visitors = (comments) => ({
const is_block_element =
child_node.type === 'RegularElement' ||
child_node.type === 'Component' ||
child_node.type === 'SvelteBody' ||
child_node.type === 'SvelteHead' ||
child_node.type === 'SvelteFragment' ||
child_node.type === 'SvelteBoundary' ||
@ -821,6 +822,10 @@ const svelte_visitors = (comments) => ({
context.write('</style>');
},
SvelteBody(node, context) {
base_element(node, context, comments);
},
SvelteBoundary(node, context) {
base_element(node, context, comments);
},

@ -0,0 +1,7 @@
<style>
@keyframes foo {
0% { left: 0px; }
50% { left: 50px; }
100% { left: 100px; }
}
</style>

@ -0,0 +1,13 @@
<style>
@keyframes foo {
0% {
left: 0px;
}
50% {
left: 50px;
}
100% {
left: 100px;
}
}
</style>

@ -19,7 +19,7 @@
from {
opacity: 0;
}
50%% {
50% {
opacity: 0.5;
}
to {

@ -0,0 +1 @@
<svelte:body onmousemove={handleMousemove} />

@ -0,0 +1 @@
<svelte:body onmousemove={handleMousemove}></svelte:body>
Loading…
Cancel
Save