diff --git a/.changeset/red-worms-suffer.md b/.changeset/red-worms-suffer.md new file mode 100644 index 0000000000..bf8d08ecdc --- /dev/null +++ b/.changeset/red-worms-suffer.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: transform everything that is not a selector inside `:global` 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 c1175e4b5b..75b63260d5 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -78,7 +78,7 @@ const visitors = { context.state.code.addSourcemapLocation(node.end); context.next(); }, - Atrule(node, { state, next }) { + Atrule(node, { state, next, path }) { if (is_keyframes_node(node)) { let start = node.start + node.name.length + 1; while (state.code.original[start] === ' ') start += 1; @@ -87,7 +87,7 @@ const visitors = { if (node.prelude.startsWith('-global-')) { state.code.remove(start, start + 8); - } else { + } else if (!is_in_global_block(path)) { state.code.prependRight(start, `${state.hash}-`); } @@ -134,7 +134,7 @@ const visitors = { } } }, - Rule(node, { state, next, visit }) { + Rule(node, { state, next, visit, path }) { if (state.minify) { remove_preceding_whitespace(node.start, state); remove_preceding_whitespace(node.block.end - 1, state); @@ -154,7 +154,7 @@ const visitors = { return; } - if (!is_used(node)) { + if (!is_used(node) && !is_in_global_block(path)) { if (state.minify) { state.code.remove(node.start, node.end); } else { @@ -182,20 +182,20 @@ const visitors = { state.code.appendLeft(node.block.end, '*/'); } - // don't recurse into selector or body + // don't recurse into selectors but visit the body + visit(node.block); return; } - - // don't recurse into body - visit(node.prelude); - return; } next(); }, SelectorList(node, { state, next, path }) { - // Only add comments if we're not inside a complex selector that itself is unused - if (!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)) { + // Only add comments if we're not inside a complex selector that itself is unused or a global block + if ( + !is_in_global_block(path) && + !path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used) + ) { const children = node.children; let pruning = false; let prune_start = children[0].start; @@ -359,6 +359,14 @@ const visitors = { } }; +/** + * + * @param {Array} path + */ +function is_in_global_block(path) { + return path.some((node) => node.type === 'Rule' && node.metadata.is_global_block); +} + /** * @param {Css.PseudoClassSelector} selector * @param {Css.Combinator | null} combinator diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css index 3acc1b0212..8a7c493d7c 100644 --- a/packages/svelte/tests/css/samples/global-block/expected.css +++ b/packages/svelte/tests/css/samples/global-block/expected.css @@ -69,3 +69,20 @@ color: red; } }*/ + /* :global{*/ + .x{ + animation: svelte-xyz-test 1s; + } + + @keyframes test-in{ + to{ + opacity: 1; + } + } + /*}*/ + + @keyframes svelte-xyz-test{ + 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 2f2cdfcbd5..dc1a754010 100644 --- a/packages/svelte/tests/css/samples/global-block/input.svelte +++ b/packages/svelte/tests/css/samples/global-block/input.svelte @@ -71,4 +71,21 @@ color: red; } } + :global{ + .x{ + animation: test 1s; + } + + @keyframes test-in{ + to{ + opacity: 1; + } + } + } + + @keyframes test{ + to{ + opacity: 1; + } + }