在NextJS项目上使用Emotionjs安装Stylelint

Question

我试图将Stylelint添加到一个带有NextJS的全新EmotionJS类型记录项目中，几乎没有任何规则适用于我的样式文件，我所看到的唯一错误就是Unknown word CssSyntaxError。

发生此Unknown word错误是因为我在JS语法中使用CSS，并且修正了在.eslintrc上添加这一行的问题，因为我计算出了这里

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

但是在这个错误之后，我的样式文件上没有规则，我尝试扩展其他标准，删除eslint和prettier，添加一个简单的规则，以及这条线上提到的博客文章，但这两种方法都不起作用。

这是我的EmotionJS测试文件: 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};
  }
`;

正如我们所看到的，这种样式有很多错误，但是当我运行npx stylelint "**/*.styles.ts"时，它在控制台上不返回错误

那是.stylelintrc.json

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

我还注意到正在读取配置文件，如果删除"customSyntax": "@stylelint/postcss-css-in-js"，它将开始抛出前面提到的错误。

那么，我如何才能正确地配置它以按预期工作呢？

版本：

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

Answer 1

我试着触及这个问题的核心项目。

不幸的是，对于EmotionJS来说，它需要创建一个EmotionJS Stylelint自定义语法。欲了解更多信息，请阅读讨论：https://github.com/emotion-js/emotion/discussions/2694