Some syntax causes broken highlight.

[iFwu]

trafficstars

[victordidenko]

+1 same for me

[kennedyrose]

Same here. I think it's the |css in this line but I don't know how to test VS extensions.

[athrunsun]

@kennedyrose That's the same reason why this extension doesn't work with TypeScript, where we write styled jsx like this:

<style jsx={true}>{...}</style>

CC: @iFwu

[iFwu]

fixed

[readeral]

Still experiencing this issue ("css`" causing all following code to be unhighlighted) with v1.0.0 installed in vs code on macOS Mojave. Have confirmed the version by running 'code --list-extensions --show-versions" in terminal, and it reports back "[email protected]"

Example screenshot attached

[readeral]

Thanks iFwu. Anything I can do to help let me know, but haven’t had a chance to dig into the source to determine the issue, sorry!

[iFwu]

@readeral The css`flex: 1;` doesn't match the external styles rule in the styled-jsx. That's why the syntax highlight is broken.

Is the css here use styled-components? I see the syntax of styled-components is something like this. Maybe you can disable the extension in the workspace that use styled-components syntax.

[readeral]

No not using styled-components, using Emotion.sh

On Fri, 26 Oct 2018 at 8:52 pm, niceSprite [email protected] wrote:

@readeral https://github.com/readeral The "cssflex: 1;" doesn't match the external styles https://github.com/zeit/styled-jsx#external-styles rule in the styled-jsx. That's why the syntax highlight is broken.

Is the css here use styled-components? I see the syntax of styled-components is something like this. Maybe you can disable the extension in the workspace that use styled-components syntax.

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/iFwu/vscode-styled-jsx/issues/4#issuecomment-433354112, or mute the thread https://github.com/notifications/unsubscribe-auth/APKtiF8xOsyqA21ANsrA6RvOS7j1S6iMks5uottngaJpZM4Q-1Wz .

[karlhorky]

Confirmed that this extension breaks vscode-styled-components with Emotion and styled-components code.

This only started happening for me on the May 2020 version of VS Code (version 1.46).

See also:

• https://github.com/emotion-js/emotion/issues/1316#issuecomment-486122598
• https://github.com/styled-components/vscode-styled-components/issues/208#issuecomment-646606763

[tettoffensive]

@karlhorky This is happening to me as well. I just disabled vscode-styled-jsx for now, since I'm mainly using emotion and twin.macro (for tailwind)