@lark-apaas/fullstack-presets 1.1.22 → 1.1.23-beta.0

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

@@ -1,28 +1,44 @@
 /**
  * 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.
+ * Catches `url("data:...")` atoms inside `<style jsx>` whose body contains
+ * raw `(` or `)` characters. The stylis CSS parser (used by styled-jsx)
+ * tracks parenthesis depth while it walks the surrounding `url(...)` token,
+ * so any unescaped paren in the data URI body throws bracket matching off
+ * and causes a "Nesting detected" build failure on a perfectly valid
+ * sibling declaration further down the stylesheet.
  *
- * This rule surfaces the problem at lint time (IDE red squiggly + CI gate)
- * instead of letting it escape to build time.
+ * Two observed flavours:
  *
- * Observed: 107 cases in week 04-06~04-12, all from AI-generated SVG noise
- * textures containing `filter='url(%23noise)'` inside data URIs.
+ * 1. Inline `url(#id)` references (e.g. SVG noise textures with
+ *    `filter='url(%23noise)'`). This was the original 04-06~04-12 wave
+ *    (107 cases / week, see referenced docs).
+ *
+ * 2. Inline CSS functions used as SVG attribute values, e.g.
+ *    `fill='hsl(40,30%25,97%25)'`, `transform='translate(10,20)'`. These
+ *    contain bare `(` `)` but no nested `url(`, so they slipped past the
+ *    earlier nested-url-only check. W21 (2026-05-18~24) saw ~11 such cases
+ *    even though the rule was already enabled — same stylis bug, different
+ *    surface.
+ *
+ * This rule surfaces both at lint time (IDE red squiggly + CI gate) instead
+ * of letting them escape to build time.
  *
  * @see ~/docs/styled-jsx-nesting-bug-analysis-20260330.md
+ * @see ~/docs/miaoda-precommit-ts2307-rootcause-20260525.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.
+ * `url(<quote>data:...<quote>)` atoms. For each such atom, return true if
+ * the body (between the matching quotes) contains a raw `(` or `)` — those
+ * characters confuse the stylis tokenizer's paren counter and cause it to
+ * misattribute the bug to a later, unrelated declaration.
+ *
+ * A data URI body should never contain raw parens — they belong either
+ * URL-encoded (`%28`/`%29`) or, better, in a sibling `.svg` file referenced
+ * by external `url(/foo.svg)`.
  *
  * Safety properties (can't hang / crash lint):
  * - Single forward scan, O(n); `i` always advances past every candidate.
@@ -32,6 +48,10 @@ import type { Rule } from 'eslint';
  * - Bails safely (returns false) on unterminated strings.
  * - Zero regex backtracking; no catastrophic-regex risk.
  *
+ * The function name is kept for backwards compatibility (existing imports);
+ * the implementation now flags any paren-bearing data URI body, not just
+ * the historical `url(...)` nested case.
+ *
  * @param cssText the full CSS source of a single <style jsx> block
  */
 export declare function hasDataUriWithNestedUrl(cssText: string): boolean;

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

@@ -3,11 +3,14 @@ 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.
+ * `url(<quote>data:...<quote>)` atoms. For each such atom, return true if
+ * the body (between the matching quotes) contains a raw `(` or `)` — those
+ * characters confuse the stylis tokenizer's paren counter and cause it to
+ * misattribute the bug to a later, unrelated declaration.
+ *
+ * A data URI body should never contain raw parens — they belong either
+ * URL-encoded (`%28`/`%29`) or, better, in a sibling `.svg` file referenced
+ * by external `url(/foo.svg)`.
  *
  * Safety properties (can't hang / crash lint):
  * - Single forward scan, O(n); `i` always advances past every candidate.
@@ -17,6 +20,10 @@ exports.hasDataUriWithNestedUrl = hasDataUriWithNestedUrl;
  * - Bails safely (returns false) on unterminated strings.
  * - Zero regex backtracking; no catastrophic-regex risk.
  *
+ * The function name is kept for backwards compatibility (existing imports);
+ * the implementation now flags any paren-bearing data URI body, not just
+ * the historical `url(...)` nested case.
+ *
  * @param cssText the full CSS source of a single <style jsx> block
  */
 function hasDataUriWithNestedUrl(cssText) {
@@ -64,8 +71,11 @@ function hasDataUriWithNestedUrl(cssText) {
         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)
+        // Any raw `(` or `)` in the body confuses the stylis paren counter.
+        // (Nested `url(...)` is a subset of this — the original 04-06 wave.)
+        // Inline CSS-function attribute values like `hsl(...)` or
+        // `transform='translate(...)'` are the W21 surface we missed before.
+        if (body.indexOf('(') !== -1 || body.indexOf(')') !== -1)
             return true;
         // Move past this data URI and keep scanning for more url() atoms.
         i = j + 1;
@@ -82,9 +92,10 @@ const rule = {
         },
         schema: [],
         messages: {
-            dataUriUrlRef: '`url("data:...")` 的内容里嵌套了 `url(...)` 引用（如 SVG filter 的 `url(#id)`），会导致 styled-jsx 的 CSS 解析器（stylis）' +
-                '误判括号配对并报 "Nesting detected" 构建错误。请将 SVG 移到独立 .svg 文件通过 import 引用，' +
-                '或改用 CSS 变量 / 外链 background-image 代替内联 data URI。',
+            dataUriUrlRef: '`url("data:...")` 的内容里含有未转义的括号 `(` 或 `)`（如 `url(#noise)` / `hsl(...)` / `translate(...)`），' +
+                '会让 styled-jsx 的 CSS 解析器（stylis）误算括号深度，把后面合法的 CSS 规则报成 "Nesting detected" 构建错误。' +
+                '建议将 SVG 移到独立 .svg 文件通过 import 引用（或 `client/public/*.svg` + 外链 background-image），' +
+                '不要把含 CSS 函数的 SVG 属性值内联到 data URI 里。',
         },
     },
     create(context) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/fullstack-presets",
-  "version": "1.1.22",
+  "version": "1.1.23-beta.0",
   "files": [
     "lib"
   ],