stylelint-taro 4.0.0-alpha.0

package/lib/rules/no-nested-selectors/index.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = exports.ruleName = void 0;
+const stylelint_1 = __importStar(require("stylelint"));
+const utils_1 = require("../../utils");
+exports.ruleName = (0, utils_1.nameSpace)('no-nested-selectors');
+exports.messages = stylelint_1.default.utils.ruleMessages(exports.ruleName, {
+    rejected: (selector, platfrom) => (0, utils_1.log)(`"${selector}" 仅能使用单个class选择器，受限端 "${platfrom}"`)
+});
+const meta = {
+    // TODO： 使用Taro文档的规则
+    url: (0, utils_1.taroDocsUrl)('no-nested-selectors'),
+};
+const rule = (primary) => {
+    return (root, result) => {
+        const validOptions = stylelint_1.utils.validateOptions(result, exports.ruleName, {
+            actual: primary
+        });
+        if (!validOptions)
+            return;
+        const platform = ['harmony', 'rn'];
+        root.walkRules(ruleNode => {
+            const selector = ruleNode.selector;
+            if (!/^[.#]?[a-zA-Z0-9_-]+$/.test(selector)) {
+                (0, utils_1.report)({
+                    ruleName: exports.ruleName,
+                    result,
+                    node: ruleNode,
+                    message: exports.messages.rejected(selector, platform.join(', ')),
+                });
+            }
+        });
+    };
+};
+rule.ruleName = exports.ruleName;
+rule.messages = exports.messages;
+rule.meta = meta;
+exports.default = rule;

package/lib/rules/property-allowed-list/index.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = exports.ruleName = void 0;
+const lodash_1 = __importDefault(require("lodash"));
+const stylelint_1 = __importDefault(require("stylelint"));
+const isCustomProperty_1 = __importDefault(require("stylelint/lib/utils/isCustomProperty"));
+const isStandardSyntaxProperty_1 = __importDefault(require("stylelint/lib/utils/isStandardSyntaxProperty"));
+const matchesStringOrRegExp_1 = __importDefault(require("stylelint/lib/utils/matchesStringOrRegExp"));
+const validateObjectWithArrayProps_1 = __importDefault(require("stylelint/lib/utils/validateObjectWithArrayProps"));
+const validateOptions_1 = __importDefault(require("stylelint/lib/utils/validateOptions"));
+const validateTypes_1 = require("stylelint/lib/utils/validateTypes");
+const vendor_1 = __importDefault(require("stylelint/lib/utils/vendor"));
+const utils_1 = require("../../utils");
+exports.ruleName = (0, utils_1.nameSpace)('property-allowed-list');
+exports.messages = stylelint_1.default.utils.ruleMessages(exports.ruleName, {
+    rejected: (property, platfrom) => (0, utils_1.log)(`"${property}" 暂不支持该属性，受限端 "${platfrom}"`)
+});
+const meta = {
+    // TODO： 使用Taro文档的规则
+    url: (0, utils_1.taroDocsUrl)('property-allowed-list'),
+};
+const rule = (primary) => {
+    return (root, result) => {
+        const validOptions = Object.keys(primary).every((key) => {
+            if (primary[key]) {
+                return (0, validateOptions_1.default)(result, exports.ruleName, {
+                    actual: primary[key],
+                    possible: [(0, validateObjectWithArrayProps_1.default)(validateTypes_1.isString, validateTypes_1.isRegExp, validateTypes_1.isBoolean)],
+                });
+            }
+            return true;
+        });
+        if (!validOptions) {
+            return;
+        }
+        const _arr = [];
+        Object.keys(primary).forEach(key => {
+            _arr.push(...Object.keys(primary[key]));
+        });
+        const intersectionKeys = lodash_1.default.intersection(_arr);
+        // 在这里可以添加额外的逻辑
+        root.walkDecls(decl => {
+            const prop = decl.prop;
+            if (!(0, isStandardSyntaxProperty_1.default)(prop)) {
+                return;
+            }
+            if ((0, isCustomProperty_1.default)(prop)) {
+                return;
+            }
+            // either the prefix or unprefixed version is in the list
+            if ((0, matchesStringOrRegExp_1.default)([prop, vendor_1.default.unprefixed(prop)], intersectionKeys)) {
+                return;
+            }
+            const platform = [];
+            Object.keys(primary).forEach(key => {
+                if (primary[key]) {
+                    const platformKeys = Object.keys(primary[key]);
+                    if (platformKeys.length > 0) {
+                        if (!platformKeys.includes(prop)) {
+                            platform.push(key);
+                        }
+                    }
+                }
+            });
+            (0, utils_1.report)({
+                message: exports.messages.rejected(prop, platform.join(', ')),
+                word: prop,
+                node: decl,
+                result,
+                ruleName: exports.ruleName,
+            });
+        });
+    };
+};
+rule.ruleName = exports.ruleName;
+rule.messages = exports.messages;
+rule.meta = meta;
+exports.default = rule;

package/lib/utils/index.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findIntersection = exports.log = exports.report = exports.newMessage = exports.nameSpace = exports.taroDocsUrl = void 0;
+const stylelint_1 = require("stylelint");
+function taroDocsUrl(_) {
+    return `https://taro-docs.jd.com/docs/`;
+}
+exports.taroDocsUrl = taroDocsUrl;
+function nameSpace(ruleName) {
+    // 前缀视个人情况而定
+    return `taro/${ruleName}`;
+}
+exports.nameSpace = nameSpace;
+function newMessage(ruleName, options) {
+    return stylelint_1.utils.ruleMessages(ruleName, options);
+}
+exports.newMessage = newMessage;
+function report(problem) {
+    return stylelint_1.utils.report(problem);
+}
+exports.report = report;
+function log(text) {
+    // vscode下不添加颜色
+    if (!process.env.TARO_ENV) {
+        return text;
+    }
+    return text;
+    // return highlightQuotaValue(text)
+}
+exports.log = log;
+function findIntersection(data) {
+    const keys = Object.keys(data);
+    let intersection = {};
+    if (keys.length > 1) {
+        const firstKey = keys[0];
+        const firstProps = data[firstKey];
+        for (const prop in firstProps) {
+            const firstValues = firstProps[prop];
+            let commonValues = firstValues || [];
+            for (let i = 1; i < keys.length; i++) {
+                const currentKey = keys[i];
+                const currentProps = data[currentKey];
+                const currentValues = currentProps[prop];
+                if (Array.isArray(commonValues)) {
+                    if (Array.isArray(currentValues)) {
+                        commonValues = commonValues.filter(value => currentValues.includes(value));
+                    }
+                    else if (currentValues) {
+                        commonValues = commonValues.filter(value => currentValues === true || currentValues.includes(value));
+                    }
+                }
+                else if (commonValues === true) {
+                    commonValues = currentValues || [];
+                }
+                else {
+                    commonValues = [];
+                }
+            }
+            if (commonValues.length > 0) {
+                intersection[prop] = commonValues;
+            }
+        }
+    }
+    else {
+        intersection = data[keys[0]];
+    }
+    return { intersection };
+}
+exports.findIntersection = findIntersection;

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "stylelint-taro",
+  "version": "4.0.0-alpha.0",
+  "description": "Taro stylelint 规则集合",
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "README.md",
+    "!**/__tests__"
+  ],
+  "keywords": [
+    "css",
+    "csslint",
+    "lint",
+    "linter",
+    "stylelint",
+    "stylelint-plugin"
+  ],
+  "author": "O2Team",
+  "license": "MIT",
+  "dependencies": {
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.4",
+    "jest": "^29.3.1",
+    "jest-cli": "^29.3.1",
+    "jest-environment-node": "^29.5.0",
+    "jest-preset-stylelint": "^6.0.0",
+    "typescript": "^5.3.3"
+  },
+  "jest": {
+    "clearMocks": true,
+    "collectCoverage": false,
+    "collectCoverageFrom": [
+      "lib/**/*.js"
+    ],
+    "coverageDirectory": "./.coverage/",
+    "coverageReporters": [
+      "lcov",
+      "text"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 75,
+        "functions": 75,
+        "lines": 75,
+        "statements": 75
+      }
+    },
+    "setupFiles": [
+      "./jest-setup.js"
+    ],
+    "testEnvironment": "node",
+    "roots": [
+      "lib"
+    ],
+    "testRegex": ".*\\.test\\.js$|lib/.*/__tests__/.*\\.js$"
+  },
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "tsc",
+    "test": "jest"
+  }
+}

package/src/config.ts

@@ -0,0 +1,136 @@
+import _ from 'lodash'
+import stylelint from 'stylelint'
+
+import h5 from './platform/h5'
+import harmony from './platform/harmony'
+import miniprogram from './platform/miniprogram'
+import rn from './platform/rn'
+import { TaroStylelintConfig } from './platform/type'
+
+
+type PlatformType = 'h5' | 'miniprogram' | 'harmony' | 'rn'
+
+// 合并平台规则成并集
+function mergeRule (platforms) {
+
+  const rules = {}
+
+  // 合并选择器
+  platforms.forEach(({ config: platform }) => {
+    if (platform.disAllowedSelectors) {
+      Object.keys(platform.disAllowedSelectors).forEach(ruleName => {
+        const rule = platform.disAllowedSelectors[ruleName]
+        if (rules[ruleName]) {
+          if (rule instanceof Array) {
+            rules[ruleName] = _.intersection(rules[ruleName], rule)
+          } else {
+            rules[ruleName] = _.merge(rules[ruleName], rule)
+          }
+        } else {
+          rules[ruleName] = rule
+        }
+      })
+    }
+  })
+
+  // 支持的属性列表
+  let supportPropertiesCheck = false
+  const properties = {}
+  platforms.forEach(({ name, config }) => {
+    if (config.supportedProperties) {
+      if (['harmony', 'rn'].includes(name)) {
+        supportPropertiesCheck = true
+      }
+      properties[name] = { ...config.supportedProperties }
+    }
+  })
+  
+  // 只有harmony和rn支持
+  if (supportPropertiesCheck) {
+    // rules['taro/no-nested-selectors'] = true
+    rules['taro/property-allowed-list'] = properties
+    rules['taro/declaration-property-value-allowed-list'] = properties
+  }
+
+  // 合并规则
+  platforms.forEach(({ config }) => {
+    if (config.rules) {
+      Object.keys(config.rules).forEach(ruleName => {
+        const rule = config.rules[ruleName]
+
+        if (rules[ruleName]) {
+          if (rule instanceof Array) {
+            rules[ruleName] = _.intersection(rules[ruleName], rule)
+          } else if (rule instanceof Boolean) {
+            rules[ruleName] = rules[ruleName] || rule
+          } else {
+            rules[ruleName] = rule
+          }
+        } else {
+          rules[ruleName] = rule
+        }
+      })
+    }
+  })
+  Object.keys(rules).forEach(ruleName => {
+    rules[ruleName] = [
+      rules[ruleName],
+      {
+        severity: 'warning'
+      }
+    ]
+  })
+
+  return rules
+}
+
+const ruleMap = { harmony, rn, miniprogram, h5 } 
+
+// 根据平台生成规则
+function taroRules(platforms: PlatformType[] = []) {
+  return mergeRule(platforms.map((platform) => ({
+    name: platform,
+    config: ruleMap[platform]
+  })))
+}
+
+function getPlatformConfigs (platforms: PlatformType[]): TaroStylelintConfig[] {
+  return platforms.map((platform) => ruleMap[platform]).filter(Boolean)
+}
+
+// 到处合并配置的方法
+module.exports = function mergeConfig(platforms: PlatformType[], stylelintConfig: stylelint.Config): stylelint.Config {
+  
+  // 注入环境变量
+  process.env.__PLATFORMS__ = platforms.join(',')
+
+  // 插件合并
+  let plugins = stylelintConfig.plugins || []
+  const platformConfigs = getPlatformConfigs(platforms)
+  platformConfigs.forEach((platform) => {
+    if (platform.plugins) {
+      if (plugins instanceof Array) {
+        if (platform.plugins instanceof Array) {
+          plugins.push(...platform.plugins)
+        } else {
+          plugins.push(platform.plugins)
+        }
+      } else {
+        if (platform.plugins instanceof Array) {
+          plugins = [plugins, ...platform.plugins]
+        } else {
+          plugins = [plugins, platform.plugins]
+        }
+      }
+    }
+  })
+
+  return {
+    ...stylelintConfig,
+    plugins,
+    rules: {
+      ...taroRules(platforms),
+      ...stylelintConfig.rules,
+    },
+  }
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+import { createPlugin } from 'stylelint'
+
+import rules from './rules'
+import { nameSpace } from './utils'
+
+const rulesPlugins = Object.keys(rules).map(ruleName => {
+  return createPlugin(nameSpace(ruleName), rules[ruleName])
+})
+
+export default rulesPlugins

package/src/platform/constrant.ts

@@ -0,0 +1,4 @@
+export const LENGTH_REGEX = /^-?\d+(\.\d+)?(px|vw|vh|%)?$/i
+export const LENGTH_REGEX_SPLIT = /^-?\d+(\.\d+)?(px|vw|vh|%)?(\s+-?\d+(\.\d+)?(px|vw|vh|%)?)*$/i
+export const NUMBER = /^-?\d+(\.\d+)?$/
+export const BACKGROUND_IMAGE = /(url\(|linear-gradient\()/

package/src/platform/h5.ts

@@ -0,0 +1,7 @@
+import { TaroStylelintConfig } from './type'
+
+const config: TaroStylelintConfig = {
+ 
+}
+
+export default config

package/src/platform/harmony.ts

@@ -0,0 +1,108 @@
+import { BACKGROUND_IMAGE, LENGTH_REGEX, LENGTH_REGEX_SPLIT, NUMBER } from './constrant'
+import { TaroStylelintConfig } from './type'
+
+const config: TaroStylelintConfig = {
+  // 禁止的选择器集合
+  disAllowedSelectors: {
+    'selector-max-id': 0, // 允许的最大id选择器数量
+    'selector-max-combinators': 0, // 允许的最大组合选择器数量
+    'selector-max-type': 0, // 允许的最大类型选择器数量
+    'selector-max-attribute': 0, // 允许的最大属性选择器数量
+    'selector-max-universal': 0, // 允许的最大通配符选择器数量
+    'selector-pseudo-class-allowed-list': [], // 允许的伪类选择器
+  },
+  // 支持的属性列表
+  supportedProperties: {
+    'margin': [LENGTH_REGEX_SPLIT],
+    'margin-top': [LENGTH_REGEX],
+    'margin-right': [LENGTH_REGEX],
+    'margin-bottom': [LENGTH_REGEX],
+    'margin-left': [LENGTH_REGEX],
+    'padding': [LENGTH_REGEX_SPLIT],
+    'padding-top': [LENGTH_REGEX],
+    'padding-right': [LENGTH_REGEX],
+    'padding-bottom': [LENGTH_REGEX],
+    'padding-left': [LENGTH_REGEX],
+    'width': [LENGTH_REGEX],
+    'height': [LENGTH_REGEX],
+    'min-width': [LENGTH_REGEX],
+    'min-height': [LENGTH_REGEX],
+    'max-width': [LENGTH_REGEX],
+    'max-height': [LENGTH_REGEX],
+    'background': true,
+    'background-color': true,
+    'background-image': [BACKGROUND_IMAGE],
+    'background-size': ['cover', 'contain', LENGTH_REGEX_SPLIT],
+    'background-position': ['center', 'top', 'bottom', 'left', 'right', LENGTH_REGEX_SPLIT],
+    'background-repeat': ['repeat', 'no-repeat', 'repeat-x', 'repeat-y'],
+    'border': true,
+    'border-top': true,
+    'border-right': true,
+    'border-bottom': true,
+    'border-left': true,
+    'border-color': true,
+    'border-top-color': true,
+    'border-right-color': true,
+    'border-bottom-color': true,
+    'border-left-color': true,
+    'border-radius': [LENGTH_REGEX_SPLIT],
+    'border-top-left-radius': [LENGTH_REGEX],
+    'border-top-right-radius': [LENGTH_REGEX],
+    'border-bottom-left-radius': [LENGTH_REGEX],
+    'border-bottom-right-radius': [LENGTH_REGEX],
+    'border-style': true,
+    'border-top-style': true,
+    'border-right-style': true,
+    'border-bottom-style': true,
+    'border-left-style': true,
+    'border-width': [LENGTH_REGEX_SPLIT],
+    'border-top-width': [LENGTH_REGEX],
+    'border-right-width': [LENGTH_REGEX],
+    'border-bottom-width': [LENGTH_REGEX],
+    'border-left-width': [LENGTH_REGEX],
+    'font-size': [LENGTH_REGEX],
+    'font-family': true,
+    'font-style': ['normal', 'italic'],
+    'font-weight': ['normal', 'bold', 'bolder', NUMBER],
+    'line-height': [LENGTH_REGEX],
+    'text-align': ['center', 'left', 'right'],
+    'color': true,
+    'text-decoration': ['none', 'underline', 'line-through', 'overline'],
+    'text-overflow': ['ellipsis', 'clip'],
+    'display': ['flex', 'block'],
+    'flex': true,
+    'flex-direction': ['row', 'column'],
+    'justify-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+    'align-items': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+    'align-content': ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+    'flex-wrap': ['nowrap', 'wrap', 'wrap-reverse'],
+    'flex-grow': [NUMBER],
+    'flex-shrink': [NUMBER],
+    'flex-basis': [LENGTH_REGEX, 'auto'],
+    'align-self': ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+    'position': ['absolute', 'relative', 'fixed'],
+    'top': [LENGTH_REGEX],
+    'left': [LENGTH_REGEX],
+    'z-index': [NUMBER],
+    'overflow': ['hidden', 'visible', 'auto'],
+    'opacity': [NUMBER],
+    'transform': true,
+    '-webkit-line-clamp': [NUMBER]
+  },
+  // 关联的插件
+  plugins: [
+    'stylelint-taro',
+  ],
+  // 通用规则
+  rules: {
+    'value-no-vendor-prefix': true, // 禁止属性值前缀
+    'property-no-vendor-prefix': true, // 禁止属性前缀
+    'at-rule-allowed-list': [], // 允许的at规则
+    'color-named': ['never'], // 禁止使用命名颜色
+    'declaration-no-important': true, // 禁止使用!important
+    'unit-allowed-list': ['px', 'deg', '%', 'vh', 'vw', 's'], // 允许的单位
+    'function-disallowed-list': ['calc', 'min', 'max', 'clamp'], // 禁止的函数
+  }
+}
+
+export default config

package/src/platform/miniprogram.ts

@@ -0,0 +1,7 @@
+import { TaroStylelintConfig } from './type'
+
+const config: TaroStylelintConfig = {
+ 
+}
+
+export default config

package/src/platform/rn.ts

@@ -0,0 +1,31 @@
+import { TaroStylelintConfig } from './type'
+
+const config: TaroStylelintConfig = {
+  // 禁止的选择器集合
+  disAllowedSelectors: {
+    'selector-max-id': 0, // 允许的最大id选择器数量
+    'selector-max-combinators': 0, // 允许的最大组合选择器数量
+    'selector-max-type': 0, // 允许的最大类型选择器数量
+    'selector-max-attribute': 0, // 允许的最大属性选择器数量
+    'selector-max-universal': 0, // 允许的最大通配符选择器数量
+    'selector-pseudo-class-allowed-list': ['export', 'root'], // 允许的伪类选择器
+  },
+
+  // 支持的属性列表
+  supportedProperties: {},
+  // 关联的插件
+  plugins: [
+    'stylelint-taro'
+  ],
+  // 通用规则
+  rules: {
+    'value-no-vendor-prefix': true, // 禁止属性值前缀
+    'property-no-vendor-prefix': true, // 禁止属性前缀
+    'at-rule-allowed-list': [], // 允许的at规则
+    'color-named': ['never'], // 禁止使用命名颜色
+    'declaration-no-important': true, // 禁止使用!important
+    'unit-allowed-list': ['px', 'rem', 'deg', '%', 'vh', 'vw', 'vmin', 'vmax', 's'], // 允许的单位
+  }
+}
+
+export default config

package/src/platform/type.ts

@@ -0,0 +1,9 @@
+import { ConfigPlugins, ConfigRules, CustomSyntax } from 'stylelint'
+
+export interface TaroStylelintConfig {
+  disAllowedSelectors?: ConfigRules
+  supportedProperties?: ConfigRules
+  rules?: ConfigRules
+  plugins?: ConfigPlugins
+  customSyntax?: CustomSyntax
+}