Highlighting break using css function into templates

[vimaciel]

Describe the bug (including copyable syntax)
Highlighting doesn't work when uses the css function in templates

Screenshot

To Reproduce
Open up the snippet below on vscode
don't forget to install the vscode-styled-components plugin

import styled, { css } from 'styled-components'

const Button = styled.button`
  background: transparent;
  ${(props) =>
    props.primary &&
    css`
      background: green;
    `};
`
const Span = styled.span`
  font-size: 12px;
`

Expected behavior
As you can see on the screenshot, css into templates causes this issue.
You have may notice, It doesn't work into the css and every code after that.

Build environment (please complete the following information):

• OS: Linux Ubuntu 18.04.5
• VSCode Version: 1.57.1
• Extension Version 1.6.4

Additional context
Would be a pleasure to work on it if needed.

[lambrosx77]

Hi,

Same bug here with attrs().

[jasonwilliams]

Would be a pleasure to work on it if needed.

Yes please! see the contribution guide.

[callmeberzerker]

@vimaciel you started on this right? :)

Just to know if I should dig into this when I have spare time 😅

[eric-burel]

Lost googlers, please check: #208 (comment)

vscode-styled-jsx may create issue with Styled Components syntax highlighting, you can disable it in Styled Components projects.

[jasonwilliams]

vscode-styled-jsx

Hey @eric-burel whats the reason of using that extension these days? Isn’t jsx/tsx support now baked in? I’ve never needed a plugin for that

[eric-burel]

@jasonwilliams this is for styled-jsx precisely, the styling solution embedded in Next.js. They basically add CSS-in-JS within normal <style> tag. So I think yes you would need that in Next.js projects using Styled JSX.

[jasonwilliams]

@jasonwilliams this is for styled-jsx precisely, the styling solution embedded in Next.js. They basically add CSS-in-JS within normal <style> tag. So I think yes you would need that in Next.js projects using Styled JSX.

@eric-burel so I’m assuming if you have styled components extension you’ll never need it?

[eric-burel]

Currently, styled JSX is the defautl styling solution of Next and you cannot completely remove it as far as I can tell. I am developing a framework, Vulcan, where we provide also Material UI v5 which relies either on Emotion or Styled Components. So indeed, end users should pick one and only one, but I may not know that in advance (+ it's not obvious that it can cause bug).

Is it possible for the plugin to detect other incompatible plugin for instance? It's be pretty awesome to print a clean message in this scenario.

[jasonwilliams]

Yes

https://code.visualstudio.com/api/references/vscode-api#extensions

what extension ids do you want to avoid clashing? I don’t know which fork/version people are using

[jasonwilliams]

This has been addressed in 2059975

[vimaciel]

@jasonwilliams Sorry for the delay, after opening this issue a high demand came up to me. I'm so sorry.