diff --git a/.changeset/itchy-beds-kneel.md b/.changeset/itchy-beds-kneel.md new file mode 100644 index 0000000000..59c61ee2ae --- /dev/null +++ b/.changeset/itchy-beds-kneel.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: don't add scoping modifier to nesting selectors 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 cb54841657..2fd588b9e3 100644 --- a/packages/svelte/src/compiler/phases/3-transform/css/index.js +++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js @@ -238,7 +238,7 @@ const visitors = { } } - if (relative_selector.selectors.every((s) => s.type === 'NestingSelector')) { + if (relative_selector.selectors.some((s) => s.type === 'NestingSelector')) { continue; } diff --git a/packages/svelte/tests/css/samples/nested-css/_config.js b/packages/svelte/tests/css/samples/nested-css/_config.js index 128da8b3c7..3c1e696aa1 100644 --- a/packages/svelte/tests/css/samples/nested-css/_config.js +++ b/packages/svelte/tests/css/samples/nested-css/_config.js @@ -75,29 +75,29 @@ export default test({ { code: 'css_unused_selector', end: { - character: 634, + character: 668, column: 5, - line: 66 + line: 70 }, message: 'Unused CSS selector "&.b"', start: { - character: 631, + character: 665, column: 2, - line: 66 + line: 70 } }, { code: 'css_unused_selector', end: { - character: 666, + character: 700, column: 9, - line: 70 + line: 74 }, message: 'Unused CSS selector ".unused"', start: { - character: 659, + character: 693, column: 2, - line: 70 + line: 74 } } ] diff --git a/packages/svelte/tests/css/samples/nested-css/expected.css b/packages/svelte/tests/css/samples/nested-css/expected.css index a36cb41563..0101ffb089 100644 --- a/packages/svelte/tests/css/samples/nested-css/expected.css +++ b/packages/svelte/tests/css/samples/nested-css/expected.css @@ -36,6 +36,10 @@ }*/ } + &:hover { + color: green; + } + & & { color: green; } diff --git a/packages/svelte/tests/css/samples/nested-css/input.svelte b/packages/svelte/tests/css/samples/nested-css/input.svelte index a1c33c605f..a85c344f94 100644 --- a/packages/svelte/tests/css/samples/nested-css/input.svelte +++ b/packages/svelte/tests/css/samples/nested-css/input.svelte @@ -50,6 +50,10 @@ } } + &:hover { + color: green; + } + & & { color: green; }