fix: some styles parsing after performance improvements (#80)

Author: Brentlok

packages/uniwind/specs/spacing.test.ts

@@ -25,8 +25,8 @@ describe('Converts tailwind spacings', () => {
         const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(className).styles
 
-        expect(styles).toHaveProperty('paddingHorizontalStart', 16)
-        expect(styles).toHaveProperty('paddingHorizontalEnd', 16)
+        expect(styles).toHaveProperty('paddingLeft', 16)
+        expect(styles).toHaveProperty('paddingRight', 16)
         expect(styles).toHaveProperty('marginTop', 8)
         expect(styles).toHaveProperty('marginBottom', 8)
         expect(styles).toHaveProperty('marginLeft', 8)

packages/uniwind/src/core/native/parsers/transforms.ts

@@ -47,6 +47,8 @@ export const parseTransformsMutation = (styles: Record<string, any>) => {
 
     if (transformsResult.length > 0) {
         Object.defineProperty(styles, 'transform', {
+            configurable: true,
+            enumerable: true,
             value: transformsResult,
         })
     }

packages/uniwind/src/core/native/store.ts

@@ -153,18 +153,24 @@ export class UniwindStoreBuilder {
         if (result.lineHeight !== undefined && result.lineHeight < 6) {
             Object.defineProperty(result, 'lineHeight', {
                 value: result.fontSize * result.lineHeight,
+                configurable: true,
+                enumerable: true,
             })
         }
 
         if (result.boxShadow !== undefined) {
             Object.defineProperty(result, 'boxShadow', {
                 value: parseBoxShadow(result.boxShadow),
+                configurable: true,
+                enumerable: true,
             })
         }
 
-        if (result.visibility !== undefined && result.visibility === 'hidden') {
-            Object.defineProperty(result, 'visibility', {
-                value: 'hidden',
+        if (result.visibility === 'hidden') {
+            Object.defineProperty(result, 'display', {
+                value: 'none',
+                configurable: true,
+                enumerable: true,
             })
         }
 
@@ -173,12 +179,16 @@ export class UniwindStoreBuilder {
         ) {
             Object.defineProperty(result, 'borderColor', {
                 value: '#000000',
+                configurable: true,
+                enumerable: true,
             })
         }
 
         if (result.fontVariant !== undefined) {
             Object.defineProperty(result, 'fontVariant', {
                 value: parseFontVariant(result.fontVariant),
+                configurable: true,
+                enumerable: true,
             })
         }
 
@@ -187,6 +197,8 @@ export class UniwindStoreBuilder {
         if (result.experimental_backgroundImage !== undefined) {
             Object.defineProperty(result, 'experimental_backgroundImage', {
                 value: resolveGradient(result.experimental_backgroundImage),
+                configurable: true,
+                enumerable: true,
             })
         }
 

packages/uniwind/src/metro/processor/rn.ts

@@ -208,48 +208,73 @@ export class RN {
         }
 
         if (typeof value === 'object') {
-            const properties = Object.keys(value)
-            // border properties are border{X}Color instead of borderColor{X}
-            const propertyEnd = property.includes('border')
-                ? property.split('border').at(-1) ?? ''
-                : ''
-            const transformedProperty = property.replace(propertyEnd, '')
-
-            if (properties.every(property => ['row', 'column'].includes(property))) {
-                return {
-                    rowGap: value.row,
-                    columnGap: value.column,
-                }
+            const transformed = this.transformObjectProperty(property, value)
+
+            if (transformed) {
+                return transformed
             }
+        }
 
-            if (properties.every(property => ['start', 'end'].includes(property))) {
-                return {
-                    [`${transformedProperty}Start${propertyEnd}`]: value.start,
-                    [`${transformedProperty}End${propertyEnd}`]: value.end,
-                }
+        return {
+            [property]: value,
+        }
+    }
+
+    private transformObjectProperty(property: string, value: Record<string, any>) {
+        const properties = Object.keys(value)
+        // border properties are border{X}Color instead of borderColor{X}
+        const propertyEnd = property.includes('border')
+            ? property.split('border').at(-1) ?? ''
+            : ''
+        const transformedProperty = property.replace(propertyEnd, '')
+        const isSpacing = property.includes('margin') || property.includes('padding')
+
+        const wrapProperty = (prop: string) => `${transformedProperty}${prop}${propertyEnd}`
+
+        if (properties.every(property => ['row', 'column'].includes(property))) {
+            return {
+                rowGap: value.row,
+                columnGap: value.column,
             }
+        }
 
-            if (properties.every(property => ['top', 'right', 'bottom', 'left'].includes(property))) {
+        if (properties.every(property => ['start', 'end'].includes(property))) {
+            if (isSpacing && property.includes('Horizontal')) {
                 return {
-                    [`${transformedProperty}Top${propertyEnd}`]: value.top,
-                    [`${transformedProperty}Right${propertyEnd}`]: value.right,
-                    [`${transformedProperty}Bottom${propertyEnd}`]: value.bottom,
-                    [`${transformedProperty}Left${propertyEnd}`]: value.left,
+                    [`${property.replace('Horizontal', 'Left')}`]: value.start,
+                    [`${property.replace('Horizontal', 'Right')}`]: value.end,
                 }
             }
 
-            if (properties.every(property => ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'].includes(property))) {
+            if (isSpacing && property.includes('Vertical')) {
                 return {
-                    [`${transformedProperty}TopLeft${propertyEnd}`]: value.topLeft,
-                    [`${transformedProperty}TopRight${propertyEnd}`]: value.topRight,
-                    [`${transformedProperty}BottomRight${propertyEnd}`]: value.bottomRight,
-                    [`${transformedProperty}BottomLeft${propertyEnd}`]: value.bottomLeft,
+                    [`${property.replace('Vertical', 'Top')}`]: value.start,
+                    [`${property.replace('Vertical', 'Bottom')}`]: value.end,
                 }
             }
+
+            return {
+                [wrapProperty('Start')]: value.start,
+                [wrapProperty('End')]: value.end,
+            }
         }
 
-        return {
-            [property]: value,
+        if (properties.every(property => ['top', 'right', 'bottom', 'left'].includes(property))) {
+            return {
+                [wrapProperty('Top')]: value.top,
+                [wrapProperty('Right')]: value.right,
+                [wrapProperty('Bottom')]: value.bottom,
+                [wrapProperty('Left')]: value.left,
+            }
+        }
+
+        if (properties.every(property => ['topLeft', 'topRight', 'bottomRight', 'bottomLeft'].includes(property))) {
+            return {
+                [wrapProperty('TopLeft')]: value.topLeft,
+                [wrapProperty('TopRight')]: value.topRight,
+                [wrapProperty('BottomRight')]: value.bottomRight,
+                [wrapProperty('BottomLeft')]: value.bottomLeft,
+            }
         }
     }
 }