Add stylelint with EmotionJS

[Alecell]

I'm trying to add Stylelint to a brand new NextJS Typescript project with EmotionJS and almost no rules works on my styles files, the only error that I manage to see was Unknown word CssSyntaxError.

This Unknown word error happens because I'm using CSS in JS syntax and was fixed adding this line on .eslintrc as I figure out here

{
  ...
  "customSyntax": "@stylelint/postcss-css-in-js",
  ...
}

But after this error no rules works on my style files, I've tried to extends other standards, remove the eslint and prettier, add a simple rule and also the blog post mentioned on this thread, but neither of these works.

Thats my EmotionJS test file:
Sim.styles.ts

import { css } from '@emotion/react';

export const container = (color: string) => css`
  background-color: #000;
  padding: 32px;
  border-radius: 4px;
  font-size: 24tz;
  batata: sim;
  content: 'sssm';

  .umaCOi0-sim {
    color: red;
  }

  &:holver {
    color: ${color};
  }
`;

As we can see there's a lot of errors on this styles but when I run npx stylelint "**/*.styles.ts" it returns no errors on console

Thats the .stylelintrc.json

{
  "extends": ["stylelint-config-standard"],
  "customSyntax": "@stylelint/postcss-css-in-js",
  "rules": {
    "string-quotes": "double"
  }
}

I also notice that the config file is being read, if I remove the "customSyntax": "@stylelint/postcss-css-in-js" it start to throw the error previously mentioned.

So, how can I properly config this to work as expected?

Versions:

{
  "@emotion/react": "^11.8.2"
  "next": "12.1.0"
  "react": "17.0.2"
  "stylelint": "^14.6.0"
  "typescript": "4.6.2"
  "@stylelint/postcss-css-in-js": "^0.37.2"
  "postcss-syntax": "^0.36.2"
}

[srmagura]

Hey @Alecell, I have not used Stylelint myself. That said, your configuration looks correct so I'm not sure what's wrong. I could take a look at this if you can provide a small GitHub repo that shows the problem.

If you find a solution on your own, be sure to post here so other people can benefit from it. We could add this to our documentation too (potentially).

[Alecell]

Thank you for your answer @srmagura!

Here's the repo https://github.com/Alecell/tag-that-song

[srmagura]

I cloned your repo, ran Stylelint, and did not get any warnings (just as you said). I tweaked the code in a number of ways and could not get it to produce a single warning. So yeah IDK what's wrong.

You could bring this up to the Stylelint people, they would know much more about this. This isn't an Emotion issue, so I'm not able to debug what's going wrong.

[Alecell]

Thanks for your help anyway @srmagura!

[Alecell]

Kind of find the answer, but its not a ready to use solution.

As @srmagura suggested I went to the Stylelint project and opened a issue, but since @stylelint/postcss-css-in-js is deprecated, our solution is create our own EmotionJS Stylelint Syntax.

I don't know if I can do something like this, I don't have much knowledge on open source projects and I believe that kind of thing is too much for me, but that's the current situation for those who want to use the latest version of Stylelint, we need to create our own Custom Syntax 😕

[srmagura]

Nice job! Created #2695

[georgebullock]

Thanks for the answer. Unfortunately, creating custom syntax is not acceptable. Too much work. As a result, I won't be using Stylelint to lint my new emotion-based project.

[KenjiEmura]

Hi @Alecell , are there any updates on the Custom Syntax for emotion? Are there any alternatives to @stylelint/postcss-css-in-js that work with emotion and stylelint v16?

Thanks!

[jakubjosef]

It works well with postcss-style-syntax configured as customSyntax.

Example config:

{
  "extends": ["stylelint-config-recommended", "stylelint-config-css-modules"],
  "rules": {
    "no-descending-specificity": null,
    "no-empty-source": null,
    "property-no-unknown": [
      true,
      {
        "ignoreProperties": ["label"]
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "**/*.js",
        "**/*.cjs",
        "**/*.mjs",
        "**/*.jsx",
        "**/*.ts",
        "**/*.tsx"
      ],
      "customSyntax": "postcss-styled-syntax"
    }
  ]
}