react-native-unistyles 2.10.0 → 3.0.0-alpha.2

package/src/specs/ShadowRegistry/index.ts

@@ -0,0 +1,51 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import type { UnistylesShadowRegistry as UnistylesShadowRegistrySpec } from './ShadowRegistry.nitro'
+import type { ShadowNode, Unistyle, ViewHandle } from './types'
+
+interface ShadowRegistry extends UnistylesShadowRegistrySpec {
+    // Babel API
+    add(handle?: ViewHandle, style?: Unistyle): void,
+    remove(handle?: ViewHandle, style?: Unistyle): void,
+    // JSI
+    link(node: ShadowNode, style: Unistyle): void,
+    unlink(node: ShadowNode, style: Unistyle): void
+}
+
+const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
+
+const findShadowNodeForHandle = (handle: ViewHandle) => {
+    const node = handle?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
+        ?? handle?.getNativeScrollRef?.()?.__internalInstanceHandle?.stateNode?.node
+
+    if (!node) {
+        // todo extend log with file name / component name
+        throw new Error('Could not find shadow node for one of your components')
+    }
+
+    return node
+}
+
+HybridShadowRegistry.add = (handle, style) => {
+    if (!handle || !style?.__unid) {
+        return
+    }
+
+    HybridShadowRegistry.link(findShadowNodeForHandle(handle), style)
+}
+
+HybridShadowRegistry.remove = (handle, style) => {
+    if (!handle || !style?.__unid) {
+        return
+    }
+
+    HybridShadowRegistry.unlink(findShadowNodeForHandle(handle), style)
+}
+
+type PrivateMethods =
+    | 'add'
+    | 'remove'
+    | 'link'
+    | 'unlink'
+
+export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/specs/ShadowRegistry/types.ts

@@ -0,0 +1,29 @@
+export type StateNode = {
+    node?: ShadowNode
+}
+
+export type ShadowNode = {
+    __hostObjectShadowNodeWrapper: any
+}
+
+export type ViewHandle = {
+    __internalInstanceHandle?: {
+        stateNode?: StateNode
+    },
+    getScrollResponder?: () => {
+        getNativeScrollRef?: () => ({
+            __internalInstanceHandle?: {
+                stateNode?: StateNode
+            }
+        })
+    },
+    getNativeScrollRef?: () => ({
+        __internalInstanceHandle?: {
+            stateNode?: StateNode
+        }
+    })
+}
+
+export type Unistyle = {
+    __unid?: number
+}

package/src/specs/StatusBar/UnistylesStatusBar.nitro.ts

@@ -0,0 +1,10 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+
+// created from UnistylesRuntime, do not use it directly
+export interface UnistylesStatusBar extends HybridObject<{ ios: 'c++', android: 'c++' }> {
+    readonly width: number,
+    readonly height: number,
+
+    setBackgroundColor(color: number): void,
+    setHidden(isHidden: boolean): void,
+}

package/src/specs/StatusBar/index.ts

@@ -0,0 +1,48 @@
+import { processColor, StatusBar as NativeStatusBar } from 'react-native'
+import type { UnistylesStatusBar as UnistylesStatusBarSpec } from './UnistylesStatusBar.nitro'
+import { type Color, StatusBarStyle } from '../types'
+
+export type StatusBarHiddenAnimation = 'none' | 'fade' | 'slide'
+
+interface PrivateUnistylesStatusBar extends Omit<UnistylesStatusBarSpec, 'setBackgroundColor' | 'setHidden'> {
+    setStyle(style: StatusBarStyle, animated?: boolean): void,
+    setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
+    _setHidden(isHidden: boolean, animation?: StatusBarHiddenAnimation): void,
+    setBackgroundColor(color?: string): void,
+    _setBackgroundColor(color?: Color): void
+}
+
+export const attachStatusBarJSMethods = (hybridObject: UnistylesStatusBar) => {
+    hybridObject.setStyle = (style: StatusBarStyle, animated?: boolean) => {
+        switch (style) {
+            case StatusBarStyle.Light:
+                return NativeStatusBar.setBarStyle('light-content', animated)
+            case StatusBarStyle.Dark:
+                return NativeStatusBar.setBarStyle('dark-content', animated)
+            case StatusBarStyle.Default:
+                return NativeStatusBar.setBarStyle('default', animated)
+        }
+    }
+
+    const privateHybrid = hybridObject as PrivateUnistylesStatusBar
+
+    privateHybrid._setHidden = hybridObject.setHidden
+    hybridObject.setHidden = (isHidden: boolean, animation?: StatusBarHiddenAnimation) => {
+        NativeStatusBar.setHidden(isHidden, animation)
+        privateHybrid._setHidden(isHidden)
+    }
+
+    privateHybrid._setBackgroundColor = hybridObject.setBackgroundColor
+    hybridObject.setBackgroundColor = (color?: string) => {
+        const parsedColor = processColor(color)
+
+        privateHybrid._setBackgroundColor(parsedColor as number)
+    }
+}
+
+type PrivateMethods =
+    | '_setBackgroundColor'
+    | '_setHidden'
+    | 'dispose'
+
+export type UnistylesStatusBar = Omit<PrivateUnistylesStatusBar, PrivateMethods>

package/src/specs/StyleSheet/UnistylesStyleSheet.nitro.ts

@@ -0,0 +1,6 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+
+export interface UnistylesStyleSheet extends HybridObject<{ ios: 'c++', android: 'c++' }> {
+    readonly hairlineWidth: number
+    readonly __unid: number
+}

package/src/specs/StyleSheet/index.ts

@@ -0,0 +1,44 @@
+import { NitroModules } from 'react-native-nitro-modules'
+import { processColor, StyleSheet as NativeStyleSheet } from 'react-native'
+import type { StyleSheet as NativeStyleSheetType } from 'react-native'
+import type { UnistylesStyleSheet as UnistylesStyleSheetSpec } from './UnistylesStyleSheet.nitro'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../../global'
+import type { CreateUnistylesStyleSheet } from '../../types'
+
+type UnistylesSettings = {
+    adaptiveThemes?: boolean,
+    initialTheme?: (() => keyof UnistylesThemes) | keyof UnistylesThemes
+}
+
+export type UnistylesConfig = {
+    settings?: UnistylesSettings,
+    themes?: UnistylesThemes,
+    breakpoints?: UnistylesBreakpoints
+}
+
+export interface UnistylesStyleSheet extends UnistylesStyleSheetSpec {
+    absoluteFillObject: typeof NativeStyleSheetType.absoluteFillObject,
+    absoluteFill: typeof NativeStyleSheetType.absoluteFill,
+    compose: typeof NativeStyleSheetType.compose,
+    flatten: typeof NativeStyleSheetType.flatten,
+
+    // overridden methods
+    create: CreateUnistylesStyleSheet,
+    configure(config: UnistylesConfig): void,
+    jsMethods: {
+        processColor: typeof processColor
+    }
+}
+
+const HybridUnistylesStyleSheet = NitroModules
+    .createHybridObject<UnistylesStyleSheet>('UnistylesStyleSheet')
+
+HybridUnistylesStyleSheet.absoluteFillObject = NativeStyleSheet.absoluteFillObject
+HybridUnistylesStyleSheet.absoluteFill = NativeStyleSheet.absoluteFill
+HybridUnistylesStyleSheet.flatten = NativeStyleSheet.flatten
+HybridUnistylesStyleSheet.compose = NativeStyleSheet.compose
+HybridUnistylesStyleSheet.jsMethods = {
+    processColor
+}
+
+export const StyleSheet = HybridUnistylesStyleSheet as Omit<UnistylesStyleSheet, 'jsMethods'>

package/src/specs/TurboUnistyles/NativeTurboUnistyles.ts

@@ -0,0 +1,8 @@
+import type { TurboModule } from 'react-native'
+import { TurboModuleRegistry } from 'react-native'
+
+// this is empty spec for TurboModule that is required to hook
+// Unistyles to Fabric
+interface Spec extends TurboModule {}
+
+TurboModuleRegistry.get<Spec>('Unistyles')

package/src/specs/TurboUnistyles/index.ts

@@ -0,0 +1 @@
+import './NativeTurboUnistyles'

package/src/specs/UnistylesRuntime/UnistylesRuntime.nitro.ts

@@ -0,0 +1,47 @@
+import type { HybridObject } from 'react-native-nitro-modules'
+import type { AppBreakpoint, AppThemeName, Dimensions, Insets } from '../types'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from '../../types'
+import type { UnistylesNativeMiniRuntime } from '../NativePlatform'
+
+type ColorScheme = 'light' | 'dark' | 'unspecified'
+type Orientation = 'portrait' | 'landscape'
+
+// used for Nitro. It's Native + Cxx types
+export interface UnistylesCxxMiniRuntime extends UnistylesNativeMiniRuntime {
+    readonly themeName?: string,
+    readonly breakpoint?: string,
+    readonly orientation: Orientation,
+    readonly hasAdaptiveThemes: boolean,
+}
+
+// used for TS types
+export interface UnistylesMiniRuntime extends UnistylesCxxMiniRuntime {
+    readonly colorScheme: ColorScheme,
+    readonly contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory | WebContentSizeCategory,
+
+    // additional metadata
+    readonly themeName?: AppThemeName,
+    readonly breakpoint?: AppBreakpoint
+}
+
+export interface UnistylesRuntime extends HybridObject<{ ios: 'c++', android: 'c++' }> {
+    readonly colorScheme: ColorScheme,
+    readonly hasAdaptiveThemes: boolean,
+    readonly screen: Dimensions,
+    readonly themeName?: string,
+    readonly contentSizeCategory: string,
+    readonly breakpoint?: string,
+    readonly insets: Insets,
+    readonly orientation: Orientation,
+    readonly pixelRatio: number,
+    readonly fontScale: number,
+    readonly rtl: boolean,
+
+    setTheme(themeName: string): void,
+    setAdaptiveThemes(isEnabled: boolean): void,
+    setImmersiveMode(isEnabled: boolean): void,
+    setRootViewBackgroundColor(color: number): void
+
+    // private
+    readonly miniRuntime: UnistylesCxxMiniRuntime
+}

package/src/specs/UnistylesRuntime/index.ts

@@ -0,0 +1,64 @@
+import { processColor } from 'react-native'
+import { NitroModules } from 'react-native-nitro-modules'
+import type { UnistylesRuntime as UnistylesRuntimeSpec, UnistylesMiniRuntime } from './UnistylesRuntime.nitro'
+import type { AppBreakpoint, AppTheme, AppThemeName, Color, ColorScheme, Orientation } from '../types'
+import { attachStatusBarJSMethods, type UnistylesStatusBar } from '../StatusBar'
+import { attachNavigationBarJSMethods, type UnistylesNavigationBar } from '../NavigtionBar'
+import type { AndroidContentSizeCategory, IOSContentSizeCategory } from '../../types'
+import { isIOS } from '../../common'
+
+export interface UnistylesRuntimePrivate extends Omit<UnistylesRuntimeSpec, 'setRootViewBackgroundColor'> {
+    readonly colorScheme: ColorScheme,
+    readonly themeName?: AppThemeName,
+    readonly contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
+    readonly breakpoint?: AppBreakpoint,
+    readonly orientation: Orientation,
+
+    // other HybridObjects
+    statusBar: UnistylesStatusBar,
+    navigationBar: UnistylesNavigationBar,
+
+    setTheme(themeName: AppThemeName): void
+    updateTheme(themeName: AppThemeName, updater: (currentTheme: AppTheme) => AppTheme): void,
+    setRootViewBackgroundColor(color?: string): void,
+    _setRootViewBackgroundColor(color?: Color): void
+
+    // constructors
+    createHybridStatusBar(): UnistylesStatusBar,
+    createHybridNavigationBar(): UnistylesNavigationBar
+}
+
+type PrivateMethods =
+    |'createHybridStatusBar'
+    | 'createHybridNavigationBar'
+    | 'dispose'
+    | 'miniRuntime'
+    | '_setRootViewBackgroundColor'
+
+type UnistylesRuntime = Omit<UnistylesRuntimePrivate, PrivateMethods>
+
+const HybridUnistylesRuntime = NitroModules
+    .createHybridObject<UnistylesRuntimePrivate>('UnistylesRuntime')
+
+HybridUnistylesRuntime.statusBar = HybridUnistylesRuntime.createHybridStatusBar()
+HybridUnistylesRuntime.navigationBar = HybridUnistylesRuntime.createHybridNavigationBar()
+HybridUnistylesRuntime._setRootViewBackgroundColor = HybridUnistylesRuntime.setRootViewBackgroundColor
+
+HybridUnistylesRuntime.setRootViewBackgroundColor = (color?: string) => {
+    const parsedColor = processColor(color)
+
+    HybridUnistylesRuntime._setRootViewBackgroundColor(parsedColor as number)
+}
+
+if (isIOS) {
+    HybridUnistylesRuntime.setImmersiveMode = (isEnabled: boolean) => HybridUnistylesRuntime.statusBar.setHidden(isEnabled, 'fade')
+}
+
+attachStatusBarJSMethods(HybridUnistylesRuntime.statusBar)
+attachNavigationBarJSMethods(HybridUnistylesRuntime.navigationBar)
+
+export const Runtime = HybridUnistylesRuntime as UnistylesRuntime
+
+export type {
+    UnistylesMiniRuntime
+}

package/src/specs/index.ts

@@ -0,0 +1,23 @@
+import './TurboUnistyles'
+
+import { Runtime } from './UnistylesRuntime'
+import { StyleSheet } from './StyleSheet'
+import { UnistylesShadowRegistry } from './ShadowRegistry'
+import type { UnistylesMiniRuntime } from './UnistylesRuntime'
+import { StatusBarStyle, ColorScheme, Orientation } from './types'
+
+export {
+    StatusBarStyle,
+    ColorScheme,
+    Orientation
+}
+
+export {
+    UnistylesShadowRegistry,
+    Runtime as UnistylesRuntime,
+    StyleSheet,
+}
+
+export type {
+    UnistylesMiniRuntime
+}

package/src/specs/index.web.ts

@@ -0,0 +1,5 @@
+import type { ReactElement } from 'react'
+
+export const getSSRUnistyles = () => [] as Array<ReactElement>
+
+export * from '../../web'

package/src/specs/types.ts

@@ -0,0 +1,38 @@
+import type { ColorValue } from 'react-native'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+
+export enum ColorScheme {
+    Light = 'light',
+    Dark = 'dark',
+    Unspecified = 'unspecified'
+}
+
+export enum Orientation {
+    Portrait = 'portrait',
+    Landscape = 'landscape'
+}
+
+export interface Dimensions {
+    readonly width: number,
+    readonly height: number
+}
+
+export interface Insets {
+    readonly top: number,
+    readonly bottom: number,
+    readonly left: number,
+    readonly right: number,
+    readonly ime: number
+}
+
+export enum StatusBarStyle {
+    Default = 'default',
+    Light = 'light',
+    Dark = 'dark'
+}
+
+export type AppThemeName = keyof UnistylesThemes
+export type AppBreakpoint = keyof UnistylesBreakpoints
+export type AppTheme = UnistylesThemes[AppThemeName]
+
+export type Color = ColorValue | number

package/src/types/accessibility.ts

@@ -0,0 +1,29 @@
+export enum IOSContentSizeCategory {
+    AccessibilityExtraExtraExtraLarge = 'accessibilityExtraExtraExtraLarge',
+    AccessibilityExtraExtraLarge = 'accessibilityExtraExtraLarge',
+    AccessibilityExtraLarge = 'accessibilityExtraLarge',
+    AccessibilityLarge = 'accessibilityLarge',
+    AccessibilityMedium = 'accessibilityMedium',
+    ExtraExtraExtraLarge = 'xxxLarge',
+    ExtraExtraLarge = 'xxLarge',
+    ExtraLarge = 'xLarge',
+    Large = 'Large',
+    Medium = 'Medium',
+    Small = 'Small',
+    ExtraSmall = 'xSmall',
+    Unspecified = 'unspecified'
+}
+
+export enum AndroidContentSizeCategory {
+    Small = 'Small',
+    Default = 'Default',
+    Large = 'Large',
+    ExtraLarge = 'ExtraLarge',
+    Huge = 'Huge',
+    ExtraHuge = 'ExtraHuge',
+    ExtraExtraHuge = 'ExtraExtraHuge'
+}
+
+export enum WebContentSizeCategory {
+    Unspecified = 'web-unspecified',
+}

package/src/types/breakpoints.ts

@@ -1,8 +1,7 @@
 import type { ColorValue, OpaqueColorValue } from 'react-native'
-import type { UnistylesTheme } from '../types'
 import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
 import type { TransformStyles } from './core'
-import type { UnistylesMiniRuntime } from '../core'
+import type { SafeReturnType } from './common'
 
 type ExtractTransformArray<T> = T extends object
     ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
@@ -21,15 +20,19 @@ type ExtractBreakpoints<T> = T extends object
 type ParseNestedObject<T> = T extends (...args: infer A) => infer R
     ? (...args: A) => ParseNestedObject<R>
     : T extends object
-        ? T extends { variants: infer R }
-            ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
-            : {
-                [K in keyof T]: T[K] extends object
-                    ? T[K] extends OpaqueColorValue
-                        ? ColorValue
-                        : ExtractBreakpoints<T[K]>
-                    : T[K]
-            }
+        ? T extends { variants: infer R, compoundVariants: infer C }
+            ? ParseVariants<FlattenVariants<R>> & FlattenCompoundVariants<C> & ParseNestedObject<Omit<T, 'variants' | 'compoundVariants'>>
+            : T extends { variants: infer R }
+                ? ParseVariants<FlattenVariants<R>> & ParseNestedObject<Omit<T, 'variants'>>
+                : T extends { compoundVariants: object }
+                    ? ParseNestedObject<Omit<T, 'compoundVariants'>>
+                    : {
+                        [K in keyof T as K extends '_web' ? never : K]: T[K] extends object
+                            ? T[K] extends OpaqueColorValue
+                                ? ColorValue
+                                : ExtractBreakpoints<T[K]>
+                            : T[K]
+                    }
         : T
 
 type FlattenVariants<T> = T extends object
@@ -44,6 +47,12 @@ type FlattenVariants<T> = T extends object
     }
     : never
 
+type FlattenCompoundVariants<T> = T extends Array<infer _>
+    ? FlattenCompoundVariants<T[number]>
+    : T extends { styles: infer S }
+        ? ParseNestedObject<S>
+        : never
+
 type ParseVariants<T> = T extends object
     ? T[keyof T] extends object
         ? UnionToIntersection<ParseVariants<T[keyof T]>>
@@ -57,6 +66,4 @@ type ParseStyleKeys<T> = T extends object
     ? { [K in keyof T]: ParseNestedObject<T[K]> }
     : never
 
-export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme, runtime: UnistylesMiniRuntime) => infer R
-    ? ParseStyleKeys<R>
-    : ParseStyleKeys<T>
+export type ReactNativeStyleSheet<T> = ParseStyleKeys<SafeReturnType<T>>

package/src/types/common.ts

@@ -1,2 +1,3 @@
 export type Optional<T> = T | undefined
 export type Nullable<T> = T | null
+export type SafeReturnType<T> = T extends (...args: any) => infer R ? R : T

package/src/types/index.ts

@@ -1,6 +1,3 @@
-export * from './normalizer'
-export * from './unistyles'
-export * from './color'
 export type { Optional, Nullable } from './common'
 export type {
     NestedStylePairs,
@@ -11,7 +8,7 @@ export type {
     RNStyle
 } from './core'
 export type {
-    StyleSheetWithSuperPowers,
+    CreateUnistylesStyleSheet,
     StyleSheet,
     AllAvailableKeys,
     UnistylesValues,
@@ -21,4 +18,4 @@ export type {
 } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
 export type { ExtractVariantNames } from './variants'
-export type { UnistylesPlugin } from './plugin'
+export { AndroidContentSizeCategory, IOSContentSizeCategory, WebContentSizeCategory } from './accessibility'

package/src/types/stylesheet.ts

@@ -1,7 +1,11 @@
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
 import type { UnistylesBreakpoints } from '../global'
-import type { UnistylesMiniRuntime } from '../core'
+import type { UnistylesMiniRuntime } from '../specs'
+import type { ReactNativeStyleSheet } from './breakpoints'
+import type { ExtractVariantNames } from './variants'
+import type { CSSProperties } from 'react'
+import type { Pseudo } from '../../web/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
@@ -16,14 +20,25 @@ type UnistyleNestedStyles = {
     transform?: Array<ToDeepUnistyles<TransformStyles>>
 }
 
-type Variants = {
-    variants?: {
-        [variantName: string]: {
-            [variant: string]: Omit<UnistylesValues, 'variants'>
-        }
+type VariantsObject = {
+    [variantName: string]: {
+        [variant: string]: Omit<UnistylesValues, 'variants' | 'compoundVariants'>
     }
 }
 
+type CustomClassName = {
+    _css?: string | Array<string>
+}
+
+type CompoundVariant = {
+    styles: Omit<UnistylesValues, 'variants' | 'compoundVariants'>
+}
+
+type VariantsAndCompoundVariants = {
+    variants?: VariantsObject,
+    compoundVariants?: Array<CompoundVariant>
+}
+
 export type ToDeepUnistyles<T> = {
     [K in keyof T]?: T[K] | {
         [key in BreakpointsOrMediaQueries]?: T[K]
@@ -35,16 +50,33 @@ type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & Unistyle
 export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
 export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
 
-export type UnistylesValues = {
+type FlatUnistylesValues = {
     [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
         [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
     }
-} & Variants & {
+}
+
+export type UnistylesValues = FlatUnistylesValues & {
+} & VariantsAndCompoundVariants & {
     [propName in NestedKeys]?: UnistyleNestedStyles[propName]
+} & {
+    _web?: CSSProperties & CustomClassName & {
+        [propName in Pseudo]?: ToDeepUnistyles<CSSProperties>
+    }
 }
 
 export type StyleSheet = {
     [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
 }
 
-export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => StyleSheet) | StyleSheet
+export type StyleSheetWithSuperPowers<S extends StyleSheet> =
+    | ((theme: UnistylesTheme, miniRuntime: UnistylesMiniRuntime) => S)
+    | S
+
+type UseVariantsFn<T> = {
+    useVariants: (variants: ExtractVariantNames<T>) => void
+}
+
+const create = <S extends StyleSheet>(stylesheet: StyleSheetWithSuperPowers<S>): (ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet>) => stylesheet as (ReactNativeStyleSheet<S> & UseVariantsFn<typeof stylesheet>)
+
+export type CreateUnistylesStyleSheet = typeof create

package/src/types/variants.ts

@@ -1,9 +1,9 @@
-export type ExtractVariantNames<T> = T extends (...args: any) => infer R
-    ? ExtractVariantKeys<R>
-    : ExtractVariantKeys<T>
+import type { SafeReturnType } from './common'
+
+export type ExtractVariantNames<T> = ExtractVariantKeys<SafeReturnType<T>>
 
 type ExtractVariantKeys<T> = T extends object
-    ? ExtractVariant<T[keyof T]>
+    ? ExtractVariant<SafeReturnType<T[keyof T]>>
     : never
 
 type HasBooleanVariants<T> = T extends Record<'true', any>
@@ -18,10 +18,6 @@ type ExtractSubVariantKeys<T> = T extends object
         : keyof Omit<T, 'default'> | undefined
     : never
 
-type ExtractVariant<T> = T extends (...args: any) => infer R
-    ? R extends { variants: infer V }
-        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-        : never
-    : T extends { variants: infer V }
-        ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
-        : never
+type ExtractVariant<T> = T extends { variants: infer V }
+    ? { [key in keyof V]?: ExtractSubVariantKeys<V[key]> }
+    : T