diff --git a/.changeset/popular-dogs-exist.md b/.changeset/popular-dogs-exist.md new file mode 100644 index 0000000000..6d8011b0bb --- /dev/null +++ b/.changeset/popular-dogs-exist.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly prune CSS for elements inside snippets diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js index 83c50c73d0..d017b215f2 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js +++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js @@ -201,16 +201,19 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) { const parent = path[i]; if (parent.type === 'SnippetBlock') { - if (seen.has(parent)) return true; - seen.add(parent); + if (seen.has(parent)) { + parent_matched = true; + } else { + seen.add(parent); - for (const site of parent.metadata.sites) { - if (apply_combinator(relative_selector, parent_selectors, rule, site)) { - return true; + for (const site of parent.metadata.sites) { + if (apply_combinator(relative_selector, parent_selectors, rule, site)) { + parent_matched = true; + } } } - return false; + break; } if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') { diff --git a/packages/svelte/tests/css/samples/render-tag-loop/expected.css b/packages/svelte/tests/css/samples/render-tag-loop/expected.css index 1f05ddb41c..9ced15e964 100644 --- a/packages/svelte/tests/css/samples/render-tag-loop/expected.css +++ b/packages/svelte/tests/css/samples/render-tag-loop/expected.css @@ -1,5 +1,5 @@ - div div.svelte-xyz { + div.svelte-xyz div:where(.svelte-xyz) { color: green; } /* (unused) div + div { diff --git a/packages/svelte/tests/css/samples/snippets-elements/expected.css b/packages/svelte/tests/css/samples/snippets-elements/expected.css new file mode 100644 index 0000000000..22dcfce37f --- /dev/null +++ b/packages/svelte/tests/css/samples/snippets-elements/expected.css @@ -0,0 +1,4 @@ + + x.svelte-xyz y:where(.svelte-xyz) { + color: green; + } diff --git a/packages/svelte/tests/css/samples/snippets-elements/input.svelte b/packages/svelte/tests/css/samples/snippets-elements/input.svelte new file mode 100644 index 0000000000..a4d7f25375 --- /dev/null +++ b/packages/svelte/tests/css/samples/snippets-elements/input.svelte @@ -0,0 +1,13 @@ +{#snippet foo()} + + + +{/snippet} + +{@render foo()} + +