feat: support platform vars

Author: Brentlok

packages/uniwind/specs/utils.ts

@@ -61,6 +61,9 @@ export const injectMocks = () => {
         StyleSheet: {
             hairlineWidth: 1,
         },
+        Platform: {
+            OS: 'ios',
+        },
     }))
     // @ts-expect-error Mock __DEV__
     globalThis.__DEV__ = true

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

@@ -1,4 +1,4 @@
-import { Dimensions } from 'react-native'
+import { Dimensions, Platform } from 'react-native'
 import { Orientation, StyleDependency } from '../../types'
 import { ComponentState, RNStyle, Style, StyleSheets } from '../types'
 import { parseBoxShadow, parseFontVariant, parseTransformsMutation, resolveGradient } from './parsers'
@@ -141,11 +141,16 @@ export class UniwindStoreBuilder {
         if (usingVariables.size > 0) {
             const styleSheet = globalThis.__uniwind__computeStylesheet(this.runtime)
             const themeVars = styleSheet[`__uniwind-theme-${this.runtime.currentThemeName}`]
+            const platformVars = styleSheet[`__uniwind-platform-${Platform.OS}`]
 
             if (themeVars) {
                 Object.assign(styleSheet, themeVars)
             }
 
+            if (platformVars) {
+                Object.assign(styleSheet, platformVars)
+            }
+
             inlineVariables.forEach((varValue, varName) => {
                 Object.defineProperty(styleSheet, varName, {
                     get: varValue,

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

@@ -53,11 +53,19 @@ export class ProcessorBuilder {
 
     private addDeclaration(declaration: Declaration, important = false) {
         const isVar = this.declarationConfig.root || this.declarationConfig.className === null
+        const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries)
         const style = (() => {
             if (!isVar) {
                 return this.stylesheets[this.declarationConfig.className!]?.at(-1)
             }
 
+            if (mq.platform !== null) {
+                const platformKey = `__uniwind-platform-${mq.platform}`
+                this.vars[platformKey] ??= {}
+
+                return this.vars[platformKey]
+            }
+
             if (this.declarationConfig.theme === null) {
                 return this.vars
             }
@@ -67,7 +75,6 @@ export class ProcessorBuilder {
 
             return this.vars[themeKey]
         })()
-        const mq = this.MQ.processMediaQueries(this.declarationConfig.mediaQueries)
 
         if (!isVar) {
             Object.assign(style, mq)