@lark-apaas/fullstack-presets 1.1.2 → 1.1.3-beta.2

package/README.md

@@ -1,2 +1,59 @@
 # 全栈技术栈 Presets
-独立拆分 simple 目录，属于全栈精简版，目前妙搭场景专用。
+独立拆分 simple 目录，属于全栈精简版，目前妙搭场景专用。
+
+## ESLint 自定义规则
+
+### `no-nested-styled-jsx`
+
+检测嵌套的 styled-jsx 标签，防止编译错误。https://nextjs.org/docs/messages/nested-styled-jsx-tags
+
+该规则镜像了 styled-jsx babel 插件中的验证逻辑：
+- [babel.js#L215](https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/src/babel.js#L215)
+- [babel.js#L222](https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/src/babel.js#L222)
+
+#### 使用方式
+
+该规则已在 `eslint-client.ts` 配置中默认启用，无需额外配置：
+
+```typescript
+import clientConfig from '@lark-apaas/fullstack-presets/recommend/eslint/eslint-client';
+
+export default [
+  clientConfig,
+  // 其他配置...
+];
+```
+
+如需单独使用该规则：
+
+```typescript
+import { customRules } from '@lark-apaas/fullstack-presets/custom-eslint-rules';
+
+export default [
+  {
+    plugins: {
+      '@lark-apaas': { rules: customRules },
+    },
+    rules: {
+      '@lark-apaas/no-nested-styled-jsx': 'error',
+    },
+  },
+];
+```
+
+#### 自定义错误信息
+
+可通过配置自定义报错信息：
+
+```typescript
+rules: {
+  '@lark-apaas/no-nested-styled-jsx': ['error', {
+    message: '禁止嵌套 styled-jsx 标签，请将 <style jsx> 移到组件根级别'
+  }],
+}
+```
+
+#### 参考资料
+
+- [Next.js 错误说明](https://nextjs.org/docs/messages/nested-styled-jsx-tags)
+- [styled-jsx GitHub Issue #42](https://github.com/vercel/styled-jsx/issues/42)

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

@@ -0,0 +1,3 @@
+export declare const customRules: {
+    'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+};

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

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customRules = void 0;
+const no_nested_styled_jsx_1 = __importDefault(require("./no-nested-styled-jsx"));
+exports.customRules = {
+    'no-nested-styled-jsx': no_nested_styled_jsx_1.default,
+};

package/lib/custom-eslint-rules/no-nested-styled-jsx.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ESLint rule to detect nested styled-jsx tags.
+ *
+ * This rule mirrors the validation logic in styled-jsx's babel plugin:
+ * @see https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/src/babel.js#L215
+ * @see https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/src/babel.js#L222
+ *
+ * Test fixture:
+ * @see https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/test/fixtures/nested-style-tags.js
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/no-nested-styled-jsx.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DEFAULT_MESSAGE = 'Detected nested styled-jsx tag. Read more: https://nextjs.org/docs/messages/nested-styled-jsx-tags';
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow nested styled-jsx tags',
+            category: 'Possible Errors',
+            recommended: true,
+            url: 'https://nextjs.org/docs/messages/nested-styled-jsx-tags',
+        },
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    message: {
+                        type: 'string',
+                        description: 'Custom error message',
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+        messages: {
+            nestedStyleJsx: DEFAULT_MESSAGE,
+        },
+    },
+    create(context) {
+        const options = context.options[0];
+        const customMessage = options?.message;
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXElement(node) {
+                const openingElement = node.openingElement;
+                if (!openingElement)
+                    return;
+                const elementName = openingElement.name;
+                // Check if this is a <style> element with jsx attribute
+                if (elementName.type !== 'JSXIdentifier' || elementName.name !== 'style') {
+                    return;
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const hasJsxAttribute = openingElement.attributes.some((attr) => attr.type === 'JSXAttribute' &&
+                    attr.name?.type === 'JSXIdentifier' &&
+                    attr.name?.name === 'jsx');
+                if (!hasJsxAttribute) {
+                    return;
+                }
+                // Count JSXElement ancestors
+                // styled-jsx uses ignoreClosing counter that increments on JSXOpeningElement enter
+                // and checks if ignoreClosing > 1 on style tag exit
+                // @see https://github.com/vercel/styled-jsx/blob/d7a59379134d73afaeb98177387cd62d54d746be/src/babel.js#L222
+                let jsxElementCount = 0;
+                let current = node.parent;
+                while (current) {
+                    if (current.type === 'JSXElement') {
+                        jsxElementCount++;
+                    }
+                    current = current.parent;
+                }
+                // If there's more than 1 JSXElement ancestor, the style tag is nested
+                if (jsxElementCount > 1) {
+                    context.report({
+                        node,
+                        ...(customMessage ? { message: customMessage } : { messageId: 'nestedStyleJsx' }),
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

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

@@ -1,3 +1,7 @@
+export declare const looseRestrictSyntaxRules: {
+    selector: string;
+    message: string;
+}[];
 declare const _default: {
     name: string;
     languageOptions: {
@@ -11,6 +15,11 @@ declare const _default: {
         globals: any;
     };
     plugins: {
+        '@lark-apaas'?: {
+            rules: {
+                'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+            };
+        } | undefined;
         'react-hooks': any;
         import: any;
     };

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

@@ -1,9 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.looseRestrictSyntaxRules = void 0;
 const globals = require('globals');
 const reactHooks = require('eslint-plugin-react-hooks');
 const tseslint = require('typescript-eslint');
 const importPlugin = require('eslint-plugin-import');
+const custom_eslint_rules_1 = require("../../../custom-eslint-rules");
 // 检查是否启用宽松 lint 模式
 const isLooseMode = process.env.FORCE_FRAMEWORK_LINT_LOOSE_MODE === 'true';
 // 基础语法规则：所有模式都启用（包括 loose 模式）
@@ -29,6 +31,20 @@ const baseSyntaxRules = [
         message: "Please don't use relative paths in <a> tags. Use NavLink from 'react-router-dom' instead.",
     },
 ];
+// loose模式特化的规则
+exports.looseRestrictSyntaxRules = [
+    // 约束RoutesComponent路由组件 dom规则
+    {
+        // 箭头函数 block body
+        selector: "VariableDeclarator[id.name='RoutesComponent'] > ArrowFunctionExpression > BlockStatement > ReturnStatement[argument.type='JSXElement'][argument.openingElement.name.name!='Routes']",
+        message: 'RoutesComponent must return <Routes> directly without any wrapper',
+    },
+    {
+        // 箭头函数 expression body
+        selector: "VariableDeclarator[id.name='RoutesComponent'] > ArrowFunctionExpression > JSXElement:not([openingElement.name.name='Routes'])",
+        message: 'RoutesComponent must return <Routes> directly without any wrapper',
+    },
+];
 // 严格语法规则：仅正常模式启用，loose 模式下不启用
 const strictSyntaxRules = [
     // 限制使用 fetch（推荐使用生成的 API Client）
@@ -78,9 +94,16 @@ const strictSyntaxRules = [
         message: 'Classname "text-accent" would cause visibility issues. Consider using proper semantic color tokens from `client/src/tailwind-theme.css`',
     },
 ];
+const looseSpecificPlugins = {
+    '@lark-apaas': { rules: custom_eslint_rules_1.customRules }
+};
+const looseSpecificRules = {
+    '@lark-apaas/no-nested-styled-jsx': 'error'
+};
 // 宽松模式下覆盖的规则（关闭非关键规则）
 const looseOverrideRules = isLooseMode
     ? {
+        ...looseSpecificRules,
         '@typescript-eslint/no-unsafe-function-type': 'off',
         '@typescript-eslint/no-unused-expressions': 'off',
         'no-useless-escape': 'off', // 允许不必要的转义字符
@@ -104,6 +127,7 @@ exports.default = {
     plugins: {
         'react-hooks': reactHooks,
         import: importPlugin,
+        ...(isLooseMode ? looseSpecificPlugins : {}),
     },
     settings: {
         'import/resolver': {
@@ -149,7 +173,11 @@ exports.default = {
                 ],
             },
         ],
-        'no-restricted-syntax': ['error', ...baseSyntaxRules, ...(isLooseMode ? [] : strictSyntaxRules)],
+        'no-restricted-syntax': [
+            'error',
+            ...baseSyntaxRules,
+            ...(isLooseMode ? exports.looseRestrictSyntaxRules : strictSyntaxRules),
+        ],
         // 宽松模式下覆盖上述规则
         ...looseOverrideRules,
     },

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

@@ -14,6 +14,11 @@ export declare const eslintPresets: {
             globals: any;
         };
         plugins: {
+            '@lark-apaas'?: {
+                rules: {
+                    'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+                };
+            } | undefined;
             'react-hooks': any;
             import: any;
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-presets",
-  "version": "1.1.2",
+  "version": "1.1.3-beta.2",
   "files": [
     "lib"
   ],
@@ -18,6 +18,7 @@
     "build": "tsc && npm run copy:json",
     "copy:json": "node scripts/copy-json.js",
     "watch": "tsc --watch",
+    "test": "vitest",
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
@@ -33,8 +34,11 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@babel/core": "^7.24.0",
+    "@babel/preset-react": "^7.24.0",
     "@types/eslint": "^9.6.0",
     "eslint": "^9.35.0",
+    "styled-jsx": "^5.1.6",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.0"
   },