From 9ccdc648ad3a21182d7e53e23acabfb9a8869acb Mon Sep 17 00:00:00 2001 From: Hubert Bieszczad Date: Tue, 21 Oct 2025 07:45:37 +0200 Subject: [PATCH] fix: some styles parsing after performance improvements --- packages/uniwind/specs/spacing.test.ts | 4 +- .../src/core/native/parsers/transforms.ts | 2 + packages/uniwind/src/core/native/store.ts | 18 +++- packages/uniwind/src/metro/processor/rn.ts | 83 ++++++++++++------- 4 files changed, 73 insertions(+), 34 deletions(-) diff --git a/packages/uniwind/specs/spacing.test.ts b/packages/uniwind/specs/spacing.test.ts index c10e49eb..5b9731b4 100644 --- a/packages/uniwind/specs/spacing.test.ts +++ b/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) diff --git a/packages/uniwind/src/core/native/parsers/transforms.ts b/packages/uniwind/src/core/native/parsers/transforms.ts index 8aedb546..f4faeec9 100644 --- a/packages/uniwind/src/core/native/parsers/transforms.ts +++ b/packages/uniwind/src/core/native/parsers/transforms.ts @@ -47,6 +47,8 @@ export const parseTransformsMutation = (styles: Record) => { if (transformsResult.length > 0) { Object.defineProperty(styles, 'transform', { + configurable: true, + enumerable: true, value: transformsResult, }) } diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts index 111e0d06..0540e8b7 100644 --- a/packages/uniwind/src/core/native/store.ts +++ b/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, }) } diff --git a/packages/uniwind/src/metro/processor/rn.ts b/packages/uniwind/src/metro/processor/rn.ts index 88218994..a827d10a 100644 --- a/packages/uniwind/src/metro/processor/rn.ts +++ b/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) { + 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, + } } } }