diff --git a/.changeset/selfish-panthers-add.md b/.changeset/selfish-panthers-add.md new file mode 100644 index 0000000000..9e685cca27 --- /dev/null +++ b/.changeset/selfish-panthers-add.md @@ -0,0 +1,5 @@ +--- +"svelte": patch +--- + +fix: allow global next to `&` for nesting 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 2fd588b9e3..db119bd5dc 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -238,6 +238,13 @@ const visitors = { } } + // for any :global() at the middle of compound selector + for (const selector of relative_selector.selectors) { + if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { + remove_global_pseudo_class(selector); + } + } + if (relative_selector.selectors.some((s) => s.type === 'NestingSelector')) { continue; } @@ -250,13 +257,6 @@ const visitors = { context.state.specificity.bumped = true; - // for any :global() at the middle of compound selector - for (const selector of relative_selector.selectors) { - if (selector.type === 'PseudoClassSelector' && selector.name === 'global') { - remove_global_pseudo_class(selector); - } - } - let i = relative_selector.selectors.length; while (i--) { const selector = relative_selector.selectors[i]; diff --git a/packages/svelte/tests/css/samples/global-with-nesting/_config.js b/packages/svelte/tests/css/samples/global-with-nesting/_config.js new file mode 100644 index 0000000000..292c6c49ac --- /dev/null +++ b/packages/svelte/tests/css/samples/global-with-nesting/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + warnings: [] +}); diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.css b/packages/svelte/tests/css/samples/global-with-nesting/expected.css new file mode 100644 index 0000000000..dcb8a0e481 --- /dev/null +++ b/packages/svelte/tests/css/samples/global-with-nesting/expected.css @@ -0,0 +1,5 @@ + div.svelte-xyz { + &.class{ + color: red; + } + } \ No newline at end of file diff --git a/packages/svelte/tests/css/samples/global-with-nesting/expected.html b/packages/svelte/tests/css/samples/global-with-nesting/expected.html new file mode 100644 index 0000000000..4dfc59f21a --- /dev/null +++ b/packages/svelte/tests/css/samples/global-with-nesting/expected.html @@ -0,0 +1,6 @@ +
+
+ +
+ foo +
\ No newline at end of file diff --git a/packages/svelte/tests/css/samples/global-with-nesting/input.svelte b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte new file mode 100644 index 0000000000..0c73ed7a78 --- /dev/null +++ b/packages/svelte/tests/css/samples/global-with-nesting/input.svelte @@ -0,0 +1,14 @@ + + +
+
+ +
+ foo +
\ No newline at end of file