@lark-apaas/fullstack-presets 1.1.18 → 1.1.20

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,36 @@
+/**
+ * ESLint rule: no-multiline-styled-jsx-classname
+ *
+ * Detects multi-line className attributes (TemplateLiteral or JSX string attr
+ * with literal newlines) on JSX elements that belong to a function component
+ * which ALSO contains a `<style jsx>` tag.
+ *
+ * Why scope to the enclosing function component (not the whole file)?
+ *   styled-jsx's Babel plugin only wraps className when the JSXElement tree
+ *   actually contains a `<style jsx>` tag. A file can have multiple function
+ *   components; flagging multi-line classNames in components that never use
+ *   styled-jsx would be a false positive (their className never gets wrapped,
+ *   so no downstream transpiler bug can bite them).
+ *
+ * When the rule DOES fire, styled-jsx wraps the className as:
+ *
+ *     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,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/** Is this JSXOpeningElement a `<style jsx>` tag? */
+function isStyledJsxOpening(node) {
+    if (!node)
+        return false;
+    if (node.type !== 'JSXOpeningElement')
+        return false;
+    const name = node.name;
+    if (name?.type !== 'JSXIdentifier' || name.name !== 'style')
+        return false;
+    return (node.attributes?.some((attr) => attr.type === 'JSXAttribute' &&
+        attr.name?.type === 'JSXIdentifier' &&
+        attr.name.name === 'jsx') ?? false);
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow multi-line className in components using <style jsx>',
+            category: 'Possible Errors',
+            recommended: true,
+        },
+        fixable: 'code',
+        schema: [],
+        messages: {
+            multilineClassName: '多行 className 在 styled-jsx 编译后可能被下游构建工具截断为非法字符串' +
+                '（"Unterminated string literal"）。请改为单行写法。',
+        },
+    },
+    create(context) {
+        // A "scope" is the OUTERMOST enclosing function component in the current
+        // traversal path (i.e., the first function after Program in the stack),
+        // or Program itself if no function is on the stack.
+        //
+        // Why "outermost" and not "nearest"?
+        //   styled-jsx's Babel plugin wraps every className in the ENTIRE JSX tree
+        //   of a component that contains `<style jsx>`. So a className inside
+        //   `list.map((item) => <button className="..." />)` within PropsPage
+        //   still gets wrapped — the arrow function is just a render helper, not
+        //   a separate component. Scoping by nearest enclosing function would
+        //   incorrectly exempt such inline callbacks.
+        //
+        // Implementation:
+        //   - Stack entries are pushed for Program and every function node
+        //     encountered (so nesting is preserved structurally).
+        //   - `currentScope()` returns stack[1] — the first function below Program
+        //     — if one exists, else stack[0] (Program). This effectively treats all
+        //     nested functions as members of the outer function's scope.
+        //   - Separate top-level function components (declared at Program level)
+        //     get their own scope because only one of them is on the stack at a
+        //     time (ComponentA pushes + pops before ComponentB pushes).
+        const scopeStack = [];
+        // WeakSet keeps references without preventing GC; matches by object identity.
+        const scopesWithStyledJsx = new WeakSet();
+        const candidates = [];
+        const currentScope = () => {
+            if (scopeStack.length === 0)
+                return null;
+            // stack[0] is Program; stack[1], if present, is the outermost function
+            // component. Everything deeper is considered part of stack[1]'s scope.
+            return scopeStack.length >= 2 ? scopeStack[1] : scopeStack[0];
+        };
+        const pushScope = (node) => scopeStack.push(node);
+        const popScope = () => {
+            scopeStack.pop();
+        };
+        return {
+            // --- Scope tracking (function components) ---
+            Program(node) {
+                pushScope(node);
+            },
+            'Program:exit'() {
+                // Finalize: pop Program scope + run reports
+                popScope();
+                for (const { target, raw, kind, scope } of candidates) {
+                    if (!scopesWithStyledJsx.has(scope))
+                        continue;
+                    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) {
+                            // Both Case A (template) and Case B (string) collapse to a
+                            // single-line StringLiteral. Safe because className list
+                            // semantics treat any whitespace run as one separator.
+                            return fixer.replaceText(target, JSON.stringify(normalized));
+                        },
+                    });
+                }
+            },
+            FunctionDeclaration(node) {
+                pushScope(node);
+            },
+            'FunctionDeclaration:exit'() {
+                popScope();
+            },
+            FunctionExpression(node) {
+                pushScope(node);
+            },
+            'FunctionExpression:exit'() {
+                popScope();
+            },
+            ArrowFunctionExpression(node) {
+                pushScope(node);
+            },
+            'ArrowFunctionExpression:exit'() {
+                popScope();
+            },
+            // --- Mark scope as containing <style jsx> ---
+            JSXOpeningElement(node) {
+                if (!isStyledJsxOpening(node))
+                    return;
+                const scope = currentScope();
+                if (scope)
+                    scopesWithStyledJsx.add(scope);
+            },
+            // --- Collect multi-line className candidates ---
+            JSXAttribute(node) {
+                if (node.name?.type !== 'JSXIdentifier' ||
+                    node.name.name !== 'className') {
+                    return;
+                }
+                const val = node.value;
+                if (!val)
+                    return;
+                const scope = currentScope();
+                if (!scope)
+                    return; // no enclosing scope (shouldn't happen since Program is pushed)
+                // Case A: className={`...\n...`} — TemplateLiteral without ${}
+                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({ target: expr, raw, kind: 'template', scope });
+                    return;
+                }
+                // Case B: className="...\n..." — JSX string attribute with newlines
+                if (val.type === 'Literal' || val.type === 'StringLiteral') {
+                    const str = val.value ?? '';
+                    if (!str.includes('\n') && !str.includes('\r'))
+                        return;
+                    candidates.push({ target: val, raw: str, kind: 'string', scope });
+                }
+            },
+        };
+    },
+};
+exports.default = rule;

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

@@ -0,0 +1,39 @@
+/**
+ * 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';
+/**
+ * Precise detection: scan the CSS text character-by-character, looking for
+ * `url(<quote>data:...<quote>)` atoms. For each such atom, check whether the
+ * body (between the matching quotes) contains `url(`. Only flag if the
+ * offending `url(` is truly nested inside a data URI body — this eliminates
+ * the false-positive case where a data URI and a separate `url(#gradient)`
+ * coexist in the same CSS but are unrelated.
+ *
+ * Safety properties (can't hang / crash lint):
+ * - Single forward scan, O(n); `i` always advances past every candidate.
+ * - Bounded loop: hard limit on total iterations to protect against pathological
+ *   input.
+ * - Handles escaped quotes (\") inside data URI bodies.
+ * - Bails safely (returns false) on unterminated strings.
+ * - Zero regex backtracking; no catastrophic-regex risk.
+ *
+ * @param cssText the full CSS source of a single <style jsx> block
+ */
+export declare function hasDataUriWithNestedUrl(cssText: string): boolean;
+declare const rule: Rule.RuleModule;
+export default rule;

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

@@ -0,0 +1,142 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hasDataUriWithNestedUrl = hasDataUriWithNestedUrl;
+/**
+ * Precise detection: scan the CSS text character-by-character, looking for
+ * `url(<quote>data:...<quote>)` atoms. For each such atom, check whether the
+ * body (between the matching quotes) contains `url(`. Only flag if the
+ * offending `url(` is truly nested inside a data URI body — this eliminates
+ * the false-positive case where a data URI and a separate `url(#gradient)`
+ * coexist in the same CSS but are unrelated.
+ *
+ * Safety properties (can't hang / crash lint):
+ * - Single forward scan, O(n); `i` always advances past every candidate.
+ * - Bounded loop: hard limit on total iterations to protect against pathological
+ *   input.
+ * - Handles escaped quotes (\") inside data URI bodies.
+ * - Bails safely (returns false) on unterminated strings.
+ * - Zero regex backtracking; no catastrophic-regex risk.
+ *
+ * @param cssText the full CSS source of a single <style jsx> block
+ */
+function hasDataUriWithNestedUrl(cssText) {
+    const len = cssText.length;
+    const MAX_ITERATIONS = len + 1; // guard against logic bugs
+    let iterations = 0;
+    let i = 0;
+    while (i < len) {
+        if (++iterations > MAX_ITERATIONS)
+            return false; // safety fuse
+        // Find the next literal "url(" atom
+        const urlIdx = cssText.indexOf('url(', i);
+        if (urlIdx === -1)
+            return false;
+        i = urlIdx + 4;
+        // Skip whitespace after "url("
+        while (i < len && (cssText[i] === ' ' || cssText[i] === '\t' || cssText[i] === '\n')) {
+            i++;
+        }
+        if (i >= len)
+            return false;
+        // Must be quoted
+        const quote = cssText[i];
+        if (quote !== '"' && quote !== "'")
+            continue;
+        // Must be "data:" scheme
+        if (cssText.slice(i + 1, i + 6) !== 'data:')
+            continue;
+        // Walk char-by-char to find matching close quote, honouring \" escapes
+        const bodyStart = i + 1;
+        let j = bodyStart;
+        let terminated = false;
+        while (j < len) {
+            const c = cssText[j];
+            if (c === '\\' && j + 1 < len) {
+                j += 2;
+                continue;
+            }
+            if (c === quote) {
+                terminated = true;
+                break;
+            }
+            j++;
+        }
+        if (!terminated)
+            return false; // unterminated data URI — bail safely
+        const body = cssText.slice(bodyStart, j);
+        // If the data URI body contains a literal `url(`, stylis will break.
+        if (body.indexOf('url(') !== -1)
+            return true;
+        // Move past this data URI and keep scanning for more url() atoms.
+        i = j + 1;
+    }
+    return false;
+}
+const rule = {
+    meta: {
+        type: 'problem',
+        docs: {
+            description: 'Disallow data URIs whose body contains url() references inside <style jsx>, which crash the stylis CSS parser',
+            category: 'Possible Errors',
+            recommended: true,
+        },
+        schema: [],
+        messages: {
+            dataUriUrlRef: '`url("data:...")` 的内容里嵌套了 `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 / StringLiteral
+                for (const child of node.children || []) {
+                    if (child.type !== 'JSXExpressionContainer')
+                        continue;
+                    const expr = child.expression;
+                    if (!expr)
+                        continue;
+                    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 (hasDataUriWithNestedUrl(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 = ['server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
+const globalIgnoreServerPatterns = ['tmp/**', '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 = ['server/database/.introspect/**', ...testFileIgnorePatterns]; // 全局 eslint server ignore
+const globalIgnoreServerPatterns = ['tmp/**', '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.18",
+  "version": "1.1.20",
   "files": [
     "lib"
   ],