Some syntax causes broken highlight.

[iFwu]

[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 "vscode-styled-jsx@1.0.0"

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 ***@***.***> 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 <#4 (comment)>, 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:

• VS Code syntax highlighting emotion-js/emotion#1316 (comment)
• Everything after css... helper failed to highlight styled-components/vscode-styled-components#208 (comment)

[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)