feat: performance improvements

packages/uniwind/specs/colors.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'bun:test'
+import { getStyleSheetsFromCandidates, injectMocks } from './utils'
+
+describe('Converts tailwind colors to hex', () => {
+    injectMocks()
+
+    test('Tailwind built-in', async () => {
+        const className = 'bg-red-500 border-blue-500/50 text-black'
+
+        await getStyleSheetsFromCandidates(...className.split(' '))
+
+        const { UniwindStore } = await import('../src/core/native')
+        const styles = UniwindStore.getStyles(className).styles
+
+        expect(styles).toHaveProperty('backgroundColor', '#fb2c36')
+        expect(styles).toHaveProperty('borderColor', '#2b7fff80')
+        expect(styles).toHaveProperty('color', '#000000')
+    })
+
+    test('Custom colors', async () => {
+        const className = 'bg-[#ff0000] text-[#ff000080]'
+
+        await getStyleSheetsFromCandidates(...className.split(' '))
+
+        const { UniwindStore } = await import('../src/core/native')
+        const styles = UniwindStore.getStyles(className).styles
+
+        expect(styles).toHaveProperty('backgroundColor', '#ff0000')
+        expect(styles).toHaveProperty('color', '#ff000080')
+    })
+})

packages/uniwind/specs/resolver/gradient.test.ts → packages/uniwind/specs/gradient.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test'
-import { getStyleSheetsFromCandidates, injectMocks } from '../utils'
+import { getStyleSheetsFromCandidates, injectMocks } from './utils'
 
 describe('Converts tailwind linear gradients', () => {
     injectMocks()
@@ -9,7 +9,7 @@ describe('Converts tailwind linear gradients', () => {
 
         await getStyleSheetsFromCandidates(...className.split(' '))
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(className).styles
 
         expect(styles).toEqual({
@@ -41,7 +41,7 @@ describe('Converts tailwind linear gradients', () => {
 
         await getStyleSheetsFromCandidates(...className.split(' '))
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(className).styles
 
         expect(styles).toEqual({
@@ -79,7 +79,7 @@ describe('Converts tailwind linear gradients', () => {
 
         await getStyleSheetsFromCandidates(...className.split(' '))
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(className).styles
 
         expect(styles).toEqual({
@@ -111,7 +111,7 @@ describe('Converts tailwind linear gradients', () => {
 
         await getStyleSheetsFromCandidates(...className.split(' '))
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(className).styles
 
         expect(styles).toEqual({

packages/uniwind/specs/resolver/shadow.test.ts → packages/uniwind/specs/shadow.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from 'bun:test'
-import { getStyleSheetsFromCandidates, injectMocks } from '../utils'
+import { getStyleSheetsFromCandidates, injectMocks } from './utils'
 
 describe('Converts tailwind shadow system', () => {
     injectMocks()
@@ -9,7 +9,7 @@ describe('Converts tailwind shadow system', () => {
             'shadow-xl',
         )
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles('shadow-xl').styles
 
         expect(styles).toEqual({
@@ -26,7 +26,7 @@ describe('Converts tailwind shadow system', () => {
 
         await getStyleSheetsFromCandidates(...candidates)
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(candidates.join(' ')).styles
 
         expect(styles).toEqual({
@@ -38,7 +38,7 @@ describe('Converts tailwind shadow system', () => {
     test('Ring', async () => {
         await getStyleSheetsFromCandidates('ring-2')
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles('ring-2').styles
 
         expect(styles).toEqual({
@@ -56,7 +56,7 @@ describe('Converts tailwind shadow system', () => {
 
         await getStyleSheetsFromCandidates(...candidates)
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(candidates.join(' ')).styles
 
         expect(styles).toEqual({
@@ -72,7 +72,7 @@ describe('Converts tailwind shadow system', () => {
         ]
         await getStyleSheetsFromCandidates(...candidates)
 
-        const { UniwindStore } = await import('../../src/core/native')
+        const { UniwindStore } = await import('../src/core/native')
         const styles = UniwindStore.getStyles(candidates.join(' ')).styles
 
         expect(styles).toEqual({

packages/uniwind/specs/spacing.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, test } from 'bun:test'
+import { UniwindRuntimeMock } from './mocks'
+import { getStyleSheetsFromCandidates, injectMocks, twSize } from './utils'
+
+describe('Converts tailwind spacings', () => {
+    injectMocks()
+
+    test('Built in', async () => {
+        const className = 'px-4 m-2'
+
+        await getStyleSheetsFromCandidates(...className.split(' '))
+
+        const { UniwindStore } = await import('../src/core/native')
+        const styles = UniwindStore.getStyles(className).styles
+
+        expect(styles).toHaveProperty('paddingHorizontal', twSize(4))
+        expect(styles).toHaveProperty('margin', twSize(2))
+    })
+
+    test.only('Custom', async () => {
+        const className = 'px-[16px] m-[8px]'
+
+        await getStyleSheetsFromCandidates(...className.split(' '))
+
+        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('marginTop', 8)
+        expect(styles).toHaveProperty('marginBottom', 8)
+        expect(styles).toHaveProperty('marginLeft', 8)
+        expect(styles).toHaveProperty('marginRight', 8)
+    })
+
+    test('Safe area', async () => {
+        const className = 'pt-safe'
+
+        await getStyleSheetsFromCandidates(...className.split(' '))
+
+        const { UniwindStore } = await import('../src/core/native')
+        const styles = UniwindStore.getStyles(className).styles
+
+        expect(styles).toHaveProperty('paddingTop', UniwindRuntimeMock.insets.top)
+    })
+})

packages/uniwind/specs/utils.ts

@@ -1,6 +1,5 @@
 import { mock } from 'bun:test'
 import { readFileSync } from 'fs'
-import { RNStyle } from '../src/core/types'
 import { compileVirtual } from '../src/metro/compileVirtual'
 import { Platform } from '../src/metro/types'
 import { UniwindRuntimeMock } from './mocks'
@@ -15,6 +14,7 @@ export const getStyleSheetsFromCandidates = async <T extends string>(...candidat
         candidates,
         platform: Platform.iOS,
         cssPath: testCSSPath,
+        polyfills: {},
         themes: ['light', 'dark'],
     })
 
@@ -23,20 +23,6 @@ export const getStyleSheetsFromCandidates = async <T extends string>(...candidat
     return globalThis.__uniwind__computeStylesheet(UniwindRuntimeMock)
 }
 
-export const getStylesFromCandidates = async <T extends string>(...candidates: Array<T>) => {
-    const stylesheets = await getStyleSheetsFromCandidates(...candidates)
-
-    return Object.fromEntries(
-        Object.entries(stylesheets).map(([key, value]) => {
-            if (!Array.isArray(value)) {
-                return null
-            }
-
-            return [key, value.map(entry => Object.fromEntries(entry.entries))]
-        }).filter(Boolean),
-    ) as Record<T, Array<RNStyle>>
-}
-
 export const twSize = (size: number) => size * 4
 
 export const injectMocks = () => {

packages/uniwind/src/components/native/useStyle.ts

@@ -1,18 +1,24 @@
+/* eslint-disable @typescript-eslint/strict-boolean-expressions */
 import { useEffect, useMemo, useReducer } from 'react'
 import { UniwindStore } from '../../core/native'
-import { ComponentState } from '../../core/types'
+import { ComponentState, RNStyle } from '../../core/types'
+import { StyleDependency } from '../../types'
+
+const emptyState = { styles: {} as RNStyle, dependencies: [] as Array<StyleDependency> }
 
 export const useStyle = (className?: string, state?: ComponentState) => {
     const [_, rerender] = useReducer(() => ({}), {})
     const styleState = useMemo(
-        () => UniwindStore.getStyles(className, state),
+        () => className ? UniwindStore.getStyles(className, state) : emptyState,
         [className, _, state?.isDisabled, state?.isFocused, state?.isPressed],
     )
 
     useEffect(() => {
-        const dispose = UniwindStore.subscribe(() => rerender(), styleState.dependencies)
+        if (styleState.dependencies.length > 0) {
+            const dispose = UniwindStore.subscribe(() => rerender(), styleState.dependencies)
 
-        return dispose
+            return dispose
+        }
     }, [styleState])
 
     return styleState.styles

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

@@ -1,3 +1,4 @@
+/* eslint-disable max-depth */
 const transforms = [
     'translateX',
     'translateY',
@@ -18,28 +19,35 @@ export const parseTransformsMutation = (styles: Record<string, any>) => {
     const transformTokens = typeof styles.transform === 'string'
         ? styles.transform
             .split(' ')
-            .filter(token => token !== 'undefined')
+            .filter(token => token === 'undefined')
         : []
-    const transformsResult = transforms.reduce<Array<Record<string, any>>>((acc, transform) => {
-        // Transforms inside transform - transform: rotate(45deg);
-        transformTokens
-            .filter(token => token.startsWith(transform))
-            .forEach(token => {
+
+    const transformsResult = []
+
+    for (const transform of transforms) {
+        if (transformTokens.length > 0) {
+            // Transforms inside transform - transform: rotate(45deg);
+            for (const token of transformTokens) {
+                if (!token.startsWith(transform)) {
+                    continue
+                }
+
                 const transformValue = token.slice(transform.length + 1, -1)
 
-                acc.push({ [transform]: transformValue })
-            })
+                transformsResult.push({ [transform]: transformValue })
+            }
+        }
 
         // Transforms outside of transform - { rotate: '45deg' }
         if (styles[transform] !== undefined) {
-            acc.push({ [transform]: styles[transform] })
+            transformsResult.push({ [transform]: styles[transform] })
             delete styles[transform]
         }
-
-        return acc
-    }, [])
+    }
 
     if (transformsResult.length > 0) {
-        styles.transform = transformsResult
+        Object.defineProperty(styles, 'transform', {
+            value: transformsResult,
+        })
     }
 }