react-native-unistyles 2.0.0-beta.1 → 2.0.0-beta.3

package/lib/typescript/src/utils/mqParser.d.ts

@@ -3,11 +3,12 @@ type ParsedMqDimension = {
     from: number;
     to: number;
 };
-type UnistylesParsedMq = {
+export type UnistylesParsedMq = {
     width?: ParsedMqDimension;
     height?: ParsedMqDimension;
 };
 export declare const parseMq: (mq: string) => UnistylesParsedMq;
+export declare const isUnistylesMq: (mq: string) => boolean;
 export declare const isValidMq: (parsedMq: UnistylesParsedMq) => boolean;
 export declare const isWithinTheWidthAndHeight: (parsedMq: UnistylesParsedMq, screenSize: ScreenSize) => boolean;
 export declare const getKeyForUnistylesMediaQuery: (mediaQueries: Array<[string, RNValue]>, screenSize: ScreenSize) => Optional<string>;

package/lib/typescript/src/utils/mqParser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mqParser.d.ts","sourceRoot":"","sources":["../../../../src/utils/mqParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM7D,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAA;CACb,CAAA;AAED,KAAK,iBAAiB,GAAG;IACrB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,iBAcpC,CAAA;AAID,eAAO,MAAM,SAAS,aAAc,iBAAiB,YAgBpD,CAAA;AAED,eAAO,MAAM,yBAAyB,aAAc,iBAAiB,cAAc,UAAU,KAAG,OAgB/F,CAAA;AAcD,eAAO,MAAM,4BAA4B,iBAAkB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,cAAc,UAAU,KAAG,SAAS,MAAM,CAgB5H,CAAA"}
+{"version":3,"file":"mqParser.d.ts","sourceRoot":"","sources":["../../../../src/utils/mqParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM7D,KAAK,iBAAiB,GAAG;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAA;CACb,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC5B,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,MAAM,CAAC,EAAE,iBAAiB,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,iBAcpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA;AAExE,eAAO,MAAM,SAAS,aAAc,iBAAiB,YAgBpD,CAAA;AAED,eAAO,MAAM,yBAAyB,aAAc,iBAAiB,cAAc,UAAU,KAAG,OAgB/F,CAAA;AAcD,eAAO,MAAM,4BAA4B,iBAAkB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,cAAc,UAAU,KAAG,SAAS,MAAM,CAgB5H,CAAA"}

package/lib/typescript/src/utils/styles.d.ts

@@ -1,5 +1,5 @@
 import type { Optional, RNStyle } from '../types';
 export declare const proxifyFunction: (key: string, fn: Function, variant?: Record<string, Optional<string>>) => Function;
 export declare const isPlatformColor: <T extends {}>(value: T) => boolean;
-export declare const parseStyle: <T extends RNStyle>(style: T, variant?: Record<string, Optional<string>>) => T;
+export declare const parseStyle: <T extends RNStyle>(style: T, variant?: Record<string, Optional<string>>, parseMediaQueries?: boolean) => T;
 //# sourceMappingURL=styles.d.ts.map

package/lib/typescript/src/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAW,MAAM,UAAU,CAAA;AAK1D,eAAO,MAAM,eAAe,QACnB,MAAM,MACP,QAAQ,YACF,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,KAC3C,QAED,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,0CAEV,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,MAyC9B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAW,MAAM,UAAU,CAAA;AAK1D,eAAO,MAAM,eAAe,QACnB,MAAM,MACP,QAAQ,YACF,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,KAC3C,QAED,CAAA;AAEF,eAAO,MAAM,eAAe,8BAA6B,OAMxD,CAAA;AAED,eAAO,MAAM,UAAU,0CAEV,OAAO,MAAM,EAAE,SAAS,MAAM,CAAC,CAAC,mCAkD9B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -144,7 +144,8 @@
   },
   "eslintIgnore": [
     "node_modules/",
-    "lib/"
+    "lib/",
+    "src/utils/hash32.ts"
   ],
   "react-native-builder-bob": {
     "source": "src",

package/src/core/UnistyleRegistry.ts

@@ -1,7 +1,7 @@
 import type { UnistylesBridge, UnistylesConfig, UnistylesPlugin } from '../types'
 import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { isWeb, UnistylesError } from '../common'
-import { normalizeWebStylesPlugin } from '../plugins'
+import { cssMediaQueriesPlugin, normalizeWebStylesPlugin } from '../plugins'
 
 export class UnistyleRegistry {
     public config: UnistylesConfig = {}
@@ -47,14 +47,19 @@ export class UnistyleRegistry {
             this.unistylesBridge.useAdaptiveThemes(config.adaptiveThemes)
         }
 
-        if (config.experimentalPlugins) {
-            config.experimentalPlugins.forEach(plugin => this.addPlugin(plugin, false))
+        if (config.plugins) {
+            config.plugins.forEach(plugin => this.addPlugin(plugin, false))
         }
 
         if (config.initialTheme) {
             this.unistylesBridge.useTheme(config.initialTheme)
         }
 
+        if (config.experimentalCSSMediaQueries) {
+            this.plugins = [cssMediaQueriesPlugin].concat(this.plugins)
+            this.unistylesBridge.addPlugin(cssMediaQueriesPlugin.name, false)
+        }
+
         return {
             addBreakpoints: this.addBreakpoints,
             addThemes: this.addThemes

package/src/core/Unistyles.ts

@@ -2,7 +2,7 @@ import { UnistylesModule } from './UnistylesModule'
 import { UnistylesRuntime } from './UnistylesRuntime'
 import { UnistyleRegistry } from './UnistyleRegistry'
 import type { UnistylesBridge } from '../types'
-import { UnistylesError } from '../common'
+import { UnistylesError, isWeb } from '../common'
 
 class Unistyles {
     private _runtime: UnistylesRuntime
@@ -17,7 +17,7 @@ class Unistyles {
         }
 
         // @ts-ignore
-        this._bridge = global.__UNISTYLES__ as UnistylesBridge
+        this._bridge = (isWeb ? window : global).__UNISTYLES__ as UnistylesBridge
         this._registry = new UnistyleRegistry(this._bridge)
         this._runtime = new UnistylesRuntime(this._bridge, this._registry)
     }

package/src/core/UnistylesModule.web.ts

@@ -0,0 +1,218 @@
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
+import type { ColorSchemeName } from '../types'
+import { normalizeWebStylesPlugin } from '../plugins'
+
+export class UnistylesBridgeWeb {
+    #timerRef?: ReturnType<typeof setTimeout> = undefined
+    #hasAdaptiveThemes: boolean = false
+    #supportsAutomaticColorScheme = false
+    #screenWidth: number = window.innerWidth
+    #screenHeight: number = window.innerHeight
+    #themes: Array<keyof UnistylesThemes> = []
+    #breakpoints: UnistylesBreakpoints = {} as UnistylesBreakpoints
+    #colorScheme: ColorSchemeName = this.getPreferredColorScheme()
+    #themeName: keyof UnistylesThemes = '' as keyof UnistylesThemes
+    #enabledPlugins: Array<string> = [normalizeWebStylesPlugin.name]
+    #unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
+    #sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, number]> = []
+    #breakpoint: keyof UnistylesBreakpoints = '' as keyof UnistylesBreakpoints
+
+    constructor() {
+        this.setupListeners()
+    }
+
+    public install() {
+        // @ts-ignore
+        window.__UNISTYLES__ = new Proxy({}, {
+            get: (_target, prop) => {
+                switch (prop) {
+                    case 'themeName':
+                        return this.getTheme()
+                    case 'screenWidth':
+                        return this.#screenWidth
+                    case 'screenHeight':
+                        return this.#screenHeight
+                    case 'breakpoint':
+                        return this.#breakpoint || undefined
+                    case 'breakpoints':
+                        return this.#breakpoints
+                    case 'hasAdaptiveThemes':
+                        return this.#hasAdaptiveThemes
+                    case 'sortedBreakpointPairs':
+                        return this.#sortedBreakpointPairs
+                    case 'enabledPlugins':
+                        return this.#enabledPlugins
+                    case 'colorScheme':
+                        return this.#colorScheme
+                    case 'useTheme':
+                        return (themeName: keyof UnistylesThemes) => this.useTheme(themeName)
+                    case 'useBreakpoints':
+                        return (breakpoints: UnistylesBreakpoints) => this.useBreakpoints(breakpoints)
+                    case 'useAdaptiveThemes':
+                        return (enable: boolean) => this.useAdaptiveThemes(enable)
+                    case 'addPlugin':
+                        return (pluginName: string, notify: boolean) => this.addPlugin(pluginName, notify)
+                    case 'removePlugin':
+                        return (pluginName: string) => this.removePlugin(pluginName)
+                    default:
+                        return Reflect.get(this, prop)
+                }
+            },
+            set: (target, prop, newValue, receiver) => {
+                switch (prop) {
+                    case 'themes': {
+                        this.#themes = newValue
+                        this.#supportsAutomaticColorScheme = newValue.includes('light') && newValue.includes('dark')
+
+                        return true
+                    }
+                    case 'themeName': {
+                        this.#themeName = newValue as keyof UnistylesThemes
+                        this.emitThemeChange()
+
+                        return true
+                    }
+                    default:
+                        return Reflect.set(target, prop, newValue, receiver)
+                }
+            }
+        })
+
+        return true
+    }
+
+    private useTheme(themeName: keyof UnistylesThemes) {
+        this.#themeName = themeName
+        this.emitThemeChange()
+    }
+
+    private useBreakpoints(breakpoints: UnistylesBreakpoints) {
+        this.#breakpoints = breakpoints
+        this.#sortedBreakpointPairs = Object
+            .entries(breakpoints)
+            .sort(([, a], [, b]) => (a ?? 0) - (b ?? 0)) as Array<[keyof UnistylesBreakpoints, number]>
+        this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
+    }
+
+    private useAdaptiveThemes(enable: boolean) {
+        this.#hasAdaptiveThemes = enable
+
+        if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
+            return
+        }
+
+        if (this.#themeName !== this.#colorScheme) {
+            this.#themeName = this.#colorScheme as keyof UnistylesThemes
+            this.emitThemeChange()
+        }
+    }
+
+    private addPlugin(pluginName: string, notify: boolean) {
+        this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins)
+
+        if (notify) {
+            this.emitPluginChange()
+        }
+    }
+
+    private removePlugin(pluginName: string) {
+        this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName)
+        this.emitPluginChange()
+    }
+
+    private getTheme(): keyof UnistylesThemes {
+
+        if (this.#themes.length === 1) {
+            return this.#themes.at(0) as keyof UnistylesThemes
+        }
+
+        return this.#themeName
+    }
+
+    private setupListeners() {
+        window.addEventListener('resize', () => {
+            clearTimeout(this.#timerRef)
+
+            this.#timerRef = setTimeout(() => {
+                this.#screenWidth = window.innerWidth
+                this.#screenHeight = window.innerHeight
+                this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth)
+
+                this.emitLayoutChange()
+            }, 100)
+        })
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            this.#colorScheme = event.matches
+                ? 'dark'
+                : 'light'
+
+            if (!this.#supportsAutomaticColorScheme || !this.#hasAdaptiveThemes) {
+                return
+            }
+
+            if (this.#colorScheme !== this.#themeName) {
+                this.#themeName = this.#colorScheme as keyof UnistylesThemes
+                this.emitThemeChange()
+            }
+        })
+    }
+
+    private getBreakpointFromScreenWidth(width: number): keyof UnistylesBreakpoints {
+        const breakpoint = this.#sortedBreakpointPairs
+            .find(([, value], index, otherBreakpoints) => {
+                const minVal = value
+                const maxVal = otherBreakpoints[index + 1]?.[1]
+
+                if (!maxVal) {
+                    return true
+                }
+
+                return width >= minVal && width < maxVal
+            })
+
+        return breakpoint?.at(0) as keyof UnistylesBreakpoints
+    }
+
+    private getPreferredColorScheme() {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            return 'dark'
+        }
+
+        return 'light'
+    }
+
+    private emitPluginChange() {
+        this.#unistylesEvents.emit('__unistylesOnChange', {
+            type: 'plugin'
+        })
+    }
+
+    private emitThemeChange() {
+        this.#unistylesEvents.emit('__unistylesOnChange', {
+            type: 'theme',
+            payload: {
+                themeName: this.#themeName
+            }
+        })
+    }
+
+    private emitLayoutChange() {
+        this.#unistylesEvents.emit('__unistylesOnChange', {
+            type: 'layout',
+            payload: {
+                breakpoint: this.#breakpoint,
+                orientation: this.#screenWidth > this.#screenHeight
+                    ? 'landscape'
+                    : 'portrait',
+                screen: {
+                    width: this.#screenWidth,
+                    height: this.#screenHeight
+                }
+            }
+        })
+    }
+}
+
+export const UnistylesModule = new UnistylesBridgeWeb()

package/src/core/UnistylesRuntime.ts

@@ -22,6 +22,10 @@ export class UnistylesRuntime {
         return this.unistylesBridge.breakpoint
     }
 
+    public get breakpoints() {
+        return this.unistylesRegistry.breakpoints
+    }
+
     public get enabledPlugins() {
         return this.unistylesBridge.enabledPlugins
     }

package/src/hooks/index.ts

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

package/src/hooks/useCSS.ts

@@ -0,0 +1,3 @@
+import type { ReactNativeStyleSheet } from '../types'
+
+export const useCSS = <T>(_stylesheet: ReactNativeStyleSheet<T>): void => {}

package/src/hooks/useCSS.web.ts

@@ -0,0 +1,51 @@
+import { useInsertionEffect, useRef } from 'react'
+import { unistyles } from '../core'
+import type { ReactNativeStyleSheet } from '../types'
+import { generateReactNativeWebId } from '../utils'
+
+export const useCSS = <T>(stylesheet: ReactNativeStyleSheet<T>) => {
+    const insertedIds = useRef<Array<string>>([])
+
+    useInsertionEffect(() => {
+        if (!unistyles.registry.config.experimentalCSSMediaQueries) {
+            return
+        }
+
+        Object
+            .entries(stylesheet)
+            .forEach(([_key, value]) => {
+                Object.entries(value!)
+                    .forEach(([prop, val]) => {
+                        if (!val.toString().includes('@media')) {
+                            return
+                        }
+
+                        const id = generateReactNativeWebId(prop, '""')
+
+                        if (insertedIds.current.includes(id)) {
+                            return
+                        }
+
+                        const style = document.createElement('style')
+
+                        style.id = id
+                        style.innerHTML = val
+
+                        document.head.appendChild(style)
+                        insertedIds.current = [...insertedIds.current, id]
+                    })
+            })
+
+        return () => {
+            insertedIds.current.forEach(id => {
+                const style = document.getElementById(id)
+
+                if (style) {
+                    style.remove()
+                }
+            })
+
+            insertedIds.current = []
+        }
+    }, [stylesheet])
+}

package/src/hooks/useUnistyles.ts

@@ -20,7 +20,7 @@ export const useUnistyles = () => {
 
     useEffect(() => {
         const subscription = unistylesEvents.addListener(
-            'onChange',
+            '__unistylesOnChange',
             (event: UnistylesEvents) => {
                 switch (event.type) {
                     case UnistylesEventType.Theme: {

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

@@ -1,6 +1,6 @@
 import { preprocessor } from './normalizer'
-import { warn } from '../../common'
-import type { NormalizedBoxShadow, NormalizedTextShadow, BoxShadow, TextShadow, RNStyle } 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 = [

package/src/{plugins/normalizer → 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, Nullable } from '../../types'
+import type { TextShadow, Transforms, BoxShadow, Nullable } from '../types'
 
 type Preprocessor = {
     createTextShadowValue(style: TextShadow): string,
@@ -37,6 +37,7 @@ export const normalizeColor = (color: string, opacity: number = 1) => {
 }
 
 export const normalizeNumericValue = (value: number) => value ? `${value}px` : value
+
 const normalizeTransform = (key: string, value: number | string) => {
     if (key.includes('scale')) {
         return value

package/src/plugins/cssMediaQueriesPlugin.ts

@@ -0,0 +1,8 @@
+// prevent recursive import
+import { createMediaQueryForStyles } from '../utils/cssMediaQuery'
+import type { UnistylesPlugin } from '../types'
+
+export const cssMediaQueriesPlugin: UnistylesPlugin = {
+    name: '__unistylesCSSMediaQueries',
+    onParsedStyle: (_key, styles, runtime) => createMediaQueryForStyles(styles, runtime)
+}

package/src/plugins/index.ts

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

package/src/plugins/normalizeWebStylesPlugin.ts

@@ -1,5 +1,5 @@
 import type { UnistylesPlugin } from '../types'
-import { normalizeStyle } from './normalizer'
+import { normalizeStyle } from '../normalizer'
 
 export const normalizeWebStylesPlugin: UnistylesPlugin = {
     name: '__unistylesNormalizeWebStyles',

package/src/types/unistyles.ts

@@ -7,8 +7,9 @@ export type ColorSchemeName = 'light' | 'dark' | 'unspecified'
 
 export type UnistylesConfig = {
     adaptiveThemes?: boolean,
-    experimentalPlugins?: Array<UnistylesPlugin>,
-    initialTheme?: keyof UnistylesThemes
+    initialTheme?: keyof UnistylesThemes,
+    plugins?: Array<UnistylesPlugin>,
+    experimentalCSSMediaQueries?: boolean
 }
 
 export type UnistylesBridge = {

package/src/useStyles.ts

@@ -1,9 +1,11 @@
 import { useMemo } from 'react'
 import { StyleSheet } from 'react-native'
 import { parseStyle, proxifyFunction, withPlugins } from './utils'
-import { useUnistyles, useVariants } from './hooks'
+import { useCSS, useUnistyles, useVariants } from './hooks'
 import type { UnistylesBreakpoints } from './global'
 import type { ExtractVariantNames, ReactNativeStyleSheet, StyleSheetWithSuperPowers, UnistylesTheme } from './types'
+import { unistyles } from './core'
+import { isWeb } from './common'
 
 type ParsedStylesheet<ST extends StyleSheetWithSuperPowers> = {
     theme: UnistylesTheme,
@@ -33,11 +35,17 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
 
             return StyleSheet.create({
                 ...acc,
-                [key]: withPlugins(key, parseStyle(value, variants))
+                [key]: withPlugins(key, parseStyle(
+                    value,
+                    variants,
+                    !isWeb || !unistyles.registry.config.experimentalCSSMediaQueries)
+                )
             })
         }, {}), [parsedStyles, variants, plugins]
     )
 
+    useCSS(dynamicStyleSheet as ReactNativeStyleSheet<ST>)
+
     return {
         theme,
         breakpoint: layout.breakpoint,