`:any-link` issue with nesting

[Antonio-Laguna]

Bug description

There seems to be an interop issue with postcss-pseudo-class-any-link and postcss-nesting. When combined with an anchor it produces a selector that won't really match anything.

Look at output: aarea[href]

Source CSS

a  {
	font-size: 1rem;

	&:any-link {
		text-decoration: none;
	}
}

Expected CSS

a {
	font-size: 1rem
}

a:link, a:visited {
	text-decoration: none;
}

a:-webkit-any-link {
	text-decoration: none;
}

a:-moz-any-link {
	text-decoration: none;
}

a:any-link {
	text-decoration: none;
}

Actual CSS

a {
	font-size: 1rem
}

a:link, a:visited, aarea[href] {
	text-decoration: none;
}

a:-webkit-any-link {
	text-decoration: none;
}

a:-moz-any-link {
	text-decoration: none;
}

a:any-link {
	text-decoration: none;
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

Yes

Debug output

No response

Extra config

No response

What plugin are you experiencing this issue on?

No response

Plugin version

7.5.0

What OS are you experiencing this on?

macOS

Node Version

16.13.2

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR