react-native-unistyles 3.0.0-alpha.3 → 3.0.0-alpha.31

package/src/web/convert/textShadow.js

@@ -0,0 +1,56 @@
+import { deepMergeObjects, warn } from '../utils';
+import { validateShadow } from './shadow';
+import { TEXT_SHADOW_STYLES } from './types';
+import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
+const createTextShadowValue = (style) => {
+    const { textShadowColor, textShadowOffset, textShadowRadius } = style;
+    const offsetX = normalizeNumericValue(textShadowOffset.width);
+    const offsetY = normalizeNumericValue(textShadowOffset.height);
+    const radius = normalizeNumericValue(textShadowRadius);
+    const color = normalizeColor(textShadowColor);
+    return `${offsetX} ${offsetY} ${radius} ${color}`;
+};
+export const getTextShadowStyle = (styles) => {
+    const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles));
+    if (missingStyles.length) {
+        warn(`can't apply text shadow as you miss these properties: ${missingStyles.join(', ')}`);
+        return {};
+    }
+    const breakpointsSet = new Set();
+    try {
+        validateShadow(TEXT_SHADOW_STYLES, styles, breakpointsSet);
+    }
+    catch (error) {
+        if (typeof error === 'string') {
+            warn(error);
+        }
+        return {};
+    }
+    const breakpoints = Array.from(breakpointsSet);
+    // If no breakpoints were used return styles without media queries
+    if (breakpoints.length === 0) {
+        return {
+            textShadow: createTextShadowValue(styles)
+        };
+    }
+    // Create textShadow for each breakpoint
+    const breakpointStyles = breakpoints.map(breakpoint => {
+        const color = extractShadowValue('textShadowColor', breakpoint, styles);
+        const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles);
+        const radius = extractShadowValue('textShadowRadius', breakpoint, styles);
+        return {
+            [breakpoint]: {
+                textShadow: createTextShadowValue({
+                    textShadowColor: color,
+                    textShadowOffset: {
+                        width,
+                        height
+                    },
+                    textShadowRadius: radius
+                })
+            }
+        };
+    });
+    // Merge all breakpoints styles into one
+    return deepMergeObjects(...breakpointStyles);
+};

package/{web → src/web}/convert/textShadow.ts

@@ -1,8 +1,5 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import { deepMergeObjects, warn } from '../utils'
 import { validateShadow } from './shadow'
-import { convertBreakpoint } from './breakpoint'
 import { TEXT_SHADOW_STYLES, type TextShadow } from './types'
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils'
 
@@ -16,7 +13,7 @@ const createTextShadowValue = (style: TextShadow) => {
     return `${offsetX} ${offsetY} ${radius} ${color}`
 }
 
-export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProperties => {
+export const getTextShadowStyle = (styles: Record<string, any>) => {
     const missingStyles = TEXT_SHADOW_STYLES.filter(key => !(key in styles))
 
     if (missingStyles.length) {
@@ -52,16 +49,18 @@ export const getTextShadowStyle = (styles: Record<string, any>): NestedCSSProper
         const { width, height } = extractShadowValue('textShadowOffset', breakpoint, styles)
         const radius = extractShadowValue('textShadowRadius', breakpoint, styles)
 
-        return media(convertBreakpoint(breakpoint), {
-            textShadow: createTextShadowValue({
-                textShadowColor: color,
-                textShadowOffset: {
-                    width,
-                    height
-                },
-                textShadowRadius: radius
-            })
-        })
+        return {
+            [breakpoint]: {
+                textShadow: createTextShadowValue({
+                    textShadowColor: color,
+                    textShadowOffset: {
+                        width,
+                        height
+                    },
+                    textShadowRadius: radius
+                })
+            }
+        }
     })
 
     // Merge all breakpoints styles into one

package/src/web/convert/transform.js

@@ -0,0 +1,65 @@
+import { deepMergeObjects, keyInObject } from '../utils';
+import { normalizeNumericValue } from './utils';
+const normalizeTransform = (key, value) => {
+    if (key.includes('scale')) {
+        return value;
+    }
+    if (typeof value === 'number') {
+        return normalizeNumericValue(value);
+    }
+    return value;
+};
+const createTransformValue = (transforms) => transforms
+    .map(transform => {
+    const [key] = Object.keys(transform);
+    if (!key) {
+        return undefined;
+    }
+    const value = transform[key];
+    switch (key) {
+        case 'matrix':
+        case 'matrix3d':
+            return `${key}(${value.join(',')})`;
+        default:
+            return `${key}(${normalizeTransform(key, value)})`;
+    }
+})
+    .filter(Boolean)
+    .join(' ');
+export const getTransformStyle = (transforms) => {
+    const breakpoints = new Set();
+    const normalTransforms = [];
+    transforms.forEach(transform => {
+        const [property] = Object.keys(transform);
+        if (!property) {
+            return;
+        }
+        const value = transform[property];
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            Object.keys(value).forEach(breakpoint => breakpoints.add(breakpoint));
+            return;
+        }
+        normalTransforms.push(transform);
+    });
+    const breakpointTransforms = Array.from(breakpoints).flatMap(breakpoint => {
+        const transformsPerBreakpoint = transforms.flatMap(transform => {
+            const [property] = Object.keys(transform);
+            if (!property) {
+                return [];
+            }
+            const value = transform[property];
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                return keyInObject(value, breakpoint) ? [{ [property]: value[breakpoint] }] : [];
+            }
+            return [];
+        });
+        return [{
+                [breakpoint]: {
+                    transform: createTransformValue(transformsPerBreakpoint)
+                }
+            }];
+    });
+    return deepMergeObjects({
+        transform: createTransformValue(normalTransforms)
+    }, ...breakpointTransforms);
+};

package/{web → src/web}/convert/transform.ts

@@ -1,8 +1,5 @@
-import { media } from 'typestyle'
-import type { NestedCSSProperties } from 'typestyle/lib/types'
 import { deepMergeObjects, keyInObject } from '../utils'
 import { normalizeNumericValue } from './utils'
-import { convertBreakpoint } from './breakpoint'
 
 type Transforms = Array<Record<string, any>>
 
@@ -39,7 +36,7 @@ const createTransformValue = (transforms: Transforms) => transforms
     .filter(Boolean)
     .join(' ')
 
-export const getTransformStyle = (transforms: Transforms): NestedCSSProperties => {
+export const getTransformStyle = (transforms: Transforms) => {
     const breakpoints = new Set<string>()
     const normalTransforms: Transforms = []
 
@@ -78,12 +75,14 @@ export const getTransformStyle = (transforms: Transforms): NestedCSSProperties =
             return []
         })
 
-        return media(convertBreakpoint(breakpoint), {
-            transform: createTransformValue(transformsPerBreakpoint)
-        })
+        return [{
+            [breakpoint]: {
+                transform: createTransformValue(transformsPerBreakpoint)
+            }
+        }]
     })
 
-    return deepMergeObjects({
+    return deepMergeObjects<Record<string, any>>({
         transform: createTransformValue(normalTransforms)
     }, ...breakpointTransforms)
 }

package/src/web/convert/types.js

@@ -0,0 +1,2 @@
+export const TEXT_SHADOW_STYLES = ['textShadowColor', 'textShadowOffset', 'textShadowRadius'];
+export const BOX_SHADOW_STYLES = ['shadowColor', 'shadowRadius', 'shadowOpacity', 'shadowOffset'];

package/{web → src/web}/convert/types.ts

@@ -1,5 +1,5 @@
 import type { TextStyle, ViewStyle } from 'react-native'
-import type { ToDeepUnistyles } from '../../src/types/stylesheet'
+import type { ToDeepUnistyles } from '../../types/stylesheet'
 
 export type ShadowOffset = ToDeepUnistyles<{ width: number, height: number }>
 

package/src/web/convert/utils.js

@@ -0,0 +1,39 @@
+// 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

@@ -0,0 +1,36 @@
+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/create.ts

@@ -0,0 +1,47 @@
+import type { ReactNativeStyleSheet } from '../types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
+import { assignSecrets, reduceObject, getStyles, deepMergeObjects } from './utils'
+import { UnistylesRuntime } from './runtime'
+import { createUseVariants, getVariants } from './variants'
+
+export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
+    const computedStylesheet = typeof stylesheet === 'function'
+        ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
+        : stylesheet
+    const selectedVariants = new Map<string, any>()
+
+    const copyVariants = () => Object.fromEntries(selectedVariants.entries())
+    const addSecrets = (value: any, key: string, args?: Array<any>) => 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: Array<any>) => {
+                const result = value(...args)
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, 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)
+    }) as ReactNativeStyleSheet<StyleSheet>
+
+    // 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

@@ -0,0 +1,22 @@
+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/{web → src/web}/index.ts

@@ -1,5 +1,4 @@
 import { create } from './create'
-import { UnistylesRuntime } from './runtime'
 import { UnistylesState } from './state'
 import { deepMergeObjects } from './utils'
 
@@ -19,6 +18,8 @@ export const StyleSheet = {
 }
 
 export { UnistylesRuntime } from './runtime'
+export { UnistylesShadowRegistry } from './shadowRegistry'
 export * from './mock'
 
-export const getSSRUnistyles = () => UnistylesRuntime.getSSRUnistyles()
+// TODO: Work on SSR
+export const getSSRUnistyles = () => []

package/src/web/listener.js

@@ -0,0 +1,26 @@
+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/{web/listener → src/web}/listener.ts

@@ -1,7 +1,7 @@
-import { UnistyleDependency } from '../../src/specs/NativePlatform'
-import { UnistylesRuntime } from '../runtime'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { UnistylesRuntime } from './runtime'
 
-export class UnistylesListenerBuilder {
+class UnistylesListenerBuilder {
     private isInitialized = false
     private listeners = Array.from({ length: Object.keys(UnistyleDependency).length / 2 }, () => new Set<VoidFunction>())
 

package/src/web/mock.js

@@ -0,0 +1,21 @@
+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/{web → src/web}/mock.ts

@@ -1,5 +1,5 @@
-import type { UnistylesNavigationBar as NavigationBarSpec } from '../src/specs/NavigtionBar'
-import type { UnistylesStatusBar as StatusBarSpec } from '../src/specs/StatusBar'
+import type { UnistylesNavigationBar as NavigationBarSpec } from '../specs/NavigtionBar'
+import type { UnistylesStatusBar as StatusBarSpec } from '../specs/StatusBar'
 
 export const StatusBar: StatusBarSpec = {
     width: 0,
@@ -23,13 +23,3 @@ export const NavigationBar: NavigationBarSpec = {
     __type: 'web',
     name: 'NavigationBar'
 }
-
-export const UnistylesShadowRegistry = {
-    name: 'UnistylesShadowRegistry',
-    __type: 'web',
-    equals: () => true,
-    toString: () => 'UnistylesShadowRegistry',
-    dispose: () => {},
-    add: () => {},
-    remove: () => {},
-}

package/src/web/mq.js

@@ -0,0 +1,14 @@
+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/{web → src/web}/mq.ts

@@ -1,10 +1,8 @@
-import type { MediaQuery } from 'typestyle/lib/types'
-
 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): MediaQuery => {
+export const parseMq = (mq: string) => {
     const [, width, fromW, toW] = UNISTYLES_WIDTH_REGEX.exec(mq) || []
     const [, height, fromH, toH] = UNISTYLES_HEIGHT_REGEX.exec(mq) || []
 

package/src/web/registry.js

@@ -0,0 +1,165 @@
+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();