pushqrdx / vscode-inline-html

🎨 Adding Syntax Highlighting, Emmet, IntelliSense support for ES6 Template Strings in Visual Studio Code.
https://marketplace.visualstudio.com/items?itemName=pushqrdx.inline-html
GNU General Public License v3.0
54 stars 15 forks source link

Add support for styled components #54

Closed brandonmcconnell closed 2 months ago

brandonmcconnell commented 3 months ago

We often use this syntax:

const StyledDiv = styled.div`
  color: red;
  font-size: 20px;
`;

But this is the syntax highlighting I see:

It would be great to support that syntax out of the box for CSS strings while retaining support for CSS intellisense and Emmet, etc.:

styled.element`...`
pushqrdx commented 2 months ago

@brandonmcconnell sorry for the late reply but this feature already exists you have to use either style or /*style*/ before the template literal, so

/*style*/`
  color: red;
  font-size: 20px;
`

or

style`
  color: red;
  font-size: 20px;
`

should work.