vscode-styled-components icon indicating copy to clipboard operation
vscode-styled-components copied to clipboard

Linebreaks inside `${Component}:is()` selector breaks linting

Open snelsi opened this issue 3 years ago • 1 comments

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

Снимок экрана 2021-10-08 в 17 01 12

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%);
}
Снимок экрана 2021-10-08 в 17 09 24

snelsi avatar Oct 08 '21 14:10 snelsi

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

antonstjernquist avatar Jan 11 '22 13:01 antonstjernquist