stylelint 由于模板文字而无法工作

Question

const ModalMent = styled.span`
  color: ${({ theme }) => theme.colors.white};
  ${({ theme }) => theme.fonts.body2};
  width: 14.4rem;
  text-align: center;
  margin-bottom: 0.8rem;
  margin-top: 2.4rem;
`;

在此代码中，stylelint 不起作用。 重点是

${({ theme }) => theme.fonts.body2};

。 如果我注释掉这一行，效果很好。

//整理后

const ModalMent = styled.span`
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
  /* ${({ theme }) => theme.fonts.body2}; */
  width: 14.4rem;
  text-align: center;
  color: ${({ theme }) => theme.colors.white};
`;

所以我认为

theme.fonts.body2

的返回类型是错误的，所以stylelint似乎无法正确识别它。

这里是返回字体属性的代码

//主题.ts

const FONT = ({ family, weight, size, lineHeight }: Font): RuleSet => {
  return css`
    line-height: ${lineHeight}rem;
    font-family: ${family};
    font-size: ${size}rem;
    font-weight: ${weight};
  `;
};

const fonts = {
  head1: FONT({ family: 'Pretendard Variable', weight: 600, size: 2.8, lineHeight: 3.4 }),
  head2: FONT({ family: 'Pretendard Variable', weight: 700, size: 2.2, lineHeight: 3 }),

  title1: FONT({ family: 'Pretendard Variable', weight: 600, size: 1.8, lineHeight: 2.4 }),
  title2: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.6, lineHeight: 2 }),

  body1: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.6, lineHeight: 2.4 }),
  body2: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.4, lineHeight: 2 }),
  body3: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.4, lineHeight: 2 }),
  body4: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.2, lineHeight: 1.6 }),

  button1: FONT({ family: 'Pretendard Variable', weight: 500, size: 1.6, lineHeight: 2 }),
  button2: FONT({ family: 'Pretendard Variable', weight: 400, size: 1.6, lineHeight: 2 }),
};

我不确定我的方法是否正确。但是，我不知道在哪里以及如何修复它。我将非常感谢您的帮助。

这也是我的 .stylelintrc

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-recommended",
    "stylelint-config-styled-components",
    "stylelint-config-prettier",
    "stylelint-config-concentric-order"
  ],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "customSyntax": "@stylelint/postcss-css-in-js"
    }
  ],
  "rules": {
    "color-named": "never"
  }
}

Answer 1

@stylelint/postcss-css-in-js"

自定义语法、

stylelint-processor-styled-components

处理器和

stylelint-config-prettier

共享配置包已弃用。

您可以使用更现代的

postcss-styled-syntax

自定义语法，它支持该插值线。 Stylelint 团队还建议使用标准配置而不是推荐配置。

1. 确保您使用最新版本的软件包：

npm i -D stylelint@latest stylelint-config-standard postcss-styled-syntax

2. 配置 Stylelint：

{
  "extends": ["stylelint-config-standard", "stylelint-config-recess-order"],
  "overrides": [
    {
      "files": ["**/*.{ts,tsx}"],
      "customSyntax": "postcss-styled-syntax"
    }
  ],
  "rules": {
    "color-named": "never"
  }
}