feat: custom css functions (#44)

Author: Brentlok

packages/uniwind/specs/mocks.ts

@@ -8,7 +8,6 @@ export const UniwindRuntimeMock = {
     },
     colorScheme: ColorScheme.Light,
     orientation: Orientation.Portrait,
-    rem: 16,
     rtl: false,
     currentThemeName: ColorScheme.Light,
     insets: {
@@ -18,4 +17,7 @@ export const UniwindRuntimeMock = {
         right: 0,
     },
     colorMix,
+    fontScale: (value: number) => value * 1,
+    cubicBezier: () => '',
+    lightDark: (light: string) => light,
 }

packages/uniwind/specs/utils.ts

@@ -15,6 +15,7 @@ export const getStyleSheetsFromCandidates = async <T extends string>(...candidat
         candidates,
         platform: Platform.iOS,
         cssPath: testCSSPath,
+        themes: ['light', 'dark'],
     })
 
     new Function(virtualJS)()
@@ -52,11 +53,14 @@ export const injectMocks = () => {
             addChangeListener: () => {},
         },
         PixelRatio: {
-            getFontScale: () => UniwindRuntimeMock.rem,
+            getFontScale: () => 1,
         },
         I18nManager: {
             isRTL: UniwindRuntimeMock.rtl,
         },
+        StyleSheet: {
+            hairlineWidth: 1,
+        },
     }))
     // @ts-expect-error Mock __DEV__
     globalThis.__DEV__ = true

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

@@ -1,4 +1,4 @@
-import { Appearance, Dimensions, I18nManager, PixelRatio } from 'react-native'
+import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from 'react-native'
 import { ColorScheme, Orientation } from '../../types'
 import type { UniwindRuntime as UniwindRuntimeType } from '../types'
 import { colorMix, lightDark } from './native-utils'
@@ -14,7 +14,8 @@ export const UniwindRuntime = {
     colorScheme: initialColorScheme,
     currentThemeName: initialColorScheme,
     orientation: window.width > window.height ? Orientation.Landscape : Orientation.Portrait,
-    rem: PixelRatio.getFontScale() * 16,
+    fontScale: value => value * PixelRatio.getFontScale(),
+    hairlineWidth: StyleSheet.hairlineWidth,
     rtl: I18nManager.isRTL,
     insets: {
         top: 0,
@@ -23,6 +24,7 @@ export const UniwindRuntime = {
         right: 0,
     },
     colorMix,
+    pixelRatio: value => value * PixelRatio.get(),
     cubicBezier: () => '',
     lightDark: () => '',
 } as UniwindRuntimeType

packages/uniwind/src/core/types.ts

@@ -34,13 +34,15 @@ export type UniwindRuntime = {
     colorScheme: ColorScheme
     currentThemeName: ThemeName
     rtl: boolean
-    rem: number
     insets: {
         top: number
         bottom: number
         left: number
         right: number
     }
+    hairlineWidth: number
+    pixelRatio: (value: number) => number
+    fontScale: (value: number) => number
     colorMix: (color: string, mixColor: string, weight: number) => string
     cubicBezier: (x1: number, y1: number, x2: number, y2: number) => string
     lightDark: (light: string, dark: string) => string

packages/uniwind/src/metro/compileVirtual.ts

@@ -1,4 +1,5 @@
 import { compile } from '@tailwindcss/node'
+import { polyfillWeb } from './polyfillWeb'
 import { ProcessorBuilder } from './processor'
 import { addMetaToStylesTemplate, serializeStylesheet } from './stylesheet'
 import { Platform } from './types'
@@ -19,7 +20,7 @@ export const compileVirtual = async ({ candidates, css, cssPath, platform, theme
     const tailwindCSS = compiler.build(candidates)
 
     if (platform === Platform.Web) {
-        return tailwindCSS
+        return polyfillWeb(tailwindCSS)
     }
 
     const Processor = new ProcessorBuilder(themes)

packages/uniwind/src/metro/polyfillWeb.ts

@@ -0,0 +1,43 @@
+import { TokenOrValue, transform } from 'lightningcss'
+
+const ONE_PX = { type: 'token', value: { type: 'dimension', unit: 'px', value: 1 } } satisfies TokenOrValue
+
+export const polyfillWeb = (css: string) => {
+    const result = transform({
+        code: Buffer.from(css),
+        filename: 'uniwind.css',
+        visitor: {
+            Function: {
+                pixelRatio: fn => {
+                    return {
+                        type: 'function',
+                        value: {
+                            name: 'calc',
+                            arguments: [
+                                fn.arguments.at(0) ?? ONE_PX,
+                                { type: 'token', value: { type: 'delim', value: '*' } },
+                                ONE_PX,
+                            ],
+                        },
+                    } satisfies TokenOrValue
+                },
+                fontScale: fn => {
+                    return {
+                        type: 'function',
+                        value: {
+                            name: 'calc',
+                            arguments: [
+                                fn.arguments.at(0) ?? ONE_PX,
+                                { type: 'token', value: { type: 'delim', value: '*' } },
+                                { type: 'token', value: { type: 'dimension', value: 1, unit: 'rem' } },
+                            ],
+                        },
+                    } satisfies TokenOrValue
+                },
+                hairlineWidth: () => ONE_PX,
+            },
+        },
+    })
+
+    return result.code.toString()
+}

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

@@ -105,6 +105,18 @@ export class Functions {
             return `${fn.name}(${this.Processor.CSS.processValue(fn.arguments)})`
         }
 
+        if (fn.name === 'hairlineWidth') {
+            return 'rt.hairlineWidth'
+        }
+
+        if (fn.name === 'pixelRatio') {
+            return `rt.pixelRatio( ${this.Processor.CSS.processValue(fn.arguments)} )`
+        }
+
+        if (fn.name === 'fontScale') {
+            return `rt.fontScale( ${this.Processor.CSS.processValue(fn.arguments)} )`
+        }
+
         this.logger.error(`Unsupported function - ${fn.name}`)
 
         return fn.name

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

@@ -10,7 +10,7 @@ import { Var } from './var'
 export class ProcessorBuilder {
     stylesheets = {} as Record<string, Array<any>>
     vars = {
-        '--uniwind-em': 'rt.rem * 1',
+        '--uniwind-em': 16,
     } as Record<string, any>
     CSS = new CSS(this)
     RN = new RN(this)

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

@@ -21,7 +21,7 @@ export class Units {
                 case 'vh':
                     return `rt.screen.height * ${length.value / 100}`
                 case 'rem':
-                    return `rt.rem * ${length.value}`
+                    return length.value * 16
                 case 'em':
                     return `this[\`--uniwind-em\`] * ${length.value}`
                 default:

packages/uniwind/src/metro/stylesheet/addMetaToStylesTemplate.ts

@@ -75,7 +75,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     dependencies.push(StyleDependency.Insets)
                 }
 
-                if (stringifiedEntries.includes('rt.rem')) {
+                if (stringifiedEntries.includes('rt.fontScale')) {
                     dependencies.push(StyleDependency.FontScale)
                 }