From fdcb72300908de567251623ed98dfccca7f2810c Mon Sep 17 00:00:00 2001 From: navorite Date: Thu, 8 Feb 2024 17:46:51 +0200 Subject: [PATCH 1/5] fix: improve animation name transformation --- .../phases/2-analyze/css/Stylesheet.js | 29 ++++++++++--------- .../tests/css/samples/animations/expected.css | 23 +++++++++++++++ .../tests/css/samples/animations/input.svelte | 26 +++++++++++++++++ 3 files changed, 65 insertions(+), 13 deletions(-) create mode 100644 packages/svelte/tests/css/samples/animations/expected.css create mode 100644 packages/svelte/tests/css/samples/animations/input.svelte diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js index 9d45692ed5b3..9ffee8e24f46 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js @@ -6,9 +6,10 @@ import hash from '../utils/hash.js'; // import { extract_ignores_above_position } from '../utils/extract_svelte_ignore.js'; import { push_array } from '../utils/push_array.js'; import { create_attribute } from '../../nodes.js'; +import { regex_whitespace } from '../../patterns.js'; const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/; - +const regex_name_sequence = /^[\s,;}]$/; /** * @param {string} name * @returns {string} @@ -213,20 +214,22 @@ class Declaration { transform(code, keyframes) { const property = this.node.property && remove_css_prefix(this.node.property.toLowerCase()); if (property === 'animation' || property === 'animation-name') { - const name = /** @type {string} */ (this.node.value) - .split(' ') - .find((name) => keyframes.has(name)); - - if (name) { - const start = code.original.indexOf( - name, - code.original.indexOf(this.node.property, this.node.start) - ); + let index = this.node.start + this.node.property.length + 1; + let name = ''; - const end = start + name.length; + while (index < code.original.length) { + const current = code.original[index]; - const keyframe = /** @type {string} */ (keyframes.get(name)); - code.update(start, end, keyframe); + if (regex_name_sequence.test(current)) { + if (name && keyframes.has(name)) + code.update(index - name.length, index, /**@type {string}*/ (keyframes.get(name))); + + if (current === ';' || current === '}') break; + + name = ''; + } else name += current; + + index++; } } } diff --git a/packages/svelte/tests/css/samples/animations/expected.css b/packages/svelte/tests/css/samples/animations/expected.css new file mode 100644 index 000000000000..82db5cc92309 --- /dev/null +++ b/packages/svelte/tests/css/samples/animations/expected.css @@ -0,0 +1,23 @@ + + @keyframes svelte-xyz-a { + 0% { + transform: scale(1); + } + 100% { + transform: scale(2); + } + } + + @keyframes svelte-xyz-animation { + 0% { + transform: scale(1); + } + 100% { + transform: scale(2); + } + } + h1.svelte-xyz { + animation: 1s linear infinite svelte-xyz-a; + animation: svelte-xyz-a 1s linear infinite; + animation: 1s linear infinite svelte-xyz-a,svelte-xyz-animation 1s linear infinite; + } diff --git a/packages/svelte/tests/css/samples/animations/input.svelte b/packages/svelte/tests/css/samples/animations/input.svelte new file mode 100644 index 000000000000..7acb4628abc9 --- /dev/null +++ b/packages/svelte/tests/css/samples/animations/input.svelte @@ -0,0 +1,26 @@ +

test

+ + From afb15a4ee96c2f2812a64f90fcf3333ea07cec3d Mon Sep 17 00:00:00 2001 From: navorite Date: Thu, 8 Feb 2024 18:05:10 +0200 Subject: [PATCH 2/5] oops --- packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js index 9ffee8e24f46..fcd335ecbd5e 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js @@ -6,7 +6,6 @@ import hash from '../utils/hash.js'; // import { extract_ignores_above_position } from '../utils/extract_svelte_ignore.js'; import { push_array } from '../utils/push_array.js'; import { create_attribute } from '../../nodes.js'; -import { regex_whitespace } from '../../patterns.js'; const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/; const regex_name_sequence = /^[\s,;}]$/; From cd3bac9e5cc3ba8bbed484c4df6d66a1f603db6e Mon Sep 17 00:00:00 2001 From: navorite Date: Thu, 8 Feb 2024 18:07:05 +0200 Subject: [PATCH 3/5] s --- .changeset/pink-mayflies-tie.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/pink-mayflies-tie.md diff --git a/.changeset/pink-mayflies-tie.md b/.changeset/pink-mayflies-tie.md new file mode 100644 index 000000000000..6c45a2822a55 --- /dev/null +++ b/.changeset/pink-mayflies-tie.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: improve animation name transformation From fac05f3a07a525f61187c6d0b1107b2f15d2617a Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 8 Feb 2024 13:23:19 -0500 Subject: [PATCH 4/5] minor style tweaks --- .../phases/2-analyze/css/Stylesheet.js | 21 ++++++--- .../tests/css/samples/animations/expected.css | 43 ++++++++++--------- .../tests/css/samples/animations/input.svelte | 43 ++++++++++--------- 3 files changed, 58 insertions(+), 49 deletions(-) diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js index fcd335ecbd5e..09440172e426 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/Stylesheet.js @@ -8,7 +8,7 @@ import { push_array } from '../utils/push_array.js'; import { create_attribute } from '../../nodes.js'; const regex_css_browser_prefix = /^-((webkit)|(moz)|(o)|(ms))-/; -const regex_name_sequence = /^[\s,;}]$/; +const regex_name_boundary = /^[\s,;}]$/; /** * @param {string} name * @returns {string} @@ -217,16 +217,23 @@ class Declaration { let name = ''; while (index < code.original.length) { - const current = code.original[index]; + const character = code.original[index]; - if (regex_name_sequence.test(current)) { - if (name && keyframes.has(name)) - code.update(index - name.length, index, /**@type {string}*/ (keyframes.get(name))); + if (regex_name_boundary.test(character)) { + const keyframe = keyframes.get(name); - if (current === ';' || current === '}') break; + if (keyframe) { + code.update(index - name.length, index, keyframe); + } + + if (character === ';' || character === '}') { + break; + } name = ''; - } else name += current; + } else { + name += character; + } index++; } diff --git a/packages/svelte/tests/css/samples/animations/expected.css b/packages/svelte/tests/css/samples/animations/expected.css index 82db5cc92309..137a45843c45 100644 --- a/packages/svelte/tests/css/samples/animations/expected.css +++ b/packages/svelte/tests/css/samples/animations/expected.css @@ -1,23 +1,24 @@ - @keyframes svelte-xyz-a { - 0% { - transform: scale(1); - } - 100% { - transform: scale(2); - } - } + @keyframes svelte-xyz-a { + 0% { + transform: scale(1); + } + 100% { + transform: scale(2); + } + } - @keyframes svelte-xyz-animation { - 0% { - transform: scale(1); - } - 100% { - transform: scale(2); - } - } - h1.svelte-xyz { - animation: 1s linear infinite svelte-xyz-a; - animation: svelte-xyz-a 1s linear infinite; - animation: 1s linear infinite svelte-xyz-a,svelte-xyz-animation 1s linear infinite; - } + @keyframes svelte-xyz-animation { + 0% { + transform: scale(1); + } + 100% { + transform: scale(2); + } + } + + h1.svelte-xyz { + animation: 1s linear infinite svelte-xyz-a; + animation: svelte-xyz-a 1s linear infinite; + animation: 1s linear infinite svelte-xyz-a,svelte-xyz-animation 1s linear infinite; + } diff --git a/packages/svelte/tests/css/samples/animations/input.svelte b/packages/svelte/tests/css/samples/animations/input.svelte index 7acb4628abc9..2da250f9ab69 100644 --- a/packages/svelte/tests/css/samples/animations/input.svelte +++ b/packages/svelte/tests/css/samples/animations/input.svelte @@ -1,26 +1,27 @@

test

From bbc707fd5dc88935732752459260aa7e18085588 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Thu, 8 Feb 2024 13:26:29 -0500 Subject: [PATCH 5/5] expand changeset description --- .changeset/pink-mayflies-tie.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/pink-mayflies-tie.md b/.changeset/pink-mayflies-tie.md index 6c45a2822a55..a98dc0e01a8f 100644 --- a/.changeset/pink-mayflies-tie.md +++ b/.changeset/pink-mayflies-tie.md @@ -2,4 +2,4 @@ 'svelte': patch --- -fix: improve animation name transformation +fix: make CSS animation declaration transformation more robust