@lark-apaas/fullstack-presets 1.1.17-alpha.4 → 1.1.17-alpha.5

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

@@ -1,5 +1,7 @@
 export declare const customRules: {
     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+    'no-styled-jsx-data-uri-url-ref': import("eslint").Rule.RuleModule;
+    'no-multiline-styled-jsx-classname': 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

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.customRules = void 0;
 const no_nested_styled_jsx_1 = __importDefault(require("./no-nested-styled-jsx"));
+const no_styled_jsx_data_uri_url_ref_1 = __importDefault(require("./no-styled-jsx-data-uri-url-ref"));
+const no_multiline_styled_jsx_classname_1 = __importDefault(require("./no-multiline-styled-jsx-classname"));
 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"));
@@ -16,6 +18,8 @@ const require_index_route_1 = __importDefault(require("./require-index-route"));
 const no_duplicate_route_component_1 = __importDefault(require("./no-duplicate-route-component"));
 exports.customRules = {
     'no-nested-styled-jsx': no_nested_styled_jsx_1.default,
+    'no-styled-jsx-data-uri-url-ref': no_styled_jsx_data_uri_url_ref_1.default,
+    'no-multiline-styled-jsx-classname': no_multiline_styled_jsx_classname_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-multiline-styled-jsx-classname.d.ts

@@ -0,0 +1,29 @@
+/**
+ * ESLint rule: no-multiline-styled-jsx-classname
+ *
+ * Detects multi-line TemplateLiteral className attributes on JSX elements
+ * inside a component that uses `<style jsx>`.
+ *
+ * When styled-jsx's Babel plugin wraps the className, it preserves the
+ * TemplateLiteral in the output:
+ *
+ *     className={"jsx-X" + " " + `\n  bg-primary\n`}
+ *
+ * Some downstream transpilers (esbuild/swc/terser at certain target settings)
+ * lower simple TemplateLiterals (no ${}) to StringLiterals but fail to escape
+ * the embedded newlines, producing invalid JS:
+ *
+ *     className={"jsx-X" + " " + "\n  bg-primary\n"}
+ *     // → "Unterminated string literal" build error
+ *
+ * The fix is simple: write className as a single-line string. CSS class lists
+ * treat any whitespace run as one separator, so collapsing is semantically
+ * equivalent.
+ *
+ * Observed: ~59 of 83 Unterminated cases in week 04-06~04-12.
+ *
+ * @see https://bytedance.larkoffice.com/wiki/TTNDwzgLzi9Q0skTUT5clFX3nNd
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

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

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow multi-line template literal className in components using <style jsx>',
+            category: 'Possible Errors',
+            recommended: true,
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            multilineClassName: '多行模板字符串 className 在 styled-jsx 编译后可能被下游构建工具截断为非法字符串' +
+                '（"Unterminated string literal"）。请改为单行写法。',
+        },
+    },
+    create(context) {
+        // Track whether the current file/scope has any <style jsx>
+        let hasStyledJsx = false;
+        // Collect candidate className nodes to check (deferred until Program:exit
+        // so we know whether <style jsx> exists in the file)
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const candidates = [];
+        return {
+            // First pass: detect <style jsx> anywhere in the file
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXOpeningElement(node) {
+                if (hasStyledJsx)
+                    return; // already found one
+                const name = node.name;
+                if (name?.type !== 'JSXIdentifier' || name.name !== 'style')
+                    return;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const isJsx = node.attributes?.some(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (attr) => attr.type === 'JSXAttribute' &&
+                    attr.name?.type === 'JSXIdentifier' &&
+                    attr.name.name === 'jsx');
+                if (isJsx)
+                    hasStyledJsx = true;
+            },
+            // Collect className attributes that contain newlines:
+            //   Case A: className={`...\n...`}   — TemplateLiteral without ${}
+            //   Case B: className="...\n..."     — JSX string literal with embedded newlines
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXAttribute(node) {
+                if (node.name?.type !== 'JSXIdentifier' || node.name.name !== 'className')
+                    return;
+                const val = node.value;
+                if (!val)
+                    return;
+                // Case A: className={`...\n...`}
+                if (val.type === 'JSXExpressionContainer') {
+                    const expr = val.expression;
+                    if (!expr || expr.type !== 'TemplateLiteral')
+                        return;
+                    if (expr.expressions.length !== 0)
+                        return;
+                    const raw = expr.quasis[0]?.value?.raw ?? '';
+                    if (!raw.includes('\n') && !raw.includes('\r'))
+                        return;
+                    candidates.push({ node, target: expr, raw, kind: 'template' });
+                    return;
+                }
+                // Case B: className="...\n..."  (JSX string attribute with literal newlines)
+                if (val.type === 'Literal' || val.type === 'StringLiteral') {
+                    const str = val.value ?? '';
+                    if (!str.includes('\n') && !str.includes('\r'))
+                        return;
+                    candidates.push({ node, target: val, raw: str, kind: 'string' });
+                }
+            },
+            // At the end, report if <style jsx> was present
+            'Program:exit'() {
+                if (!hasStyledJsx)
+                    return;
+                for (const { target, raw, kind } of candidates) {
+                    const text = kind === 'template'
+                        ? (target.quasis[0]?.value?.cooked ?? raw)
+                        : raw;
+                    const normalized = text.replace(/\s+/g, ' ').trim();
+                    context.report({
+                        node: target,
+                        messageId: 'multilineClassName',
+                        fix(fixer) {
+                            if (kind === 'template') {
+                                // Replace `\n  flex items\n  bg-primary\n` with "flex items bg-primary"
+                                return fixer.replaceText(target, JSON.stringify(normalized));
+                            }
+                            // Replace "...\n..." with "collapsed" — keep the existing quotes style
+                            return fixer.replaceText(target, JSON.stringify(normalized));
+                        },
+                    });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

package/lib/custom-eslint-rules/no-styled-jsx-data-uri-url-ref.d.ts

@@ -0,0 +1,20 @@
+/**
+ * ESLint rule: no-styled-jsx-data-uri-url-ref
+ *
+ * Detects CSS `url("data:...url(...)...")` inside `<style jsx>` template
+ * literals. The stylis CSS parser (used by styled-jsx) misreads the inner
+ * `url(` as a new CSS url() function call, breaking bracket counting and
+ * causing "Nesting detected" build failures.
+ *
+ * This rule surfaces the problem at lint time (IDE red squiggly + CI gate)
+ * instead of letting it escape to build time.
+ *
+ * Observed: 107 cases in week 04-06~04-12, all from AI-generated SVG noise
+ * textures containing `filter='url(%23noise)'` inside data URIs.
+ *
+ * @see ~/docs/styled-jsx-nesting-bug-analysis-20260330.md
+ * @see https://bytedance.larkoffice.com/wiki/TTNDwzgLzi9Q0skTUT5clFX3nNd
+ */
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/lib/custom-eslint-rules/no-styled-jsx-data-uri-url-ref.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Detection strategy: instead of trying to parse the full url("data:...")
+ * atom with a single regex, we use a two-step check:
+ *
+ *   1. Does the CSS text contain a data URI?  (`url("data:` or `url('data:`)
+ *   2. Does the CSS text also contain `url(%23` or `url(#` — the inner
+ *      url() reference that triggers the stylis bracket-counting bug?
+ *
+ * If both are true → report.  This is deliberately conservative: it may
+ * false-positive if the inner `url(%23` happens to appear in a completely
+ * separate CSS rule (not inside the data URI).  In practice that never
+ * happens — `url(%23...)` is only ever seen inside SVG data URIs.
+ *
+ * Why not a single regex?  The data URI body can contain both single AND
+ * double quotes (e.g. `url("data:...filter='url(%23n)'...")`) which makes
+ * `[^"']*` based approaches fail to match across inner quotes.
+ */
+const HAS_DATA_URI = /url\(\s*["']data:/i;
+const HAS_URL_HASH_REF = /url\(\s*%23|url\(\s*#/i;
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow data URIs containing url() references inside <style jsx>, which crash the stylis CSS parser',
+            category: 'Possible Errors',
+            recommended: true,
+        },
+        schema: [],
+        messages: {
+            dataUriUrlRef: 'Data URI 内包含 url() 引用（如 SVG filter 的 url(#id)），会导致 styled-jsx 的 CSS 解析器（stylis）' +
+                '误判括号配对并报 "Nesting detected" 构建错误。请将 SVG 移到独立 .svg 文件通过 import 引用，' +
+                '或改用 CSS 变量 / 外链 background-image 代替内联 data URI。',
+        },
+    },
+    create(context) {
+        return {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            JSXElement(node) {
+                // Only look at <style jsx> or <style jsx global>
+                const opening = node.openingElement;
+                if (!opening)
+                    return;
+                const name = opening.name;
+                if (name?.type !== 'JSXIdentifier' || name.name !== 'style')
+                    return;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                const hasJsx = opening.attributes.some(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (attr) => attr.type === 'JSXAttribute' &&
+                    attr.name?.type === 'JSXIdentifier' &&
+                    attr.name.name === 'jsx');
+                if (!hasJsx)
+                    return;
+                // Walk children looking for JSXExpressionContainer → TemplateLiteral
+                for (const child of node.children || []) {
+                    if (child.type !== 'JSXExpressionContainer')
+                        continue;
+                    const expr = child.expression;
+                    if (!expr)
+                        continue;
+                    // Handle both `{`...`}` and `{'...'}` forms
+                    let cssText = null;
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    let targetNode = null;
+                    if (expr.type === 'TemplateLiteral' && expr.quasis?.length > 0) {
+                        cssText = expr.quasis.map((q) => q.value.raw).join('');
+                        targetNode = expr;
+                    }
+                    else if (expr.type === 'Literal' && typeof expr.value === 'string') {
+                        cssText = expr.value;
+                        targetNode = expr;
+                    }
+                    if (!cssText || !targetNode)
+                        continue;
+                    if (HAS_DATA_URI.test(cssText) &&
+                        HAS_URL_HASH_REF.test(cssText)) {
+                        context.report({
+                            node: targetNode,
+                            messageId: 'dataUriUrlRef',
+                        });
+                    }
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

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

@@ -16,6 +16,8 @@ declare const _default: {
         '@lark-apaas': {
             rules: {
                 'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+                'no-styled-jsx-data-uri-url-ref': import("eslint").Rule.RuleModule;
+                'no-multiline-styled-jsx-classname': 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

@@ -42,6 +42,10 @@ exports.default = {
         '@lark-apaas/require-app-container': 'error',
         // 平台规则：禁止直接调用 capability 内部 API，应使用 capabilityClient
         '@lark-apaas/no-direct-capability-api': 'error',
+        // styled-jsx data URI + url(#) 会导致 stylis 误判括号配对 → "Nesting detected" 构建失败
+        '@lark-apaas/no-styled-jsx-data-uri-url-ref': 'error',
+        // styled-jsx + 多行模板 className → 下游 transpiler 可能产出 "Unterminated string literal"
+        '@lark-apaas/no-multiline-styled-jsx-classname': 'error',
         // TypeScript 规则
         '@typescript-eslint/no-unused-vars': 'off', // 未使用变量检查关闭
         '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any 类型

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

@@ -19,6 +19,8 @@ export declare const eslintPresets: {
             '@lark-apaas': {
                 rules: {
                     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+                    'no-styled-jsx-data-uri-url-ref': import("eslint").Rule.RuleModule;
+                    'no-multiline-styled-jsx-classname': 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/index.js

@@ -20,7 +20,7 @@ const testFileIgnorePatterns = [
     '**/*.spec.ts',
     '**/*.spec.tsx',
 ];
-const globalIgnoreServerPatterns = ['tmp/**', 'server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
+const globalIgnoreServerPatterns = ['server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
 const globalIgnoreClientPatterns = ['dist', 'node_modules', 'client/src/api/gen', ...testFileIgnorePatterns]; // 全局 eslint client Ignore
 // 只导出纯净的规则配置，不包含基础配置
 // 用户需要在项目配置中自己添加基础配置（eslintJs, tseslint, nestjs 等）

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

@@ -169,6 +169,10 @@ const baseConfig = {
         // 平台规则：禁止直接调用 capability 内部 API，应使用 capabilityClient
         '@lark-apaas/no-direct-capability-api': 'error',
         '@lark-apaas/no-nested-styled-jsx': 'error',
+        // styled-jsx data URI + url(#) 会导致 stylis 误判括号配对 → "Nesting detected" 构建失败
+        '@lark-apaas/no-styled-jsx-data-uri-url-ref': 'error',
+        // styled-jsx + 多行模板 className → 下游 transpiler 可能产出 "Unterminated string literal"
+        '@lark-apaas/no-multiline-styled-jsx-classname': 'error',
         // 自定义规则：HTTP 调用响应类型必须定义在 shared/（默认关闭，需 y 位升级后对新应用开启）
         '@lark-apaas/require-shared-request-type': 'off',
         // TypeScript 规则

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

@@ -46,6 +46,8 @@ export declare const eslintPresets: {
             '@lark-apaas': {
                 rules: {
                     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+                    'no-styled-jsx-data-uri-url-ref': import("eslint").Rule.RuleModule;
+                    'no-multiline-styled-jsx-classname': 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;
@@ -69,6 +71,8 @@ export declare const eslintPresets: {
             '@lark-apaas': {
                 rules: {
                     'no-nested-styled-jsx': import("eslint").Rule.RuleModule;
+                    'no-styled-jsx-data-uri-url-ref': import("eslint").Rule.RuleModule;
+                    'no-multiline-styled-jsx-classname': 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/simple/recommend/eslint/index.js

@@ -21,7 +21,7 @@ const testFileIgnorePatterns = [
     '**/*.spec.ts',
     '**/*.spec.tsx',
 ];
-const globalIgnoreServerPatterns = ['tmp/**', 'server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
+const globalIgnoreServerPatterns = ['server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
 const globalIgnoreClientPatterns = ['dist', 'node_modules', 'client/src/api/gen', ...testFileIgnorePatterns]; // 全局 eslint client Ignore
 // @lark-apaas 插件只注册一次，client 和 server config 共享
 const larkApaasPlugin = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-presets",
-  "version": "1.1.17-alpha.4",
+  "version": "1.1.17-alpha.5",
   "files": [
     "lib"
   ],