@niibase/uniwind 1.4.0 → 1.4.1

package/dist/common/core/native/runtime.js

@@ -34,6 +34,16 @@ const UniwindRuntime = exports.UniwindRuntime = {
   steps: _reactNativeReanimated.steps,
   linear: _reactNativeReanimated.linear,
   lightDark: () => "",
-  parseColor: _nativeUtils.parseColor
+  parseColor: _nativeUtils.parseColor,
+  platformSelect: (android, ios, other) => {
+    return _reactNative.Platform.select(Boolean(other) ? {
+      android,
+      ios,
+      default: other
+    } : {
+      android,
+      default: ios
+    });
+  }
 };
 UniwindRuntime.lightDark = _nativeUtils.lightDark.bind(UniwindRuntime);

package/dist/common/css-visitor/function-visitor.js

@@ -13,6 +13,15 @@ const ONE_PX = {
   }
 };
 class FunctionVisitor {
+  platformSelect(fn) {
+    return fn.arguments.at(0) ?? {
+      type: "token",
+      value: {
+        type: "ident",
+        value: "initial"
+      }
+    };
+  }
   pixelRatio(fn) {
     return {
       type: "function",

package/dist/common/css-visitor/rule-visitor.js

@@ -16,9 +16,8 @@ class RuleVisitor {
   };
   style = styleRule => {
     const firstSelector = styleRule.value.selectors.at(0)?.at(0);
-    const secondSelector = styleRule.value.selectors.at(0)?.at(1);
-    if (this.currentLayerName === "theme" && firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
-      return this.processThemeStyle(styleRule, secondSelector);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "pseudo-class" && firstSelector.kind === "root") {
+      return this.removeNulls(this.processThemeRoot(styleRule));
     }
     if (firstSelector?.type === "class") {
       return this.processClassStyle(styleRule, firstSelector);
@@ -29,14 +28,44 @@ class RuleVisitor {
     this.processedClassNames.clear();
     this.processedVariables.clear();
   }
+  processThemeRoot(styleRule) {
+    const themeScopedRules = styleRule.value.rules?.filter(rule => {
+      if (rule.type !== "style") {
+        return false;
+      }
+      const firstSelector = rule.value.selectors.at(0)?.at(0);
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      return firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where";
+    }) ?? [];
+    const nonThemeRules = styleRule.value.rules?.filter(rule => !themeScopedRules.includes(rule));
+    const processedThemeScopedRules = themeScopedRules.map(rule => {
+      if (rule.type !== "style") {
+        return rule;
+      }
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      if (secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+        return this.processThemeStyle(rule, secondSelector);
+      }
+      return rule;
+    });
+    return [{
+      type: "style",
+      value: {
+        loc: styleRule.value.loc,
+        selectors: styleRule.value.selectors,
+        rules: nonThemeRules,
+        declarations: styleRule.value.declarations
+      }
+    }, ...processedThemeScopedRules];
+  }
   processThemeStyle(styleRule, secondSelector) {
     const whereSelector = secondSelector.selectors.at(0)?.at(0);
     if (whereSelector?.type !== "class") {
-      return;
+      return styleRule;
     }
     const selectedVariant = this.themes.find(theme => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
-      return;
+      return styleRule;
     }
     this.processedVariables.add(selectedVariant);
     return {
@@ -74,5 +103,20 @@ class RuleVisitor {
       }
     };
   }
+  // Fixes lightningcss serialization bug
+  removeNulls(value) {
+    if (Array.isArray(value)) {
+      return value.map(v => this.removeNulls(v));
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.fromEntries(Object.entries(value).filter(([_, value2]) => {
+        if (value2 === null) {
+          return false;
+        }
+        return true;
+      }).map(([key, value2]) => [key, this.removeNulls(value2)]));
+    }
+    return value;
+  }
 }
 exports.RuleVisitor = RuleVisitor;

package/dist/metro/metro-transformer.cjs

@@ -7,7 +7,7 @@ const node = require('@tailwindcss/node');
 const oxide = require('@tailwindcss/oxide');
 const lightningcss = require('lightningcss');
 const types = require('../shared/uniwind.BZIuaszw.cjs');
-const stringifyThemes = require('../shared/uniwind.CyACT0sD.cjs');
+const stringifyThemes = require('../shared/uniwind.D7C2Zt-r.cjs');
 const culori = require('culori');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e.default : e; }
@@ -1118,6 +1118,9 @@ class Functions {
     if (fn.name === "hairlineWidth") {
       return "rt.hairlineWidth";
     }
+    if (fn.name === "platformSelect") {
+      return `rt.platformSelect(${this.Processor.CSS.processValue(fn.arguments)})`;
+    }
     if (fn.name === "pixelRatio") {
       if (fn.arguments.length === 0) {
         return "rt.pixelRatio(1)";

package/dist/metro/metro-transformer.mjs

@@ -5,7 +5,7 @@ import { compile } from '@tailwindcss/node';
 import { Scanner } from '@tailwindcss/oxide';
 import { transform as transform$1 } from 'lightningcss';
 import { P as Platform } from '../shared/uniwind.CyoRUwOj.mjs';
-import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.D-ahjOrG.mjs';
+import { L as Logger, U as UniwindCSSVisitor, s as stringifyThemes, b as buildDtsFile, a as buildCSS } from '../shared/uniwind.B_j3NcHy.mjs';
 import { converter, parse, formatHex, formatHex8 } from 'culori';
 
 const parseStringValue = (value) => {
@@ -1111,6 +1111,9 @@ class Functions {
     if (fn.name === "hairlineWidth") {
       return "rt.hairlineWidth";
     }
+    if (fn.name === "platformSelect") {
+      return `rt.platformSelect(${this.Processor.CSS.processValue(fn.arguments)})`;
+    }
     if (fn.name === "pixelRatio") {
       if (fn.arguments.length === 0) {
         return "rt.pixelRatio(1)";

package/dist/module/core/native/runtime.js

@@ -1,4 +1,4 @@
-import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from "react-native";
+import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from "react-native";
 import { cubicBezier, linear, steps } from "react-native-reanimated";
 import { initialWindowMetrics } from "react-native-safe-area-context";
 import { ColorScheme, Orientation } from "../../types.js";
@@ -23,6 +23,9 @@ export const UniwindRuntime = {
   steps,
   linear,
   lightDark: () => "",
-  parseColor
+  parseColor,
+  platformSelect: (android, ios, other) => {
+    return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios });
+  }
 };
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime);

package/dist/module/core/types.d.ts

@@ -57,6 +57,7 @@ export type UniwindRuntime = {
     linear: (...points: ControlPoint[]) => LinearEasing;
     lightDark: (light: string, dark: string) => string;
     parseColor: (type: string, color: string) => string;
+    platformSelect: (android: string, ios: string, other?: string) => string;
 };
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {
     accentColor?: string;

package/dist/module/css-visitor/function-visitor.d.ts

@@ -1,6 +1,7 @@
 import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss';
 export declare class FunctionVisitor {
     [name: string]: (fn: LightningCSSFunction) => TokenOrValue;
+    platformSelect(fn: LightningCSSFunction): TokenOrValue;
     pixelRatio(fn: LightningCSSFunction): TokenOrValue;
     fontScale(fn: LightningCSSFunction): TokenOrValue;
     hairlineWidth(): TokenOrValue;

package/dist/module/css-visitor/function-visitor.js

@@ -3,6 +3,9 @@ const ONE_PX = {
   value: { type: "dimension", unit: "px", value: 1 }
 };
 export class FunctionVisitor {
+  platformSelect(fn) {
+    return fn.arguments.at(0) ?? { type: "token", value: { type: "ident", value: "initial" } };
+  }
   pixelRatio(fn) {
     return {
       type: "function",

package/dist/module/css-visitor/rule-visitor.d.ts

@@ -16,9 +16,11 @@ export declare class RuleVisitor implements LightningRuleVisitors {
     }>) => void;
     style: (styleRule: Extract<LightningRuleVisitor, {
         type: "style";
-    }>) => void | ReturnedRule;
+    }>) => void | ReturnedRule | ReturnedRule[];
     cleanup(): void;
+    private processThemeRoot;
     private processThemeStyle;
     private processClassStyle;
+    private removeNulls;
 }
 export {};

package/dist/module/css-visitor/rule-visitor.js

@@ -10,9 +10,8 @@ export class RuleVisitor {
   };
   style = (styleRule) => {
     const firstSelector = styleRule.value.selectors.at(0)?.at(0);
-    const secondSelector = styleRule.value.selectors.at(0)?.at(1);
-    if (this.currentLayerName === "theme" && firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
-      return this.processThemeStyle(styleRule, secondSelector);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "pseudo-class" && firstSelector.kind === "root") {
+      return this.removeNulls(this.processThemeRoot(styleRule));
     }
     if (firstSelector?.type === "class") {
       return this.processClassStyle(styleRule, firstSelector);
@@ -23,14 +22,47 @@ export class RuleVisitor {
     this.processedClassNames.clear();
     this.processedVariables.clear();
   }
+  processThemeRoot(styleRule) {
+    const themeScopedRules = styleRule.value.rules?.filter((rule) => {
+      if (rule.type !== "style") {
+        return false;
+      }
+      const firstSelector = rule.value.selectors.at(0)?.at(0);
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      return firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where";
+    }) ?? [];
+    const nonThemeRules = styleRule.value.rules?.filter((rule) => !themeScopedRules.includes(rule));
+    const processedThemeScopedRules = themeScopedRules.map((rule) => {
+      if (rule.type !== "style") {
+        return rule;
+      }
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      if (secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+        return this.processThemeStyle(rule, secondSelector);
+      }
+      return rule;
+    });
+    return [
+      {
+        type: "style",
+        value: {
+          loc: styleRule.value.loc,
+          selectors: styleRule.value.selectors,
+          rules: nonThemeRules,
+          declarations: styleRule.value.declarations
+        }
+      },
+      ...processedThemeScopedRules
+    ];
+  }
   processThemeStyle(styleRule, secondSelector) {
     const whereSelector = secondSelector.selectors.at(0)?.at(0);
     if (whereSelector?.type !== "class") {
-      return;
+      return styleRule;
     }
     const selectedVariant = this.themes.find((theme) => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
-      return;
+      return styleRule;
     }
     this.processedVariables.add(selectedVariant);
     return {
@@ -59,4 +91,21 @@ export class RuleVisitor {
       }
     };
   }
+  // Fixes lightningcss serialization bug
+  removeNulls(value) {
+    if (Array.isArray(value)) {
+      return value.map((v) => this.removeNulls(v));
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.fromEntries(
+        Object.entries(value).filter(([_, value2]) => {
+          if (value2 === null) {
+            return false;
+          }
+          return true;
+        }).map(([key, value2]) => [key, this.removeNulls(value2)])
+      );
+    }
+    return value;
+  }
 }

package/dist/shared/{uniwind.D-ahjOrG.mjs → uniwind.B_j3NcHy.mjs}

@@ -44,6 +44,9 @@ const ONE_PX = {
   value: { type: "dimension", unit: "px", value: 1 }
 };
 class FunctionVisitor {
+  platformSelect(fn) {
+    return fn.arguments.at(0) ?? { type: "token", value: { type: "ident", value: "initial" } };
+  }
   pixelRatio(fn) {
     return {
       type: "function",
@@ -90,9 +93,8 @@ class RuleVisitor {
   };
   style = (styleRule) => {
     const firstSelector = styleRule.value.selectors.at(0)?.at(0);
-    const secondSelector = styleRule.value.selectors.at(0)?.at(1);
-    if (this.currentLayerName === "theme" && firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
-      return this.processThemeStyle(styleRule, secondSelector);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "pseudo-class" && firstSelector.kind === "root") {
+      return this.removeNulls(this.processThemeRoot(styleRule));
     }
     if (firstSelector?.type === "class") {
       return this.processClassStyle(styleRule, firstSelector);
@@ -103,14 +105,47 @@ class RuleVisitor {
     this.processedClassNames.clear();
     this.processedVariables.clear();
   }
+  processThemeRoot(styleRule) {
+    const themeScopedRules = styleRule.value.rules?.filter((rule) => {
+      if (rule.type !== "style") {
+        return false;
+      }
+      const firstSelector = rule.value.selectors.at(0)?.at(0);
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      return firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where";
+    }) ?? [];
+    const nonThemeRules = styleRule.value.rules?.filter((rule) => !themeScopedRules.includes(rule));
+    const processedThemeScopedRules = themeScopedRules.map((rule) => {
+      if (rule.type !== "style") {
+        return rule;
+      }
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      if (secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+        return this.processThemeStyle(rule, secondSelector);
+      }
+      return rule;
+    });
+    return [
+      {
+        type: "style",
+        value: {
+          loc: styleRule.value.loc,
+          selectors: styleRule.value.selectors,
+          rules: nonThemeRules,
+          declarations: styleRule.value.declarations
+        }
+      },
+      ...processedThemeScopedRules
+    ];
+  }
   processThemeStyle(styleRule, secondSelector) {
     const whereSelector = secondSelector.selectors.at(0)?.at(0);
     if (whereSelector?.type !== "class") {
-      return;
+      return styleRule;
     }
     const selectedVariant = this.themes.find((theme) => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
-      return;
+      return styleRule;
     }
     this.processedVariables.add(selectedVariant);
     return {
@@ -139,6 +174,23 @@ class RuleVisitor {
       }
     };
   }
+  // Fixes lightningcss serialization bug
+  removeNulls(value) {
+    if (Array.isArray(value)) {
+      return value.map((v) => this.removeNulls(v));
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.fromEntries(
+        Object.entries(value).filter(([_, value2]) => {
+          if (value2 === null) {
+            return false;
+          }
+          return true;
+        }).map(([key, value2]) => [key, this.removeNulls(value2)])
+      );
+    }
+    return value;
+  }
 }
 
 class UniwindCSSVisitor {

package/dist/shared/{uniwind.CyACT0sD.cjs → uniwind.D7C2Zt-r.cjs}

@@ -51,6 +51,9 @@ const ONE_PX = {
   value: { type: "dimension", unit: "px", value: 1 }
 };
 class FunctionVisitor {
+  platformSelect(fn) {
+    return fn.arguments.at(0) ?? { type: "token", value: { type: "ident", value: "initial" } };
+  }
   pixelRatio(fn) {
     return {
       type: "function",
@@ -97,9 +100,8 @@ class RuleVisitor {
   };
   style = (styleRule) => {
     const firstSelector = styleRule.value.selectors.at(0)?.at(0);
-    const secondSelector = styleRule.value.selectors.at(0)?.at(1);
-    if (this.currentLayerName === "theme" && firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
-      return this.processThemeStyle(styleRule, secondSelector);
+    if (this.currentLayerName === "theme" && firstSelector?.type === "pseudo-class" && firstSelector.kind === "root") {
+      return this.removeNulls(this.processThemeRoot(styleRule));
     }
     if (firstSelector?.type === "class") {
       return this.processClassStyle(styleRule, firstSelector);
@@ -110,14 +112,47 @@ class RuleVisitor {
     this.processedClassNames.clear();
     this.processedVariables.clear();
   }
+  processThemeRoot(styleRule) {
+    const themeScopedRules = styleRule.value.rules?.filter((rule) => {
+      if (rule.type !== "style") {
+        return false;
+      }
+      const firstSelector = rule.value.selectors.at(0)?.at(0);
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      return firstSelector?.type === "nesting" && secondSelector?.type === "pseudo-class" && secondSelector.kind === "where";
+    }) ?? [];
+    const nonThemeRules = styleRule.value.rules?.filter((rule) => !themeScopedRules.includes(rule));
+    const processedThemeScopedRules = themeScopedRules.map((rule) => {
+      if (rule.type !== "style") {
+        return rule;
+      }
+      const secondSelector = rule.value.selectors.at(0)?.at(1);
+      if (secondSelector?.type === "pseudo-class" && secondSelector.kind === "where") {
+        return this.processThemeStyle(rule, secondSelector);
+      }
+      return rule;
+    });
+    return [
+      {
+        type: "style",
+        value: {
+          loc: styleRule.value.loc,
+          selectors: styleRule.value.selectors,
+          rules: nonThemeRules,
+          declarations: styleRule.value.declarations
+        }
+      },
+      ...processedThemeScopedRules
+    ];
+  }
   processThemeStyle(styleRule, secondSelector) {
     const whereSelector = secondSelector.selectors.at(0)?.at(0);
     if (whereSelector?.type !== "class") {
-      return;
+      return styleRule;
     }
     const selectedVariant = this.themes.find((theme) => whereSelector.name === theme);
     if (selectedVariant === void 0 || this.processedVariables.has(selectedVariant)) {
-      return;
+      return styleRule;
     }
     this.processedVariables.add(selectedVariant);
     return {
@@ -146,6 +181,23 @@ class RuleVisitor {
       }
     };
   }
+  // Fixes lightningcss serialization bug
+  removeNulls(value) {
+    if (Array.isArray(value)) {
+      return value.map((v) => this.removeNulls(v));
+    }
+    if (typeof value === "object" && value !== null) {
+      return Object.fromEntries(
+        Object.entries(value).filter(([_, value2]) => {
+          if (value2 === null) {
+            return false;
+          }
+          return true;
+        }).map(([key, value2]) => [key, this.removeNulls(value2)])
+      );
+    }
+    return value;
+  }
 }
 
 class UniwindCSSVisitor {

package/dist/vite/index.cjs

@@ -3,7 +3,7 @@
 const node = require('@tailwindcss/node');
 const path = require('path');
 const common = require('../shared/uniwind.nl8746mK.cjs');
-const stringifyThemes = require('../shared/uniwind.CyACT0sD.cjs');
+const stringifyThemes = require('../shared/uniwind.D7C2Zt-r.cjs');
 require('fs');
 require('lightningcss');
 

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
 import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
-import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.D-ahjOrG.mjs';
+import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.B_j3NcHy.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,12 +1,12 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.4.0",
+    "version": "1.4.1",
     "description": "The fastest Tailwind bindings for React Native with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
     "type": "module",
-    "repository": "https://github.com/divineniiquaye/uniwind",
+    "repository": "https://github.com/divineniiquaye/uniwind-oss",
     "sideEffects": false,
     "scripts": {
         "precommit": "bun lint",
@@ -25,6 +25,7 @@
     "keywords": [
         "unistyles",
         "react-native-unistyles",
+        "uniwind",
         "react-native",
         "react",
         "native",

package/readme.md

@@ -15,7 +15,7 @@
 [![npm downloads](https://img.shields.io/npm/dt/uniwind?style=for-the-badge)](https://www.npmjs.com/package/uniwind)
 [![License: MIT](https://img.shields.io/badge/License-MIT-44CD11.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
 
-> **Note:** This is a fork of uniwind that makes pro subscription features available for free (except for Unistyles support). Install from `@niibase/uniwind` to get these features.
+> **Note:** This is a fork of uniwind that uses **react-native-reanimated** (v4.0.0+) to provide CSS-like animations and transitions using Tailwind classes. Updates are frequently released with original uniwind package with versions in-sync.
 
 ## Installation
 
@@ -24,7 +24,7 @@
 bun add @niibase/uniwind tailwindcss react-native-safe-area-context react-native-reanimated
 
 # Or install from the original package
-bun add uniwind tailwindcss react-native-safe-area-context react-native-reanimated
+bun add uniwind tailwindcss react-native-safe-area-context
 
 # Or install @niibase/uniwind as alias for uniwind
 bun add uniwind@npm:@niibase/uniwind tailwindcss react-native-safe-area-context react-native-reanimated
@@ -41,8 +41,8 @@ Then follow [installation guides](https://docs.uniwind.dev/quickstart)
 
 ## Features
 
-- ⚛️ Out‑of‑the‑box `className` bindings for every React Native component  
-- ⚡ Styles are computed at build time for maximum performance  
+- ⚛️ Out‑of‑the‑box `className` bindings for every React Native component
+- ⚡ Styles are computed at build time for maximum performance
 - 🎬 **CSS animations and transitions** powered by Reanimated 4
 - 🌙 Dark mode and 🎨 fully customizable themes
 - 🧩 Pseudo‑classes support — `focus`, `active`, `disabled`, and more
@@ -50,14 +50,6 @@ Then follow [installation guides](https://docs.uniwind.dev/quickstart)
 - 🧰 Use custom CSS properties directly in React Native
 - 🔥 And [much more](https://docs.uniwind.dev/api/use-uniwind)
 
-## Roadmap
-
-- [x] **Reanimated 4 support** - Full compatibility with React Native Reanimated v4 ✅
-- [ ] **Babel support to extend beyond React Native components** - Enable className support for custom components and third-party libraries
-- [ ] **Unistyles (future)** - Integration with Unistyles for enhanced styling capabilities
-
-> **Note:** Once Babel support is completed, the likelihood of adding Unistyles support is high.
-
 ## Contributing
 
 Contributions are welcome!

package/src/core/native/runtime.ts

@@ -1,4 +1,4 @@
-import { Appearance, Dimensions, I18nManager, PixelRatio, StyleSheet } from 'react-native'
+import { Appearance, Dimensions, I18nManager, PixelRatio, Platform, StyleSheet } from 'react-native'
 import { cubicBezier, linear, steps } from 'react-native-reanimated'
 import { initialWindowMetrics } from 'react-native-safe-area-context'
 import { ColorScheme, Orientation } from '../../types'
@@ -27,6 +27,10 @@ export const UniwindRuntime = {
     linear,
     lightDark: () => '',
     parseColor,
+    platformSelect: (android: string, ios: string, other?: string) => {
+        // eslint-disable-next-line no-extra-boolean-cast
+        return Platform.select(Boolean(other) ? { android, ios, default: other } : { android, default: ios })
+    },
 } as UniwindRuntimeType
 
 UniwindRuntime.lightDark = lightDark.bind(UniwindRuntime)

package/src/core/types.ts

@@ -62,6 +62,7 @@ export type UniwindRuntime = {
     linear: (...points: ControlPoint[]) => LinearEasing
     lightDark: (light: string, dark: string) => string
     parseColor: (type: string, color: string) => string
+    platformSelect: (android: string, ios: string, other?: string) => string
 }
 
 export type RNStyle = ViewStyle & TextStyle & ImageStyle & {

package/src/css-visitor/function-visitor.ts

@@ -8,6 +8,10 @@ const ONE_PX = {
 export class FunctionVisitor {
     [name: string]: (fn: LightningCSSFunction) => TokenOrValue
 
+    platformSelect(fn: LightningCSSFunction): TokenOrValue {
+        return fn.arguments.at(0) ?? { type: 'token', value: { type: 'ident', value: 'initial' } }
+    }
+
     pixelRatio(fn: LightningCSSFunction): TokenOrValue {
         return {
             type: 'function',

package/src/css-visitor/rule-visitor.ts

@@ -20,13 +20,9 @@ export class RuleVisitor implements LightningRuleVisitors {
 
     style = (styleRule: Extract<LightningRuleVisitor, { type: 'style' }>) => {
         const firstSelector = styleRule.value.selectors.at(0)?.at(0)
-        const secondSelector = styleRule.value.selectors.at(0)?.at(1)
 
-        if (
-            this.currentLayerName === 'theme' && firstSelector?.type === 'nesting' && secondSelector?.type === 'pseudo-class'
-            && secondSelector.kind === 'where'
-        ) {
-            return this.processThemeStyle(styleRule, secondSelector)
+        if (this.currentLayerName === 'theme' && firstSelector?.type === 'pseudo-class' && firstSelector.kind === 'root') {
+            return this.removeNulls(this.processThemeRoot(styleRule)) as Array<ReturnedRule>
         }
 
         if (firstSelector?.type === 'class') {
@@ -40,20 +36,60 @@ export class RuleVisitor implements LightningRuleVisitors {
         this.processedVariables.clear()
     }
 
+    private processThemeRoot(styleRule: Extract<LightningRuleVisitor, { type: 'style' }>): Array<ReturnedRule> {
+        const themeScopedRules = styleRule.value.rules?.filter(rule => {
+            if (rule.type !== 'style') {
+                return false
+            }
+
+            const firstSelector = rule.value.selectors.at(0)?.at(0)
+            const secondSelector = rule.value.selectors.at(0)?.at(1)
+
+            return firstSelector?.type === 'nesting' && secondSelector?.type === 'pseudo-class' && secondSelector.kind === 'where'
+        }) ?? []
+        const nonThemeRules = styleRule.value.rules?.filter(rule => !themeScopedRules.includes(rule))
+        const processedThemeScopedRules = themeScopedRules.map(rule => {
+            if (rule.type !== 'style') {
+                return rule
+            }
+
+            const secondSelector = rule.value.selectors.at(0)?.at(1)
+
+            if (secondSelector?.type === 'pseudo-class' && secondSelector.kind === 'where') {
+                return this.processThemeStyle(rule, secondSelector)
+            }
+
+            return rule
+        })
+
+        return [
+            {
+                type: 'style',
+                value: {
+                    loc: styleRule.value.loc,
+                    selectors: styleRule.value.selectors,
+                    rules: nonThemeRules,
+                    declarations: styleRule.value.declarations,
+                },
+            },
+            ...processedThemeScopedRules,
+        ]
+    }
+
     private processThemeStyle(
         styleRule: Extract<LightningRuleVisitor, { type: 'style' }>,
         secondSelector: Extract<SelectorComponent, { type: 'pseudo-class'; kind: 'where' }>,
-    ): ReturnedRule | void {
+    ): ReturnedRule {
         const whereSelector = secondSelector.selectors.at(0)?.at(0)
 
         if (whereSelector?.type !== 'class') {
-            return
+            return styleRule
         }
 
         const selectedVariant = this.themes.find(theme => whereSelector.name === theme)
 
         if (selectedVariant === undefined || this.processedVariables.has(selectedVariant)) {
-            return
+            return styleRule
         }
 
         this.processedVariables.add(selectedVariant)
@@ -93,4 +129,27 @@ export class RuleVisitor implements LightningRuleVisitors {
             },
         }
     }
+
+    // Fixes lightningcss serialization bug
+    private removeNulls(value: unknown): unknown {
+        if (Array.isArray(value)) {
+            return value.map(v => this.removeNulls(v))
+        }
+
+        if (typeof value === 'object' && value !== null) {
+            return Object.fromEntries(
+                Object.entries(value)
+                    .filter(([_, value]) => {
+                        if (value === null) {
+                            return false
+                        }
+
+                        return true
+                    })
+                    .map(([key, value]) => [key, this.removeNulls(value)]),
+            )
+        }
+
+        return value
+    }
 }

package/src/metro/processor/functions.ts

@@ -162,6 +162,10 @@ export class Functions {
             return 'rt.hairlineWidth'
         }
 
+        if (fn.name === 'platformSelect') {
+            return `rt.platformSelect(${this.Processor.CSS.processValue(fn.arguments)})`
+        }
+
         if (fn.name === 'pixelRatio') {
             if (fn.arguments.length === 0) {
                 return 'rt.pixelRatio(1)'