perf: 更新`stylelint`以及相关配置至最新，强化样式校验

package.json

@@ -15,8 +15,8 @@
     "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
     "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
-    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,css,scss,postcss,less}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
     "lint:pretty": "pretty-quick --staged",
     "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
@@ -119,12 +119,17 @@
     "rollup-plugin-visualizer": "^5.9.0",
     "sass": "^1.62.0",
     "sass-loader": "^13.2.2",
-    "stylelint": "^14.3.0",
+    "stylelint": "^15.6.1",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-prettier": "^9.0.5",
-    "stylelint-config-recommended": "^9.0.0",
-    "stylelint-config-standard": "^29.0.0",
-    "stylelint-order": "^5.0.0",
+    "stylelint-config-recess-order": "^4.0.0",
+    "stylelint-config-recommended": "^12.0.0",
+    "stylelint-config-recommended-scss": "^11.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^3.0.0",
+    "stylelint-scss": "^5.0.0",
     "svgo": "^3.0.2",
     "tailwindcss": "^3.3.2",
     "terser": "^5.17.1",

postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     "postcss-import": {},
+    "tailwindcss/nesting": {},
     tailwindcss: {},
     autoprefixer: {},
     ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})

stylelint.config.js

@@ -1,20 +1,40 @@
 module.exports = {
   root: true,
-  plugins: ["stylelint-order"],
-  customSyntax: "postcss-html",
-  extends: ["stylelint-config-standard", "stylelint-config-prettier"],
+  extends: [
+    "stylelint-config-standard",
+    "stylelint-config-html/vue",
+    "stylelint-config-recess-order"
+  ],
+  plugins: ["stylelint-order", "stylelint-prettier", "stylelint-scss"],
+  overrides: [
+    {
+      files: ["**/*.(css|html|vue)"],
+      customSyntax: "postcss-html"
+    },
+    {
+      files: ["*.scss", "**/*.scss"],
+      customSyntax: "postcss-scss",
+      extends: [
+        "stylelint-config-standard-scss",
+        "stylelint-config-recommended-vue/scss"
+      ]
+    }
+  ],
   rules: {
     "selector-class-pattern": null,
+    "keyframes-name-pattern": null,
+    "no-descending-specificity": null,
+    "scss/dollar-variable-pattern": null,
     "selector-pseudo-class-no-unknown": [
       true,
       {
-        ignorePseudoClasses: ["global"]
+        ignorePseudoClasses: ["deep", "global"]
       }
     ],
     "selector-pseudo-element-no-unknown": [
       true,
       {
-        ignorePseudoElements: ["v-deep"]
+        ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
       }
     ],
     "at-rule-no-unknown": [
@@ -30,17 +50,11 @@ module.exports = {
           "if",
           "each",
           "include",
-          "mixin"
+          "mixin",
+          "use"
         ]
       }
     ],
-    "no-empty-source": null,
-    "named-grid-areas-no-invalid": null,
-    "unicode-bom": "never",
-    "no-descending-specificity": null,
-    "font-family-no-missing-generic-family-keyword": null,
-    "declaration-colon-space-after": "always-single-line",
-    "declaration-colon-space-before": "never",
     "rule-empty-line-before": [
       "always",
       {
@@ -67,26 +81,5 @@ module.exports = {
       { severity: "warning" }
     ]
   },
-  ignoreFiles: ["**/*.js", "**/*.jsx", "**/*.tsx", "**/*.ts", "**/*.json"],
-  overrides: [
-    {
-      files: ["*.vue", "**/*.vue", "*.html", "**/*.html"],
-      extends: ["stylelint-config-recommended", "stylelint-config-html"],
-      rules: {
-        "keyframes-name-pattern": null,
-        "selector-pseudo-class-no-unknown": [
-          true,
-          {
-            ignorePseudoClasses: ["deep", "global"]
-          }
-        ],
-        "selector-pseudo-element-no-unknown": [
-          true,
-          {
-            ignorePseudoElements: ["v-deep", "v-global", "v-slotted"]
-          }
-        ]
-      }
-    }
-  ]
-};
+  ignoreFiles: ["**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx"]
+}