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..55741e51de 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -13,6 +13,7 @@ import { dev } from '../../../state.js'; * hash: string; * minify: boolean; * selector: string; + * is_global_block: boolean; * keyframes: string[]; * specificity: { * bumped: boolean @@ -36,6 +37,7 @@ export function render_stylesheet(source, analysis, options) { minify: analysis.inject_styles && !options.dev, selector: `.${analysis.css.hash}`, keyframes: analysis.css.keyframes, + is_global_block: false, specificity: { bumped: false } @@ -154,7 +156,7 @@ const visitors = { return; } - if (!is_used(node)) { + if (!is_used(node) && !state.is_global_block) { if (state.minify) { state.code.remove(node.start, node.end); } else { @@ -182,20 +184,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, { ...state, is_global_block: true }); return; } - - // don't recurse into body - visit(node.prelude); - return; } - next(); + next({ ...state, is_global_block: node.metadata.is_global_block || state.is_global_block }); }, 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 ( + !state.is_global_block && + !path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used) + ) { const children = node.children; let pruning = false; let prune_start = children[0].start; diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css index 3acc1b0212..c13985b3ff 100644 --- a/packages/svelte/tests/css/samples/global-block/expected.css +++ b/packages/svelte/tests/css/samples/global-block/expected.css @@ -69,3 +69,14 @@ color: red; } }*/ + /* :global{*/ + .x{ + animation: svelte-xyz-test 1s; + } + /*}*/ + + @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..1ae8a06fdb 100644 --- a/packages/svelte/tests/css/samples/global-block/input.svelte +++ b/packages/svelte/tests/css/samples/global-block/input.svelte @@ -71,4 +71,15 @@ color: red; } } + :global{ + .x{ + animation: test 1s; + } + } + + @keyframes test{ + to{ + opacity: 1; + } + }