Syntax error incorrectly reported

[major-mann]

import styled from "styled-components";

const rad = `100px`;

const Fails = styled.div`
    border-radius:
        ${rad}
        ${rad}
        ${rad}
        ${rad};
`;

const Succeeds = styled.div`
    border-radius:
        ${rad}
        ${rad}
        ${rad}
        0px;
`;

const Workaround = styled.div`
    border-radius:
        ${rad}
        ${rad}
        ${rad}
        ${rad}\t;
`;

The first example underlines the r of the last ${rad} is underlined in red with the error: semi-colon expected ts-styled-plugin(9999), and the semicolon after the CSS is underlined with the error: at-rule or selector expected ts-styled-plugin(9999)

This error shows whenever the CSS rule value has a newline in it, and the final row contains only a template replacement.

Screenshot of red underline

To Reproduce
Paste code above into a javascript (or typescript) editor. See the error displayed on the r.

Expected behavior
There is no syntax error reported

• OS: OSXx
• VSCode Version: 1.81.0
• Extension Version 1.7.8

[codingcss]

I apologize for any confusion. It appears that the TypeScript styled-plugin is misinterpreting your code. To work around this issue, you can modify the template literals to see if it resolves the reported error. Here's an alternative approach:

import styled from "styled-components";

const rad = `100px`;

const Fails = styled.div`
    border-radius: ${rad} ${rad} ${rad} ${rad};
`;

const Succeeds = styled.div`
    border-radius: ${rad} ${rad} ${rad} 0px;
`;

const Workaround = styled.div`
    border-radius: ${rad} ${rad} ${rad} ${rad}; /* No trailing space or tabs */
`;

In the Workaround component, I've removed the trailing tab and space after the last ${rad}. This might help the TypeScript styled-plugin to interpret the code correctly.

If the issue persists, it might be worth checking if there are any updates to the TypeScript styled-plugin or styled-components that address this specific problem. Alternatively, you can consider suppressing the error if it doesn't impact the functionality of your code.