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

package/src/core/UnistylesModule.ts

@@ -1,7 +1,230 @@
-import { NativeModules } from 'react-native'
+import { NativeEventEmitter, NativeModules } from 'react-native'
+import type { UnistylesThemes, UnistylesBreakpoints } from 'react-native-unistyles'
+import type { ColorSchemeName } from '../types'
+import { normalizeWebStylesPlugin } from '../plugins'
+import { isServer } from '../common'
 
-type UnistylesNativeModule = {
-    install(): boolean
+export class UnistylesBridgeWeb {
+    #timerRef?: ReturnType<typeof setTimeout> = undefined
+    #hasAdaptiveThemes: boolean = false
+    #supportsAutomaticColorScheme = false
+    #screenWidth = isServer ? undefined : window.innerWidth
+    #screenHeight = isServer ? undefined : 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
+    #contentSizeCategory: string = 'unspecified'
+
+    constructor() {
+        if (!isServer) {
+            this.setupListeners()
+            this.#screenWidth = window.innerWidth
+            this.#screenHeight = window.innerHeight
+        }
+    }
+
+    public install() {
+        // @ts-ignore
+        // eslint-disable-next-line no-undef
+        globalThis.__UNISTYLES__ = new Proxy({}, {
+            get: (_target, prop) => {
+                switch (prop) {
+                    case 'themeName':
+                        return this.getTheme()
+                    case 'screenWidth':
+                        return this.#screenWidth
+                    case 'screenHeight':
+                        return this.#screenHeight
+                    case 'contentSizeCategory':
+                        return this.#contentSizeCategory
+                    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]>
+
+        if (!isServer) {
+            this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth as number)
+        }
+    }
+
+    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 (!isServer && 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 as number) > (this.#screenHeight as number)
+                    ? 'landscape'
+                    : 'portrait',
+                screen: {
+                    width: this.#screenWidth,
+                    height: this.#screenHeight
+                }
+            }
+        })
+    }
 }
 
-export const UnistylesModule = NativeModules?.Unistyles as UnistylesNativeModule
+export const UnistylesModule = new UnistylesBridgeWeb()

package/src/core/UnistylesRuntime.ts

@@ -33,6 +33,14 @@ export class UnistylesRuntime {
         return this.unistylesBridge.themeName
     }
 
+    /**
+     * Get the current content size category
+     * @returns - The current content size category
+     */
+    public get contentSizeCategory() {
+        return this.unistylesBridge.contentSizeCategory
+    }
+
     /**
      * Get the current breakpoint based on device size
      * @returns - The current breakpoint

package/src/hooks/useCSS.native.ts

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

package/src/hooks/useCSS.ts

@@ -1,3 +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>): void => {}
+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

@@ -2,13 +2,14 @@ import { NativeEventEmitter, NativeModules } from 'react-native'
 import { useEffect, useState } from 'react'
 import { unistyles } from '../core'
 import { UnistylesEventType } from '../common'
-import type { UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
+import type { UnistylesDynamicTypeSizeEvent, UnistylesEvents, UnistylesMobileLayoutEvent, UnistylesThemeEvent } from '../types'
 
 const unistylesEvents = new NativeEventEmitter(NativeModules.Unistyles)
 
 export const useUnistyles = () => {
     const [plugins, setPlugins] = useState(unistyles.runtime.enabledPlugins)
     const [theme, setTheme] = useState(unistyles.registry.getTheme(unistyles.runtime.themeName))
+    const [contentSizeCategory, setContentSizeCategory] = useState(unistyles.runtime.contentSizeCategory)
     const [layout, setLayout] = useState({
         breakpoint: unistyles.runtime.breakpoint,
         orientation: unistyles.runtime.orientation,
@@ -40,6 +41,11 @@ export const useUnistyles = () => {
                     case UnistylesEventType.Plugin: {
                         return setPlugins(unistyles.runtime.enabledPlugins)
                     }
+                    case UnistylesEventType.DynamicTypeSize: {
+                        const dynamicTypeSizeEvent = event as UnistylesDynamicTypeSizeEvent
+
+                        return setContentSizeCategory(dynamicTypeSizeEvent.payload.contentSizeCategory)
+                    }
                     default:
                         return
                 }
@@ -52,6 +58,7 @@ export const useUnistyles = () => {
     return {
         plugins,
         theme,
-        layout
+        layout,
+        contentSizeCategory
     }
 }

package/src/index.ts

@@ -3,7 +3,7 @@ import { mq } from './utils'
 import { useInitialTheme } from './hooks'
 import type { UnistylesPlugin } from './types'
 import type { UnistylesThemes, UnistylesBreakpoints } from './global'
-import { ScreenOrientation } from './common'
+import { ScreenOrientation, AndroidContentSizeCategory, IOSContentSizeCategory } from './common'
 import { useStyles } from './useStyles'
 import { createStyleSheet } from './createStyleSheet'
 
@@ -37,6 +37,8 @@ export {
     useInitialTheme,
     createStyleSheet,
     ScreenOrientation,
+    AndroidContentSizeCategory,
+    IOSContentSizeCategory,
     UnistylesRegistry,
     UnistylesRuntime
 }

package/src/types/unistyles.ts

@@ -1,4 +1,4 @@
-import { UnistylesEventType, ScreenOrientation } from '../common'
+import { UnistylesEventType, ScreenOrientation, IOSContentSizeCategory, AndroidContentSizeCategory } from '../common'
 import type { UnistylesThemes, UnistylesBreakpoints } from '../global'
 import type { ScreenSize } from './core'
 import type { UnistylesPlugin } from './plugin'
@@ -21,6 +21,7 @@ export type UnistylesBridge = {
     themeName: keyof UnistylesThemes,
     breakpoint: keyof UnistylesBreakpoints,
     colorScheme: ColorSchemeName,
+    contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory,
     sortedBreakpointPairs: Array<[keyof UnistylesBreakpoints, UnistylesBreakpoints[keyof UnistylesBreakpoints]]>,
 
     // setters
@@ -52,4 +53,11 @@ export type UnistylesPluginEvent = {
     type: UnistylesEventType.Plugin
 }
 
-export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent
+export type UnistylesDynamicTypeSizeEvent = {
+    type: UnistylesEventType.DynamicTypeSize,
+    payload: {
+        contentSizeCategory: IOSContentSizeCategory | AndroidContentSizeCategory
+    }
+}
+
+export type UnistylesEvents = UnistylesThemeEvent | UnistylesMobileLayoutEvent | UnistylesPluginEvent | UnistylesDynamicTypeSizeEvent

package/src/useStyles.ts

@@ -35,7 +35,7 @@ export const useStyles = <ST extends StyleSheetWithSuperPowers>(
             if (typeof value === 'function') {
                 return {
                     ...acc,
-                    [key]: proxifyFunction(key, value)
+                    [key]: proxifyFunction(key, value, variants)
                 }
             }
 

package/lib/commonjs/core/UnistylesModule.web.js

@@ -1,199 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UnistylesModule = exports.UnistylesBridgeWeb = void 0;
-var _reactNative = require("react-native");
-var _plugins = require("../plugins");
-var _common = require("../common");
-class UnistylesBridgeWeb {
-  #timerRef = undefined;
-  #hasAdaptiveThemes = false;
-  #supportsAutomaticColorScheme = false;
-  #screenWidth = _common.isServer ? undefined : window.innerWidth;
-  #screenHeight = _common.isServer ? undefined : window.innerHeight;
-  #themes = [];
-  #breakpoints = {};
-  #colorScheme = this.getPreferredColorScheme();
-  #themeName = '';
-  #enabledPlugins = [_plugins.normalizeWebStylesPlugin.name];
-  #unistylesEvents = new _reactNative.NativeEventEmitter(_reactNative.NativeModules.Unistyles);
-  #sortedBreakpointPairs = [];
-  #breakpoint = '';
-  constructor() {
-    if (!_common.isServer) {
-      this.setupListeners();
-      this.#screenWidth = window.innerWidth;
-      this.#screenHeight = window.innerHeight;
-    }
-  }
-  install() {
-    // @ts-ignore
-    // eslint-disable-next-line no-undef
-    globalThis.__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 => this.useTheme(themeName);
-          case 'useBreakpoints':
-            return breakpoints => this.useBreakpoints(breakpoints);
-          case 'useAdaptiveThemes':
-            return enable => this.useAdaptiveThemes(enable);
-          case 'addPlugin':
-            return (pluginName, notify) => this.addPlugin(pluginName, notify);
-          case 'removePlugin':
-            return pluginName => 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;
-              this.emitThemeChange();
-              return true;
-            }
-          default:
-            return Reflect.set(target, prop, newValue, receiver);
-        }
-      }
-    });
-    return true;
-  }
-  useTheme(themeName) {
-    this.#themeName = themeName;
-    this.emitThemeChange();
-  }
-  useBreakpoints(breakpoints) {
-    this.#breakpoints = breakpoints;
-    this.#sortedBreakpointPairs = Object.entries(breakpoints).sort((_ref, _ref2) => {
-      let [, a] = _ref;
-      let [, b] = _ref2;
-      return (a ?? 0) - (b ?? 0);
-    });
-    if (!_common.isServer) {
-      this.#breakpoint = this.getBreakpointFromScreenWidth(this.#screenWidth);
-    }
-  }
-  useAdaptiveThemes(enable) {
-    this.#hasAdaptiveThemes = enable;
-    if (!this.#hasAdaptiveThemes || !this.#supportsAutomaticColorScheme) {
-      return;
-    }
-    if (this.#themeName !== this.#colorScheme) {
-      this.#themeName = this.#colorScheme;
-      this.emitThemeChange();
-    }
-  }
-  addPlugin(pluginName, notify) {
-    this.#enabledPlugins = [pluginName].concat(this.#enabledPlugins);
-    if (notify) {
-      this.emitPluginChange();
-    }
-  }
-  removePlugin(pluginName) {
-    this.#enabledPlugins = this.#enabledPlugins.filter(name => name !== pluginName);
-    this.emitPluginChange();
-  }
-  getTheme() {
-    if (this.#themes.length === 1) {
-      return this.#themes.at(0);
-    }
-    return this.#themeName;
-  }
-  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;
-        this.emitThemeChange();
-      }
-    });
-  }
-  getBreakpointFromScreenWidth(width) {
-    const breakpoint = this.#sortedBreakpointPairs.find((_ref3, index, otherBreakpoints) => {
-      let [, value] = _ref3;
-      const minVal = value;
-      const maxVal = otherBreakpoints[index + 1]?.[1];
-      if (!maxVal) {
-        return true;
-      }
-      return width >= minVal && width < maxVal;
-    });
-    return breakpoint?.at(0);
-  }
-  getPreferredColorScheme() {
-    if (!_common.isServer && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  }
-  emitPluginChange() {
-    this.#unistylesEvents.emit('__unistylesOnChange', {
-      type: 'plugin'
-    });
-  }
-  emitThemeChange() {
-    this.#unistylesEvents.emit('__unistylesOnChange', {
-      type: 'theme',
-      payload: {
-        themeName: this.#themeName
-      }
-    });
-  }
-  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
-        }
-      }
-    });
-  }
-}
-exports.UnistylesBridgeWeb = UnistylesBridgeWeb;
-const UnistylesModule = exports.UnistylesModule = new UnistylesBridgeWeb();
-//# sourceMappingURL=UnistylesModule.web.js.map

package/lib/commonjs/core/UnistylesModule.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNative","require","_plugins","_common","UnistylesBridgeWeb","timerRef","undefined","hasAdaptiveThemes","supportsAutomaticColorScheme","screenWidth","isServer","window","innerWidth","screenHeight","innerHeight","themes","breakpoints","colorScheme","getPreferredColorScheme","themeName","enabledPlugins","normalizeWebStylesPlugin","name","unistylesEvents","NativeEventEmitter","NativeModules","Unistyles","sortedBreakpointPairs","breakpoint","constructor","setupListeners","install","globalThis","__UNISTYLES__","Proxy","get","_target","prop","getTheme","useTheme","useBreakpoints","enable","useAdaptiveThemes","pluginName","notify","addPlugin","removePlugin","Reflect","set","target","newValue","receiver","includes","emitThemeChange","Object","entries","sort","_ref","_ref2","a","b","getBreakpointFromScreenWidth","concat","emitPluginChange","filter","length","at","addEventListener","clearTimeout","setTimeout","emitLayoutChange","matchMedia","event","matches","width","find","_ref3","index","otherBreakpoints","value","minVal","maxVal","emit","type","payload","orientation","screen","height","exports","UnistylesModule"],"sourceRoot":"../../../src","sources":["core/UnistylesModule.web.ts"],"mappings":"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"}

package/lib/commonjs/hooks/useCSS.web.js

@@ -1,46 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useCSS = void 0;
-var _react = require("react");
-var _core = require("../core");
-var _utils = require("../utils");
-const useCSS = stylesheet => {
-  const insertedIds = (0, _react.useRef)([]);
-  (0, _react.useInsertionEffect)(() => {
-    if (!_core.unistyles.registry.config.experimentalCSSMediaQueries) {
-      return;
-    }
-    Object.entries(stylesheet).forEach(_ref => {
-      let [_key, value] = _ref;
-      Object.entries(value).forEach(_ref2 => {
-        let [prop, val] = _ref2;
-        if (!val.toString().includes('@media')) {
-          return;
-        }
-        const id = (0, _utils.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]);
-};
-exports.useCSS = useCSS;
-//# sourceMappingURL=useCSS.web.js.map

package/lib/commonjs/hooks/useCSS.web.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","_core","_utils","useCSS","stylesheet","insertedIds","useRef","useInsertionEffect","unistyles","registry","config","experimentalCSSMediaQueries","Object","entries","forEach","_ref","_key","value","_ref2","prop","val","toString","includes","id","generateReactNativeWebId","current","style","document","createElement","innerHTML","head","appendChild","getElementById","remove","exports"],"sourceRoot":"../../../src","sources":["hooks/useCSS.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,MAAA,GAAAF,OAAA;AAEO,MAAMG,MAAM,GAAOC,UAAoC,IAAK;EAC/D,MAAMC,WAAW,GAAG,IAAAC,aAAM,EAAgB,EAAE,CAAC;EAE7C,IAAAC,yBAAkB,EAAC,MAAM;IACrB,IAAI,CAACC,eAAS,CAACC,QAAQ,CAACC,MAAM,CAACC,2BAA2B,EAAE;MACxD;IACJ;IAEAC,MAAM,CACDC,OAAO,CAACT,UAAU,CAAC,CACnBU,OAAO,CAACC,IAAA,IAAmB;MAAA,IAAlB,CAACC,IAAI,EAAEC,KAAK,CAAC,GAAAF,IAAA;MACnBH,MAAM,CAACC,OAAO,CAACI,KAAM,CAAC,CACjBH,OAAO,CAACI,KAAA,IAAiB;QAAA,IAAhB,CAACC,IAAI,EAAEC,GAAG,CAAC,GAAAF,KAAA;QACjB,IAAI,CAACE,GAAG,CAACC,QAAQ,CAAC,CAAC,CAACC,QAAQ,CAAC,QAAQ,CAAC,EAAE;UACpC;QACJ;QAEA,MAAMC,EAAE,GAAG,IAAAC,+BAAwB,EAACL,IAAI,EAAE,IAAI,CAAC;QAE/C,IAAId,WAAW,CAACoB,OAAO,CAACH,QAAQ,CAACC,EAAE,CAAC,EAAE;UAClC;QACJ;QAEA,MAAMG,KAAK,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;QAE7CF,KAAK,CAACH,EAAE,GAAGA,EAAE;QACbG,KAAK,CAACG,SAAS,GAAGT,GAAG;QAErBO,QAAQ,CAACG,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;QAChCrB,WAAW,CAACoB,OAAO,GAAG,CAAC,GAAGpB,WAAW,CAACoB,OAAO,EAAEF,EAAE,CAAC;MACtD,CAAC,CAAC;IACV,CAAC,CAAC;IAEN,OAAO,MAAM;MACTlB,WAAW,CAACoB,OAAO,CAACX,OAAO,CAACS,EAAE,IAAI;QAC9B,MAAMG,KAAK,GAAGC,QAAQ,CAACK,cAAc,CAACT,EAAE,CAAC;QAEzC,IAAIG,KAAK,EAAE;UACPA,KAAK,CAACO,MAAM,CAAC,CAAC;QAClB;MACJ,CAAC,CAAC;MAEF5B,WAAW,CAACoB,OAAO,GAAG,EAAE;IAC5B,CAAC;EACL,CAAC,EAAE,CAACrB,UAAU,CAAC,CAAC;AACpB,CAAC;AAAA8B,OAAA,CAAA/B,MAAA,GAAAA,MAAA"}