iFwu/vscode-styled-jsx

Some syntax causes broken highlight.

iFwu opened this issue · 10 comments

iFwu commented

70ceb97e-e127-4824-a688-e2ebf3ef6055

victordidenko commented

+1 same for me

kennedyrose commented

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

athrunsun commented

@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 commented

fixed

readeral commented

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

screen shot 2018-10-22 at 9 06 59 pm

readeral commented

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 commented

@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 commented
karlhorky commented

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

Kapture 2020-06-19 at 14 50 36

See also:

tettoffensive commented

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