Closed oliviertassinari closed 1 month ago
It doesn't seem to be supported by Styled Components: https://codesandbox.io/p/sandbox/styled-components-base-forked-m4n2fg?file=%2FTitle.js%3A16%2C1
Is it something that Pigment CSS or Emotion support?
@hudochenkov Ah, you are right, I jumped too quickly to a conclusion. It's Emotion that supports it: https://codesandbox.io/p/sandbox/styled-components-base-forked-2sxd28?file=%2FTitle.tsx%3A31%2C1
Pigment CSS supports it technically, but will throw TypeScript errors. I guess this makes the most sense, to have a single way to do things, so throw TypeScript to encourage developers to standardize. cc @brijeshb42
@mui/system supports this API like Emotion, but it feels like it should be standardized to behave like Pigment CSS.
I feel that styled("h1")(`...`);
is working in Emotion by chance. It is not documented, and I couldn't find in Emotion codebase any tests for this. I was searching for (`
and (\`
.
I think postcss-styled-syntax
shouldn't have support for this, since it's not something should have ever worked in the first place :)
I also got tricked by https://github.com/styled-components/vscode-styled-components which highlights it.
Issue created: https://github.com/styled-components/vscode-styled-components/issues/446
I feel that styled("h1")(
...
); is working in Emotion by chance.
Seems accurate https://github.com/emotion-js/emotion/blob/main/packages/styled/__tests__/styled.js.
Ok, I'm happy to standardize on this. It makes sense to me to not make it possible to do things the same way. I'm removing these instances from the codebase of MUI.
Closing as we reached a consensus.
Hopefully, the VS Code plugin extension will agree 😄 https://github.com/styled-components/vscode-styled-components/issues/446
If actual styled-components doesn't support that code, there is no point of linting it, or syntax highlight. Unless we want to support Emotion's undocumented feature :)
https://github.com/hudochenkov/postcss-styled-syntax/blob/1e38b42abd5c2f4ae3e81cc5297369da2ecea93c/lib/parseJs.js#L33
is not enough to detect APIs like https://codesandbox.io/p/sandbox/styled-components-forked-v3yv3p?file=%2FTitle.js%3A10%2C1
but it works, should we fix this?
To be clear
styled(Component)``
works butstyled(Component)(``)
doesn't.