diff --git a/.changeset/tough-snails-chew.md b/.changeset/tough-snails-chew.md new file mode 100644 index 0000000000..174a3d0197 --- /dev/null +++ b/.changeset/tough-snails-chew.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: allow for nesting selector in pseudoclasses 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 a99745f809..1896c83d1a 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 @@ -73,9 +73,23 @@ const visitors = { const inner = selectors[selectors.length - 1]; if (node.metadata.rule?.metadata.parent_rule && selectors.length > 0) { - const has_explicit_nesting_selector = selectors.some((selector) => - selector.selectors.some((s) => s.type === 'NestingSelector') - ); + let has_explicit_nesting_selector = false; + + // nesting could be inside pseudo classes like :is, :has or :where + for (let selector of selectors) { + walk( + selector, + {}, + { + // @ts-ignore + NestingSelector() { + has_explicit_nesting_selector = true; + } + } + ); + // if we found one we can break from the others + if (has_explicit_nesting_selector) break; + } if (!has_explicit_nesting_selector) { selectors[0] = { diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js b/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js new file mode 100644 index 0000000000..292c6c49ac --- /dev/null +++ b/packages/svelte/tests/css/samples/nested-in-pseudo/_config.js @@ -0,0 +1,5 @@ +import { test } from '../../test'; + +export default test({ + warnings: [] +}); diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css new file mode 100644 index 0000000000..3f365a8988 --- /dev/null +++ b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.css @@ -0,0 +1,6 @@ + +nav.svelte-xyz{ + header:where(.svelte-xyz):has(&){ + color: red; + } +} diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html new file mode 100644 index 0000000000..44a5d4a52d --- /dev/null +++ b/packages/svelte/tests/css/samples/nested-in-pseudo/expected.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte b/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte new file mode 100644 index 0000000000..8a6758f60f --- /dev/null +++ b/packages/svelte/tests/css/samples/nested-in-pseudo/input.svelte @@ -0,0 +1,11 @@ +
+ +
+ + \ No newline at end of file