Syntax highlighting for styled components in TSX broken

[james0r]

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

interface Props {
  background?: string
  text?: string
}

interface StyledSpanProps {
  background?: string
}

const StyledSpan = styled.span<StyledSpanProps>(({background}) => {
  const bg = background || 'white'

  return css`
    align-items: center;
    background-color: ${bg};
    border-radius: inherit;
    display: flex;
    height: 100%;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  `
})

const ColorThemePreview = (props: Props) => {
  const {background, text} = props

  return (
    <StyledSpan background={background}>
      {text && <span style={{color: text, fontSize: '1.5em', fontWeight: 600}}>T</span>}
    </StyledSpan>
  )
}

export default ColorThemePreview

is displaying as

[Monokai]

I cannot reproduce this. In the latest VSCode with TypeScript JSX syntax, it displays correctly, especially everything that's uncolored (white) in your example. Can you confirm?

[james0r]

Not sure if it's related, but getting it again immediately after template strings. I noticed the same code on Github Dark is colored properly on the web so I switched to Github Dark within VSCode and it indeed displays correctly with Github Dark.

Here's the full file in a Gist with the correct coloring -> https://gist.github.com/james0r/82f610d8d153f2b022ff800b4febfa87