diff --git a/.changeset/calm-heads-glow.md b/.changeset/calm-heads-glow.md new file mode 100644 index 0000000000..ee21d566bb --- /dev/null +++ b/.changeset/calm-heads-glow.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: preserve global CSS in components without scopable elements 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 dff6bb9b5a..125f096783 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 @@ -145,6 +145,19 @@ export function prune(stylesheet, elements) { }, ComplexSelector(node) { const selectors = get_relative_selectors(node); + const rule = /** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule); + const first = selectors[0]?.selectors[0]; + const is_icss_export = + selectors.length === 1 && + selectors[0].selectors.length === 1 && + first?.type === 'PseudoClassSelector' && + first.name === 'export' && + first.args === null; + + // Global and ICSS export rules do not depend on an element in this component + if (every_is_global(selectors, 0, selectors.length, rule) || is_icss_export) { + node.metadata.used = true; + } for (const element of elements) { seen.clear(); @@ -153,12 +166,7 @@ export function prune(stylesheet, elements) { // Elements rendered through are not style-scopable. // Prevent css hash injection (class="s-...") on tags like , ,