No color highlighting when using function that returns code

[Jerome1337]

Describe the bug (including copyable syntax) No color highlighting when using function inside a styled component.

Example:

${({ $currentStep, theme }) => {
  if ($currentStep > 0) {
    return `
      padding: 10px 8px 10px 25px;

      @media (min-width: ${theme.breakpoints.md}) {
        padding: 10px 18px;
      }
    `;
  }
}}

Screenshot

To Reproduce To reproduce, simply add a function that returns some css code into a styled component and no color highlighting will be shown.

Expected behavior CSS code should be color highlighted.

Build environment (please complete the following information):

• OS: MacOS 12.2.1 (M1 chip)
• VSCode Version: 1.65.2
• Extension Version 1.7.3

Additional context Maybe related to this issue https://github.com/styled-components/vscode-styled-components/issues/358

[pzi]

it's not even just the colour highlighting, it's also lacking autocompletion and suggestions.

[GollyJer]

Came to see if this was an issue for anyone else. I have to wrap in css to get syntax highlighting to work.

Does this work for you? I'm in react-native.

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

export const ModalHandle = styled.View(
  ({ theme }) => css`
    flex-direction: row;
    align-self: center;
    height: 5px;
    width: 40px;
    border-radius: 5px;
    margin-bottom: 16px;
    background-color: ${theme.colors.modal.handle};
  `
)

For your example...

${({ $currentStep, theme }) => {
  if ($currentStep > 0) {
            👇
    return css`
      padding: 10px 8px 10px 25px;

      @media (min-width: ${theme.breakpoints.md}) {
        padding: 10px 18px;
      }
    `;
  }
}}

[pzi]

@GollyJer yeah, it does work, but I think the point is that we shouldn't have to use that. The code will compile fine (I am in web land) but you just don't have the completion and highlighting in vscode.

[GollyJer]

Yeah. Would be awesome not to have to use it.

[caffeinated-pixels]

Yeah, it would be great if this issue could get a fix. I frequently use a function pattern similar to that in the OP, and I really miss the syntax highlighting, linting and autocompletion.

[techdan-to]

Still experiencing this on vscode