vscode-styled-components
vscode-styled-components copied to clipboard
Linebreaks inside `${Component}:is()` selector breaks linting
Describe the bug
The following code gives me console errors in VSCode, although the output selector and styles inside are working fine:
${Wrapper}:is(
[data-theme="blue"]
) & {
filter: invert(100%);
}
Where Wrapper
is a styled component.
Screenshot

To Reproduce
Copy the code above and paste it inside any styled component declaration to reproduce.
Expected behavior
No syntax errors
Build environment:
- OS: MacOS 15
- VSCode Version: 1.61.0
- Extension Version 1.6.6
More info
The following code gives no errors, so it might somehow be related to linebreaks inside :is()
and ${component}
selectors:
// No component selector
div:is(
[data-theme="blue"]
) & {
filter: invert(100%);
}
// No linebreaks
${Wrapper}:is([data-theme="blue"]) & {
filter: invert(100%);
}

https://github.com/styled-components/vscode-styled-components/blob/master/CONTRIBUTING.md#a-line-break-seems-to-break-the-syntax-highlighting