CODEWITHSUNDEEP
reactjstypescriptnext.jsstylelintemotion-js
Alecell
Alecell

Reputation: 608

Setup Stylelint with Emotionjs on a NextJS project

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"
}

Upvotes: 2

Views: 2325

Answers (1)

Alecell
Alecell

Reputation: 608

I tried to reach the core projects of this questions.

Unfortunately for EmotionJS its needed to create a EmotionJS Stylelint Custom Syntax. For further information read the discussion: https://github.com/emotion-js/emotion/discussions/2694

Upvotes: 1

Related Questions