Hightlighting doesn't work with nested template string and with css helper.

1. Doesn’t highlight code if I use a tagged template inside the template string (see middle image) (#254 ).
2. The above problem (1) can be solved by using css helper before the tagged template.
3. The above solution (2) cause highlight not to work further down (see right screenshot)

(The solution does work well on codesandbox but not in vscode - see here)

Screenshot

Code for left & middle screenshots:

const box1 = styled.div`
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column: 6/11;
  color: ${myColor};
  color: red;
  ${
    setMediaQuery('big')`
      display: grid;
      color: ${myColor};
      color: red;
      grid-column: 6/11;
      grid-template-columns: repeat(9, 1fr);
    `
  }

  ${
    setMediaQuery('medium')`
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-column: 6/11;
      color: red;
    `
  }
`;

const box2 = styled.div`
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column: 6/11;
  color: ${myColor};
`;

export default {
  box1,
  box2,
};

Code for the right screenshot:

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

const myColor = '#333';

export const setMediaQuery = (breakpoint) => {
  switch (breakpoint) {
    case 'small':
      return (style) => `@media (max-width: 800px) { ${style} }`;
    case 'medium':
      return (style) => `@media (min-width: 801px) (max-width: 1200) { ${style} }`;

    default:
      return (style) => `@media (min-width: 1201px) { ${style} }`;
  }
};

const box1 = styled.div`
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column: 6/11;
  color: ${myColor};
  color: red;
  ${
    setMediaQuery('big')(css`
      display: grid;
      color: ${myColor};
      color: red;
      grid-column: 6/11;
      grid-template-columns: repeat(9, 1fr);
    `)
  }

  ${
    setMediaQuery('medium')(css`
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-column: 6/11;
      color: red;
    `)
  }
`;

const box2 = styled.div`
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-column: 6/11;
  color: ${myColor};
`;

export default {
  box1,
  box2,
};

• OS: Win 10
• VSCode Version: 1.52.0
• Extension Version 1.4.1

Thanks!

[Avivhdr]

Hi @ndeviant,

See https://github.com/styled-components/vscode-styled-components/issues/304 or this codepen.

TLDR: You can pass your styles to the built-in css helper:

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

const TextSmall = styled(Typography)(css`
   font-size: 0.75 rem;
   margin-bottom: 12pc;
`)

[Avivhdr]

Thanks @stg101