Highlighting breaks after props and css`` function usage

[andre-lergier]

After the usage of styling within css function (ThemedCssFunction) the syntax highlighting breaks.

Here an example with a simple Text component for a Typescript Next.js application.

Correct Highlighting:

Highlighting after prop based css`` styling:

Here's the code to copy:

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

export interface TextProps {
  children: React.ReactNode;
  as?: 'p' | 'span';
  dark?: boolean;
}

export const StyledText = styled.p<TextProps>`
  line-height: 1.7;

  &:last-of-type {
    margin-bottom: 0;
  }

  ${({ dark }) =>
    dark &&
    css`
      color: black;
    `}
`;

export function Text({ children, as = 'p', dark = false }: TextProps) {
  return (
    <div>
      <StyledText as={as} dark={dark}>
        {children}
        <span>Test</span>
      </StyledText>
    </div>
  );
}

If I use an inline syntax, the highlighting still works. In situations where you have multiple css rules to apply based on a prop I prefer using the css`` block.

---

Environment:

• OS: macOS Ventura 13.3.1
• VSCode Version: 1.77.3
• Extension Version: 5.3.10
• Typescript Version: 5.0.4

[Vladyslav-Yamko]

Has it been fixed or found work around (except deleting css before quotes)?

[GuskiS]

Doing something like this:

  ${({ dark }) =>
    dark &&
    css`
      color: black;
    `}
    /* comment fixes highlight below */

[carlos-algms]

Not only for css but any instance that contains TypeScript props will break all the highlighting. And this goes all the way to the end of the file.