Environment

System:

• OS: Windows 11 10.0.22631
• CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz
• Memory: 1.59 GB / 11.80 GB

Binaries:

• Node: 20.6.1 - D:\Program Files\nodejs\node.EXE
• Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
• npm: 10.2.5 - D:\Program Files\nodejs\npm.CMD
• pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD

npmPackages:

• babel-plugin-styled-components: ^2.1.4 => 2.1.4
• styled-components: ^6.1.8 => 6.1.8

Reproduction

https://stackblitz.com/edit/styled-components-example-bvz5fl?file=App.js

Steps to reproduce

When write & in :is() CSS pseudo-class selector more than twice, and then write any nested child selector, styled component will not parse & to the parent selector. Same bug applies in :where() and :has().

Example CSS:

:is(&:hover, .parent:hover &) .child {
	color: red;

	.grandchild {
		color: blue;
	}
}

Expected Behavior

:is(.componentId:hover, .parent:hover .componentId) .child {
	color: red;
}

:is(.componentId:hover, .parent:hover .componentId) .child .grandchild {
	color: blue;
}

Actual Behavior

:is(.componentId:hover, .parent:hover .componentId) .child {
	color: red;
}

:is(.componentId:hover, .parent:hover &) .child .grandchild {
	color: blue;
}

Additional

1. SCSS/Sass will parse it correctly.
2. The reproduce shows that, expect when hovering over both parent element and current compoent element, the grandchild color will be blue. But actually, the grandchild color will be blue only when hovering over current compoent element, and be red when hovering over parent element.