@apdesign/code-style-react 1.0.7 → 1.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apdesign/code-style-react",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "scripts": {},
   "bin": {
     "apdesign-code-style": "cli.js"
@@ -20,6 +20,7 @@
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "css-color-names": "^1.0.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^9.1.0",

package/stylelint/rules/color-must-use-variable.js

@@ -1,97 +1,34 @@
 const stylelint = require('stylelint');
 const valueParser = require('postcss-value-parser');
+const cssColorNames = require('css-color-names');
+const cssColorKeywords = Object.keys(cssColorNames);
 
 const ruleName = 'custom/color-must-use-variable';
 const messages = stylelint.utils.ruleMessages(ruleName, {
   expected: (val) => `Expected color "${val}" to be a color variable`,
 });
 
-// 默认颜色关键字
-const defaultCssColorKeywords = [
-  'red',
-  'blue',
-  'green',
-  'black',
-  'white',
-  'gray',
-  'aqua',
-  'fuchsia',
-  'lime',
-  'maroon',
-  'navy',
-  'olive',
-  'purple',
-  'silver',
-  'teal',
-  'yellow',
-  'orange',
-  'pink',
-  'brown',
-  'cyan',
-  'magenta',
-  'gold',
-  'azure',
-];
+const colorWordRegex = new RegExp(
+  `^(#(?:[0-9a-fA-F]{3,8})|(?:${cssColorKeywords.join('|')}))$`,
+  'i',
+);
 
-// 默认检查的属性
-const defaultPropsToCheck = [
-  'color',
-  'background',
-  'background-color',
-  'border',
-  'border-color',
-  'border-top-color',
-  'border-right-color',
-  'border-bottom-color',
-  'border-left-color',
-  'outline',
-  'outline-color',
-  'text-decoration-color',
-  'box-shadow',
-  'text-shadow',
-  'column-rule-color',
-  'caret-color',
-  'fill',
-  'stroke',
-  'stop-color',
-];
-
-const containsVarFunction = (node) => {
+const isColorWord = (node) => node.type === 'word' && colorWordRegex.test(node.value);
+const isHardcodedFunctionColor = (node) =>
+  node.type === 'function' && /^(rgb|rgba|hsl|hsla|lab|lch)$/i.test(node.value);
+const containsVar = (node) => {
   if (node.type === 'function' && node.value === 'var') return true;
+  if (node.type === 'word' && (node.value.startsWith('@') || node.value.startsWith('$')))
+    return true;
   if (node.nodes && node.nodes.length) {
-    return node.nodes.some(containsVarFunction);
+    return node.nodes.some(containsVar);
   }
   return false;
 };
 
 module.exports = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptions = {}) => {
-  // 合并自定义颜色关键字和默认颜色关键字（去重）
-  const cssColorKeywords = Array.from(
-    new Set([...(secondaryOptions.cssColorKeywords || []), ...defaultCssColorKeywords]),
-  );
-
-  // 生成颜色匹配正则
-  const colorWordRegex = new RegExp(
-    `^(#(?:[0-9a-fA-F]{3,8})|(?:${cssColorKeywords.join('|')}))$`,
-    'i',
-  );
-
-  // 判断是否为硬编码颜色文字，如 #fff 或 red
-  const isColorWord = (node) => node.type === 'word' && colorWordRegex.test(node.value);
-
-  // 判断是否为硬编码颜色函数，如 rgb(), hsl() 等
-  const isHardcodedFunctionColor = (node) =>
-    node.type === 'function' && /^(rgb|rgba|hsl|hsla|lab|lch)$/i.test(node.value);
-
-  // 合并自定义属性和默认属性（去重）
-  const propsToCheck = Array.from(
-    new Set([...(secondaryOptions.properties || []), ...defaultPropsToCheck]),
-  );
-
   return (root, result) => {
     root.walkDecls((decl) => {
-      if (!propsToCheck.includes(decl.prop)) return;
-
       let parsedValue;
       try {
         parsedValue = valueParser(decl.value);
@@ -101,7 +38,7 @@ module.exports = stylelint.createPlugin(ruleName, (primaryOption, secondaryOptio
 
       parsedValue.walk((node) => {
         const nodeStr = valueParser.stringify(node);
-        if (containsVarFunction(node)) return; // 跳过包含 var() 的
+        if (containsVar(node)) return; // 跳过包含 var() 的
 
         if (isColorWord(node) || isHardcodedFunctionColor(node)) {
           stylelint.utils.report({