CSS in JS syntax highlight is broken on Prism

Describe the bug

I try to highlight styled-components code with function, code got unexpected.

To Reproduce Steps to reproduce the behavior:

1. append like those code

const Item = styled.div`
  grid-row: ${({ row }) => row};
  grid-columns: ${ ({ col }) => col};
`

1. wrap with Prism syntax highligter

    <SyntaxHighlighter language={"js"} style={prismStyle}>
      {code}
    </SyntaxHighlighter>

1. got unexpected code

const Item = styled.div`
grid-row: ___CSS_0___;
grid-columns: ___CSS_1___;
`

Expected behavior I want to get like higlight.js version result.

const Item = styled.div`
  grid-row: ${({ row }) => row};
  grid-columns: ${ ({ col }) => col};
`

Screenshots https://stackblitz.com/edit/react-tjouhm

Desktop (please complete the following information):

• OS: Mac
• Browser chrome,
• Version: 77.0.3865.120

Smartphone (please complete the following information):

• Device: iPhone6 SE
• OS: iOS 13.1.3
• Browser chrome
• Version 78

Additional context Add any other context about the problem here.

[simmerer]

Hey @jack-bliss, I’ll try to take a look at this soon! Thanks for your patience.

[jack-bliss]

any word on this? I love that prism is highlighting my css in js rather than just leaving it as a string. it’s not blocking for me because i’m happy to just tweak my examples, but it’s definitely limiting and could become annoying down the road.