Merge pull request #2359 from dos1in/fix/css-var-crash

fix(rn): 修复 CSS 变量中存在非法 fallback 值引起的 crash

Author: hiyuki

packages/webpack-plugin/lib/platform/style/wx/index.js

@@ -89,20 +89,48 @@ module.exports = function getSpec ({ warn, error }) {
       if (rule[1].test(prop)) return rule[0]
     }
   }
-  // const getDefaultValueFromVar = (str) => {
-  //   const totalVarExp = /^var\((.+)\)$/
-  //   if (!totalVarExp.test(str)) return str
-  //   const newVal = parseValues((str.match(totalVarExp)?.[1] || ''), ',')
-  //   if (newVal.length <= 1) return ''
-  //   if (!totalVarExp.test(newVal[1])) return newVal[1]
-  //   return getDefaultValueFromVar(newVal[1])
-  // }
-  // 属性值校验
+
+  // 从 CSS 变量中提取 fallback 值进行验证
+  // 返回值：fallback 值 | null（没有 fallback）| undefined（循环引用）
+  const getDefaultValueFromVar = (str, visited = new Set()) => {
+    const totalVarExp = /^var\((.+)\)$/
+    if (!totalVarExp.test(str)) return str
+
+    // 防止循环引用 - 返回 undefined 表示检测到循环
+    if (visited.has(str)) return undefined
+    visited.add(str)
+
+    const newVal = parseValues((str.match(totalVarExp)?.[1] || ''), ',')
+    if (newVal.length <= 1) return null // 没有 fallback
+    const fallback = newVal[1].trim()
+    // 如果 fallback 也是 var()，递归提取
+    if (totalVarExp.test(fallback)) return getDefaultValueFromVar(fallback, visited)
+    return fallback
+  }
+
   const verifyValues = ({ prop, value, selector }, isError = true) => {
     prop = prop.trim()
     value = value.trim()
     const tips = isError ? error : warn
-    if (cssVariableExp.test(value) || calcExp.test(value) || envExp.test(value)) return true
+
+    // 对于包含 CSS 变量的值，提取 fallback 值进行验证
+    if (cssVariableExp.test(value)) {
+      const fallback = getDefaultValueFromVar(value)
+      // undefined 表示检测到循环引用
+      if (fallback === undefined) {
+        tips(`CSS variable circular reference in fallback chain detected in ${selector} for property ${prop}, value: ${value}`)
+        return false
+      }
+      // null 表示没有 fallback，CSS 变量本身是合法的（运行时会解析）
+      if (fallback === null) {
+        return true
+      }
+      // 有 fallback 值，将 fallback 作为新的 value 继续后续验证流程
+      value = fallback
+    }
+
+    // calc() 和 env() 跳过验证
+    if (calcExp.test(value) || envExp.test(value)) return true
     const namedColor = ['transparent', 'aliceblue', 'antiquewhite', 'aqua', 'aquamarine', 'azure', 'beige', 'bisque', 'black', 'blanchedalmond', 'blue', 'blueviolet', 'brown', 'burlywood', 'cadetblue', 'chartreuse', 'chocolate', 'coral', 'cornflowerblue', 'cornsilk', 'crimson', 'cyan', 'darkblue', 'darkcyan', 'darkgoldenrod', 'darkgray', 'darkgreen', 'darkgrey', 'darkkhaki', 'darkmagenta', 'darkolivegreen', 'darkorange', 'darkorchid', 'darkred', 'darksalmon', 'darkseagreen', 'darkslateblue', 'darkslategrey', 'darkturquoise', 'darkviolet', 'deeppink', 'deepskyblue', 'dimgray', 'dimgrey', 'dodgerblue', 'firebrick', 'floralwhite', 'forestgreen', 'fuchsia', 'gainsboro', 'ghostwhite', 'gold', 'goldenrod', 'gray', 'green', 'greenyellow', 'grey', 'honeydew', 'hotpink', 'indianred', 'indigo', 'ivory', 'khaki', 'lavender', 'lavenderblush', 'lawngreen', 'lemonchiffon', 'lightblue', 'lightcoral', 'lightcyan', 'lightgoldenrodyellow', 'lightgray', 'lightgreen', 'lightgrey', 'lightpink', 'lightsalmon', 'lightseagreen', 'lightskyblue', 'lightslategrey', 'lightsteelblue', 'lightyellow', 'lime', 'limegreen', 'linen', 'magenta', 'maroon', 'mediumaquamarine', 'mediumblue', 'mediumorchid', 'mediumpurple', 'mediumseagreen', 'mediumslateblue', 'mediumspringgreen', 'mediumturquoise', 'mediumvioletred', 'midnightblue', 'mintcream', 'mistyrose', 'moccasin', 'navajowhite', 'navy', 'oldlace', 'olive', 'olivedrab', 'orange', 'orangered', 'orchid', 'palegoldenrod', 'palegreen', 'paleturquoise', 'palevioletred', 'papayawhip', 'peachpuff', 'peru', 'pink', 'plum', 'powderblue', 'purple', 'rebeccapurple', 'red', 'rosybrown', 'royalblue', 'saddlebrown', 'salmon', 'sandybrown', 'seagreen', 'seashell', 'sienna', 'silver', 'skyblue', 'slateblue', 'slategray', 'snow', 'springgreen', 'steelblue', 'tan', 'teal', 'thistle', 'tomato', 'turquoise', 'violet', 'wheat', 'white', 'whitesmoke', 'yellow', 'yellowgreen']
     const valueExp = {
       number: /^((-?(\d+(\.\d+)?|\.\d+))(rpx|px|%|vw|vh)?|hairlineWidth)$/,

packages/webpack-plugin/test/platform/wx/style-helper-rn.spec.js

@@ -0,0 +1,254 @@
+const { getClassMap } = require('../../../lib/react/style-helper')
+
+describe('React Native style validation for CSS variables', () => {
+  const createConfig = (mode = 'ios') => ({
+    mode,
+    srcMode: 'wx',
+    ctorType: 'component',
+    warn: jest.fn(),
+    error: jest.fn()
+  })
+
+  describe('CSS variable fallback validation', () => {
+    test('should filter out letter-spacing with invalid "normal" fallback', () => {
+      const css = '.text { letter-spacing: var(--x, normal); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result).toEqual({})
+      expect(config.error).toHaveBeenCalledWith(
+        expect.stringContaining('letter-spacing')
+      )
+    })
+
+    test('should filter out line-height with invalid "normal" fallback', () => {
+      const css = '.text { line-height: var(--y, normal); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result).toEqual({})
+      expect(config.error).toHaveBeenCalledWith(
+        expect.stringContaining('line-height')
+      )
+    })
+
+    test('should keep valid CSS variable with numeric fallback', () => {
+      const css = '.text { letter-spacing: var(--x, 2px); line-height: var(--y, 1.5); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--x, 2px)"',
+        lineHeight: '"var(--y, 1.5)"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should keep CSS variable without fallback', () => {
+      const css = '.text { letter-spacing: var(--x); line-height: var(--y); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--x)"',
+        lineHeight: '"var(--y)"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should validate nested CSS variables recursively', () => {
+      const css = '.text { letter-spacing: var(--x, var(--y, normal)); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result).toEqual({})
+      expect(config.error).toHaveBeenCalledWith(
+        expect.stringContaining('letter-spacing')
+      )
+    })
+
+    test('should keep nested CSS variables with valid fallback', () => {
+      const css = '.text { letter-spacing: var(--x, var(--y, 2px)); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--x, var(--y, 2px))"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should handle deeply nested CSS variables without infinite recursion', () => {
+      // 测试深度嵌套（但不超过限制）
+      const css = '.text { letter-spacing: var(--a, var(--b, var(--c, var(--d, var(--e, 2px))))); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--a, var(--b, var(--c, var(--d, var(--e, 2px)))))"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should stop at max depth for extremely nested CSS variables', () => {
+      // 测试超深嵌套（超过10层）
+      let nestedVar = '2px'
+      for (let i = 0; i < 15; i++) {
+        nestedVar = `var(--x${i}, ${nestedVar})`
+      }
+      const css = `.text { letter-spacing: ${nestedVar}; }`
+      const config = createConfig()
+
+      // 不应该导致堆栈溢出，应该正常返回或报错
+      expect(() => {
+        getClassMap({
+          content: css,
+          filename: 'test.css',
+          ...config
+        })
+      }).not.toThrow()
+    })
+
+    test('should handle self-referencing CSS variable without infinite loop', () => {
+      // 测试循环引用的情况：var(--x, var(--x))
+      // 注意：var(--x, var(--x)) 的 fallback 是 var(--x)，它们是不同的字符串
+      // 所以这种情况下 fallback 链会终止（var(--x) 没有 fallback 返回 null）
+      const css = '.text { letter-spacing: var(--x, var(--x)); }'
+      const config = createConfig()
+
+      // 不应该导致无限循环，应该正常返回
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      // 由于 var(--x) 没有 fallback，整个表达式是合法的，应该保留
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--x, var(--x))"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should handle complex nested CSS variables with different fallbacks', () => {
+      // 测试复杂嵌套：var(--a, var(--b, var(--a, 2px)))
+      // 虽然看起来像循环引用，但每个 var() 的完整字符串都不同
+      // var(--a, var(--b, var(--a, 2px))) -> fallback: var(--b, var(--a, 2px))
+      // var(--b, var(--a, 2px)) -> fallback: var(--a, 2px)
+      // var(--a, 2px) -> fallback: 2px (有效)
+      const css = '.text { letter-spacing: var(--a, var(--b, var(--a, 2px))); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      // 应该成功解析，因为最终 fallback 是有效的 2px
+      expect(result.text._default).toEqual({
+        letterSpacing: '"var(--a, var(--b, var(--a, 2px)))"'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+
+    test('should work on both ios and android modes', () => {
+      const css = '.text { letter-spacing: var(--x, normal); }'
+
+      ;['ios', 'android', 'harmony'].forEach(mode => {
+        const config = createConfig(mode)
+        const result = getClassMap({
+          content: css,
+          filename: 'test.css',
+          ...config
+        })
+
+        expect(result).toEqual({})
+        expect(config.error).toHaveBeenCalled()
+      })
+    })
+  })
+
+  describe('Other number properties with CSS variables', () => {
+    test('should keep margin with "auto" fallback', () => {
+      const css = '.box { margin-left: var(--m, auto); }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.box._default).toHaveProperty('marginLeft')
+      expect(config.error).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Direct normal values (without CSS variables)', () => {
+    test('should filter out direct letter-spacing: normal', () => {
+      const css = '.text { letter-spacing: normal; }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result).toEqual({})
+      expect(config.error).toHaveBeenCalled()
+    })
+
+    test('should keep direct letter-spacing: 2px', () => {
+      const css = '.text { letter-spacing: 2px; }'
+      const config = createConfig()
+
+      const result = getClassMap({
+        content: css,
+        filename: 'test.css',
+        ...config
+      })
+
+      expect(result.text._default).toEqual({
+        letterSpacing: '2'
+      })
+      expect(config.error).not.toHaveBeenCalled()
+    })
+  })
+})