@apdesign/code-style-react 1.0.4 → 1.0.5

package/.prettierrc.js

@@ -7,5 +7,4 @@ module.exports = {
   bracketSpacing: true,
   semi: true,
   embeddedLanguageFormatting: 'auto',
-  jsxSingleQuote: true,
 };

package/cli.js

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+
+const main = require('./index');
+
+const args = process.argv.slice(2);
+
+if (args[0] === 'init') {
+  main();
+} else {
+  console.log('Usage: apdesign-code-style init');
+}

package/index.js

@@ -10,4 +10,4 @@ function main() {
   initConfigs();
 }
 
-main();
+module.exports = main;

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@apdesign/code-style-react",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "scripts": {},
+  "bin": {
+    "apdesign-code-style": "cli.js"
+  },
   "files": [
     "index.js",
     ".prettierrc.js",
-    ".eslintrc.js",
-    ".eslintrc.build.js",
-    ".stylelintrc.js",
+    "eslint",
+    "stylelint",
     "husky",
     "scripts"
   ],

package/scripts/initConfigs.js

@@ -62,7 +62,7 @@ function initConfigs() {
 
   try {
     if (!hasAnyFileExist(eslintConfigFiles)) {
-      const eslintContent = `const baseConfig = require('@apdesign/code-style-react/.eslintrc.js');
+      const eslintContent = `const baseConfig = require('@apdesign/code-style-react/eslint/.eslintrc.js');
 module.exports = {
   ...baseConfig,
   rules: {
@@ -73,7 +73,7 @@ module.exports = {
     }
 
     if (!hasAnyFileExist(stylelintConfigFiles)) {
-      const stylelintContent = `const baseConfig = require('@apdesign/code-style-react/.stylelintrc.js');
+      const stylelintContent = `const baseConfig = require('@apdesign/code-style-react/stylelint/.stylelintrc.js');
 module.exports = {
   ...baseConfig,
   rules: {

package/{.stylelintrc.js → stylelint/.stylelintrc.js}

@@ -1,6 +1,16 @@
+const colorMustUseVariable = require('./rules/color-must-use-variable');
+
 module.exports = {
   extends: ['stylelint-config-standard'],
-  plugins: ['stylelint-less', 'stylelint-scss'],
+  plugins: [
+    'stylelint-less',
+    'stylelint-scss',
+    {
+      rules: {
+        [colorMustUseVariable.ruleName]: colorMustUseVariable,
+      },
+    },
+  ],
   overrides: [
     {
       files: ['**/*.less'],
@@ -8,7 +18,7 @@ module.exports = {
     },
     {
       files: ['**/*.scss', '**/*.sass'],
-      customSyntax: 'postcss-less',
+      customSyntax: 'postcss-scss',
     },
   ],
   rules: {
@@ -22,5 +32,12 @@ module.exports = {
 
     'media-feature-range-notation': null,
     'property-no-vendor-prefix': null,
+
+    'custom/color-must-use-variable': [
+      true,
+      {
+        severity: 'warning',
+      },
+    ],
   },
 };

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

@@ -0,0 +1,124 @@
+const stylelint = require('stylelint');
+const valueParser = require('postcss-value-parser');
+
+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 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) => {
+  if (node.type === 'function' && node.value === 'var') return true;
+  if (node.nodes && node.nodes.length) {
+    return node.nodes.some(containsVarFunction);
+  }
+  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);
+      } catch (e) {
+        return; // 解析失败跳过
+      }
+
+      parsedValue.walk((node) => {
+        const nodeStr = valueParser.stringify(node);
+        if (containsVarFunction(node)) return; // 跳过包含 var() 的
+
+        if (isColorWord(node) || isHardcodedFunctionColor(node)) {
+          stylelint.utils.report({
+            ruleName,
+            result,
+            node: decl,
+            message: messages.expected(nodeStr),
+            word: nodeStr,
+            index: decl.value.indexOf(nodeStr),
+            endIndex: decl.value.indexOf(nodeStr) + nodeStr.length,
+            severity: secondaryOptions.severity || 'error',
+          });
+        }
+      });
+    });
+  };
+});
+
+module.exports.ruleName = ruleName;
+module.exports.messages = messages;