umi4项目提交css样式display: -webkit-box会被修改为display: box问题解决

umi4 项目样式提交 display: -webkit-box 报错

.description {
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  display: -webkit-box;
}

提交代码时，display: -webkit-box 会被修改为 display: box直接提交。

原因是文件中存在配置

//.lintstagedrc
{
    "*.{css,less}": [
    "max lint --fix --stylelint-only",
    "prettier --cache --write"
  ],
}

• max lint --fix --stylelint-only,校验和修正所有的 css 或 less 文件
• prettier --cache --write, prettier 解析器会解析缓存的 css 或 less 文件，将格式化后的结果写回原文件，而不是仅仅输出到控制台

报错

Unexpected vendor-prefix "-webkit-box" value-no-vendor-prefix

这是因为禁止值使用浏览器前缀。

查看：https://stylelint.io/user-guide/rules/value-no-vendor-prefix/

value-no-vendor-prefix: 禁止值添加供应商前缀

解决

//.stylelintrc.js
module.exports = {
  extends: require.resolve("@umijs/max/stylelint"),
  rules: {
    "value-no-vendor-prefix": [
      true,
      {
        ignoreValues: ["box"],
      },
    ],
  },
};

stylelint 的一些其他配置

• alpha-value-notation,指定 alpha 值的百分比或数字表示法。
• custom-property-pattern,自定义属性模式
• selector-class-pattern',指定类选择器的模式(https://stylelint.nodejs.cn/user-guide/rules/selector-class-pattern/)

umi4 项目中.lintstagedrc 文件

{
  "*.{md,json}": [
    "prettier --cache --write"
    //格式md,json文件 --cache表示只修复暂存区改动过的文件
  ],
  "*.{js,jsx}": [
    // 支持只校验和 修正 js、jsx 类型文件；--fix 修正代码   max lint --eslint-only 支持只校验 js、ts、tsx、jsx 类型文件
    "max lint --fix --eslint-only",
    "prettier --cache --write"
  ],
  "*.{css,less}": [
    // umi lint --stylelint-only  支持只校验 css、less 等样式文
    "max lint --fix --stylelint-only",
    "prettier --cache --write"
  ],
  "*.ts?(x)": [
    "max lint --fix --eslint-only",
    "prettier --cache --parser=typescript --write"
    // --parser=typescript: 指定Prettier解析器应使用TypeScript解析器来处理这些文件，这对于正确理解TypeScript特有的语法结构至关重要。
    // --write: 或 -w，这是一个标志，指示Prettier直接修改文件内容，将格式化后的结果写回原文件，而不是仅仅输出到控制台。
    // --cache: 启用缓存功能，这样Prettier在格式化文件时会检查是否有先前格式化过的版本且未发生变化，以加快处理速度。
    // --no-error-on-unmatched-pattern: 如果没有找到匹配此glob模式的文件，Prettier不会抛出错误并中断进程。
  ]
}