styled(component)(``) API not detected

[oliviertassinari]

postcss-styled-syntax/lib/parseJs.js

Line 33 in 1e38b42

if (ts.isTaggedTemplateExpression(node) && isStyledComponent(node)) {

is not enough to detect APIs like https://codesandbox.io/p/sandbox/styled-components-forked-v3yv3p?file=%2FTitle.js%3A10%2C1

import styled from "@emotion/styled";

// Create a <Title> react component that
// renders an <h1> which is centered, palevioletred and sized at 1.5em
export default styled("h1")(`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`);

but it works, should we fix this?

To be clear styled(Component)`` works but styled(Component)(``) doesn't.

[hudochenkov]

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?

[oliviertassinari]

@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.

[hudochenkov]

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 :)

[oliviertassinari]

I also got tricked by https://github.com/styled-components/vscode-styled-components which highlights it.

Issue created: styled-components/vscode-styled-components#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.

[hudochenkov]

Closing as we reached a consensus.

[oliviertassinari]

Hopefully, the VS Code plugin extension will agree 😄 styled-components/vscode-styled-components#446

[hudochenkov]

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 :)