fix(stylelint): css v-bind error

Author: tomgao365

.vscode/settings.json

@@ -7,64 +7,27 @@
   // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
+
   // Auto fix
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.organizeImports": "never"
   },
+
   // Silent the stylistic rules in your IDE, but still auto fix them
   "eslint.rules.customizations": [
-    {
-      "rule": "style/*",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "format/*",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-indent",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-spacing",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-spaces",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-order",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-dangle",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*-newline",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*quotes",
-      "severity": "off",
-      "fixable": true
-    },
-    {
-      "rule": "*semi",
-      "severity": "off",
-      "fixable": true
-    }
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
   ],
+
   // Enable eslint for all supported languages
   "eslint.validate": [
     "javascript",

package.json

@@ -9,7 +9,8 @@
   },
   "scripts": {
     "build": "pnpm -r --stream --filter=@tomjs/* build",
-    "lint": "eslint --fix",
+    "lint": "run-s lint:*",
+    "lint:stylelint": "stylelint \"packages/**/*.{scss,less,scss}\" --fix",
     "lint:eslint": "eslint --fix",
     "prepare": "simple-git-hooks"
   },
@@ -19,6 +20,7 @@
     "@tomjs/commitlint": "workspace:^",
     "@tomjs/eslint": "workspace:^",
     "@tomjs/prettier": "workspace:^",
+    "@tomjs/stylelint": "workspace:*",
     "@tomjs/tsconfig": "workspace:^",
     "@types/node": "^20.19.25",
     "eslint": "^9.39.2",
@@ -27,6 +29,7 @@
     "publint": "^0.3.16",
     "rimraf": "^6.1.2",
     "simple-git-hooks": "^2.13.1",
+    "stylelint": "^17.0.0",
     "tsdown": "^0.19.0",
     "typescript": "^5.9.3"
   }

packages/stylelint/package.json

@@ -53,7 +53,7 @@
     "postcss": "^8.5.6",
     "postcss-html": "^1.8.1",
     "postcss-scss": "^4.0.9",
-    "stylelint-config-recess-order": "^7.4.0",
+    "stylelint-config-recess-order": "^7.6.0",
     "stylelint-config-recommended": "^18.0.0",
     "stylelint-config-recommended-scss": "^17.0.0",
     "stylelint-config-recommended-vue": "^1.6.1",

packages/stylelint/src/index.ts

@@ -24,6 +24,14 @@ const config: Config = {
             ignorePseudoElements: ['v-deep', 'v-global', 'v-slotted'],
           },
         ],
+        'declaration-property-value-no-unknown': [
+          true,
+          {
+            ignoreProperties: {
+              '/.*/': ['/^v-bind\\(/'],
+            },
+          },
+        ],
       },
     },
     {

packages/stylelint/test/base.scss

@@ -0,0 +1,15 @@
+@use './var';
+
+body {
+  padding: 0;
+  margin: 0;
+}
+
+.red-text {
+  color: $color;
+  border: 1px solid $bg-color;
+}
+
+.yellow-text {
+  color: var(--color);
+}

packages/stylelint/test/var.scss

@@ -0,0 +1,6 @@
+$color: red;
+$bg-color: blue;
+
+:root {
+  --color: yellow;
+}

pnpm-lock.yaml

@@ -0,0 +1,3 @@
+export default {
+  extends: ['@tomjs/stylelint'],
+};