Create "custom syntax" package to enable linting with Stylelint

[srmagura]

Hello, Emotion contributor here. Wanted to make you aware of this feature request: emotion-js/emotion#2695

I know very little about this, but seems like it could be possible to make a single custom syntax that works for both SC and Emotion. Or at least we could make 2 packages that share some of the code. Very low priority issue for me personally but if someone wants to tackle this that would be rad.

[karlhorky]

In the meantime, there have been two custom syntaxes published 🎉🙌

• postcss-styled-syntax by @hudochenkov customSyntax for Stylelint v14+ #3897 (comment)
• postcss-styled-components by @43081j customSyntax for Stylelint v14+ #3897 (comment)

I would suggest that anyone looking to set up Stylelint with Emotion or Styled Components to try these out!

Super big thanks to @43081j and @hudochenkov for putting in the work to get these out the door!

[quantizor]

This has been solved by the community. The recommended approach today is postcss-styled-syntax — it's actively maintained (v0.7.1, Jan 2025) and works with Stylelint v14+ as a custom syntax for styled-components, Emotion, and other tagged template literal CSS-in-JS libraries.

{
  "overrides": [
    {
      "files": ["**/*.{js,jsx,ts,tsx}"],
      "customSyntax": "postcss-styled-syntax"
    }
  ]
}

For context: Stylelint removed its built-in CSS-in-JS support after v14 in favor of pluggable custom syntaxes, and the old stylelint-processor-styled-components (from this org) and @stylelint/postcss-css-in-js are both deprecated/archived. postcss-styled-syntax is the successor and the only actively maintained option.

The alternative mentioned in the thread (postcss-styled-components by 43081j) has not been updated since January 2023.