react-native-unistyles 3.0.0-alpha.7 → 3.0.0-alpha.8

package/plugin/ref.js

@@ -14,18 +14,24 @@ function hasStringRef(t, path) {
     )
 }
 
-function addRef(t, path, styleObj, styleProp, state) {
+function addRef(t, path, metadata, state) {
     const hasVariants = state.file.hasVariants
 
     const newRefFunction = t.arrowFunctionExpression(
         [t.identifier('ref')],
         t.blockStatement([
+            metadata.dynamicFunction ? t.expressionStatement(
+                t.callExpression(
+                    metadata.dynamicFunction.callee,
+                    metadata.dynamicFunction.arguments.concat(t.identifier('ref'))
+                )
+            ) : null,
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier('ref'),
-                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined')
                     ]
                 )
@@ -34,11 +40,11 @@ function addRef(t, path, styleObj, styleProp, state) {
                 t.arrowFunctionExpression([],
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                        [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                        [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                     )
                 )
             )
-        ])
+        ].filter(Boolean))
     )
 
     const newRefProp = t.jsxAttribute(
@@ -49,7 +55,7 @@ function addRef(t, path, styleObj, styleProp, state) {
     path.node.openingElement.attributes.push(newRefProp)
 }
 
-function overrideRef(t, path, refProp, styleObj, styleProp, state) {
+function overrideRef(t, path, refProp, metadata, state) {
     const hasVariants = state.file.hasVariants
     const uniqueRefName = path.scope.generateUidIdentifier('ref').name
     const isIdentifier = t.isIdentifier(refProp.value.expression)
@@ -68,13 +74,19 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                         t.identifier(uniqueRefName)
                     )
                 ),
+                metadata.dynamicFunction ? t.expressionStatement(
+                    t.callExpression(
+                        metadata.dynamicFunction.callee,
+                        metadata.dynamicFunction.arguments.concat(t.identifier(uniqueRefName))
+                    )
+                ) : null,
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
 
                         [
                             t.identifier(uniqueRefName),
-                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined')
                         ]
                     )
@@ -83,11 +95,11 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                     t.arrowFunctionExpression([],
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                         )
                     )
                 )
-            ])
+            ].filter(Boolean))
         )
 
         refProp.value = t.jsxExpressionContainer(newRefFunction)
@@ -108,12 +120,18 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
             [t.identifier('ref')],
             t.blockStatement([
                 ...userStatements.filter(statement => !t.isReturnStatement(statement)),
+                metadata.dynamicFunction ? t.expressionStatement(
+                    t.callExpression(
+                        metadata.dynamicFunction.callee,
+                        metadata.dynamicFunction.arguments.concat(t.identifier('ref'))
+                    )
+                ) : null,
                 t.expressionStatement(
                     t.callExpression(
                         t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                         [
                             t.identifier('ref'),
-                            t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                            t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
                             t.identifier(hasVariants ? '__uni__variants' : 'undefined')
                         ]
                     )
@@ -129,12 +147,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                         t.expressionStatement(
                             t.callExpression(
                                 t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                                [t.identifier('ref'), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                                [t.identifier('ref'), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                             )
                         )
                     ]))
                 )
-            ])
+            ].filter(Boolean))
         )
 
         refProp.value = t.jsxExpressionContainer(newRefFunction)
@@ -167,12 +185,18 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
             t.expressionStatement(
                 t.callExpression(userFunctionName, [t.identifier(uniqueRefName)])
             ),
+            metadata.dynamicFunction ? t.expressionStatement(
+                t.callExpression(
+                    metadata.dynamicFunction.callee,
+                    metadata.dynamicFunction.arguments.concat(t.identifier(uniqueRefName))
+                )
+            ) : null,
             t.expressionStatement(
                 t.callExpression(
                     t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('add')),
                     [
                         t.identifier(uniqueRefName),
-                        t.memberExpression(t.identifier(styleObj), t.identifier(styleProp)),
+                        t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp)),
                         t.identifier(hasVariants ? '__uni__variants' : 'undefined')
                     ]
                 )
@@ -187,12 +211,12 @@ function overrideRef(t, path, refProp, styleObj, styleProp, state) {
                     t.expressionStatement(
                         t.callExpression(
                             t.memberExpression(t.identifier('UnistylesShadowRegistry'), t.identifier('remove')),
-                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(styleObj), t.identifier(styleProp))]
+                            [t.identifier(uniqueRefName), t.memberExpression(t.identifier(metadata.styleObj), t.identifier(metadata.styleProp))]
                         )
                     )
                 ]))
             )
-        ])
+        ].filter(Boolean))
     )
 
     refProp.value = t.jsxExpressionContainer(newRefFunction)

package/plugin/style.js

@@ -1,27 +1,33 @@
-function getStyleObjectPath(t, node) {
+function getStyleMetadata(t, node, dynamicFunction = null) {
     // {styles.container}
     if (t.isMemberExpression(node)) {
-        return [node.object.name, node.property.name]
+        return [
+            {
+                styleObj: node.object.name,
+                styleProp: node.property.name,
+                dynamicFunction
+            }
+        ]
     }
 
     // [styles.container]
     if (t.isArrayExpression(node)) {
-        return node.elements.flatMap(element => getStyleObjectPath(t, element))
+        return node.elements.flatMap(element => getStyleMetadata(t, element))
     }
 
     // [...styles.container]
     if (t.isSpreadElement(node)) {
-        return getStyleObjectPath(t, node.argument)
+        return getStyleMetadata(t, node.argument)
     }
 
     // {{ ...styles.container }}
     if (t.isObjectExpression(node)) {
-        return node.properties.flatMap(prop => getStyleObjectPath(t, prop.argument))
+        return node.properties.flatMap(prop => getStyleMetadata(t, prop.argument))
     }
 
     // {styles.container(arg1, arg2)}
     if (t.isCallExpression(node)) {
-        return getStyleObjectPath(t, node.callee)
+        return getStyleMetadata(t, node.callee, node)
     }
 
     return []
@@ -36,6 +42,6 @@ function getStyleAttribute(t, path) {
 }
 
 module.exports = {
-    getStyleObjectPath,
+    getStyleMetadata,
     getStyleAttribute
 }

package/src/specs/index.web.ts

@@ -2,4 +2,4 @@ import type { ReactElement } from 'react'
 
 export const getSSRUnistyles = () => [] as Array<ReactElement>
 
-export * from '../../web'
+export * from '../web'

package/src/types/stylesheet.ts

@@ -5,7 +5,7 @@ import type { UnistylesMiniRuntime } from '../specs'
 import type { ReactNativeStyleSheet } from './breakpoints'
 import type { ExtractVariantNames } from './variants'
 import type { CSSProperties } from 'react'
-import type { Pseudo } from '../../web/pseudo'
+import type { Pseudo } from '../web/pseudo'
 
 // these props are treated differently to nest breakpoints and media queries
 type NestedKeys = 'shadowOffset' | 'transform' | 'textShadowOffset'

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

@@ -2,7 +2,7 @@ import type { MediaQuery } from 'typestyle/lib/types'
 import { UnistylesState } from '../state'
 import { keyInObject } from '../utils'
 import { isUnistylesMq, parseMq } from '../mq'
-import { Orientation } from '../../src/specs/types'
+import { Orientation } from '../../specs/types'
 
 export const convertBreakpoint = (breakpoint: string): MediaQuery => {
     if (Object.values(Orientation).includes(breakpoint as Orientation)) {

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

@@ -1,5 +1,5 @@
 import type { NestedCSSProperties } from 'typestyle/lib/types'
-import type { UnistylesValues } from '../../src/types'
+import type { UnistylesValues } from '../../types'
 import { media } from 'typestyle'
 import { isPseudo } from '../pseudo'
 import { convertBreakpoint } from './breakpoint'

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/{web → src/web}/create.ts

@@ -1,12 +1,12 @@
 import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet } from '../src/types'
-import type { StyleSheetWithSuperPowers, StyleSheet } from '../src/types/stylesheet'
+import type { ReactNativeStyleSheet } from '../types'
+import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet'
 import { UnistylesRegistry } from './registry'
 import { keyInObject, reduceObject, toReactNativeClassName } from './utils'
 import { UnistylesRuntime } from './runtime'
-import { createUseVariants } from './useVariants'
+import { createUseVariants, getVariants } from './variants'
 import { UnistylesListener } from './listener'
-import type { UnistyleDependency } from '../src/specs/NativePlatform'
+import type { UnistyleDependency } from '../specs/NativePlatform'
 
 type ListenToDependenciesProps = {
     value: StyleSheet[keyof StyleSheet],
@@ -16,10 +16,13 @@ type ListenToDependenciesProps = {
     args?: Array<any>
 }
 
+type WebUnistyle = ReturnType<typeof UnistylesRegistry.createStyles>
+
 export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
     const computedStylesheet = typeof stylesheet === 'function'
         ? stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime)
         : stylesheet
+    let lastlySelectedVariants: Record<string, any> = {}
 
     const listenToDependencies = ({ key, className, unistyles, value, args = [] } : ListenToDependenciesProps) => {
         const dependencies = ('uni__dependencies' in value ? value['uni__dependencies'] : []) as Array<UnistyleDependency>
@@ -48,44 +51,42 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
 
     const styles = reduceObject(computedStylesheet, (value, key) => {
         if (typeof value === 'function') {
-            const classNameMap = new Map<number, string>()
-            const unistylesMap = new Map<number, TypeStyle>()
-            const disposeMap = new Map<number, VoidFunction | undefined>()
+            const webUnistyleByRef = new Map<HTMLElement, WebUnistyle>()
+            const disposeByRef = new Map<HTMLElement, VoidFunction | undefined>()
 
             return (...args: Array<any>) => {
-                const [id] = args.slice(-1)
-                const result = value(...args.slice(0, -1))
-                const dispose = disposeMap.get(id)
-                const unistyles = unistylesMap.get(id)
-                const className = classNameMap.get(id)
-
-                if (unistyles && className && dispose) {
-                    dispose()
-                    UnistylesRegistry.updateStyles(unistyles, result, className)
-                    disposeMap.set(id, listenToDependencies({
+                const [ref] = args.slice(-1)
+                const result = value(...args)
+                const variants = Object.fromEntries(getVariants({ [key]: result } as ReactNativeStyleSheet<StyleSheet>, lastlySelectedVariants))
+                const resultWithVariants = {
+                    ...result,
+                    ...variants[key]
+                }
+
+                if (ref instanceof HTMLElement) {
+                    const storedWebUnistyle = webUnistyleByRef.get(ref)
+                    const webUnistyle = storedWebUnistyle ?? UnistylesRegistry.createStyles(resultWithVariants, key)
+
+                    webUnistyleByRef.set(ref, webUnistyle)
+                    disposeByRef.get(ref)?.()
+                    disposeByRef.set(ref, listenToDependencies({
                         key,
                         value,
-                        unistyles,
-                        className,
+                        unistyles: webUnistyle.unistyles,
+                        className: webUnistyle.className,
                         args
                     }))
+                    ref.classList.add(webUnistyle.className)
 
-                    return toReactNativeClassName(className, result)
-                }
+                    if (storedWebUnistyle) {
+                        UnistylesRegistry.updateStyles(webUnistyle.unistyles, resultWithVariants, webUnistyle.className)
+                    }
 
-                const entry = UnistylesRegistry.createStyles(result, key)
 
-                classNameMap.set(id, entry.className)
-                unistylesMap.set(id, entry.unistyles)
-                disposeMap.set(id, listenToDependencies({
-                    key,
-                    value,
-                    unistyles: entry.unistyles,
-                    className: entry.className,
-                    args
-                }))
+                    return
+                }
 
-                return toReactNativeClassName(entry.className, result)
+                return toReactNativeClassName(null, resultWithVariants)
             }
         }
 
@@ -96,7 +97,9 @@ export const create = (stylesheet: StyleSheetWithSuperPowers<StyleSheet>) => {
         return toReactNativeClassName(className, value)
     }) as ReactNativeStyleSheet<StyleSheet>
 
-    createUseVariants(styles)
+    createUseVariants(styles, newVariants => {
+        lastlySelectedVariants = newVariants
+    })
 
     return styles
 }

package/{web → src/web}/listener/listener.ts

@@ -1,4 +1,4 @@
-import { UnistyleDependency } from '../../src/specs/NativePlatform'
+import { UnistyleDependency } from '../../specs/NativePlatform'
 import { UnistylesRuntime } from '../runtime'
 
 export class UnistylesListenerBuilder {

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,

package/{web → src/web}/registry.ts

@@ -1,5 +1,5 @@
 import { createTypeStyle, TypeStyle } from 'typestyle'
-import type { UnistylesValues } from '../src/types'
+import type { UnistylesValues } from '../types'
 import { convertToTypeStyle } from './convert'
 import { UnistylesState } from './state'
 

package/{web → src/web}/runtime.ts

@@ -1,7 +1,7 @@
-import { UnistyleDependency } from '../src/specs/NativePlatform'
-import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../src/specs/types'
-import type { UnistylesMiniRuntime } from '../src/specs/UnistylesRuntime'
-import { WebContentSizeCategory } from '../src/types'
+import { UnistyleDependency } from '../specs/NativePlatform'
+import { ColorScheme, Orientation, type AppTheme, type AppThemeName } from '../specs/types'
+import type { UnistylesMiniRuntime } from '../specs/UnistylesRuntime'
+import { WebContentSizeCategory } from '../types'
 import { UnistylesListener } from './listener'
 import { NavigationBar, StatusBar } from './mock'
 import { UnistylesState } from './state'

package/{web → src/web}/state.ts

@@ -1,12 +1,12 @@
 import { type ReactElement, createElement, createRef } from 'react'
-import type { UnistylesTheme } from '../src/types'
-import type { UnistylesConfig } from '../src/specs/StyleSheet'
-import type { AppBreakpoint, AppThemeName } from '../src/specs/types'
-import type { UnistylesBreakpoints, UnistylesThemes } from '../src/global'
+import type { UnistylesTheme } from '../types'
+import type { UnistylesConfig } from '../specs/StyleSheet'
+import type { AppBreakpoint, AppThemeName } from '../specs/types'
+import type { UnistylesBreakpoints, UnistylesThemes } from '../global'
 import { UnistylesRuntime } from './runtime'
 import { isServer, schemeToTheme } from './utils'
 import { UnistylesListener } from './listener'
-import { UnistyleDependency } from '../src/specs/NativePlatform'
+import { UnistyleDependency } from '../specs/NativePlatform'
 
 class UnistylesStateBuilder {
     private readonly isSSR = isServer()

package/{web → src/web}/utils.ts

@@ -1,16 +1,16 @@
-import { ColorScheme, type AppThemeName} from '../src/specs/types'
-import type { UnistylesValues } from '../src/types'
+import { ColorScheme, type AppThemeName} from '../specs/types'
+import type { UnistylesValues } from '../types'
 
 export const reduceObject = <TObj extends Record<string, any>, TReducer>(
     obj: TObj,
     reducer: (value: TObj[keyof TObj], key: keyof TObj) => TReducer,
 ) => Object.fromEntries(Object.entries(obj).map(([key, value]) => [key, reducer(value as TObj[keyof TObj], key)])) as { [K in keyof TObj]: TReducer }
 
-export const toReactNativeClassName = (className: string, values: UnistylesValues) => {
-    const returnValue = {
+export const toReactNativeClassName = (className: string | null, values: UnistylesValues) => {
+    const returnValue = className ? {
         $$css: true,
         [className]: className
-    }
+    } : {}
 
     Object.defineProperties(returnValue, reduceObject(values, value => ({
         value,

package/src/web/variants/getVariants.ts

@@ -0,0 +1,42 @@
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { deepMergeObjects } from '../utils'
+
+type StylesWithVariants = {
+    variants: Record<string, any>,
+    compoundVariants?: Array<Record<string, any> & {
+        styles: Record<string, any>
+    }>
+}
+const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
+
+export const getVariants = (styles: ReactNativeStyleSheet<StyleSheet>, selectedVariants: Record<string, any>) => {
+    return Object.entries(styles)
+        .filter(hasVariants)
+        .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
+        .map(([key, { variants, compoundVariants = [] }]) => {
+            const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
+                const selectedVariant = selectedVariants[variant]
+                const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
+
+                if (!selectedVariantStyles) {
+                    return []
+                }
+
+                return selectedVariantStyles
+            })
+
+            const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
+                const { styles, ...conditions } = compoundVariant
+
+                if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
+                    return []
+                }
+
+                return styles
+            })
+
+            const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
+
+            return [key, mergedVariantStyles] as const
+        })
+}

package/src/web/variants/index.ts

@@ -0,0 +1,2 @@
+export * from './useVariants'
+export * from './getVariants'

package/{web → src/web/variants}/useVariants.ts

@@ -1,19 +1,11 @@
 import { useMemo, useRef, useState } from 'react'
 import type { TypeStyle } from 'typestyle'
-import type { ReactNativeStyleSheet, StyleSheet } from '../src/types'
-import { deepMergeObjects, equal, reduceObject } from './utils'
-import { UnistylesRegistry } from './registry'
+import type { ReactNativeStyleSheet, StyleSheet } from '../../types'
+import { equal, reduceObject } from '../utils'
+import { UnistylesRegistry } from '../registry'
+import { getVariants } from './getVariants'
 
-type StylesWithVariants = {
-    variants: Record<string, any>,
-    compoundVariants?: Array<Record<string, any> & {
-        styles: Record<string, any>
-    }>
-}
-
-const hasVariants = <T extends object>(value: [string, T]): value is [string, T & StylesWithVariants] => 'variants' in value[1]
-
-export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) => {
+export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>, setSelectedVariants: (variants: Record<string, any>) => void) => {
     const useVariants = (selectedVariants: Record<string, any>) => {
         const [unistylesMap] = useState(() => new Map<string, TypeStyle>())
         const [classNameMap] = useState(() => new Map<string, string>())
@@ -24,40 +16,17 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
 
         if (variantsChanged) {
             lastSelectedVariantsRef.current = selectedVariants
+            setSelectedVariants(selectedVariants)
         }
 
         const combinedVariantStyles = useMemo(() => {
-            return Object.entries(styles)
-                .filter(hasVariants)
-                .filter(([_key, { variants }]) => Object.keys(variants).some(variant => variant in variants))
-                .map(([key, { variants, compoundVariants = [] }]) => {
-                    const variantStyles = Object.entries(variants).flatMap(([variant, styles]) => {
-                        const selectedVariant = selectedVariants[variant]
-                        const selectedVariantStyles = styles[selectedVariant] ?? styles['default']
-
-                        if (!selectedVariantStyles) {
-                            return []
-                        }
-
-                        return selectedVariantStyles
-                    })
-
-                    const compoundVariantStyles = compoundVariants.flatMap(compoundVariant => {
-                        const { styles, ...conditions } = compoundVariant
-
-                        if (Object.entries(conditions).some(([variant, value]) => String(selectedVariants[variant]) !== String(value))) {
-                            return []
-                        }
-
-                        return styles
-                    })
+            const result = getVariants(styles, selectedVariants)
 
-                    const mergedVariantStyles = deepMergeObjects(...variantStyles, ...compoundVariantStyles)
-
-                    selectedVariantStylesMap.set(key, mergedVariantStyles)
+            result.forEach(([key, value]) => {
+                selectedVariantStylesMap.set(key, value)
+            })
 
-                    return [key, mergedVariantStyles] as const
-                })
+            return result
         }, [lastSelectedVariantsRef.current])
 
         if (unistylesMap.size === 0 && combinedVariantStyles.length > 0) {
@@ -88,8 +57,19 @@ export const createUseVariants = (styles: ReactNativeStyleSheet<StyleSheet>) =>
                 enumerable: false,
                 configurable: true
             })))
-            // @ts-expect-error - apply variant className
-            styleEntry[className] = className
+
+            if (styleEntry) {
+                Object.keys(styleEntry ?? {}).forEach(key => {
+                    if (!key.startsWith('variant-')) {
+                        return
+                    }
+
+                    // @ts-expect-error - remove old variants
+                    delete styleEntry[key]
+                })
+                // @ts-expect-error - apply variant className
+                styleEntry[className] = className
+            }
         })
     }
 

package/lib/typescript/web/convert/boxShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"boxShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/boxShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAkB9D,eAAO,MAAM,iBAAiB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAoD/D,CAAA"}

package/lib/typescript/web/convert/breakpoint.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../web/convert/breakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,iBAAiB,eAAgB,MAAM,KAAG,UActD,CAAA"}

package/lib/typescript/web/convert/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/convert/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAWtD,eAAO,MAAM,kBAAkB,UAAW,eAAe,wBAiExD,CAAA"}

package/lib/typescript/web/convert/shadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"shadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/shadow.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,qBAAsB,aAAa,CAAC,MAAM,CAAC,UAAU,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,eAAe,GAAG,CAAC,MAAM,CAAC,SAiE5H,CAAA"}

package/lib/typescript/web/convert/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../web/convert/style.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAgF9D,eAAO,MAAM,QAAQ,QAAS,MAAM,SAAS,GAAG,wBAY/C,CAAA"}

package/lib/typescript/web/convert/textShadow.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"textShadow.d.ts","sourceRoot":"","sources":["../../../../web/convert/textShadow.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAiB9D,eAAO,MAAM,kBAAkB,WAAY,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAG,mBAkDhE,CAAA"}

package/lib/typescript/web/convert/transform.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"transform.d.ts","sourceRoot":"","sources":["../../../../web/convert/transform.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAK9D,KAAK,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAmC5C,eAAO,MAAM,iBAAiB,eAAgB,UAAU,KAAG,mBA+C1D,CAAA"}

package/lib/typescript/web/convert/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../web/convert/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAA;AAEjE,MAAM,MAAM,YAAY,GAAG,eAAe,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE7E,eAAO,MAAM,kBAAkB,sEAAuE,CAAA;AAEtG,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAErF,eAAO,MAAM,iBAAiB,2EAA4E,CAAA;AAE1G,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,iBAAiB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;AAEnF,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,SAAS,CAAA;AAE9C,MAAM,MAAM,aAAa,GAAG,MAAM,SAAS,CAAA"}

package/lib/typescript/web/convert/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../web/convert/utils.ts"],"names":[],"mappings":"AAGA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAA;AAEnG,eAAO,MAAM,WAAW,QAAS,MAAM,SAAS,GAAG,KAAG,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAgD,CAAA;AAExI,eAAO,MAAM,YAAY,QAAS,MAAM,YAA0E,CAAA;AAElH,eAAO,MAAM,WAAW,QAAS,MAAM,YAAwE,CAAA;AAE/G,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAEpF,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,IAAI,SAAS,aAAa,OAAO,IAAI,cAAc,MAAM,UAAU,GAAG,KAAG,SAAS,CAAC,IAAI,CAazH,CAAA"}

package/lib/typescript/web/listener/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../web/listener/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA"}

package/lib/typescript/web/listener/listener.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"listener.d.ts","sourceRoot":"","sources":["../../../../web/listener/listener.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAGnE,qBAAa,wBAAwB;IACjC,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,SAAS,CAAoG;IAErH,UAAU,eAAgB,kBAAkB,UAE3C;IAED,aAAa,aAUZ;IAED,YAAY,iBAAkB,KAAK,CAAC,kBAAkB,CAAC,YAAY,YAAY,gBAM9E;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}

package/lib/typescript/web/mock.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mock.d.ts","sourceRoot":"","sources":["../../../web/mock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,IAAI,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAC5F,OAAO,KAAK,EAAE,kBAAkB,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAA;AAEjF,eAAO,MAAM,SAAS,EAAE,aAUvB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,iBAS3B,CAAA;AAED,eAAO,MAAM,uBAAuB;;;;;;;;CAQnC,CAAA"}

package/lib/typescript/web/mq.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"mq.d.ts","sourceRoot":"","sources":["../../../web/mq.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAMrD,eAAO,MAAM,OAAO,OAAQ,MAAM,KAAG,UAUpC,CAAA;AAED,eAAO,MAAM,aAAa,OAAQ,MAAM,YAAgC,CAAA"}

package/lib/typescript/web/pseudo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../web/pseudo.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,kDAKV,CAAA;AAEV,eAAO,MAAM,QAAQ,aAAc,MAAM,YAAyC,CAAA;AAElF,MAAM,MAAM,MAAM,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAA"}

package/lib/typescript/web/registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../../../web/registry.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,SAAS,EAAE,MAAM,WAAW,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,cAAM,wBAAwB;IAC1B,YAAY,eAAgB,eAAe,OAAO,MAAM,GAAG,MAAM;;;MAwBhE;IAED,YAAY,cAAe,SAAS,cAAc,eAAe,aAAa,MAAM,UAKnF;CACJ;AAED,eAAO,MAAM,iBAAiB,0BAAiC,CAAA"}