diff --git a/src/web/create.ts b/src/web/create.ts index 46b56fc0..4325b7d0 100644 --- a/src/web/create.ts +++ b/src/web/create.ts @@ -2,17 +2,12 @@ import type { StyleSheetWithSuperPowers, StyleSheet } from '../types/stylesheet' import { UnistylesWeb } from './index' import { assignSecrets, error, removeInlineStyles } from './utils' -const useVariants = ['useVariants', () => {}] - export const create = (stylesheet: StyleSheetWithSuperPowers, id?: string) => { if (!id) { throw error('Unistyles is not initialized correctly. Please add babel plugin to your babel config.') } - const computedStylesheet = typeof stylesheet === 'function' - ? stylesheet(UnistylesWeb.runtime.theme, UnistylesWeb.runtime.miniRuntime) - : stylesheet - + const computedStylesheet = UnistylesWeb.registry.getComputedStylesheet(stylesheet) const addSecrets = (value: any, key: string, args?: Array) => assignSecrets(value, { __uni__key: key, __uni__stylesheet: stylesheet, @@ -30,6 +25,11 @@ export const create = (stylesheet: StyleSheetWithSuperPowers, id?: s return [key, addSecrets(removeInlineStyles(value), key)] }) + const emptyVariants = ['__stylesheetVariants', {}] + + const useVariants = ['useVariants', (variants: Record) => { + return Object.fromEntries(styleSheetStyles.concat([useVariants, ['__stylesheetVariants', variants]])) + }] - return Object.fromEntries(styleSheetStyles.concat([useVariants])) + return Object.fromEntries(styleSheetStyles.concat([useVariants, emptyVariants])) } diff --git a/src/web/shadowRegistry.ts b/src/web/shadowRegistry.ts index 057d44bf..a3b2a0b2 100644 --- a/src/web/shadowRegistry.ts +++ b/src/web/shadowRegistry.ts @@ -1,6 +1,6 @@ import type { UnistylesTheme, UnistylesValues } from '../types' import { deepMergeObjects } from '../utils' -import { extractSecrets, extractUnistyleDependencies } from './utils' +import { extractSecrets, extractUnistyleDependencies, keyInObject } from './utils' import { getVariants } from './variants' import type { UnistylesServices } from './types' @@ -13,7 +13,6 @@ export class UnistylesShadowRegistry { dispose = () => {} // END MOCKS - private selectedVariants = new Map() private scopedTheme: UnistylesTheme | undefined = undefined private disposeMap = new Map() @@ -38,6 +37,7 @@ export class UnistylesShadowRegistry { const { __uni__key, __uni__stylesheet, __uni__args = [] } = secrets const newComputedStylesheet = this.services.registry.getComputedStylesheet(__uni__stylesheet, scopedTheme) + const variants = (keyInObject(newComputedStylesheet, '__stylesheetVariants') ? newComputedStylesheet.__stylesheetVariants : {}) as Record const style = newComputedStylesheet[__uni__key] as (UnistylesValues | ((...args: any) => UnistylesValues)) const result = typeof style === 'function' ? style(...__uni__args) @@ -55,7 +55,6 @@ export class UnistylesShadowRegistry { } // Copy scoped theme to not use referenced value - const variants = this.getVariants() const scopedTheme = this.scopedTheme const parsedStyles = getParsedStyles() const { hash, existingHash } = this.services.registry.add(parsedStyles) @@ -72,26 +71,12 @@ export class UnistylesShadowRegistry { return { injectedClassName, hash } } - selectVariants = (variants?: Record) => { - if (!variants) { - this.selectedVariants.clear() - - return - } - - Object.entries(variants).forEach(([key, value]) => { - this.selectedVariants.set(key, value) - }) - } - setScopedTheme = (theme?: UnistylesTheme) => { this.scopedTheme = theme } getScopedTheme = () => this.scopedTheme - getVariants = () => Object.fromEntries(this.selectedVariants.entries()) - remove = (ref: any, hash?: string) => { if (!(ref instanceof HTMLElement) || !hash) { return