wrong styled-components comments?

[dan-dr]

Commenting in styled-components with Ctrl + / yields:

body {
    ${'' /* background: red */}
  }

instead of

body {
    // background: red;
   // OR
   /* background: red; */
  }

same for Alt + Shift + A for multiline comments

Now there's an issue when trying to use variables:

body {
    // background: ${Colors.offBlack};
  }

the above will give a compilation error of something like Property value expected type of string but got null so only ${'' /* background: ${Colors.offBlack}; */} will work.

Maybe there's a way to identify when it's using variables in the tagged variables and choose which type of comment to put?

[michaelgmcd]

Sorry, I'm a little confused by your question. Why not use line comments when variables exist? Pressing Ctrl + / in my editor gives the correct behavior:

const StyledComponent = styled.div`
  ${'' /* font-family: ${myAwesomeVariable}; */}
  text-align: center;
`;