react-native-unistyles 2.0.0-alpha.9 → 2.0.0-beta.1

package/src/common.ts

@@ -1,19 +1,35 @@
-export enum CxxUnistylesEventTypes {
-    Theme = 'theme',
-    Layout = 'layout'
+import { Platform } from 'react-native'
+
+export const warn = (message: string) => {
+    console.warn(`🦄 [react-native-unistyles]: ${message}`)
 }
 
-export enum UnistylesError {
-    RuntimeUnavailable = 'UNISTYLES_ERROR_RUNTIME_UNAVAILABLE',
-    ThemeNotFound = 'UNISTYLES_ERROR_THEME_NOT_FOUND',
-    ThemeNotRegistered = 'UNISTYLES_ERROR_THEME_NOT_REGISTERED',
-    ThemesCannotBeEmpty = 'UNISTYLES_ERROR_THEMES_CANNOT_BE_EMPTY',
-    BreakpointsCannotBeEmpty = 'UNISTYLES_ERROR_BREAKPOINTS_CANNOT_BE_EMPTY',
-    BreakpointsMustStartFromZero = 'UNISTYLES_ERROR_BREAKPOINTS_MUST_START_FROM_ZERO',
+export const isWeb = Platform.OS === 'web'
+export const isIOS = Platform.OS === 'ios'
+export const isAndroid = Platform.OS === 'android'
+export const isMobile = isIOS || isAndroid
+export const isServer = typeof window === 'undefined'
+
+export const ScreenOrientation = {
+    Landscape: 'landscape',
+    Portrait: 'portrait'
+} as const
+
+export enum UnistylesEventType {
+    Theme = 'theme',
+    Layout = 'layout',
+    Plugin = 'plugin'
 }
 
-// todo to string?
-export enum ScreenOrientation {
-    Portrait = 1,
-    Landscape = 2
+export enum UnistylesError {
+    RuntimeUnavailable = 'Unistyles runtime is not available. Make sure you followed the installation instructions',
+    ThemeNotFound = 'You are trying to get a theme that is not registered with UnistylesRegistry',
+    ThemeNotRegistered = 'You are trying to set a theme that was not registered with UnistylesRegistry',
+    ThemeNotSelected = 'Your themes are registered, but you didn\'t select the initial theme',
+    ThemesCannotBeEmpty = 'You are trying to register empty themes object',
+    BreakpointsCannotBeEmpty = 'You are trying to register empty breakpoints object',
+    BreakpointsMustStartFromZero = 'You are trying to register breakpoints that don\'t start from 0',
+    InvalidPluginName = 'Plugin name can\'t start from reserved prefix __unistyles',
+    DuplicatePluginName = 'You are trying to register a plugin with a name that is already registered',
+    CantRemoveInternalPlugin = 'You are trying to remove an internal unistyles plugin'
 }

package/src/core/UnistyleRegistry.ts

@@ -1,8 +1,13 @@
-import type { UnistylesBridge, UnistylesConfig } from '../types'
+import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { isWeb, UnistylesError } from '../common'
+import { normalizeWebStylesPlugin } from '../plugins'
 
 export class UnistyleRegistry {
     public config: UnistylesConfig = {}
+    public plugins: Array<UnistylesPlugin> = isWeb
+        ? [normalizeWebStylesPlugin]
+        : []
     public themeNames: Array<keyof UnistylesThemes> = []
     public themes: UnistylesThemes = {} as UnistylesThemes
     public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
@@ -18,7 +23,10 @@ export class UnistyleRegistry {
         this.unistylesBridge.themes = keys
         this.themeNames = keys
 
-        return this
+        return {
+            addBreakpoints: this.addBreakpoints,
+            addConfig: this.addConfig
+        }
     }
 
     public addBreakpoints = (breakpoints: UnistylesBreakpoints) => {
@@ -26,7 +34,10 @@ export class UnistyleRegistry {
         this.unistylesBridge.useBreakpoints(breakpoints)
         this.sortedBreakpointPairs = this.unistylesBridge.sortedBreakpointPairs
 
-        return this
+        return {
+            addThemes: this.addThemes,
+            addConfig: this.addConfig
+        }
     }
 
     public addConfig = (config: UnistylesConfig) => {
@@ -36,6 +47,57 @@ export class UnistyleRegistry {
             this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
         }
 
-        return this
+        if (config.experimentalPlugins) {
+            config.experimentalPlugins.forEach(plugin => this.addPlugin(plugin, false))
+        }
+
+        if (config.initialTheme) {
+            this.unistylesBridge.useTheme(config.initialTheme)
+        }
+
+        return {
+            addBreakpoints: this.addBreakpoints,
+            addThemes: this.addThemes
+        }
+    }
+
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
+        if (this.hasTheme(forName)) {
+            return this.themes[forName]
+        }
+
+        if (this.unistylesBridge.themeName) {
+            throw new Error(UnistylesError.ThemeNotFound)
+        }
+
+        throw new Error(UnistylesError.ThemeNotSelected)
     }
+
+    public addPlugin = (plugin: UnistylesPlugin, notify: boolean = true) => {
+        if (plugin.name.startsWith('__unistyles')) {
+            throw new Error(UnistylesError.InvalidPluginName)
+        }
+
+        if (this.plugins.some(({ name }) => name === plugin.name)) {
+            throw new Error(UnistylesError.DuplicatePluginName)
+        }
+
+        this.plugins = [plugin].concat(this.plugins)
+        this.unistylesBridge.addPlugin(plugin.name, notify)
+    }
+
+    public removePlugin = (plugin: UnistylesPlugin) => {
+        if (plugin.name.startsWith('__unistyles')) {
+            throw new Error(UnistylesError.CantRemoveInternalPlugin)
+        }
+
+        this.plugins = this.plugins.filter(({ name }) => name !== plugin.name)
+        this.unistylesBridge.removePlugin(plugin.name)
+    }
+
+    public hasTheme = (name: keyof UnistylesThemes) => name in this.themes
 }

package/src/core/UnistylesRuntime.ts

@@ -1,10 +1,10 @@
 import { ScreenOrientation, UnistylesError } from '../common'
-import type { UnistylesBridge } from '../types'
+import type { UnistylesBridge, UnistylesPlugin } from '../types'
 import type { UnistylesThemes } from '../global'
 import type { UnistyleRegistry } from './UnistyleRegistry'
 
 export class UnistylesRuntime {
-    constructor(private unistylesBridge: UnistylesBridge, private registry: UnistyleRegistry) {}
+    constructor(private unistylesBridge: UnistylesBridge, private unistylesRegistry: UnistyleRegistry) {}
 
     public get colorScheme() {
         return this.unistylesBridge.colorScheme
@@ -14,10 +14,6 @@ export class UnistylesRuntime {
         return this.unistylesBridge.hasAdaptiveThemes
     }
 
-    public get sortedBreakpoints() {
-        return this.registry.sortedBreakpointPairs
-    }
-
     public get themeName() {
         return this.unistylesBridge.themeName
     }
@@ -26,6 +22,10 @@ export class UnistylesRuntime {
         return this.unistylesBridge.breakpoint
     }
 
+    public get enabledPlugins() {
+        return this.unistylesBridge.enabledPlugins
+    }
+
     public get screen() {
         return {
             width: this.unistylesBridge.screenWidth,
@@ -44,7 +44,11 @@ export class UnistylesRuntime {
     }
 
     public setTheme = (name: keyof UnistylesThemes) => {
-        if (this.hasTheme(name)) {
+        if (name === this.themeName) {
+            return
+        }
+
+        if (this.unistylesRegistry.hasTheme(name)) {
             this.unistylesBridge.useTheme(name)
 
             return true
@@ -53,21 +57,15 @@ export class UnistylesRuntime {
         throw new Error(UnistylesError.ThemeNotRegistered)
     }
 
-    public getTheme = (forName: keyof UnistylesThemes) => {
-        if (this.registry.themeNames.length === 0) {
-            return {} as UnistylesThemes[keyof UnistylesThemes]
-        }
-
-        if (!this.hasTheme(forName)) {
-            throw new Error(UnistylesError.ThemeNotFound)
-        }
-
-        return this.registry.themes[forName]
-    }
-
     public setAdaptiveThemes = (enable: boolean) => {
         this.unistylesBridge.useAdaptiveThemes(enable)
     }
 
-    private hasTheme = (name: keyof UnistylesThemes) => name in this.registry.themes
+    public addPlugin = (plugin: UnistylesPlugin) => {
+        this.unistylesRegistry.addPlugin(plugin)
+    }
+
+    public removePlugin = (plugin: UnistylesPlugin) => {
+        this.unistylesRegistry.removePlugin(plugin)
+    }
 }

package/src/core/index.ts

@@ -1 +1,2 @@
 export { unistyles } from './Unistyles'
+export type { UnistylesRuntime } from './UnistylesRuntime'

package/src/createStyleSheet.ts

@@ -1,9 +1,3 @@
-import type { CustomNamedStyles, UnistylesTheme } from './types'
+import type { StyleSheetWithSuperPowers } from './types'
 
-export const createStyleSheet = <S, X>(styles: S | CustomNamedStyles<S> | X | ((theme: UnistylesTheme) => X | CustomNamedStyles<X>)): S | X => {
-    if (typeof styles === 'function') {
-        return styles as X
-    }
-
-    return styles as S
-}
+export const createStyleSheet = <S extends StyleSheetWithSuperPowers>(stylesheet: S): S => stylesheet

package/src/global.ts

@@ -1,5 +1,6 @@
 export interface UnistylesThemes {}
 export interface UnistylesBreakpoints {
+    // these breakpoints are only available on mobile, when you didn't specify any breakpoints
     landscape?: number,
     portrait?: number,
 }

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useInitialTheme } from './useInitialTheme'
 export { useUnistyles } from './useUnistyles'
+export { useVariants } from './useVariants'

package/src/hooks/useUnistyles.ts

@@ -1,13 +1,14 @@
 import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
 import { unistyles } from '../core'
-import { CxxUnistylesEventTypes } from '../common'
+import { UnistylesEventType } from '../common'
 import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
-    const [theme, setTheme] = useState(unistyles.runtime.getTheme(unistyles.runtime.themeName))
+    const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
+    const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
     const [layout, setLayout] = useState({
         breakpoint: unistyles.runtime.breakpoint,
         orientation: unistyles.runtime.orientation,
@@ -22,23 +23,23 @@ export const useUnistyles = () => {
             'onChange',
             (event: UnistylesEvents) => {
                 switch (event.type) {
-                    case CxxUnistylesEventTypes.Theme: {
+                    case UnistylesEventType.Theme: {
                         const themeEvent = event as UnistylesThemeEvent
 
-                        return setTheme(unistyles.runtime.getTheme(themeEvent.payload.themeName))
+                        return setTheme(unistyles.registry.getTheme(themeEvent.payload.themeName))
                     }
-                    case CxxUnistylesEventTypes.Layout: {
+                    case UnistylesEventType.Layout: {
                         const layoutEvent = event as UnistylesMobileLayoutEvent
 
                         return setLayout({
                             breakpoint: layoutEvent.payload.breakpoint,
                             orientation: layoutEvent.payload.orientation,
-                            screenSize: {
-                                width: layoutEvent.payload.screen.width,
-                                height: layoutEvent.payload.screen.height
-                            }
+                            screenSize: layoutEvent.payload.screen
                         })
                     }
+                    case UnistylesEventType.Plugin: {
+                        return setPlugins(unistyles.runtime.enabledPlugins)
+                    }
                     default:
                         return
                 }
@@ -49,6 +50,7 @@ export const useUnistyles = () => {
     }, [])
 
     return {
+        plugins,
         theme,
         layout
     }

package/src/hooks/useVariants.ts

@@ -0,0 +1,10 @@
+import { useRef } from 'react'
+import type { Optional } from '../types'
+
+export const useVariants = (variantsMap?: Record<string, Optional<string>>) => {
+    const variantsRef = useRef<Optional<Record<string, Optional<string>>>>(variantsMap)
+
+    variantsRef.current = variantsMap
+
+    return variantsRef.current
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 import { unistyles } from './core'
 import { mq } from './utils'
 import { useInitialTheme } from './hooks'
+import type { UnistylesPlugin } from './types'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
 import { ScreenOrientation } from './common'
 import { useStyles } from './useStyles'
@@ -26,5 +27,6 @@ export {
 
 export type {
     UnistylesThemes,
-    UnistylesBreakpoints
+    UnistylesBreakpoints,
+    UnistylesPlugin
 }

package/src/plugins/index.ts

@@ -0,0 +1,2 @@
+export { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
+export { preprocessor, normalizeNumericValue, normalizeColor, normalizeStyle } from './normalizer'

package/src/plugins/normalizeWebStylesPlugin.ts

@@ -0,0 +1,7 @@
+import type { UnistylesPlugin } from '../types'
+import { normalizeStyle } from './normalizer'
+
+export const normalizeWebStylesPlugin: UnistylesPlugin = {
+    name: '__unistylesNormalizeWebStyles',
+    onParsedStyle: (_key, styles) => normalizeStyle(styles)
+}

package/src/plugins/normalizer/index.ts

@@ -0,0 +1,2 @@
+export { normalizeStyle } from './normalizeStyle'
+export { preprocessor, normalizeNumericValue, normalizeColor } from './normalizer'

package/src/{utils/normalizeStyles.web.ts → plugins/normalizer/normalizeStyle.ts}

@@ -1,6 +1,6 @@
-import { warn } from './common'
 import { preprocessor } from './normalizer'
-import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, Transforms } from '../types'
+import { warn } from '../../common'
+import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, RNStyle } from '../../types'
 
 const normalizeBoxShadow = <T extends BoxShadow>(style: T): NormalizedBoxShadow => {
     const requiredBoxShadowProperties = [
@@ -55,7 +55,7 @@ const normalizeTextShadow = <T extends TextShadow>(style: T): NormalizedTextShad
     }
 }
 
-export const normalizeStyles = <T extends BoxShadow | TextShadow | { transform: Transforms }>(style: T): T => {
+export const normalizeStyle = <T extends RNStyle>(style: T): T => {
     const normalizedTransform = ('transform' in style && Array.isArray(style.transform))
         ? { transform: preprocessor.createTransformValue(style.transform) }
         : {}

package/src/{utils → plugins/normalizer}/normalizer.ts

@@ -1,7 +1,7 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 import normalizeColors from '@react-native/normalize-colors'
-import type { TextShadow, Transforms, BoxShadow } from '../types'
+import type { TextShadow, Transforms, BoxShadow, Nullable } from '../../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -15,9 +15,9 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
         return color
     }
 
-    const integer = normalizeColors(color) as number | null
+    const integer = normalizeColors(color) as Nullable<number>
 
-    // If the colour is an unknown format, the return value is null
+    // If the color is an unknown format, the return value is null
     if (integer === null) {
         return color
     }

package/src/types/breakpoints.ts

@@ -1,29 +1,61 @@
-import type { OpaqueColorValue } from 'react-native'
-import type { UnistylesBreakpoints } from '../global'
-import type { MediaQuery } from './mq'
-
-type WithEmptyObject<V> = keyof V extends never ? {} : V
-
-type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints & string, infer V>>
-    ? WithEmptyObject<V>
-    : T extends (...args: infer A) => infer R
-        ? (...args: A) => ExtractBreakpoints<R>
-        : {
-            [K in keyof T]: T[K] extends (...args: infer A) => infer R
-                ? (...args: A) => ExtractBreakpoints<R>
-                : T[K] extends object
-                    ? ExtractBreakpoints<T[K]>
-                    : T[K]
-        }
+import type { ColorValue, OpaqueColorValue } from 'react-native'
+import type { UnistylesTheme } from '../types'
+import type { BreakpointsOrMediaQueries, ToDeepUnistyles } from './stylesheet'
+import type { TransformStyles } from './core'
+
+type ExtractTransformArray<T> = T extends object
+    ? { [K in keyof T]: ExtractBreakpoints<T[K]> }
+    : never
+
+type ExtractBreakpoints<T> = T extends object
+    ? keyof T extends BreakpointsOrMediaQueries
+        ? T[keyof T]
+        : T extends Array<ToDeepUnistyles<TransformStyles>>
+            ? Array<ExtractTransformArray<T[number]>>
+            : {
+                [K in keyof T]: ExtractBreakpoints<T[K]>
+            }
+    : T
 
-type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
-    ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
+type ParseNestedObject<T> = T extends (...args: infer A) => infer R
+    ? (...args: A) => ParseNestedObject<R>
     : T extends object
-        ? T extends OpaqueColorValue
-            ? string
-            : T extends Record<string, infer _V>
-                ? { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
-                : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
+        ? 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
 
-export type ReactNativeStyleSheet<T> = ExtractBreakpoints<RemoveKeysWithPrefix<T>>
+type FlattenVariants<T> = T extends object
+    ? {
+        [K in keyof T]: T[K] extends object
+            ? {
+                [key in keyof T[K]]: T[K][key] extends object
+                    ? ParseNestedObject<T[K][key]>
+                    : never
+            }
+            : never
+    }
+    : never
+
+type ParseVariants<T> = T extends object
+    ? T[keyof T] extends object
+        ? UnionToIntersection<ParseVariants<T[keyof T]>>
+        : T
+    : T
+
+type UnionToIntersection<U> =
+    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+
+type ParseStyleKeys<T> = T extends object
+    ? { [K in keyof T]: ParseNestedObject<T[K]> }
+    : never
+
+export type ReactNativeStyleSheet<T> = T extends (theme: UnistylesTheme) => infer R
+    ? ParseStyleKeys<R>
+    : ParseStyleKeys<T>

package/src/types/core.ts

@@ -15,19 +15,13 @@ import type {
 } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
 import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
-import type { MediaQuery } from './mq'
 
-type ShadowOffset = {
+export type ShadowOffset = {
     width: number,
     height: number
 }
 
-export type ScreenSize = {
-    width: number,
-    height: number
-}
-
-type TransformStyles =
+export type TransformStyles =
     & PerpectiveTransform
     & RotateTransform
     & RotateXTransform
@@ -42,41 +36,13 @@ type TransformStyles =
     & SkewYTransform
     & MatrixTransform
 
-type UnistyleNested = {
-    shadowOffset?: DeepUniStyle<ShadowOffset>,
-    textShadowOffset?: DeepUniStyle<ShadowOffset>,
-    transform?: Array<DeepUniStyle<TransformStyles>>
-}
-
-type UniStyle<V> = {
-    [innerKey in keyof UnistylesBreakpoints]?: V
-} | {
-    [innerKey in MediaQuery]: V
-}
-
-type DeepUniStyle<T> = {
-    [K in keyof T]?: UniStyle<T[K]> | T[K]
-}
-
-// these props are treated differently to nest breakpoints and media queries
-type NestedTypes = 'shadowOffset' | 'transform' | 'textShadowOffset'
-
-type UnistyleView = DeepUniStyle<Omit<ViewStyle, NestedTypes>>
-type UnistyleText = DeepUniStyle<Omit<TextStyle, NestedTypes>>
-type UnistyleImage = DeepUniStyle<Omit<ImageStyle, NestedTypes>>
-
-export type StaticStyles =
-    | UnistyleView
-    | UnistyleText
-    | UnistyleImage
-    & UnistyleNested
-
-export type CustomNamedStyles<T> = {
-    [K in keyof T]: T[K] extends (...args: infer A) => StaticStyles
-        ? (...args: A) => StaticStyles
-        : StaticStyles
+export type ScreenSize = {
+    width: number,
+    height: number
 }
 
-export type NestedKeys = Array<[keyof UnistylesBreakpoints | MediaQuery, string | number | undefined]>
+export type RNStyle = ViewStyle & TextStyle & ImageStyle
+export type RNValue = ViewStyle[keyof ViewStyle] | TextStyle[keyof TextStyle] | ImageStyle[keyof ImageStyle]
+export type NestedStyle = Record<keyof UnistylesBreakpoints | symbol, RNValue>
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | symbol, RNValue]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
-export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST

package/src/types/index.ts

@@ -1,6 +1,15 @@
 export * from './normalizer'
 export * from './unistyles'
 export type { Optional, Nullable } from './common'
-export type { MediaQuery } from './mq'
-export type { CustomNamedStyles, NestedKeys, UnistylesTheme, CreateStylesFactory, ScreenSize } from './core'
+export type {
+    NestedStylePairs,
+    UnistylesTheme,
+    ScreenSize,
+    NestedStyle,
+    RNValue,
+    RNStyle
+} from './core'
+export type { StyleSheetWithSuperPowers, StyleSheet, AllAvailableKeys } from './stylesheet'
 export type { ReactNativeStyleSheet } from './breakpoints'
+export type { ExtractVariantNames } from './variants'
+export type { UnistylesPlugin } from './plugin'

package/src/types/plugin.ts

@@ -0,0 +1,7 @@
+import type { RNStyle } from './core'
+import type { UnistylesRuntime } from '../core'
+
+export type UnistylesPlugin = {
+    name: string,
+    onParsedStyle?: (styleKey: string, style: RNStyle, runtime: UnistylesRuntime) => RNStyle
+}

package/src/types/stylesheet.ts

@@ -0,0 +1,49 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+import type { ShadowOffset, TransformStyles, UnistylesTheme } from './core'
+import type { UnistylesBreakpoints } from '../global'
+
+// these props are treated differently to nest breakpoints and media queries
+type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'
+
+type UnistyleView = Omit<ViewStyle, NestedKeys>
+type UnistyleText = Omit<TextStyle, NestedKeys>
+type UnistyleImage = Omit<ImageStyle, NestedKeys>
+
+type UnistyleNestedStyles = {
+    shadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    textShadowOffset?: ToDeepUnistyles<ShadowOffset>,
+    transform?: Array<ToDeepUnistyles<TransformStyles>>
+}
+
+type Variants = {
+    variants?: {
+        [variantName: string]: {
+            [variant: string]: Omit<UnistylesValues, 'variants'>
+        }
+    }
+}
+
+export type ToDeepUnistyles<T> = {
+    [K in keyof T]?: T[K] | {
+        [key in BreakpointsOrMediaQueries]?: T[K]
+    }
+}
+
+type AllAvailableStyles = UnistyleView & UnistyleText & UnistyleImage & UnistyleNestedStyles
+
+export type AllAvailableKeys = keyof (UnistyleView & UnistyleText & UnistyleImage)
+export type BreakpointsOrMediaQueries = keyof UnistylesBreakpoints | symbol
+
+export type UnistylesValues = {
+    [propName in AllAvailableKeys]?: AllAvailableStyles[propName] | {
+        [key in BreakpointsOrMediaQueries]?: AllAvailableStyles[propName]
+    }
+} & Variants & {
+    [propName in NestedKeys]?: UnistyleNestedStyles[propName]
+}
+
+export type StyleSheet = {
+    [styleName: string]: UnistylesValues | ((...args: any) => UnistylesValues)
+}
+
+export type StyleSheetWithSuperPowers = ((theme: UnistylesTheme) => StyleSheet) | StyleSheet