[英]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
.我正在尝试使用 EmotionJS 将 Stylelint 添加到一个全新的 NextJS Typescript 项目中,并且几乎没有规则适用于我的 styles 文件,我设法看到的唯一错误是
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发生此
Unknown word
错误是因为我在 JS 语法中使用 CSS并且已修复将此行添加到.eslintrc
上,正如我在这里发现的
{
...
"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.但是在这个错误之后,我的样式文件没有规则起作用,我尝试扩展其他标准,删除
eslint
和prettier
,添加一个简单的规则以及该线程中提到的博客文章,但这些都不起作用。
Thats my EmotionJS test file: Sim.styles.ts那是我的 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};
}
`;
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正如我们所看到的,这个 styles 上有很多错误,但是当我运行
npx stylelint "**/*.styles.ts"
时,它在控制台上没有返回任何错误
Thats the .stylelintrc.json那就是.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.我还注意到正在读取配置文件,如果我删除
"customSyntax": "@stylelint/postcss-css-in-js"
它开始抛出前面提到的错误。
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"
}
I tried to reach the core projects of this questions.我试图触及这个问题的核心项目。
Unfortunately for EmotionJS its needed to create a EmotionJS Stylelint Custom Syntax.不幸的是,对于 EmotionJS,它需要创建一个 EmotionJS Stylelint 自定义语法。 For further information read the discussion: https://github.com/emotion-js/emotion/discussions/2694
有关更多信息,请阅读讨论: https://github.com/emotion-js/emotion/discussions/2694
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.