Highligth breaks when not using styled css helper

[stg101]

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.

[Avivhdr]

+1

[Avivhdr]

https://github.com/styled-components/vscode-styled-components/issues/261

[Profesor08]

This will solve your problem: https://github.com/Microsoft/typescript-styled-plugin#tags