react-native-unistyles 3.0.0-alpha.33 → 3.0.0-alpha.34

package/src/web/convert/utils.js

@@ -1,39 +0,0 @@
-// based on react-native-web normalizer
-// https://github.com/necolas/react-native-web
-import normalizeColors from '@react-native/normalize-colors';
-import { BOX_SHADOW_STYLES, TEXT_SHADOW_STYLES } from './types';
-export const isTransform = (key, value) => key === 'transform' && Array.isArray(value);
-export const isTextShadow = (key) => TEXT_SHADOW_STYLES.includes(key);
-export const isBoxShadow = (key) => BOX_SHADOW_STYLES.includes(key);
-export const normalizeNumericValue = (value) => value ? `${value}px` : value;
-export const normalizeColor = (color, opacity = 1) => {
-    // If the opacity is 1 there's no need to normalize the color
-    if (opacity === 1) {
-        return color;
-    }
-    const integer = normalizeColors(color);
-    // If the color is an unknown format, the return value is null
-    if (integer === null) {
-        return color;
-    }
-    const hex = integer.toString(16).padStart(8, '0');
-    if (hex.length === 8) {
-        const [r = 0, g = 0, b = 0, a = 1] = hex
-            .split(/(?=(?:..)*$)/)
-            .map(x => parseInt(x, 16))
-            .filter(num => !isNaN(num));
-        return `rgba(${r},${g},${b},${(a / 255) * opacity})`;
-    }
-    return color;
-};
-export const extractShadowValue = (key, breakpoint, styles) => {
-    const value = styles[key];
-    if (key === 'textShadowOffset' || key === 'shadowOffset') {
-        const { width, height } = value;
-        return {
-            width: typeof width === 'object' ? width[breakpoint] : width,
-            height: typeof height === 'object' ? height[breakpoint] : height
-        };
-    }
-    return typeof value === 'object' ? value[breakpoint] : value;
-};

package/src/web/create.js

@@ -1,36 +0,0 @@
-import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils';
-import { UnistylesRuntime } from './runtime';
-import { createUseVariants, getVariants } from './variants';
-export const create = (stylesheet) => {
-    const computedStylesheet = typeof stylesheet === 'function'
-        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
-        : stylesheet;
-    const selectedVariants = new Map();
-    const copyVariants = () => Object.fromEntries(selectedVariants.entries());
-    const addSecrets = (value, key, args) => assignSecrets(value, {
-        __uni__key: key,
-        __uni__refs: new Set(),
-        __uni__stylesheet: stylesheet,
-        __uni__args: args,
-        __uni__variants: copyVariants()
-    });
-    const styles = reduceObject(computedStylesheet, (value, _key) => {
-        const key = String(_key);
-        if (typeof value === 'function') {
-            const dynamicStyle = (...args) => {
-                const result = value(...args);
-                const variants = Object.fromEntries(getVariants({ [key]: result }, copyVariants()));
-                const resultWithVariants = deepMergeObjects(result, variants[key] ?? {});
-                // Add secrets to result of dynamic styles function
-                return addSecrets(getStyles(resultWithVariants), key, args);
-            };
-            // Add secrets to dynamic styles function
-            return addSecrets(dynamicStyle, key);
-        }
-        // Add secrets to static styles
-        return addSecrets(getStyles(value), key);
-    });
-    // Inject useVariants hook to styles
-    createUseVariants(styles, newVariants => Object.entries(newVariants).forEach(([key, value]) => selectedVariants.set(key, value)));
-    return styles;
-};

package/src/web/index.js

@@ -1,22 +0,0 @@
-import { create } from './create';
-import { UnistylesState } from './state';
-import { deepMergeObjects } from './utils';
-export const StyleSheet = {
-    configure: UnistylesState.init,
-    create,
-    absoluteFill: {
-        position: 'absolute',
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0,
-    },
-    compose: (a, b) => deepMergeObjects(a, b),
-    flatten: (...styles) => deepMergeObjects(...styles),
-    hairlineWidth: 1
-};
-export { UnistylesRuntime } from './runtime';
-export { UnistylesShadowRegistry } from './shadowRegistry';
-export * from './mock';
-// TODO: Work on SSR
-export const getSSRUnistyles = () => [];

package/src/web/listener.js

@@ -1,26 +0,0 @@
-import { UnistyleDependency } from '../specs/NativePlatform';
-import { UnistylesRuntime } from './runtime';
-class UnistylesListenerBuilder {
-    isInitialized = false;
-    listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set());
-    emitChange = (dependency) => {
-        this.listeners[dependency]?.forEach(listener => listener());
-    };
-    initListeners = () => {
-        if (this.isInitialized) {
-            return;
-        }
-        this.isInitialized = true;
-        UnistylesRuntime.darkMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
-        UnistylesRuntime.lightMedia?.addEventListener('change', () => this.emitChange(UnistyleDependency.ColorScheme));
-        window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation));
-        window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions));
-    };
-    addListeners = (dependencies, listener) => {
-        dependencies.forEach(dependency => this.listeners[dependency]?.add(listener));
-        return () => {
-            dependencies.forEach(dependency => this.listeners[dependency]?.delete(listener));
-        };
-    };
-}
-export const UnistylesListener = new UnistylesListenerBuilder();

package/src/web/mock.js

@@ -1,21 +0,0 @@
-export const StatusBar = {
-    width: 0,
-    height: 0,
-    setStyle: () => { },
-    setHidden: () => { },
-    setBackgroundColor: () => { },
-    equals: () => true,
-    toString: () => 'StatusBar',
-    __type: 'web',
-    name: 'StatusBar'
-};
-export const NavigationBar = {
-    width: 0,
-    height: 0,
-    setHidden: () => { },
-    setBackgroundColor: () => { },
-    equals: () => true,
-    toString: () => 'NavigationBar',
-    __type: 'web',
-    name: 'NavigationBar'
-};

package/src/web/mq.js

@@ -1,14 +0,0 @@
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/;
-export const parseMq = (mq) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || [];
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || [];
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    };
-};
-export const isUnistylesMq = (mq) => IS_UNISTYLES_REGEX.test(mq);

package/src/web/mq.ts

@@ -1,17 +0,0 @@
-const IS_UNISTYLES_REGEX = /:([hw])\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_WIDTH_REGEX = /:(w)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-const UNISTYLES_HEIGHT_REGEX = /:(h)\[(\d+)(?:,\s*(\d+|Infinity))?]/
-
-export const parseMq = (mq: string) => {
-    const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
-    const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
-
-    return {
-        minWidth: !width || fromW === 'Infinity' ? undefined : Number(fromW),
-        maxWidth: !width || toW === 'Infinity' ? undefined : Number(toW),
-        minHeight: !height || fromH === 'Infinity' ? undefined : Number(fromH),
-        maxHeight: !height || toH === 'Infinity' ? undefined : Number(toH),
-    }
-}
-
-export const isUnistylesMq = (mq: string) => IS_UNISTYLES_REGEX.test(mq)

package/src/web/registry.js

@@ -1,165 +0,0 @@
-import { UnistylesRuntime } from './runtime';
-import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies, deepMergeObjects } from './utils';
-import { UnistylesListener } from './listener';
-import { convertUnistyles } from './convert';
-import { getVariants } from './variants';
-class UnistylesRegistryBuilder {
-    stylesheets = new Map();
-    stylesCounter = new Map();
-    #styleTag = null;
-    disposeListenersMap = new Map();
-    dependenciesMap = new Map();
-    get styleTag() {
-        const tag = this.#styleTag;
-        if (!tag) {
-            const newTag = document.createElement('style');
-            newTag.id = 'unistyles-web';
-            this.#styleTag = newTag;
-            document.head.appendChild(newTag);
-            return newTag;
-        }
-        return tag;
-    }
-    getComputedStylesheet = (stylesheet) => {
-        if (typeof stylesheet !== 'function') {
-            return stylesheet;
-        }
-        const computedStylesheet = this.stylesheets.get(stylesheet);
-        if (computedStylesheet) {
-            return computedStylesheet;
-        }
-        const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
-        const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value));
-        this.addDependenciesToStylesheet(stylesheet, dependencies);
-        this.stylesheets.set(stylesheet, createdStylesheet);
-        return createdStylesheet;
-    };
-    addDependenciesToStylesheet = (stylesheet, dependencies) => {
-        this.disposeListenersMap.get(stylesheet)?.();
-        const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies);
-        dependencies.forEach(dependency => dependenciesMap.add(dependency));
-        const dispose = UnistylesListener.addListeners(Array.from(dependenciesMap), () => {
-            const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
-            this.stylesheets.set(stylesheet, newComputedStylesheet);
-        });
-        this.dependenciesMap.set(stylesheet, dependenciesMap);
-        this.disposeListenersMap.set(stylesheet, dispose);
-    };
-    add = ({ key, value, stylesheet, args, variants }) => {
-        const hash = generateHash(value);
-        const existingCounter = this.stylesCounter.get(hash);
-        if (!existingCounter || existingCounter.size === 0) {
-            const counter = new Set();
-            const dependencies = extractUnistyleDependencies(value);
-            counter.add(value);
-            this.stylesCounter.set(hash, counter);
-            this.applyStyles(hash, convertUnistyles(value));
-            UnistylesListener.addListeners(dependencies, async () => {
-                // Move this callback to the end of the event loop
-                await Promise.resolve();
-                const newComputedStyleSheet = this.getComputedStylesheet(stylesheet);
-                const newValue = newComputedStyleSheet[key];
-                const result = typeof newValue === 'function'
-                    ? newValue(...args)
-                    : newValue;
-                const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants));
-                const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
-                this.applyStyles(hash, convertUnistyles(resultWithVariants));
-            });
-            return hash;
-        }
-        existingCounter.add(value);
-        return hash;
-    };
-    applyStyles = (hash, styles) => {
-        Object.entries(styles).forEach(([key, value]) => {
-            if (!this.styleTag.sheet) {
-                return;
-            }
-            if (typeof value === 'object' && !key.startsWith('_')) {
-                const mediaQuery = getMediaQuery(key);
-                const cssRules = Array.from(this.styleTag.sheet.cssRules);
-                let queryRule = cssRules.find(rule => {
-                    if (!(rule instanceof CSSMediaRule)) {
-                        return false;
-                    }
-                    return rule.media.item(0)?.includes(mediaQuery);
-                }) ?? null;
-                if (!queryRule) {
-                    const mediaQueryValue = extractMediaQueryValue(mediaQuery);
-                    const ruleIndex = mediaQueryValue
-                        ? cssRules.reduce((acc, rule, ruleIndex) => {
-                            if (!(rule instanceof CSSMediaRule)) {
-                                return acc;
-                            }
-                            const ruleMediaQueryValue = extractMediaQueryValue(rule.conditionText);
-                            if (ruleMediaQueryValue === undefined) {
-                                return;
-                            }
-                            return ruleMediaQueryValue > mediaQueryValue ? ruleIndex : acc;
-                        }, cssRules.length)
-                        : undefined;
-                    queryRule = this.styleTag.sheet.cssRules.item(this.styleTag.sheet.insertRule(`@media ${mediaQuery} {.${hash} {}}`, ruleIndex));
-                }
-                if (queryRule instanceof CSSMediaRule) {
-                    Object.entries(value).forEach(([mqKey, mqValue]) => {
-                        this.applyRule({
-                            hash,
-                            key: mqKey,
-                            value: mqValue,
-                            sheet: queryRule
-                        });
-                    });
-                }
-                return;
-            }
-            // Pseudo
-            if (typeof value === 'object') {
-                Object.entries(value).forEach(([pseudoKey, pseudoValue]) => {
-                    this.applyRule({
-                        hash: `${hash}${key.replace('_', ':')}`,
-                        key: pseudoKey,
-                        value: pseudoValue,
-                        sheet: this.styleTag.sheet
-                    });
-                });
-                return;
-            }
-            this.applyRule({
-                hash,
-                key,
-                value,
-                sheet: this.styleTag.sheet
-            });
-        });
-    };
-    applyRule = ({ hash, key, value, sheet }) => {
-        let rule = Array.from(sheet.cssRules).find(rule => {
-            if (!(rule instanceof CSSStyleRule)) {
-                return false;
-            }
-            // In unistyles pseudos are prefixed with ':' but in css some of them are prefixed with '::'
-            return rule.selectorText.replace('::', ':').includes(hash);
-        }) ?? null;
-        if (!rule) {
-            rule = sheet.cssRules.item(sheet.insertRule(`.${hash} {}`));
-        }
-        if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
-            return;
-        }
-        rule.style[key] = value;
-    };
-    remove = (value) => {
-        const hash = generateHash(value);
-        const existingStyles = this.stylesCounter.get(hash);
-        if (!existingStyles) {
-            return;
-        }
-        existingStyles.delete(value);
-        if (existingStyles.size === 0) {
-            const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`));
-            this.styleTag.sheet?.deleteRule(ruleIndex);
-        }
-    };
-}
-export const UnistylesRegistry = new UnistylesRegistryBuilder();

package/src/web/runtime.js

@@ -1,160 +0,0 @@
-import { UnistyleDependency } from '../specs/NativePlatform';
-import { ColorScheme, Orientation } from '../specs/types';
-import { WebContentSizeCategory } from '../types';
-import { UnistylesListener } from './listener';
-import { NavigationBar, StatusBar } from './mock';
-import { UnistylesState } from './state';
-import { hexToRGBA, isServer, schemeToTheme } from './utils';
-class UnistylesRuntimeBuilder {
-    lightMedia = this.getLightMedia();
-    darkMedia = this.getDarkMedia();
-    getLightMedia() {
-        if (isServer()) {
-            return null;
-        }
-        if (!this.lightMedia) {
-            this.lightMedia = window.matchMedia('(prefers-color-scheme: light)');
-        }
-        return this.lightMedia;
-    }
-    getDarkMedia() {
-        if (isServer()) {
-            return null;
-        }
-        if (!this.darkMedia) {
-            this.darkMedia = window.matchMedia('(prefers-color-scheme: dark)');
-        }
-        return this.darkMedia;
-    }
-    get colorScheme() {
-        switch (true) {
-            case this.getLightMedia()?.matches:
-                return ColorScheme.Light;
-            case this.getDarkMedia()?.matches:
-                return ColorScheme.Dark;
-            default:
-                return ColorScheme.Unspecified;
-        }
-    }
-    get themeName() {
-        return UnistylesState.themeName;
-    }
-    get contentSizeCategory() {
-        return WebContentSizeCategory.Unspecified;
-    }
-    get breakpoint() {
-        return UnistylesState.breakpoint;
-    }
-    get orientation() {
-        if (isServer()) {
-            return Orientation.Portrait;
-        }
-        return screen.orientation.type.includes('portrait') ? Orientation.Portrait : Orientation.Landscape;
-    }
-    get theme() {
-        return this.getTheme(this.themeName);
-    }
-    get pixelRatio() {
-        return isServer() ? 1 : window.devicePixelRatio;
-    }
-    get screen() {
-        if (isServer()) {
-            return {
-                width: 0,
-                height: 0
-            };
-        }
-        return {
-            width: window.innerWidth,
-            height: window.innerHeight
-        };
-    }
-    get fontScale() {
-        return 1;
-    }
-    get insets() {
-        return {
-            top: 0,
-            bottom: 0,
-            left: 0,
-            right: 0,
-            ime: 0
-        };
-    }
-    get statusBar() {
-        return StatusBar;
-    }
-    get rtl() {
-        return isServer() ? true : document.documentElement.dir === 'rtl';
-    }
-    get hasAdaptiveThemes() {
-        return UnistylesState.hasAdaptiveThemes;
-    }
-    get navigationBar() {
-        return NavigationBar;
-    }
-    get miniRuntime() {
-        return {
-            colorScheme: this.colorScheme,
-            themeName: this.themeName,
-            contentSizeCategory: this.contentSizeCategory,
-            breakpoint: this.breakpoint,
-            isLandscape: this.orientation === Orientation.Landscape,
-            isPortrait: this.orientation === Orientation.Portrait,
-            pixelRatio: this.pixelRatio,
-            screen: this.screen,
-            fontScale: this.fontScale,
-            insets: this.insets,
-            statusBar: {
-                width: this.statusBar.width,
-                height: this.statusBar.height
-            },
-            navigationBar: {
-                width: this.navigationBar.width,
-                height: this.navigationBar.height,
-            },
-            rtl: this.rtl,
-            hasAdaptiveThemes: this.hasAdaptiveThemes
-        };
-    }
-    setTheme = (themeName) => {
-        if (themeName === UnistylesRuntime.themeName) {
-            return;
-        }
-        UnistylesState.themeName = themeName;
-        UnistylesListener.emitChange(UnistyleDependency.Theme);
-        UnistylesListener.emitChange(UnistyleDependency.ThemeName);
-    };
-    setAdaptiveThemes = (isEnabled) => {
-        UnistylesState.hasAdaptiveThemes = isEnabled;
-        if (!isEnabled) {
-            return;
-        }
-        this.setTheme(schemeToTheme(UnistylesRuntime.colorScheme));
-    };
-    setRootViewBackgroundColor = (hex, alpha) => {
-        if (isServer()) {
-            return;
-        }
-        document.documentElement.style.backgroundColor = alpha ? hexToRGBA(hex, alpha) : hex;
-    };
-    setImmersiveMode = () => { };
-    updateTheme = (themeName, updater) => {
-        const oldTheme = UnistylesState.themes.get(themeName);
-        if (!oldTheme) {
-            throw new Error(`🦄 Theme "${themeName}" is not registered!`);
-        }
-        UnistylesState.themes.set(themeName, updater(oldTheme));
-    };
-    getTheme = (themeName = this.themeName) => {
-        if (!themeName) {
-            throw new Error('🦄 No theme selected!');
-        }
-        const theme = UnistylesState.themes.get(themeName);
-        if (!theme) {
-            throw new Error(`🦄 Theme "${this.themeName}" is not registered!`);
-        }
-        return theme;
-    };
-}
-export const UnistylesRuntime = new UnistylesRuntimeBuilder();

package/src/web/shadowRegistry.js

@@ -1,96 +0,0 @@
-import { UnistylesRegistry } from './registry';
-import { createDoubleMap, deepMergeObjects, equal, extractSecrets, extractUnistyleDependencies, isInDocument } from './utils';
-import { getVariants } from './variants';
-class UnistylesShadowRegistryBuilder {
-    // MOCKS
-    name = 'UnistylesShadowRegistry';
-    __type = 'web';
-    equals = () => true;
-    toString = () => 'UnistylesShadowRegistry';
-    dispose = () => { };
-    // END MOCKS
-    resultsMap = createDoubleMap();
-    classNamesMap = createDoubleMap();
-    add = (ref, _style, _variants, _args) => {
-        // Style is not provided
-        if (!_style) {
-            return;
-        }
-        // Array of styles
-        if (Array.isArray(_style)) {
-            _style.forEach(style => this.add(ref, style, _variants, _args));
-            return;
-        }
-        // Not a unistyle
-        if (!Object.keys(_style).some(key => key.startsWith('__uni__'))) {
-            return;
-        }
-        // Ref is unmounted, remove style tags from the document
-        if (ref === null) {
-            const secrets = extractSecrets(_style);
-            secrets.forEach(({ __uni__refs, __uni__key }) => {
-                __uni__refs.forEach(ref => {
-                    if (isInDocument(ref)) {
-                        return;
-                    }
-                    const oldResult = this.resultsMap.get(ref, __uni__key);
-                    this.resultsMap.delete(ref, __uni__key);
-                    this.classNamesMap.delete(ref, __uni__key);
-                    if (oldResult) {
-                        UnistylesRegistry.remove(oldResult);
-                    }
-                });
-            });
-            return;
-        }
-        // Ref is not an HTMLElement
-        if (!(ref instanceof HTMLElement)) {
-            return;
-        }
-        extractSecrets(_style).forEach(secret => {
-            const { __uni__key, __uni__stylesheet, __uni__variants, __uni__args = [], __uni__refs } = secret;
-            const newComputedStylesheet = UnistylesRegistry.getComputedStylesheet(__uni__stylesheet);
-            const style = newComputedStylesheet[__uni__key];
-            const args = _args ?? __uni__args;
-            const variants = _variants && Object.keys(_variants).length > 0 ? _variants : __uni__variants;
-            const result = typeof style === 'function'
-                ? style(...args)
-                : style;
-            const { variantsResult } = Object.fromEntries(getVariants({ variantsResult: result }, variants));
-            const resultWithVariants = deepMergeObjects(result, variantsResult ?? {});
-            const oldResult = this.resultsMap.get(ref, __uni__key);
-            // If results are the same do nothing
-            if (equal(oldResult, resultWithVariants)) {
-                return;
-            }
-            const oldClassNames = this.classNamesMap.get(ref, __uni__key);
-            // Remove old styles
-            if (oldResult) {
-                UnistylesRegistry.remove(oldResult);
-            }
-            // Remove old classnames from the ref
-            oldClassNames?.forEach(className => ref.classList.remove(className));
-            this.resultsMap.set(ref, __uni__key, resultWithVariants);
-            const className = UnistylesRegistry.add({
-                key: __uni__key,
-                args,
-                stylesheet: __uni__stylesheet,
-                value: resultWithVariants,
-                variants
-            });
-            const injectedClassNames = resultWithVariants?._web?._classNames ?? [];
-            const newClassNames = injectedClassNames.concat(className);
-            const dependencies = extractUnistyleDependencies(resultWithVariants);
-            if (typeof __uni__stylesheet === 'function') {
-                // Add dependencies from dynamic styles to stylesheet
-                UnistylesRegistry.addDependenciesToStylesheet(__uni__stylesheet, dependencies);
-            }
-            __uni__refs.add(ref);
-            this.classNamesMap.set(ref, __uni__key, newClassNames);
-            // Add new classnames to the ref
-            ref.classList.add(...newClassNames);
-        });
-    };
-    remove = () => { };
-}
-export const UnistylesShadowRegistry = new UnistylesShadowRegistryBuilder();

package/src/web/state.js

@@ -1,68 +0,0 @@
-import { UnistylesRuntime } from './runtime';
-import { isServer, schemeToTheme } from './utils';
-import { UnistylesListener } from './listener';
-import { UnistyleDependency } from '../specs/NativePlatform';
-class UnistylesStateBuilder {
-    themes = new Map();
-    themeName;
-    matchingBreakpoints = new Map();
-    get breakpoint() {
-        const [currentBreakpoint] = Array.from(this.matchingBreakpoints)
-            .reverse()
-            .find(([_key, value]) => value) ?? [];
-        return currentBreakpoint;
-    }
-    breakpoints;
-    hasAdaptiveThemes = false;
-    init = (config) => {
-        this.initThemes(config.themes);
-        this.initBreakpoints(config.breakpoints);
-        this.initSettings(config.settings);
-        if (isServer()) {
-            return;
-        }
-        UnistylesListener.initListeners();
-    };
-    initThemes = (themes = {}) => {
-        Object.entries(themes).forEach(([themeName, theme]) => {
-            this.themes.set(themeName, theme);
-        });
-    };
-    initSettings = (settings) => {
-        this.hasAdaptiveThemes = settings?.adaptiveThemes ?? false;
-        const themeNames = Array.from(this.themes.keys());
-        // Single theme + no settings
-        if (!settings?.adaptiveThemes && !settings?.initialTheme && themeNames.length === 1) {
-            this.themeName = themeNames[0];
-            return;
-        }
-        // No settings
-        if (!settings?.adaptiveThemes && !settings?.initialTheme) {
-            throw new Error('🦄 You need to specify either "initialTheme" or "adaptiveThemes" in your config');
-        }
-        // Adaptive themes
-        if (settings.adaptiveThemes) {
-            this.themeName = schemeToTheme(UnistylesRuntime.colorScheme);
-            return;
-        }
-        // Initial theme
-        this.themeName = typeof settings.initialTheme === 'function' ? settings.initialTheme() : settings.initialTheme;
-    };
-    initBreakpoints = (breakpoints = {}) => {
-        this.breakpoints = breakpoints;
-        Object.entries(breakpoints)
-            .sort(([, a], [, b]) => a - b)
-            .forEach(([breakpoint, value]) => {
-            if (isServer()) {
-                return;
-            }
-            const mediaQuery = window.matchMedia(`(min-width: ${value}px)`);
-            this.matchingBreakpoints.set(breakpoint, mediaQuery.matches);
-            mediaQuery.addEventListener('change', event => {
-                this.matchingBreakpoints.set(breakpoint, event.matches);
-                UnistylesListener.emitChange(UnistyleDependency.Breakpoints);
-            });
-        });
-    };
-}
-export const UnistylesState = new UnistylesStateBuilder();