在 NextJS 项目上使用 Emotionjs 设置 Stylelint

Question

我正在尝试使用 EmotionJS 将 Stylelint 添加到一个全新的 NextJS Typescript 项目中，但几乎没有任何规则适用于我的样式文件，我设法看到的唯一错误是 Unknown word CssSyntaxError.

发生此 Unknown word 错误是因为我在 JS 语法中使用 CSS 并且已修复在 .eslintrc 上添加此行，因为我算出 here

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

但是在这个错误之后我的样式文件没有规则，我尝试扩展其他标准，删除 eslint 和 prettier，添加一个简单的规则和博客 post 在 this thread 中提到，但这些都不起作用。

那是我的 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" 它 returns 在控制台上没有错误

那就是 .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