feat: support light-dark css function

Author: Brentlok

packages/uniwind/src/core/config/themeChange.native.ts

@@ -4,5 +4,6 @@ import { UniwindRuntime } from '../native/runtime'
 
 export const themeChange = (theme: string) => {
     UniwindRuntime.currentThemeName = theme
+    UniwindStore.reload()
     UniwindStore.notifyListeners([StyleDependency.Theme])
 }

packages/uniwind/src/core/native/native-utils.ts

@@ -1,4 +1,5 @@
 import { formatHex, formatHex8, interpolate, parse } from 'culori'
+import type { UniwindRuntime } from '../types'
 
 export const colorMix = (color: string, mixColor: string, weight: number) => {
     // Change alpha
@@ -17,3 +18,11 @@ export const colorMix = (color: string, mixColor: string, weight: number) => {
 
     return formatHex(interpolate([mixColor, color])(weight))
 }
+
+export function lightDark(this: UniwindRuntime, light: string, dark: string) {
+    if (this.currentThemeName === 'dark') {
+        return dark
+    }
+
+    return light
+}

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

@@ -1,7 +1,7 @@
 import { Appearance, Dimensions, I18nManager, PixelRatio } from 'react-native'
 import { ColorScheme, Orientation } from '../../types'
 import type { UniwindRuntime as UniwindRuntimeType } from '../types'
-import { colorMix } from './native-utils'
+import { colorMix, lightDark } from './native-utils'
 
 const window = Dimensions.get('window')
 const initialColorScheme = Appearance.getColorScheme() ?? ColorScheme.Light
@@ -24,4 +24,7 @@ export const UniwindRuntime = {
     },
     colorMix,
     cubicBezier: () => '',
+    lightDark: () => '',
 } as UniwindRuntimeType
+
+UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime)

packages/uniwind/src/core/types.ts

@@ -43,6 +43,7 @@ export type UniwindRuntime = {
     }
     colorMix: (color: string, mixColor: string, weight: number) => string
     cubicBezier: (x1: number, y1: number, x2: number, y2: number) => string
+    lightDark: (light: string, dark: string) => string
 }
 
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {

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

@@ -224,6 +224,8 @@ export class CSS {
                     return '('
                 case 'close-parenthesis':
                     return ')'
+                case 'light-dark':
+                    return `rt.lightDark( ${this.processValue(declarationValue.light)}, ${this.processValue(declarationValue.dark)} )`
                 case 'weight':
                 case 'horizontal':
                 case 'vertical':

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

@@ -51,7 +51,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
 
                 const stringifiedEntries = JSON.stringify(filteredEntries)
 
-                if (theme !== null || stringifiedEntries.includes('--color')) {
+                if (theme !== null || stringifiedEntries.includes('--color') || stringifiedEntries.includes('rt.lightDark')) {
                     dependencies.push(StyleDependency.Theme)
                 }