@lark-apaas/fullstack-presets 1.1.5-alpha.2 → 1.1.5-alpha.21

package/lib/custom-eslint-rules/index.d.ts

@@ -1,4 +1,6 @@
 export declare const customRules: {
     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
     'require-app-container': import("eslint").Rule.RuleModule;
+    'no-direct-capability-api': import("eslint").Rule.RuleModule;
+    'require-scroll-reveal-hook': import("eslint").Rule.RuleModule;
 };

package/lib/custom-eslint-rules/index.js

@@ -6,7 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.customRules = void 0;
 const no_nested_styled_jsx_1 = __importDefault(require("./no-nested-styled-jsx"));
 const require_app_container_1 = __importDefault(require("./require-app-container"));
+const no_direct_capability_api_1 = __importDefault(require("./no-direct-capability-api"));
+const require_scroll_reveal_hook_1 = __importDefault(require("./require-scroll-reveal-hook"));
 exports.customRules = {
     'no-nested-styled-jsx': no_nested_styled_jsx_1.default,
     'require-app-container': require_app_container_1.default,
+    'no-direct-capability-api': no_direct_capability_api_1.default,
+    'require-scroll-reveal-hook': require_scroll_reveal_hook_1.default,
 };

package/lib/custom-eslint-rules/no-direct-capability-api.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ESLint 规则：禁止直接使用 axios 调用 /__innerapi__/capability/ 路径
+ *
+ * 此规则确保开发者使用 capabilityClient.load().call() 方式调用能力，
+ * 而不是直接通过 axios 调用内部 API 路径。
+ *
+ * 错误示例：
+ *   axios.post('/__innerapi__/capability/xxx')
+ *   axiosForBackend.get('/__innerapi__/capability/list')
+ *
+ * 正确示例：
+ *   capabilityClient.load('capabilityId').call('action', params)
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/no-direct-capability-api.js

@@ -0,0 +1,119 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DEFAULT_MESSAGE = "Direct API calls to /__innerapi__/capability/ are not allowed. Use capabilityClient.load('capabilityId').call('action', params) instead.";
+// 匹配 capability 内部 API 路径的正则表达式
+const CAPABILITY_PATH_PATTERN = /__innerapi__\/capability\//;
+// HTTP 方法列表
+const HTTP_METHODS = [
+    'get',
+    'post',
+    'put',
+    'delete',
+    'patch',
+    'request',
+    'head',
+    'options',
+];
+// 需要检测的 axios 标识符
+const AXIOS_IDENTIFIERS = ['axios', 'axiosForBackend'];
+/**
+ * 从 AST 节点中提取 URL 字符串值
+ * 支持：字符串字面量、模板字符串、字符串拼接
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractUrlValue(node) {
+    if (!node)
+        return null;
+    switch (node.type) {
+        case 'Literal':
+            return typeof node.value === 'string' ? node.value : null;
+        case 'TemplateLiteral':
+            // 拼接所有静态部分（quasis）
+            return node.quasis.map((q) => q.value.raw).join('');
+        case 'BinaryExpression':
+            // 处理字符串拼接 'a' + 'b'
+            if (node.operator === '+') {
+                const left = extractUrlValue(node.left);
+                const right = extractUrlValue(node.right);
+                if (left !== null || right !== null) {
+                    return (left || '') + (right || '');
+                }
+            }
+            return null;
+        default:
+            return null;
+    }
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: '禁止直接使用 axios 调用 /__innerapi__/capability/ 路径',
+            category: 'Best Practices',
+            recommended: true,
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    message: {
+                        type: 'string',
+                        description: '自定义错误信息',
+                    },
+                    axiosIdentifiers: {
+                        type: 'array',
+                        items: { type: 'string' },
+                        description: '额外需要检测的 axios 实例标识符',
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            noDirectCapabilityApi: DEFAULT_MESSAGE,
+        },
+    },
+    create(context) {
+        const options = context.options[0];
+        const customMessage = options?.message;
+        const additionalIdentifiers = options?.axiosIdentifiers || [];
+        // 合并默认和自定义的 axios 标识符
+        const allAxiosIdentifiers = [
+            ...AXIOS_IDENTIFIERS,
+            ...additionalIdentifiers,
+        ];
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            CallExpression(node) {
+                // 1. 检查是否为 MemberExpression 调用 (xxx.method())
+                if (node.callee.type !== 'MemberExpression')
+                    return;
+                // 2. 检查方法名是否为 HTTP 方法
+                const methodName = node.callee.property?.name;
+                if (!methodName || !HTTP_METHODS.includes(methodName.toLowerCase())) {
+                    return;
+                }
+                // 3. 检查调用者是否为 axios 相关标识符
+                const objectName = node.callee.object?.name;
+                if (!objectName || !allAxiosIdentifiers.includes(objectName)) {
+                    return;
+                }
+                // 4. 获取第一个参数（URL）
+                const urlArg = node.arguments[0];
+                if (!urlArg)
+                    return;
+                // 5. 提取 URL 并检查是否包含 capability 路径
+                const urlValue = extractUrlValue(urlArg);
+                if (urlValue && CAPABILITY_PATH_PATTERN.test(urlValue)) {
+                    context.report({
+                        node,
+                        ...(customMessage
+                            ? { message: customMessage }
+                            : { messageId: 'noDirectCapabilityApi' }),
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-eslint-rules/require-app-container.d.ts

@@ -1,8 +1,14 @@
 /**
  * ESLint 规则：要求入口文件中必须包含 AppContainer 组件
  *
- * 此规则确保 client/src/index.tsx 和 client/src/app.tsx 文件中
+ * 此规则确保 client/src/app.tsx 或 client/src/index.tsx 中
  * 包含 AppContainer 组件，以保证平台功能正常运行。
+ *
+ * 跨文件检查逻辑：
+ * - 只在 app.tsx 上执行检查和报错
+ * - 如果 app.tsx 没有 AppContainer，会检查 index.tsx
+ * - 只要任一文件使用了 AppContainer 就算通过
+ * - 只有两个文件都没有时才在 app.tsx 上报错
  */
 import type { Rule } from 'eslint';
 declare const rule: Rule.RuleModule;

package/lib/custom-eslint-rules/require-app-container.js

@@ -34,11 +34,33 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 const path = __importStar(require("path"));
-const DEFAULT_MESSAGE = 'Missing platform component AppContainer. Please ensure that App is wrapped with AppContainer to enable platform features.';
-// 必须包含 AppContainer 的文件列表
-const REQUIRED_FILES = ['index.tsx', 'app.tsx'];
+const fs = __importStar(require("fs"));
+const DEFAULT_MESSAGE = 'Missing platform component AppContainer. Please ensure that App is wrapped with AppContainer (in app.tsx or index.tsx) to enable platform features.';
+// 主检查文件（报错在此文件上）
+const PRIMARY_FILE = 'app.tsx';
+// 备选检查文件
+const SECONDARY_FILE = 'index.tsx';
 // 匹配 client/src/ 目录的正则表达式
 const CLIENT_SRC_PATTERN = /[/\\]client[/\\]src[/\\]$/;
+// 检测文件内容是否包含 <AppContainer 的正则（比完整 AST 解析更快）
+const APP_CONTAINER_PATTERN = /<AppContainer[\s/>]/;
+/**
+ * 同步检查文件是否包含 AppContainer 使用
+ * 使用正则匹配，性能优于完整 AST 解析
+ */
+function checkFileForAppContainer(filePath) {
+    try {
+        if (!fs.existsSync(filePath)) {
+            return false;
+        }
+        const content = fs.readFileSync(filePath, 'utf-8');
+        return APP_CONTAINER_PATTERN.test(content);
+    }
+    catch {
+        // 文件不存在或无法读取，视为没有使用
+        return false;
+    }
+}
 const rule = {
     meta: {
         type: 'problem',
@@ -68,17 +90,18 @@ const rule = {
         const customMessage = options?.message;
         const filename = context.filename || context.getFilename();
         // 获取文件名和目录名
-        const basename = path.basename(filename);
+        const basename = path.basename(filename).toLowerCase();
         const dirname = path.dirname(filename);
-        // 判断是否为需要检查的文件：必须在 client/src/ 目录下且文件名匹配
-        const isRequiredFile = REQUIRED_FILES.includes(basename.toLowerCase()) &&
-            CLIENT_SRC_PATTERN.test(dirname + path.sep);
-        // 如果不是需要检查的文件，直接跳过
-        if (!isRequiredFile) {
+        // 判断是否在 client/src/ 目录下
+        const isInClientSrc = CLIENT_SRC_PATTERN.test(dirname + path.sep);
+        // 只在 app.tsx 上执行检查和报错
+        // index.tsx 不执行检查（避免重复报错）
+        const isPrimaryFile = basename === PRIMARY_FILE && isInClientSrc;
+        if (!isPrimaryFile) {
             return {};
         }
-        // 标记是否在 JSX 中实际使用了 AppContainer
-        let hasAppContainerUsage = false;
+        // 标记当前文件是否使用了 AppContainer
+        let hasAppContainerInCurrentFile = false;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         let programNode = null;
         return {
@@ -89,7 +112,7 @@ const rule = {
                 const elementName = node.name;
                 if (elementName?.type === 'JSXIdentifier' &&
                     elementName?.name === 'AppContainer') {
-                    hasAppContainerUsage = true;
+                    hasAppContainerInCurrentFile = true;
                 }
             },
             // 保存 Program 节点，用于在文件末尾报错时定位
@@ -98,7 +121,19 @@ const rule = {
             },
             // 文件解析完成后，检查是否在 JSX 中使用了 AppContainer
             'Program:exit'() {
-                if (!hasAppContainerUsage && programNode) {
+                // 如果当前文件（app.tsx）有 AppContainer，通过
+                if (hasAppContainerInCurrentFile) {
+                    return;
+                }
+                // 当前文件没有，检查 index.tsx
+                const secondaryFilePath = path.join(dirname, SECONDARY_FILE);
+                const hasAppContainerInSecondary = checkFileForAppContainer(secondaryFilePath);
+                // 如果 index.tsx 有 AppContainer，也算通过
+                if (hasAppContainerInSecondary) {
+                    return;
+                }
+                // 两个文件都没有，报错
+                if (programNode) {
                     context.report({
                         node: programNode,
                         ...(customMessage

package/lib/custom-eslint-rules/require-scroll-reveal-hook.d.ts

@@ -0,0 +1,17 @@
+/**
+ * ESLint 规则：使用 scroll-reveal 样式类时必须调用 useScrollReveal hook
+ *
+ * 此规则确保开发者在使用 scroll-reveal 滚动动画样式时，
+ * 正确导入并调用 useScrollReveal hook 来启用动画效果。
+ *
+ * 错误示例：
+ *   <div className="scroll-reveal">Content</div>  // 未使用 hook
+ *
+ * 正确示例：
+ *   import { useScrollReveal } from '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+ *   useScrollReveal();  // 无需参数，默认监听整个页面
+ *   return <div className="scroll-reveal">Content</div>
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/require-scroll-reveal-hook.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DEFAULT_MESSAGE = "Elements with 'scroll-reveal' class require the useScrollReveal hook. " +
+    "Import and call useScrollReveal() from '@lark-apaas/client-toolkit/hooks/useScrollReveal'.";
+// 匹配 className 中的 scroll-reveal 类
+const SCROLL_REVEAL_PATTERN = /(^|\s)scroll-reveal(\s|$)/;
+// Hook 相关常量
+const HOOK_NAME = 'useScrollReveal';
+const HOOK_IMPORT_SOURCE = '@lark-apaas/client-toolkit/hooks/useScrollReveal';
+/**
+ * 从 AST 节点中提取 className 字符串值
+ * 支持：字符串字面量、模板字符串、字符串拼接、JSX 表达式容器
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function extractClassNameValue(node) {
+    if (!node)
+        return null;
+    switch (node.type) {
+        case 'Literal':
+            return typeof node.value === 'string' ? node.value : null;
+        case 'TemplateLiteral':
+            // 拼接所有静态部分（quasis）
+            return node.quasis
+                .map((q) => q.value.raw)
+                .join('');
+        case 'BinaryExpression':
+            // 处理字符串拼接 'a' + 'b'
+            if (node.operator === '+') {
+                const left = extractClassNameValue(node.left);
+                const right = extractClassNameValue(node.right);
+                if (left !== null || right !== null) {
+                    return (left || '') + (right || '');
+                }
+            }
+            return null;
+        case 'JSXExpressionContainer':
+            return extractClassNameValue(node.expression);
+        default:
+            return null;
+    }
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: '使用 scroll-reveal 样式类时必须导入并调用 useScrollReveal hook',
+            category: 'Best Practices',
+            recommended: true,
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    message: {
+                        type: 'string',
+                        description: '自定义错误信息',
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            requireScrollRevealHook: DEFAULT_MESSAGE,
+        },
+    },
+    create(context) {
+        const options = context.options[0];
+        const customMessage = options?.message;
+        // 文件级别的状态追踪
+        let hasScrollRevealClass = false;
+        let hasHookImport = false;
+        let hasHookCall = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        let scrollRevealNodes = []; // 保存有 scroll-reveal 的节点用于报错定位
+        return {
+            // 检测 JSX 中的 className 属性
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXAttribute(node) {
+                if (node.name?.name !== 'className')
+                    return;
+                const classValue = extractClassNameValue(node.value);
+                if (classValue && SCROLL_REVEAL_PATTERN.test(classValue)) {
+                    hasScrollRevealClass = true;
+                    scrollRevealNodes.push(node);
+                }
+            },
+            // 检测 useScrollReveal 导入
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ImportDeclaration(node) {
+                const source = node.source?.value;
+                if (typeof source !== 'string')
+                    return;
+                // 检查是否从正确的源导入
+                if (source === HOOK_IMPORT_SOURCE ||
+                    source.includes('useScrollReveal')) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const hasHookSpecifier = node.specifiers?.some((spec) => {
+                        if (spec.type === 'ImportSpecifier') {
+                            return spec.imported?.name === HOOK_NAME;
+                        }
+                        if (spec.type === 'ImportDefaultSpecifier') {
+                            return spec.local?.name === HOOK_NAME;
+                        }
+                        return false;
+                    });
+                    if (hasHookSpecifier) {
+                        hasHookImport = true;
+                    }
+                }
+            },
+            // 检测 useScrollReveal 调用
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            CallExpression(node) {
+                if (node.callee?.name === HOOK_NAME) {
+                    hasHookCall = true;
+                }
+            },
+            // 文件遍历结束时进行检查
+            'Program:exit'() {
+                // 只有在使用了 scroll-reveal 类但未正确设置 hook 时报错
+                if (hasScrollRevealClass && (!hasHookImport || !hasHookCall)) {
+                    // 在第一个使用 scroll-reveal 的节点上报错，提供更好的开发体验
+                    const reportNode = scrollRevealNodes[0];
+                    context.report({
+                        node: reportNode,
+                        ...(customMessage
+                            ? { message: customMessage }
+                            : { messageId: 'requireScrollRevealHook' }),
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-stylelint-rules/hsl-variable.d.ts

@@ -0,0 +1,41 @@
+/**
+ * 自定义 Stylelint 规则：校验 CSS 声明中非法的 hsl() 写法
+ *
+ * 遍历所有 CSS 声明（包括自定义属性 --*），当值以 hsl()/hsla() 开头时，
+ * 使用 css-tree 的词法器验证其是否符合 CSS color 规范。
+ *
+ * 注意：只处理纯颜色值声明，不处理复合值（如 box-shadow、background 等）中的 hsl()。
+ *
+ * 非法示例：
+ *   --color: hsl(100%, 50%, 26%);      // hue 不能是百分比
+ *   --color: hsl(200 50% 26% 0.5);     // alpha 缺少斜杠
+ *   --color: hsl(200 50%);             // 缺少 lightness
+ *   color: hsl();                      // 空参数
+ *
+ * 合法示例：
+ *   --color: hsl(200, 50%, 26%);       // CSS3 逗号写法
+ *   --color: hsl(200 50% 26%);         // CSS4 空格写法
+ *   --color: hsl(200deg 50% 26%);      // 带单位的 hue
+ *   --color: hsl(200 50% 26% / 0.5);   // CSS4 带 alpha
+ *
+ * 跳过（不检查）的示例：
+ *   --shadow: 0px 2px 12px hsl(0 0% 0% / 0.01);  // 复合值中的 hsl
+ *   background: linear-gradient(hsl(...), ...);  // 复合值中的 hsl
+ *   --border: hsl(from hsl(217 80% 55%) h s calc(l + var(--x)));  // CSS Color Level 5 相对颜色语法
+ *   --color: hsl(none 50% 26%);                  // none 关键字（CSS Color Level 4）
+ *
+ * var() 通道的处理：
+ *   对每个 var() 独立尝试占位符 0 和 0%（hue 位置需要数字，sat/light 位置需要百分比），
+ *   穷举所有 2^n 组合，只要存在一种合法结构就认为该写法合法。
+ *   这样可以在不误报合法写法的前提下，仍然捕获结构性错误（如缺少参数）。
+ */
+import stylelint from 'stylelint';
+export declare const ruleName = "custom/hsl-valid-value";
+export declare const messages: {
+    invalidHsl: (value: string) => string;
+};
+export declare const meta: {
+    url: string;
+};
+declare const _default: stylelint.Plugin;
+export default _default;

package/lib/custom-stylelint-rules/hsl-variable.js

@@ -0,0 +1,205 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.meta = exports.messages = exports.ruleName = void 0;
+/**
+ * 自定义 Stylelint 规则：校验 CSS 声明中非法的 hsl() 写法
+ *
+ * 遍历所有 CSS 声明（包括自定义属性 --*），当值以 hsl()/hsla() 开头时，
+ * 使用 css-tree 的词法器验证其是否符合 CSS color 规范。
+ *
+ * 注意：只处理纯颜色值声明，不处理复合值（如 box-shadow、background 等）中的 hsl()。
+ *
+ * 非法示例：
+ *   --color: hsl(100%, 50%, 26%);      // hue 不能是百分比
+ *   --color: hsl(200 50% 26% 0.5);     // alpha 缺少斜杠
+ *   --color: hsl(200 50%);             // 缺少 lightness
+ *   color: hsl();                      // 空参数
+ *
+ * 合法示例：
+ *   --color: hsl(200, 50%, 26%);       // CSS3 逗号写法
+ *   --color: hsl(200 50% 26%);         // CSS4 空格写法
+ *   --color: hsl(200deg 50% 26%);      // 带单位的 hue
+ *   --color: hsl(200 50% 26% / 0.5);   // CSS4 带 alpha
+ *
+ * 跳过（不检查）的示例：
+ *   --shadow: 0px 2px 12px hsl(0 0% 0% / 0.01);  // 复合值中的 hsl
+ *   background: linear-gradient(hsl(...), ...);  // 复合值中的 hsl
+ *   --border: hsl(from hsl(217 80% 55%) h s calc(l + var(--x)));  // CSS Color Level 5 相对颜色语法
+ *   --color: hsl(none 50% 26%);                  // none 关键字（CSS Color Level 4）
+ *
+ * var() 通道的处理：
+ *   对每个 var() 独立尝试占位符 0 和 0%（hue 位置需要数字，sat/light 位置需要百分比），
+ *   穷举所有 2^n 组合，只要存在一种合法结构就认为该写法合法。
+ *   这样可以在不误报合法写法的前提下，仍然捕获结构性错误（如缺少参数）。
+ */
+const stylelint_1 = __importDefault(require("stylelint"));
+const csstree = __importStar(require("css-tree"));
+exports.ruleName = 'custom/hsl-valid-value';
+const { report, ruleMessages, validateOptions } = stylelint_1.default.utils;
+exports.messages = ruleMessages(exports.ruleName, {
+    invalidHsl: (value) => `Invalid hsl() value: "${value}". Refer to https://developer.mozilla.org/docs/Web/CSS/color_value/hsl`,
+});
+exports.meta = {
+    url: 'https://github.com/csstree/stylelint-validator',
+};
+/**
+ * 提取字符串中所有顶层 var() 的位置和长度，使用括号计数支持任意深度嵌套。
+ * 例如 var(--a, var(--b, var(--c, 0))) 会被作为一个整体提取。
+ */
+function extractVarRanges(value) {
+    const ranges = [];
+    const varStart = /var\s*\(/gi;
+    let m;
+    while ((m = varStart.exec(value)) !== null) {
+        let depth = 1;
+        let j = m.index + m[0].length;
+        while (j < value.length && depth > 0) {
+            if (value[j] === '(')
+                depth++;
+            else if (value[j] === ')')
+                depth--;
+            j++;
+        }
+        ranges.push({ index: m.index, length: j - m.index });
+        varStart.lastIndex = j; // 跳过已处理的 var()，避免重复匹配内层
+    }
+    return ranges;
+}
+/**
+ * 对 hsl() 值中的每个 var() 分别尝试占位符 "0" 和 "0%"，
+ * 穷举 2^n 种组合，只要任意一种通过 css-tree 词法验证就返回 true。
+ *
+ * 背景：css-tree 不能解析 var()，但不同通道对占位符类型要求不同：
+ *   - hue 位置需要数字（0），saturation/lightness 位置需要百分比（0%）。
+ * 穷举组合避免了需要感知通道位置的复杂解析。
+ */
+function isHslValidWithVarPlaceholders(value, ranges) {
+    const isValidCssColor = (v) => {
+        try {
+            const ast = csstree.parse(v, { context: 'value' });
+            return !csstree.lexer.matchType('color', ast).error;
+        }
+        catch {
+            return false;
+        }
+    };
+    const n = ranges.length;
+    const total = 1 << n; // 2^n 种组合
+    for (let mask = 0; mask < total; mask++) {
+        let replaced = value;
+        let offset = 0;
+        for (let i = 0; i < n; i++) {
+            const placeholder = (mask >> i) & 1 ? '0%' : '0';
+            const m = ranges[i];
+            const start = m.index + offset;
+            const end = start + m.length;
+            replaced = replaced.slice(0, start) + placeholder + replaced.slice(end);
+            offset += placeholder.length - m.length;
+        }
+        if (isValidCssColor(replaced))
+            return true;
+    }
+    return false; // 所有组合均非法，视为结构性错误
+}
+const rule = primary => {
+    return (root, result) => {
+        const validOptions = validateOptions(result, exports.ruleName, {
+            actual: primary,
+            possible: [true],
+        });
+        if (!validOptions || !primary)
+            return;
+        root.walkDecls(decl => {
+            const value = decl.value.trim();
+            // 只处理纯 hsl/hsla 颜色值，跳过复合值（如 box-shadow）
+            if (!/^hsla?\(/i.test(value))
+                return;
+            // 跳过 CSS Color Level 5 相对颜色语法：hsl(from <color> h s l)
+            // css-tree 词法器尚不支持该语法，直接跳过避免误报
+            if (/^hsla?\(\s*from\s+/i.test(value))
+                return;
+            // none 关键字只在现代空格语法中合法（CSS Color Level 4），逗号语法不支持
+            // 通过是否含逗号区分语法：现代语法跳过，逗号语法交由 css-tree 验证
+            const isLegacySyntax = /^hsla?\s*\([^)]*,/i.test(value);
+            if (!isLegacySyntax && /\bnone\b/i.test(value))
+                return;
+            // 包含 var() 时，穷举占位符组合进行结构性校验
+            const varRanges = extractVarRanges(value);
+            if (varRanges.length > 0) {
+                if (!isHslValidWithVarPlaceholders(value, varRanges)) {
+                    report({
+                        message: exports.messages.invalidHsl(value),
+                        node: decl,
+                        result,
+                        ruleName: exports.ruleName,
+                        word: value,
+                    });
+                }
+                return;
+            }
+            try {
+                const ast = csstree.parse(value, { context: 'value' });
+                const matchResult = csstree.lexer.matchType('color', ast);
+                if (matchResult.error) {
+                    report({
+                        message: exports.messages.invalidHsl(value),
+                        node: decl,
+                        result,
+                        ruleName: exports.ruleName,
+                        word: value,
+                    });
+                }
+            }
+            catch {
+                // css-tree parse 失败也视为非法值
+                report({
+                    message: exports.messages.invalidHsl(value),
+                    node: decl,
+                    result,
+                    ruleName: exports.ruleName,
+                    word: value,
+                });
+            }
+        });
+    };
+};
+rule.ruleName = exports.ruleName;
+rule.messages = exports.messages;
+rule.meta = exports.meta;
+exports.default = stylelint_1.default.createPlugin(exports.ruleName, rule);

package/lib/recommend/eslint/eslint-client.d.ts

@@ -17,6 +17,8 @@ declare const _default: {
             rules: {
                 'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
                 'require-app-container': import("eslint").Rule.RuleModule;
+                'no-direct-capability-api': import("eslint").Rule.RuleModule;
+                'require-scroll-reveal-hook': import("eslint").Rule.RuleModule;
             };
         };
     };

package/lib/recommend/eslint/eslint-client.js

@@ -23,9 +23,7 @@ exports.default = {
     plugins: {
         'react-hooks': reactHooks,
         import: importPlugin,
-        '@lark-apaas': {
-            rules: custom_eslint_rules_1.customRules,
-        },
+        '@lark-apaas': { rules: custom_eslint_rules_1.customRules },
     },
     settings: {
         'import/resolver': {
@@ -42,6 +40,8 @@ exports.default = {
         ...reactHooks.configs.recommended.rules,
         // 平台规则：确保入口文件包含 AppContainer 组件
         '@lark-apaas/require-app-container': 'error',
+        // 平台规则：禁止直接调用 capability 内部 API，应使用 capabilityClient
+        '@lark-apaas/no-direct-capability-api': 'error',
         // TypeScript 规则
         '@typescript-eslint/no-unused-vars': 'off', // 未使用变量检查关闭
         '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any 类型
@@ -56,8 +56,10 @@ exports.default = {
         'no-undef': 'off', // 禁止使用未声明的变量
         'no-console': 'off', // 允许使用 console
         'prefer-const': 'off', // 不强制使用 const
+        'no-case-declarations': 'off', // 允许在 case 块中使用词法声明
+        'no-empty': 'off', // 允许空的 catch 块
         // Import 规则
-        'import/no-unresolved': 'error', // 检查导入路径是否存在
+        'import/no-unresolved': ['error', { ignore: ['\\?raw$'] }], // 检查导入路径是否存在，忽略 ?raw 查询参数
         // 其他规则
         'no-constant-binary-expression': 'off', // 不强制使用常量二进制表达式
         // React Refresh 相关 - 开发时不影响渲染的检测
@@ -112,34 +114,18 @@ exports.default = {
                 selector: 'AssignmentExpression[left.object.name="location"][left.property.name="href"]',
                 message: "Please don't use `location.href` to navigate. Use `useNavigate` hook from 'react-router-dom' instead.",
             },
-            // SelectItem组件的value属性值不能为空字符串
-            {
-                message: 'The `value` attribute of the `SelectItem` component cannot be an empty string.',
-                selector: 'JSXOpeningElement[name.name="SelectItem"]:has(JSXAttribute[name.name="value"][value.value=""]), JSXOpeningElement[name.name="SelectItem"]:has(JSXAttribute[name.name="value"][value.expression.value=""])',
-            },
             // 禁止a标签href使用相对路径
             {
                 selector: "JSXOpeningElement[name.name='a']:has(JSXAttribute[name.name='href'][value.value=/^(?!https?:|\\u002F\\u002F|mailto:|tel:|#).+/])",
                 message: "Please don't use relative paths in <a> tags. Use NavLink from 'react-router-dom' instead.",
             },
-            // 禁止 variant 为 outline|link|ghost 的 Button 使用 text-white
-            {
-                selector: 'JSXElement[openingElement.name.name="Button"]' +
-                    ':has(JSXAttribute[name.name="variant"][value.value=/^(outline|link|ghost)$/])' +
-                    ':has(JSXAttribute[name.name="className"][value.value=/text-white/])',
-                message: 'Button with variant="outline|link|ghost" should not use "text-white" className. This causes visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
-            },
-            // 禁止在 Button 上组合 text-primary-foreground 与 bg-background 并用的情况
             {
-                selector: 'JSXElement[openingElement.name.name="Button"]' +
-                    ':has(JSXAttribute[name.name="className"][value.value=/text-primary-foreground/])' +
-                    ':has(JSXAttribute[name.name="className"][value.value=/bg-background/])',
-                message: 'Button should not use "text-primary-foreground" and "bg-background" className. This causes visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
+                selector: 'JSXAttribute[name.name="className"][value.value=/\\[hsl\\([^\\]]*\\s[^\\]]*\\)/]',
+                message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in hsl() values. Example: from-[hsl(215_60%_18%)] instead of from-[hsl(215 60% 18%)]',
             },
-            // 禁止使用 text-accent
             {
-                selector: 'JSXAttribute[name.name="className"][value.value=/(^|\\s)text-accent(\\s|$)/]',
-                message: 'Classname "text-accent" would cause visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
+                selector: 'JSXAttribute[name.name="className"][value.value=/\\[rgb\\([^\\]]*\\s[^\\]]*\\)/]',
+                message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in rgb() values. Example: bg-[rgb(255_255_255)] instead of bg-[rgb(255 255 255)]',
             },
         ],
     },

package/lib/recommend/eslint/index.d.ts

@@ -20,6 +20,8 @@ export declare const eslintPresets: {
                 rules: {
                     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
                     'require-app-container': import("eslint").Rule.RuleModule;
+                    'no-direct-capability-api': import("eslint").Rule.RuleModule;
+                    'require-scroll-reveal-hook': import("eslint").Rule.RuleModule;
                 };
             };
         };

package/lib/recommend/stylelint/index.d.ts

@@ -1,5 +1,7 @@
 export declare const stylelintPresets: {
+    plugins: import("stylelint").Plugin[];
     rules: {
         'declaration-block-no-duplicate-custom-properties': boolean;
+        "custom/hsl-valid-value": true | null;
     };
 };

package/lib/recommend/stylelint/index.js

@@ -1,8 +1,45 @@
 "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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stylelintPresets = void 0;
+const hsl_variable_1 = __importStar(require("../../custom-stylelint-rules/hsl-variable"));
+const isLooseMode = process.env.FORCE_FRAMEWORK_LINT_LOOSE_MODE === 'true';
 exports.stylelintPresets = {
+    plugins: [hsl_variable_1.default],
     rules: {
         'declaration-block-no-duplicate-custom-properties': true,
+        [hsl_variable_1.ruleName]: isLooseMode || null,
     },
 };

package/lib/simple/recommend/eslint/eslint-client.d.ts

@@ -15,14 +15,16 @@ declare const _default: ({
         globals: any;
     };
     plugins: {
-        'react-hooks': any;
-        import: any;
         '@lark-apaas': {
             rules: {
                 'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
                 'require-app-container': import("eslint").Rule.RuleModule;
+                'no-direct-capability-api': import("eslint").Rule.RuleModule;
+                'require-scroll-reveal-hook': import("eslint").Rule.RuleModule;
             };
         };
+        'react-hooks': any;
+        import: any;
     };
     settings: {
         'import/resolver': {
@@ -40,8 +42,8 @@ declare const _default: ({
     files: string[];
     rules: {
         'no-restricted-syntax': (string | {
-            message: string;
             selector: string;
+            message: string;
         })[];
     };
 } | null)[];

package/lib/simple/recommend/eslint/eslint-client.js

@@ -5,16 +5,29 @@ const globals = require('globals');
 const reactHooks = require('eslint-plugin-react-hooks');
 const tseslint = require('typescript-eslint');
 const importPlugin = require('eslint-plugin-import');
+const fs = require('fs');
+const path = require('path');
 const custom_eslint_rules_1 = require("../../../custom-eslint-rules");
 // 检查是否启用宽松 lint 模式
 const isLooseMode = process.env.FORCE_FRAMEWORK_LINT_LOOSE_MODE === 'true';
+// 读取项目 package.json 中的 flags 配置
+function getProjectFlags() {
+    try {
+        const pkgPath = path.resolve(process.cwd(), 'package.json');
+        if (fs.existsSync(pkgPath)) {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+            return pkg.flags || {};
+        }
+    }
+    catch {
+        // ignore errors
+    }
+    return {};
+}
+const projectFlags = getProjectFlags();
+const supportScrollReveal = projectFlags.supportScrollReveal === true;
 // 基础语法规则：所有模式都启用（包括 loose 模式）
 const baseSyntaxRules = [
-    // SelectItem组件的value属性值不能为空字符串
-    {
-        message: 'The `value` attribute of the `SelectItem` component cannot be an empty string.',
-        selector: 'JSXOpeningElement[name.name="SelectItem"]:has(JSXAttribute[name.name="value"][value.value=""]), JSXOpeningElement[name.name="SelectItem"]:has(JSXAttribute[name.name="value"][value.expression.value=""])',
-    },
     // 禁用`window.location.href`赋值使用，可以读取
     {
         selector: 'AssignmentExpression[left.object.object.name="window"][left.object.property.name="location"][left.property.name="href"]',
@@ -44,6 +57,32 @@ exports.looseRestrictSyntaxRules = [
         selector: "VariableDeclarator[id.name='RoutesComponent'] > ArrowFunctionExpression > JSXElement:not([openingElement.name.name='Routes'])",
         message: 'RoutesComponent must return <Routes> directly without any wrapper. Do not add <div>, <BrowserRouter> or other wrappers. You can only modify routes inside <Routes> (add/edit/remove <Route> elements).',
     },
+    // 禁止在 Tailwind 任意值语法中使用包含空格的 hsl/rgb 值
+    {
+        selector: 'JSXAttribute[name.name="className"][value.value=/\\[hsl\\([^\\]]*\\s[^\\]]*\\)/]',
+        message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in hsl() values. Example: from-[hsl(215_60%_18%)] instead of from-[hsl(215 60% 18%)]',
+    },
+    {
+        selector: 'JSXAttribute[name.name="className"][value.value=/\\[rgb\\([^\\]]*\\s[^\\]]*\\)/]',
+        message: 'Tailwind 4 arbitrary values cannot contain spaces. Replace spaces with underscores in rgb() values. Example: bg-[rgb(255_255_255)] instead of bg-[rgb(255 255 255)]',
+    },
+    // 阻止模型引用 @shared/static 与 shared/static 的字符串
+    {
+        selector: 'Literal[value=/^@shared\\u002Fstatic/]:not(ImportDeclaration > Literal):not(ExportAllDeclaration > Literal):not(ExportNamedDeclaration > Literal):not(ImportExpression > Literal)',
+        message: "Do not use '@shared/static/*' or 'shared/static/*' as a raw string (e.g. in fetch, image src, etc.). Shared static assets must be accessed via import statements.",
+    },
+    {
+        selector: 'TemplateLiteral[expressions.length=0] > TemplateElement[value.raw=/^@shared\\u002Fstatic/]',
+        message: "Do not use '@shared/static/*' or 'shared/static/*' as a raw string (e.g. in fetch, image src, etc.). Shared static assets must be accessed via import statements.",
+    },
+    {
+        selector: 'Literal[value=/^shared\\u002Fstatic/]:not(ImportDeclaration > Literal):not(ExportAllDeclaration > Literal):not(ExportNamedDeclaration > Literal):not(ImportExpression > Literal)',
+        message: "Do not use '@shared/static/*' or 'shared/static/*' as a raw string (e.g. in fetch, image src, etc.). Shared static assets must be accessed via import statements.",
+    },
+    {
+        selector: 'TemplateLiteral[expressions.length=0] > TemplateElement[value.raw=/^shared\\u002Fstatic/]',
+        message: "Do not use '@shared/static/*' or 'shared/static/*' as a raw string (e.g. in fetch, image src, etc.). Shared static assets must be accessed via import statements.",
+    },
 ];
 // 严格语法规则：仅正常模式启用，loose 模式下不启用
 const strictSyntaxRules = [
@@ -74,36 +113,20 @@ const strictSyntaxRules = [
         message: "Please don't use confirm. It may conflict with window.confirm BOM method, use `Dialog` component instead for better user experience and consistency",
         selector: "CallExpression[callee.name='confirm']",
     },
-    // 禁止 variant 为 outline|link|ghost 的 Button 使用 text-white
-    {
-        selector: 'JSXElement[openingElement.name.name="Button"]' +
-            ':has(JSXAttribute[name.name="variant"][value.value=/^(outline|link|ghost)$/])' +
-            ':has(JSXAttribute[name.name="className"][value.value=/text-white/])',
-        message: 'Button with variant="outline|link|ghost" should not use "text-white" className. This causes visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
-    },
-    // 禁止在 Button 上组合 text-primary-foreground 与 bg-background 并用的情况
-    {
-        selector: 'JSXElement[openingElement.name.name="Button"]' +
-            ':has(JSXAttribute[name.name="className"][value.value=/text-primary-foreground/])' +
-            ':has(JSXAttribute[name.name="className"][value.value=/bg-background/])',
-        message: 'Button should not use "text-primary-foreground" and "bg-background" className. This causes visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
-    },
-    // 禁止使用 text-accent
-    {
-        selector: 'JSXAttribute[name.name="className"][value.value=/(^|\\s)text-accent(\\s|$)/]',
-        message: 'Classname "text-accent" would cause visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
-    },
 ];
-const looseSpecificRules = {
-    '@lark-apaas/no-nested-styled-jsx': 'error'
+const looseSpecificPlugins = {
+    '@lark-apaas': { rules: custom_eslint_rules_1.customRules },
 };
-// 宽松模式下覆盖的规则（关闭非关键规则）
+// 宽松模式下覆盖的规则
 const looseOverrideRules = isLooseMode
     ? {
-        ...looseSpecificRules,
         '@typescript-eslint/no-unsafe-function-type': 'off',
         '@typescript-eslint/no-unused-expressions': 'off',
         'no-useless-escape': 'off', // 允许不必要的转义字符
+        // 使用 scroll-reveal 样式类时必须调用 useScrollReveal()（需 flags.supportScrollReveal 为 true）
+        '@lark-apaas/require-scroll-reveal-hook': supportScrollReveal
+            ? 'error'
+            : 'off',
     }
     : {};
 // 基础配置（适用于所有文件）
@@ -125,7 +148,7 @@ const baseConfig = {
     plugins: {
         'react-hooks': reactHooks,
         import: importPlugin,
-        '@lark-apaas': { rules: custom_eslint_rules_1.customRules },
+        ...looseSpecificPlugins,
     },
     settings: {
         'import/resolver': {
@@ -142,6 +165,9 @@ const baseConfig = {
         ...reactHooks.configs.recommended.rules,
         // 平台规则：确保入口文件包含 AppContainer 组件
         '@lark-apaas/require-app-container': 'error',
+        // 平台规则：禁止直接调用 capability 内部 API，应使用 capabilityClient
+        '@lark-apaas/no-direct-capability-api': 'error',
+        '@lark-apaas/no-nested-styled-jsx': 'error',
         // TypeScript 规则
         '@typescript-eslint/no-unused-vars': 'off', // 未使用变量检查关闭
         '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any 类型
@@ -156,8 +182,11 @@ const baseConfig = {
         'no-undef': 'off', // 禁止使用未声明的变量
         'no-console': 'off', // 允许使用 console
         'prefer-const': 'off', // 不强制使用 const
+        'no-control-regex': 'off',
+        'no-useless-escape': 'off',
+        'no-case-declarations': 'off',
         // Import 规则
-        'import/no-unresolved': 'error', // 检查导入路径是否存在
+        'import/no-unresolved': ['error', { ignore: ['\\?raw$'] }], // 检查导入路径是否存在，忽略 ?raw 查询参数
         // 其他规则
         'no-constant-binary-expression': 'off', // 不强制使用常量二进制表达式
         // React Refresh 相关 - 开发时不影响渲染的检测
@@ -190,7 +219,11 @@ const appTsxConfig = isLooseMode
         name: '@lark-apaas/client-recommend/app-tsx',
         files: ['client/src/app.tsx'],
         rules: {
-            'no-restricted-syntax': ['error', ...baseSyntaxRules, ...exports.looseRestrictSyntaxRules],
+            'no-restricted-syntax': [
+                'error',
+                ...baseSyntaxRules,
+                ...exports.looseRestrictSyntaxRules,
+            ],
         },
     }
     : null;

package/lib/simple/recommend/eslint/eslint-server.d.ts

@@ -29,6 +29,9 @@ declare const _default: {
         'no-undef': string;
         'no-console': string;
         'prefer-const': string;
+        'no-control-regex': string;
+        'no-useless-escape': string;
+        'no-case-declarations': string;
         'import/no-unresolved': string;
         'import/no-extraneous-dependencies': string;
         'no-restricted-imports': (string | {

package/lib/simple/recommend/eslint/eslint-server.js

@@ -39,6 +39,9 @@ exports.default = {
         'no-undef': 'off',
         'no-console': 'error',
         'prefer-const': 'off',
+        'no-control-regex': 'off',
+        'no-useless-escape': 'off',
+        'no-case-declarations': 'off',
         // Import 规则
         'import/no-unresolved': 'error',
         'import/no-extraneous-dependencies': 'error',

package/lib/simple/recommend/eslint/index.d.ts

@@ -14,14 +14,16 @@ export declare const eslintPresets: {
             globals: any;
         };
         plugins: {
-            'react-hooks': any;
-            import: any;
             '@lark-apaas': {
                 rules: {
                     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
                     'require-app-container': import("eslint").Rule.RuleModule;
+                    'no-direct-capability-api': import("eslint").Rule.RuleModule;
+                    'require-scroll-reveal-hook': import("eslint").Rule.RuleModule;
                 };
             };
+            'react-hooks': any;
+            import: any;
         };
         settings: {
             'import/resolver': {
@@ -39,8 +41,8 @@ export declare const eslintPresets: {
         files: string[];
         rules: {
             'no-restricted-syntax': (string | {
-                message: string;
                 selector: string;
+                message: string;
             })[];
         };
     } | null)[] | {

package/lib/simple/recommend/stylelint/index.d.ts

@@ -1,5 +1,7 @@
 export declare const stylelintPresets: {
+    plugins: import("stylelint").Plugin[];
     rules: {
         'declaration-block-no-duplicate-custom-properties': boolean;
+        "custom/hsl-valid-value": true | null;
     };
 };

package/lib/simple/recommend/stylelint/index.js

@@ -1,8 +1,45 @@
 "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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.stylelintPresets = void 0;
+const hsl_variable_1 = __importStar(require("../../../custom-stylelint-rules/hsl-variable"));
+const isLooseMode = process.env.FORCE_FRAMEWORK_LINT_LOOSE_MODE === 'true';
 exports.stylelintPresets = {
+    plugins: [hsl_variable_1.default],
     rules: {
         'declaration-block-no-duplicate-custom-properties': true,
+        [hsl_variable_1.ruleName]: isLooseMode || null,
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-presets",
-  "version": "1.1.5-alpha.2",
+  "version": "1.1.5-alpha.21",
   "files": [
     "lib"
   ],
@@ -26,21 +26,25 @@
     "@eslint/js": "^9.35.0",
     "@types/node": "^22.19.1",
     "@types/styled-jsx": "^2.2.9",
+    "css-tree": "^3.1.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
+    "stylelint": "^17.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.24.0",
     "@babel/preset-react": "^7.24.0",
+    "@types/css-tree": "^2.3.11",
     "@types/eslint": "^9.6.0",
     "eslint": "^9.35.0",
     "styled-jsx": "^5.1.6",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.44.0"
+    "typescript-eslint": "^8.44.0",
+    "vitest": "^2.0.0"
   },
   "peerDependencies": {
     "eslint": "^9.0.0",