From 429e6a559e36d5fb53506f8c90c0a7dab6b971d2 Mon Sep 17 00:00:00 2001 From: Andrey Sitnik Date: Tue, 24 Dec 2024 11:26:28 +0000 Subject: [PATCH 1/2] fix: Allow to disable animation prefix --- .changeset/twenty-shoes-peel.md | 5 +++++ .../src/compiler/phases/2-analyze/css/css-analyze.js | 10 +++++++++- .../src/compiler/phases/3-transform/css/index.js | 1 + .../svelte/tests/css/samples/global-block/expected.css | 4 ++++ .../svelte/tests/css/samples/global-block/input.svelte | 4 ++++ 5 files changed, 23 insertions(+), 1 deletion(-) create mode 100644 .changeset/twenty-shoes-peel.md diff --git a/.changeset/twenty-shoes-peel.md b/.changeset/twenty-shoes-peel.md new file mode 100644 index 000000000000..a0b5edefbfb2 --- /dev/null +++ b/.changeset/twenty-shoes-peel.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +Fix disabling prefix for animation diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js index b8c88a102394..ed228385820a 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js @@ -28,11 +28,19 @@ function is_global_block_selector(simple_selector) { ); } +/** + * + * @param {Array} path + */ +function is_in_global_block(path) { + return path.some((node) => node.type === 'Rule' && node.metadata.is_global_block); +} + /** @type {CssVisitors} */ const css_visitors = { Atrule(node, context) { if (is_keyframes_node(node)) { - if (!node.prelude.startsWith('-global-')) { + if (!node.prelude.startsWith('-global-') && !is_in_global_block(context.path)) { context.state.keyframes.push(node.prelude); } } diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js index 5b0dcd558893..863fe5712cdc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -106,6 +106,7 @@ const visitors = { const character = state.code.original[index]; if (regex_css_name_boundary.test(character)) { + // TODO FIX if (state.keyframes.includes(name)) { state.code.prependRight(index - name.length, `${state.hash}-`); } diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css index 8a7c493d7c90..438749224ba6 100644 --- a/packages/svelte/tests/css/samples/global-block/expected.css +++ b/packages/svelte/tests/css/samples/global-block/expected.css @@ -74,6 +74,10 @@ animation: svelte-xyz-test 1s; } + .y{ + animation: test-in 1s; + } + @keyframes test-in{ to{ opacity: 1; diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte index dc1a7540108f..a1833636a13f 100644 --- a/packages/svelte/tests/css/samples/global-block/input.svelte +++ b/packages/svelte/tests/css/samples/global-block/input.svelte @@ -76,6 +76,10 @@ animation: test 1s; } + .y{ + animation: test-in 1s; + } + @keyframes test-in{ to{ opacity: 1; From f403c6f1d7c9b646e19672404af7db0f80269579 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 24 Dec 2024 13:12:25 +0100 Subject: [PATCH 2/2] Apply suggestions from code review --- .changeset/twenty-shoes-peel.md | 2 +- packages/svelte/src/compiler/phases/3-transform/css/index.js | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.changeset/twenty-shoes-peel.md b/.changeset/twenty-shoes-peel.md index a0b5edefbfb2..e0a8e0701dcc 100644 --- a/.changeset/twenty-shoes-peel.md +++ b/.changeset/twenty-shoes-peel.md @@ -2,4 +2,4 @@ 'svelte': patch --- -Fix disabling prefix for animation +fix: don't include keyframes in global scope in the keyframes to rename diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js index 863fe5712cdc..5b0dcd558893 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -106,7 +106,6 @@ const visitors = { const character = state.code.original[index]; if (regex_css_name_boundary.test(character)) { - // TODO FIX if (state.keyframes.includes(name)) { state.code.prependRight(index - name.length, `${state.hash}-`); }