No syntax and highlight when using template string with string interpolation

[xristosNSK]

I'm currently using @mui/material which includes emotion/react. The following syntax doesn't seem to work.

Any suggestions?

[oscarvz]

Just like with styled-components, return the css template string function instead of a plain template literal. This'll not only fix syntax highlighting, but also CSS linters in case you're using those 😄

import { css, styled } from '@mui/material';

export const PropertyWrapper = styled('div')(
  ({ theme: { palette } }) => css`
    border-radius: 25px;
    border: 1px solid ${palette.divider};
  `
);

[Twipped]

@oscarvz I don't believe this works the way you think it does. When I tried it, I got errors about trying to stringify the object that MUI's css function produces.

[oscarvz]

@Twipped this sandbox demonstrates the difference in syntax highlighting. I've been using this approach for basically every project (albeit mostly with styled-components and only once with MUI) as otherwise linting & syntax highlighting won't work.

Do those errors you mention pop up when building your project?

[Twipped]

@oscarvz they were popping up when running jest tests, so it may actually be an issue with emotion's interactions with JSDOM

[aleksandrjet]

Can I use this functional with styled.div instead styled('div')? I use import from @emotion/styled.

It is wished variant of usage, but I don't see syntax highlight in Header component:

When I try to use import from @mui/material I get error, that "Property 'div' does not exist on type 'CreateMUIStyled'":

I can fix it, if I use import from emotion and material at the same time:

Do it have any methods of usage to fix it without extra imports?

[oliviertassinari]

I got hit by this today:

https://github.com/styled-components/vscode-styled-components/assets/3165635/06b5e83c-087f-497b-8a48-2d302b072873

What seems strange is that there seems to be a test case for it:

https://github.com/styled-components/vscode-styled-components/blob/52e29eba6676d73075aada3a5e09c935786ec3e2/src/tests/suite/colorize-fixtures/theme-function.js#L1-L4

It feels like this issue is a continuation of https://github.com/styled-components/vscode-styled-components/issues/194. It's an edge case that was overlooked.