vscode-styled-components
vscode-styled-components copied to clipboard
Highligth breaks when not using styled css helper
Describe the bug (including copyable syntax) Highligth breaks when not using styled css helper (see screenshots)
Screenshot Screenshots are alway useful!
whit css helper
whiteout css helper
To Reproduce
with css helper
export const S_DualInput = styled.div`
display: flex;
.left {
border-radius: 5px 0px 0px 5px;
${props =>
props.primary === 'left' &&
css`
background: ${colors.BLUE};
color: white;
`};
${props =>
props.primary === 'right' &&
css`
background-color: white;
color: ${colors.BLUE};
border: solid;
border-color: ${colors.BLUE};
border-width: 1.5px;
`};
}
`
without css helper
export const S_DualInput = styled.div`
display: flex;
.left {
border-radius: 5px 0px 0px 5px;
${props =>
props.primary === 'left' &&
`
background: ${colors.BLUE};
color: white;
`};
${props =>
props.primary === 'right' &&
`
background-color: white;
color: ${colors.BLUE};
border: solid;
border-color: ${colors.BLUE};
border-width: 1.5px;
`};
}
`
Expected behavior Highlight to work. Styled don't need the css helper to work there https://styled-components.com/docs/api#css
Build environment (please complete the following information):
- OS: Windows 10 Pro
- VSCode Version: 1.51.1
- Extension Version 1.4.0
Additional context Add any other context about the problem here.
+1
https://github.com/styled-components/vscode-styled-components/issues/261
This will solve your problem: https://github.com/Microsoft/typescript-styled-plugin#tags