Merge pull request #4 from dev-five-git/fix-var-name-issue

Fix var name issue

Author: owjs3901

src/__tests__/Element.test.ts

@@ -100,6 +100,26 @@ describe('Element', () => {
       expect(await element.render()).toEqual(
         '<Box w="60px">\n  <Box w="100%" />\n</Box>',
       )
+      {
+        const element = createElement('RECTANGLE', {
+          border: 'solid 1px var(--containerBackground, #FFF)',
+          fills: [],
+        })
+        expect(await element.getComponentType()).toEqual('Box')
+        expect(await element.render()).toEqual(
+          '<Box border="solid 1px $containerBackground" />',
+        )
+      }
+      {
+        const element = createElement('RECTANGLE', {
+          border: 'solid 1px var(--containerBackground)',
+          fills: [],
+        })
+        expect(await element.getComponentType()).toEqual('Box')
+        expect(await element.render()).toEqual(
+          '<Box border="solid 1px $containerBackground" />',
+        )
+      }
     })
 
     describe('Image', () => {

src/utils.ts

@@ -116,7 +116,7 @@ export function space(depth: number) {
 function extractVariableName(value: string) {
   if (!value.startsWith('var(--')) return value
   const match = value.match(/var\(--(\w+)/)
-  return '$' + match?.[1]
+  return '$' + match?.[1].split(',')[0].trim()
 }
 
 export function propsToComponentProps(
@@ -431,6 +431,8 @@ export function organizeProps(props: Record<string, string>) {
     if (ret[key].startsWith('"') && ret[key].endsWith('"'))
       ret[key] = ret[key].slice(1, -1)
     if (ret[key].includes('/*')) ret[key] = ret[key].split('/*')[0].trim()
+    if (ret[key].includes('var(--'))
+      ret[key] = ret[key].replace(/var\(--.*\)/g, extractVariableName)
   }
   for (const key in CONVERT_PROPS_VALUE_MAP) {
     if (!ret[key]) continue