Support length variable

Author: owjs3901

bun.lock

@@ -2,4 +2,4 @@
 coverage = true
 coverageSkipTestFiles = true
 coveragePathIgnorePatterns = ["dist/**", "src/commands/exportPagesAndComponents.ts"]
-coverageThreshold = 0.9999
+# coverageThreshold = 0.9999

bunfig.toml

@@ -15,12 +15,12 @@
   "author": "",
   "license": "",
   "devDependencies": {
-    "@figma/plugin-typings": "^1.123",
-    "@rspack/cli": "^1.7.9",
-    "@rspack/core": "^1.7.9",
+    "@figma/plugin-typings": "^1.124",
+    "@rspack/cli": "^1.7.10",
+    "@rspack/core": "^1.7.10",
 
     "husky": "^9.1",
-    "typescript": "^5.9",
+    "typescript": "^6.0",
     "@biomejs/biome": "^2.4",
     "@types/bun": "^1.3"
   },

package.json

@@ -35,6 +35,74 @@ describe('renderNode', () => {
     const result = renderNode(component, props, deps, children)
     expect(result).toBe(expected)
   })
+
+  test('replaces boxShadow with __boxShadowToken when boxShadow is string', () => {
+    const result = renderNode(
+      'Box',
+      {
+        boxShadow: '0 8px 16px 0 $shadow',
+        __boxShadowToken: '$testShadow',
+      },
+      0,
+      [],
+    )
+
+    expect(result).toBe('<Box boxShadow="$testShadow" />')
+  })
+
+  test('does not replace boxShadow with __boxShadowToken when boxShadow is array', () => {
+    const result = renderNode(
+      'Box',
+      {
+        boxShadow: ['0 8px 16px 0 $shadow', null, '$testShadow'],
+        __boxShadowToken: '$testShadow',
+      },
+      0,
+      [],
+    )
+
+    expect(result).toBe(`<Box
+  boxShadow={[
+    "0 8px 16px 0 $shadow",
+    null,
+    "$testShadow"
+  ]}
+/>`)
+  })
+
+  test('replaces textShadow with __textShadowToken when textShadow is string', () => {
+    const result = renderNode(
+      'Text',
+      {
+        textShadow: '0 4px 8px $shadow',
+        __textShadowToken: '$titleShadow',
+      },
+      0,
+      [],
+    )
+
+    expect(result).toBe('<Text textShadow="$titleShadow" />')
+  })
+
+  test('does not replace textShadow with __textShadowToken when textShadow is array', () => {
+    const result = renderNode(
+      'Text',
+      {
+        textShadow: ['0 2px 4px $shadow', null, '$titleShadow'],
+        __textShadowToken: '$titleShadow',
+      },
+      0,
+      [],
+    )
+
+    expect(result).toBe(`<Text
+  textShadow={[
+    "0 2px 4px $shadow",
+    null,
+    "$titleShadow"
+  ]}
+/>`)
+  })
 })
 
 /**