Open major-mann opened 1 year ago
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.
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![Screenshot 2023-08-09 at 19 55 06](https://github.com/styled-components/vscode-styled-components/assets/1440274/e157a3c8-3652-42ac-bff9-54e1e5ee50b1)
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