react-native-unistyles 2.0.0-alpha.10 → 2.0.0-alpha.12

package/src/core/UnistyleRegistry.ts

@@ -1,8 +1,10 @@
-import type { UnistylesBridge, UnistylesConfig } from '../types'
+import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
+import { UnistylesError } from '../common'
 
 export class UnistyleRegistry {
     public config: UnistylesConfig = {}
+    public plugins: Array<UnistylesPlugin> = []
     public themeNames: Array<keyof UnistylesThemes> = []
     public themes: UnistylesThemes = {} as UnistylesThemes
     public breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
@@ -36,6 +38,48 @@ 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)
+        }
     }
+
+    public getTheme = (forName: keyof UnistylesThemes) => {
+        if (this.themeNames.length === 0) {
+            return {} as UnistylesThemes[keyof UnistylesThemes]
+        }
+
+        if (!this.hasTheme(forName)) {
+            throw new Error(UnistylesError.ThemeNotFound)
+        }
+
+        return this.themes[forName]
+    }
+
+    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 = this.plugins.concat([plugin])
+        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,7 @@ export class UnistylesRuntime {
     }
 
     public setTheme = (name: keyof UnistylesThemes) => {
-        if (this.hasTheme(name)) {
+        if (this.unistylesRegistry.hasTheme(name)) {
             this.unistylesBridge.useTheme(name)
 
             return true
@@ -53,21 +53,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/hooks/useUnistyles.ts

@@ -7,7 +7,8 @@ import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent }
 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,
@@ -25,7 +26,7 @@ export const useUnistyles = () => {
                     case CxxUnistylesEventTypes.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: {
                         const layoutEvent = event as UnistylesMobileLayoutEvent
@@ -39,6 +40,9 @@ export const useUnistyles = () => {
                             }
                         })
                     }
+                    case CxxUnistylesEventTypes.Plugin: {
+                        return setPlugins(unistyles.runtime.enabledPlugins)
+                    }
                     default:
                         return
                 }
@@ -49,6 +53,7 @@ export const useUnistyles = () => {
     }, [])
 
     return {
+        plugins,
         theme,
         layout
     }

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,3 @@
+export { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
+export { preprocessor, normalizeNumericValue, normalizeColor, normalizeStyle } from './normalizer'
+export { withPlugins } from './withPlugins'

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 } from '../../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,

package/src/plugins/withPlugins.ts

@@ -0,0 +1,17 @@
+import type { RNStyle } from '../types'
+import { normalizeWebStylesPlugin } from './normalizeWebStylesPlugin'
+import { isWeb } from '../common'
+import { unistyles } from '../core'
+
+const UNISTYLES_PLUGINS = isWeb
+    ? [normalizeWebStylesPlugin]
+    : []
+
+export const withPlugins = (key: string, style: RNStyle) => unistyles.registry.plugins.concat(UNISTYLES_PLUGINS)
+    .reduce((acc, plugin) => {
+        if (plugin.onParsedStyle) {
+            return plugin.onParsedStyle(key, acc, unistyles.runtime)
+        }
+
+        return acc
+    }, style)

package/src/types/breakpoints.ts

@@ -1,7 +1,6 @@
 import type { OpaqueColorValue } from 'react-native'
 import type { UnistylesBreakpoints } from '../global'
 import type { MediaQuery } from './mq'
-import type { VariantValue } from './core'
 
 type WithEmptyObject<V> = keyof V extends never ? {} : V
 
@@ -17,15 +16,17 @@ type ExtractBreakpoints<T> = T extends Partial<Record<keyof UnistylesBreakpoints
                     : T[K]
         }
 
-type FlattenObjectTypes<T> = T[keyof T]
+type UnionToIntersection<U> =
+    (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never
+
 type RemoveKeysWithPrefix<T> = T extends (...args: Array<any>) => infer R
     ? (...args: Parameters<T>) => RemoveKeysWithPrefix<R>
     : T extends object
         ? T extends OpaqueColorValue
             ? string
             : T extends Record<string, infer _V>
-                ? T extends { variants: VariantValue }
-                    ? RemoveKeysWithPrefix<FlattenObjectTypes<T['variants']>>
+                ? T extends { variants: infer _V }
+                    ? Omit<T, 'variants'> & UnionToIntersection<_V[keyof _V]>
                     : { [K in keyof T as K extends MediaQuery ? keyof UnistylesBreakpoints & string : K]: RemoveKeysWithPrefix<T[K]> }
                 : { [K in keyof T]: RemoveKeysWithPrefix<T[K]> }
         : T

package/src/types/core.ts

@@ -45,17 +45,14 @@ type TransformStyles =
 type UnistyleNested = {
     shadowOffset?: DeepUniStyle<ShadowOffset>,
     textShadowOffset?: DeepUniStyle<ShadowOffset>,
-    transform?: Array<DeepUniStyle<TransformStyles>>
+    transform?: Array<DeepUniStyle<TransformStyles>>,
+    variants?: Record<string, UnistyleView | UnistyleText | UnistyleImage & Omit<UnistyleNested, 'variants'>>
 }
 
 type UniStyle<V> = {
     [innerKey in keyof UnistylesBreakpoints]?: V
 } | {
     [innerKey in MediaQuery]: V
-} | {
-    [innerKey in 'variants']?: {
-        [variant: string]: V
-    }
 }
 
 type DeepUniStyle<T> = {
@@ -81,11 +78,9 @@ export type CustomNamedStyles<T> = {
         : StaticStyles
 }
 
+export type RNStyle = ViewStyle | TextStyle | ImageStyle
 export type RNValue = number | string | undefined
-export type VariantValue = Record<string, RNValue>
-export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue> & {
-    variants: VariantValue
-}
-export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery | 'variants', RNValue | VariantValue]>
+export type NestedStyle = Record<keyof UnistylesBreakpoints | MediaQuery, RNValue>
+export type NestedStylePairs = Array<[keyof UnistylesBreakpoints | MediaQuery, RNValue]>
 export type UnistylesTheme = UnistylesThemes[keyof UnistylesThemes]
 export type CreateStylesFactory<ST, Theme> = (theme: Theme) => ST

package/src/types/index.ts

@@ -2,5 +2,16 @@ export * from './normalizer'
 export * from './unistyles'
 export type { Optional, Nullable } from './common'
 export type { MediaQuery } from './mq'
-export type { CustomNamedStyles, NestedStylePairs, UnistylesTheme, CreateStylesFactory, ScreenSize, NestedStyle, RNValue } from './core'
+export type {
+    CustomNamedStyles,
+    NestedStylePairs,
+    UnistylesTheme,
+    CreateStylesFactory,
+    ScreenSize,
+    NestedStyle,
+    RNValue,
+    RNStyle
+} from './core'
 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/unistyles.ts

@@ -2,17 +2,21 @@ import { CxxUnistylesEventTypes, ScreenOrientation } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './core'
 import type { Optional } from './common'
+import type { UnistylesPlugin } from './plugin'
 
 export type ColorSchemeName = Optional<'light' | 'dark'>
 
 export type UnistylesConfig = {
-    adaptiveThemes?: boolean
+    adaptiveThemes?: boolean,
+    experimentalPlugins?: Array<UnistylesPlugin>,
+    initialTheme?: keyof UnistylesThemes
 }
 
 export type UnistylesBridge = {
     // getters
     screenWidth: number,
     screenHeight: number,
+    enabledPlugins: Array<string>,
     hasAdaptiveThemes: boolean,
     themeName: keyof UnistylesThemes,
     breakpoint: keyof UnistylesBreakpoints,
@@ -23,7 +27,9 @@ export type UnistylesBridge = {
     themes: Array<keyof UnistylesThemes>,
     useBreakpoints(breakpoints: UnistylesBreakpoints): void,
     useTheme(name: keyof UnistylesThemes): void,
-    useAdaptiveThemes(enable: boolean): void
+    useAdaptiveThemes(enable: boolean): void,
+    addPlugin(pluginName: string, notify: boolean): void,
+    removePlugin(pluginName: string): void
 }
 
 export type UnistylesThemeEvent = {
@@ -38,8 +44,12 @@ export type UnistylesMobileLayoutEvent = {
     payload: {
         screen: ScreenSize,
         breakpoint: keyof UnistylesBreakpoints,
-        orientation: ScreenOrientation
+        orientation: typeof ScreenOrientation[keyof typeof ScreenOrientation]
     }
 }
 
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent
+export type UnistylesPluginEvent = {
+    type: CxxUnistylesEventTypes.Plugin
+}
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent

package/src/types/variants.ts

@@ -0,0 +1,11 @@
+export type ExtractVariantNames<T> = T extends object
+    ? {
+        [K in keyof T]: T[K] extends { variants: infer V }
+            ? V extends object
+                ?  { [VK in keyof V]: VK extends 'default'
+                    ? never : VK }[keyof V] | ExtractVariantNames<V>
+                : never
+            : ExtractVariantNames<T[K]>
+    }[keyof T]
+    : never
+

package/src/useStyles.ts

@@ -1,7 +1,13 @@
 import { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction } from './utils'
-import type { CreateStylesFactory, CustomNamedStyles, ReactNativeStyleSheet, UnistylesTheme } from './types'
+import type {
+    CreateStylesFactory,
+    CustomNamedStyles,
+    ExtractVariantNames,
+    ReactNativeStyleSheet,
+    UnistylesTheme
+} from './types'
 import { useUnistyles } from './hooks'
 import type { UnistylesBreakpoints } from './global'
 
@@ -13,9 +19,9 @@ type ParsedStylesheet<ST extends CustomNamedStyles<ST>> = {
 
 export const useStyles = <ST extends CustomNamedStyles<ST>>(
     stylesheet?: ST | CreateStylesFactory<ST, UnistylesTheme>,
-    variant?: string
+    variant?: ExtractVariantNames<typeof stylesheet> & string
 ): ParsedStylesheet<ST> => {
-    const { theme, layout } = useUnistyles()
+    const { theme, layout, plugins } = useUnistyles()
     const { screenSize, breakpoint } = layout
 
     if (!stylesheet) {
@@ -38,15 +44,15 @@ export const useStyles = <ST extends CustomNamedStyles<ST>>(
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(value, breakpoint, screenSize, variant)
+                    [key]: proxifyFunction(key, value, breakpoint, screenSize, variant)
                 }
             }
 
             return StyleSheet.create({
                 ...acc,
-                [key]: parseStyle<ST>(style, breakpoint, screenSize, variant)
+                [key]: parseStyle<ST>(key, style, breakpoint, screenSize, variant)
             })
-        }, {} as ST), [breakpoint, screenSize, parsedStyles, variant]) as ReactNativeStyleSheet<ST>
+        }, {} as ST), [breakpoint, screenSize, parsedStyles, variant, plugins]) as ReactNativeStyleSheet<ST>
 
     return {
         theme,

package/src/utils/breakpoints.ts

@@ -1,62 +1,10 @@
 import { unistyles } from '../core'
-import { isMobile, Orientation, throwError } from './common'
-import type { NestedStyle, NestedStylePairs, RNValue } from '../types'
+import type { NestedStyle, NestedStylePairs, Optional, RNValue } from '../types'
 import type { UnistylesBreakpoints } from '../global'
-import { ScreenOrientation } from '../common'
+import { ScreenOrientation, isMobile } from '../common'
 import { getKeyForUnistylesMediaQuery } from './mqParser'
-import { getKeyForVariant } from './variants'
 
-export const sortAndValidateBreakpoints = (breakpoints: UnistylesBreakpoints): UnistylesBreakpoints => {
-    const sortedPairs = Object
-        .entries(breakpoints)
-        .sort((breakpoint1, breakpoint2) => {
-            const [, value1] = breakpoint1
-            const [, value2] = breakpoint2
-
-            return (value1 as number) - (value2 as number)
-        })
-
-    const sortedBreakpoints =  Object.freeze(Object.fromEntries(sortedPairs)) as UnistylesBreakpoints
-    const breakpointValues = Object.values(sortedBreakpoints)
-    const [firstBreakpoint] = breakpointValues
-
-    if (firstBreakpoint !== 0) {
-        throwError('first breakpoint must start with 0')
-    }
-
-    if (breakpointValues.length !== new Set(breakpointValues).size) {
-        throwError('breakpoint values are duplicated')
-    }
-
-    return sortedBreakpoints
-}
-
-export const getBreakpointFromScreenWidth = (width: number, breakpointEntries: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>): keyof UnistylesBreakpoints & string => {
-    const [key] = breakpointEntries
-        .find(([, value], index, otherBreakpoints) => {
-            const minVal = value as number
-            const maxVal = otherBreakpoints[index + 1]?.[1]
-
-            if (!maxVal) {
-                return true
-            }
-
-            return width >= minVal && width < maxVal
-        }) as [keyof UnistylesBreakpoints & string, number]
-
-    return key
-}
-
-// todo move it to different file
-export const getValueForNestedStyle = (value: NestedStyle, variant?: string): RNValue => {
-    // the highest priority is for variants
-    const variantKey = getKeyForVariant(value, variant)
-
-    if (variantKey) {
-        return value.variants[variantKey as string]
-    }
-
-    // then custom media queries
+export const getValueForBreakpoint = (value: NestedStyle): Optional<RNValue> => {
     const customMediaQueryKey = getKeyForUnistylesMediaQuery(
         Object.entries(value) as NestedStylePairs,
         unistyles.runtime.screen
@@ -66,44 +14,31 @@ export const getValueForNestedStyle = (value: NestedStyle, variant?: string): RN
         return value[customMediaQueryKey]
     }
 
-    // at this point user didn't use custom media queries (:w, :h)
-    // check if user defined any breakpoints
-    const hasBreakpoints = unistyles.runtime.sortedBreakpoints.length > 0
+    const hasBreakpoints = unistyles.registry.sortedBreakpointPairs.length > 0
 
-    // if not then we can fall back to horizontal and portrait (mobile only)
-    if (!hasBreakpoints && isMobile && (Orientation.Landscape in value || Orientation.Portrait in value)) {
-        return value[
-            unistyles.runtime.orientation === ScreenOrientation.Portrait
-                ? Orientation.Portrait
-                : Orientation.Landscape
-        ]
+    if (!hasBreakpoints && isMobile && (ScreenOrientation.Landscape in value || ScreenOrientation.Portrait in value)) {
+        return value[unistyles.runtime.orientation]
     }
 
-    // let's get the current breakpoint
     const breakpoint = unistyles.runtime.breakpoint
 
     if (!breakpoint) {
         return undefined
     }
 
-    // if user defined breakpoints, then we look for the valid one
     const directBreakpoint = value[breakpoint]
 
-    // if there is a direct key like 'sm' or 'md', or value for this key exists but its undefined
     if (directBreakpoint || (breakpoint in value)) {
         return directBreakpoint
     }
 
-    // there is no direct hit for breakpoint nor media-query, let's simulate CSS cascading
-    const breakpointPairs = unistyles.runtime.sortedBreakpoints
-    const currentBreakpoint = breakpointPairs
+    const breakpointPairs = unistyles.registry.sortedBreakpointPairs
+    const currentBreakpointIndex = breakpointPairs
         .findIndex(([key]) => key === breakpoint)
 
     const availableBreakpoints = breakpointPairs
-        .filter(([key], index) => index < currentBreakpoint && key && key in value)
+        .filter(([key], index) => index < currentBreakpointIndex && key in value)
         .map(([key]) => key)
 
-    return breakpointPairs.length > 0
-        ? value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
-        : undefined
+    return value[availableBreakpoints[availableBreakpoints.length - 1] as keyof UnistylesBreakpoints & string]
 }

package/src/utils/index.ts

@@ -1,8 +1,5 @@
-export { normalizeStyles } from './normalizeStyles'
-export * from './normalizer'
 export { mq, MQSymbol } from './mq'
 export { getKeyForVariant } from './variants'
-export { getKeyForUnistylesMediaQuery } from './mqParser'
-export { getBreakpointFromScreenWidth, sortAndValidateBreakpoints, getValueForNestedStyle } from './breakpoints'
+export { getKeyForUnistylesMediaQuery, isWithinTheWidthAndHeight, isValidMq, parseMq } from './mqParser'
+export { getValueForBreakpoint } from './breakpoints'
 export { proxifyFunction, parseStyle } from './styles'
-export { isServer, Orientation } from './common'

package/src/utils/mq.ts

@@ -78,7 +78,7 @@ const heightHandler = (wMin: Nullable<MQValue> = 0, wMax: MQValue = Infinity) =>
         if (prop === MQProp.height || prop === MQProp.shortH) {
             return (hMin: MQValue = 0, hMax: MQValue = Infinity) => new Proxy<FinalHandler>({} as FinalHandler, {
                 get: (target, prop, receiver) => {
-                    if (prop === Symbol.toPrimitive || MQProp.toString) {
+                    if (prop === Symbol.toPrimitive || prop === MQProp.toString) {
                         return () => `:w[${getMQValue(wMin)}, ${getMQValue(wMax)}]:h[${getMQValue(hMin)}, ${getMQValue(hMax)}]`
                     }
 

package/src/utils/mqParser.ts

@@ -14,7 +14,7 @@ type UnistylesParsedMq = {
     height?: ParsedMqDimension
 }
 
-const parseMq = (mq: string): UnistylesParsedMq => {
+export const parseMq = (mq: string): UnistylesParsedMq => {
     const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
     const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
 
@@ -32,7 +32,7 @@ const parseMq = (mq: string): UnistylesParsedMq => {
 
 const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)
 
-const isValidMq = (parsedMq: UnistylesParsedMq) => {
+export const isValidMq = (parsedMq: UnistylesParsedMq) => {
     const { width, height } = parsedMq
 
     if (width && height) {
@@ -50,7 +50,7 @@ const isValidMq = (parsedMq: UnistylesParsedMq) => {
     return false
 }
 
-const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
+export const isWithinTheWidthAndHeight = (parsedMq: UnistylesParsedMq, screenSize: ScreenSize): boolean => {
     const { width, height } = parsedMq
 
     if (width && height) {
@@ -80,7 +80,7 @@ const isWithinTheHeight = (height: UnistylesParsedMq['height'], screenHeight: nu
     return screenHeight >= from && screenHeight <= to
 }
 
-export const getKeyForUnistylesMediaQuery = (mediaQueries: NestedStylePairs, screenSize: ScreenSize) => {
+export const getKeyForUnistylesMediaQuery = (mediaQueries: NestedStylePairs, screenSize: ScreenSize): Optional<string> => {
     const mq = mediaQueries.find(([key]) => {
         if (!isUnistylesMq(key as string)) {
             return false