zova-module-a-style 5.1.18 → 5.1.19

package/dist/index.js

@@ -1,7 +1,7 @@
 import { BeanBase, BeanInfo, BeanScopeBase, BeanSimple, SymbolBeanFullName, UseScope, beanFullNameFromOnionName, cast, createBeanDecorator, deepExtend, useComputed } from "zova";
 import { Bean, Scope } from "zova-module-a-bean";
 import { BeanModelBase } from "zova-module-a-model";
-import { createTypeStyle, cssRaw, cssRule, style } from "typestyle";
+import { classes, createTypeStyle, cssRaw, cssRule, style } from "typestyle";
 //#region src/bean/bean.theme.ts
 var _dec$1, _dec2$1, _dec3, _dec4, _class$1, _class2, _descriptor;
 function _initializerDefineProperty(e, i, r, l) {
@@ -223,6 +223,15 @@ var Monkey = class extends BeanSimple {
 				return self._beanCssBase;
 			}
 		});
+		bean.defineProperty(beanInstance, "$cssMerge", {
+			enumerable: false,
+			configurable: true,
+			get() {
+				return function(...args) {
+					return self._patchCssMerge(beanInstance, ...args);
+				};
+			}
+		});
 		bean.defineProperty(beanInstance, "$theme", {
 			enumerable: false,
 			configurable: true,
@@ -254,6 +263,16 @@ var Monkey = class extends BeanSimple {
 		if (this._styleInstance) return this._styleInstance.cssRaw(mustBeValidCSS);
 		else return cssRaw(mustBeValidCSS);
 	}
+	_patchCssMerge(beanInstance, ...args) {
+		return classes(...args.map((item) => {
+			if (Array.isArray(item)) return this._patchCssMerge(beanInstance, ...item);
+			else if (typeof item === "string" && item.startsWith("cssBase:")) {
+				const varName = item.substring(8);
+				return beanInstance.$cssBase[varName];
+			}
+			return item;
+		}));
+	}
 };
 //#endregion
 //#region src/.metadata/index.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/bean/bean.theme.ts","../src/config/config.ts","../src/.metadata/this.ts","../src/monkey.ts","../src/.metadata/index.ts","../src/lib/style.ts","../src/lib/theme.ts","../src/lib/themeBase.ts"],"sourcesContent":["import { beanFullNameFromOnionName, cast, UseScope } from 'zova';\nimport { Bean } from 'zova-module-a-bean';\nimport { BeanModelBase } from 'zova-module-a-model';\nimport { ScopeModuleASsr } from 'zova-module-a-ssr';\n\nimport type { IThemeBase, IThemeHandler, IThemeRecord } from '../types/index.js';\n\nexport type ThemeDarkMode = 'auto' | boolean;\n\n@Bean()\nexport class BeanTheme extends BeanModelBase {\n  name: keyof IThemeRecord;\n  darkMode: ThemeDarkMode; // auto/true/false\n\n  private _dark: boolean;\n  get dark() {\n    return this._dark;\n  }\n\n  token: unknown;\n  private _mediaDark?: MediaQueryList;\n  private _onMediaDarkChange?;\n\n  @UseScope()\n  $$scopeSsr: ScopeModuleASsr;\n\n  protected async __init__() {\n    const cookieTheme = this.sys.config.ssr.cookie;\n    const cookieThemeDarkDefault = this.$$scopeSsr.config.cookieThemeDarkDefault;\n    // support admin\n    this.name = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themename'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n        },\n        defaultData: this.scope.config.defaultTheme,\n      },\n    });\n    this.darkMode = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themedark'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n          deserialize: (value, deserializeDefault) => {\n            if (cookieTheme && value === 'auto') value = cookieThemeDarkDefault;\n            return deserializeDefault(value);\n          },\n        },\n        defaultData: cookieTheme ? cookieThemeDarkDefault : 'auto',\n      },\n    });\n    this._updateDark();\n\n    this.$watch(\n      () => this.darkMode,\n      () => {\n        this._updateDark();\n      },\n    );\n\n    if (process.env.CLIENT) {\n      this.$watch([() => this.name, () => this._dark], () => {\n        this._applyTheme();\n      });\n    }\n\n    // not use watch.immediate for await done\n    await this._applyThemeWrapper();\n  }\n\n  protected __dispose__() {\n    this._listenMediaDarkChange(false);\n  }\n\n  private _updateDark() {\n    this._dark = this._getDarkFromDarkMode(this.darkMode);\n  }\n\n  async _applyThemeWrapper() {\n    await this._applyTheme();\n    if (this.sys.config.ssr.ignoreCookieOnServer) {\n      this.toggleDark();\n      await this._applyTheme();\n    }\n  }\n\n  async _applyTheme() {\n    const name = this.name;\n    const dark = this._dark;\n    const theme = await this._loadThemeBean(name);\n    if (!theme) {\n      this.name = this.scope.config.defaultTheme;\n      await this._applyTheme();\n      return;\n    }\n    const res = await theme.apply({ name, dark });\n    this.token = cast(res).token;\n    const handler = res.handler ?? this.scope.config.defaultThemeHandler;\n    if (handler) {\n      const themeHandler = (await this.bean._getBean(\n        beanFullNameFromOnionName(handler, 'meta'),\n        true,\n      )) as unknown as IThemeHandler;\n      await themeHandler.apply({ name, dark, token: this.token } as any);\n    }\n  }\n\n  async _loadThemeBean(name: keyof IThemeRecord): Promise<IThemeBase | undefined> {\n    const parts = name.split(':');\n    if (parts.length === 1) {\n      throw new Error(`invalid theme name: ${name}`);\n    }\n    const moduleName = parts[0];\n    if (!this.app.meta.module.exists(moduleName)) return;\n    return (await this.bean._getBean(beanFullNameFromOnionName(name, 'theme'), true)) as IThemeBase;\n  }\n\n  toggleDark() {\n    this.darkMode = !this._dark;\n    this._updateDark(); // immediate\n  }\n\n  _getDarkFromDarkMode(mode?: ThemeDarkMode) {\n    if (mode === undefined) mode = 'auto';\n    if (mode === 'auto') {\n      this._listenMediaDarkChange(true);\n      return !!this._mediaDark?.matches;\n    } else {\n      this._listenMediaDarkChange(false);\n      return mode;\n    }\n  }\n\n  _listenMediaDarkChange(listen: boolean) {\n    if (process.env.SERVER) return;\n    if (listen) {\n      if (!this._mediaDark) {\n        this._mediaDark = window.matchMedia('(prefers-color-scheme: dark)');\n        this._onMediaDarkChange = async () => {\n          this._updateDark();\n          this._applyTheme();\n        };\n        this._mediaDark.addEventListener('change', this._onMediaDarkChange);\n      }\n    } else {\n      if (this._mediaDark) {\n        this._mediaDark.removeEventListener('change', this._onMediaDarkChange);\n        this._onMediaDarkChange = undefined;\n        this._mediaDark = undefined;\n      }\n    }\n  }\n}\n","import type { ZovaSys } from 'zova';\nimport type { TypeMetaRecordSelectorSpecificNameKeys } from 'zova-module-a-meta';\n\nimport type { ICssRecord } from '../types/css.js';\nimport type { IThemeRecord } from '../types/theme.js';\n\nexport const config = (_sys: ZovaSys) => {\n  return {\n    defaultCss: 'home-theme:base' as keyof ICssRecord,\n    defaultTheme: 'home-theme:default' as keyof IThemeRecord,\n    defaultThemeHandler: '' as TypeMetaRecordSelectorSpecificNameKeys<'themeHandler'>,\n    model: {\n      themename: {\n        persister: {\n          maxAge: Infinity,\n        },\n      },\n    },\n  };\n};\n","export const __ThisModule__ = 'a-style';\nexport { ScopeModuleAStyle as ScopeModule } from './index.js';\n","import type { TypeStyle } from 'typestyle';\nimport type { NestedCSSProperties } from 'typestyle/lib/types.js';\nimport type { BeanBase, BeanContainer, IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit } from 'zova';\n\nimport { createTypeStyle, cssRaw, cssRule, style } from 'typestyle';\nimport { beanFullNameFromOnionName, BeanSimple, SymbolBeanFullName, useComputed } from 'zova';\n\nimport type { ScopeModule } from './.metadata/this.js';\n\nimport { __ThisModule__ } from './.metadata/this.js';\nimport { BeanTheme } from './bean/bean.theme.js';\n\nexport class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit {\n  private _beanTheme: BeanTheme;\n  private _beanCssBase: any;\n  private _styleInstance: TypeStyle;\n\n  async appInitialize() {\n    if (process.env.SERVER) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {\n        if (err) return;\n        const styles = this._styleInstance.getStyles();\n        this.ctx.meta.$ssr.context._meta.endingHeadTags += `<style id=\"styles-target\">${styles}</style>`;\n      });\n    }\n    if (process.env.CLIENT && this.ctx.meta.$ssr.isRuntimeSsrPreHydration) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.onHydrated(() => {\n        this._styleInstance.setStylesTarget(document.getElementById('styles-target')!);\n      });\n    }\n  }\n\n  async appInitialized() {\n    // theme\n    this._beanTheme = await this.bean._getBean(BeanTheme, true);\n    // css base\n    const scope: ScopeModule = await this.bean.getScope(__ThisModule__);\n    this._beanCssBase = await this.bean._getBean(beanFullNameFromOnionName(scope.config.defaultCss, 'css'), true);\n  }\n\n  async beanInit(bean: BeanContainer, beanInstance: BeanBase) {\n    // eslint-disable-next-line\n    const self = this;\n    bean.defineProperty(beanInstance, '$style', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (props, ...args) {\n          return self._patchStyle(beanInstance, props, ...args);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRule', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (selector: string, ...objects: NestedCSSProperties[]) {\n          return self._patchCssRule(beanInstance, selector, ...objects);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRaw', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (mustBeValidCSS: string) {\n          return self._patchCssRaw(beanInstance, mustBeValidCSS);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssBase', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanCssBase;\n      },\n    });\n    bean.defineProperty(beanInstance, '$theme', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanTheme;\n      },\n    });\n    bean.defineProperty(beanInstance, '$token', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return useComputed(() => self._beanTheme.token);\n      },\n    });\n  }\n\n  _patchStyle(beanInstance: BeanBase, props, ...args) {\n    // undefined/null/false\n    if (!props) return undefined;\n    if (this.sys.env.META_MODE === 'development') {\n      if (props && typeof props === 'object') {\n        props = Object.assign({ $debugName: beanInstance[SymbolBeanFullName].replaceAll('.', '_') }, props);\n      }\n    }\n    if (this._styleInstance) {\n      return this._styleInstance.style(props, ...args);\n    } else {\n      return style(props, ...args);\n    }\n  }\n\n  _patchCssRule(_beanInstance: BeanBase, selector: string, ...objects: NestedCSSProperties[]) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRule(selector, ...objects);\n    } else {\n      return cssRule(selector, ...objects);\n    }\n  }\n\n  _patchCssRaw(_beanInstance: BeanBase, mustBeValidCSS: string) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRaw(mustBeValidCSS);\n    } else {\n      return cssRaw(mustBeValidCSS);\n    }\n  }\n}\n","// eslint-disable\n/** bean: begin */\nexport * from '../bean/bean.theme.js';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-style' {\n  \n        export interface BeanTheme {\n          /** @internal */\n          get scope(): ScopeModuleAStyle;\n        }\n\n        export interface BeanTheme {\n          get $beanFullName(): 'a-style.bean.theme';\n          get $onionName(): 'a-style:theme';\n          \n        } \n}\n/** bean: end */\n/** bean: begin */\nimport { BeanTheme } from '../bean/bean.theme.js';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordGeneral {\n    'a-style.bean.theme': BeanTheme;\n  }\n}\n/** bean: end */\n/** config: begin */\nexport * from '../config/config.js';\nimport { config } from '../config/config.js';\n/** config: end */\n/** monkey: begin */\nexport * from '../monkey.js';\n/** monkey: end */\n/** scope: begin */\nimport { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';\nimport { Scope } from 'zova-module-a-bean';\n\n@Scope()\nexport class ScopeModuleAStyle extends BeanScopeBase {}\n\nexport interface ScopeModuleAStyle {\n  util: BeanScopeUtil;\nconfig: TypeModuleConfig<typeof config>;\n}\n\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanScopeRecord {\n    'a-style': ScopeModuleAStyle;\n  }\n  \n  export interface IBeanScopeConfig {\n    'a-style': ReturnType<typeof config>;\n  }\n\n  \n\n  \n}\n  \n/** scope: end */\n","import { createBeanDecorator } from 'zova';\n\nimport type { IDecoratorCssOptions } from '../types/css.js';\nimport type { IDecoratorThemeOptions } from '../types/theme.js';\n\nexport function Css<T extends IDecoratorCssOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('css', 'app', true, options);\n}\n\nexport function Theme<T extends IDecoratorThemeOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('theme', 'app', true, options);\n}\n","import type { IThemeRecord } from '../types/theme.js';\n\nexport function $getThemeName<K extends keyof IThemeRecord>(themeName: K): K {\n  return themeName;\n}\n","import { BeanBase, deepExtend } from 'zova';\n\nimport type { IDecoratorThemeOptions, IThemeApplyParams, ThemeToken } from '../types/theme.js';\n\nexport class BeanThemeBase extends BeanBase {\n  protected getOptionsToken(params: IThemeApplyParams) {\n    const options = this.$onionOptions as IDecoratorThemeOptions;\n    return options.token?.(params);\n  }\n\n  protected mergeOptionsToken(params: IThemeApplyParams, token: ThemeToken) {\n    const optionsToken = this.getOptionsToken(params);\n    if (optionsToken) {\n      token = deepExtend(token, optionsToken);\n    }\n    return token;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/bean/bean.theme.ts","../src/config/config.ts","../src/.metadata/this.ts","../src/monkey.ts","../src/.metadata/index.ts","../src/lib/style.ts","../src/lib/theme.ts","../src/lib/themeBase.ts"],"sourcesContent":["import { beanFullNameFromOnionName, cast, UseScope } from 'zova';\nimport { Bean } from 'zova-module-a-bean';\nimport { BeanModelBase } from 'zova-module-a-model';\nimport { ScopeModuleASsr } from 'zova-module-a-ssr';\n\nimport type { IThemeBase, IThemeHandler, IThemeRecord } from '../types/index.js';\n\nexport type ThemeDarkMode = 'auto' | boolean;\n\n@Bean()\nexport class BeanTheme extends BeanModelBase {\n  name: keyof IThemeRecord;\n  darkMode: ThemeDarkMode; // auto/true/false\n\n  private _dark: boolean;\n  get dark() {\n    return this._dark;\n  }\n\n  token: unknown;\n  private _mediaDark?: MediaQueryList;\n  private _onMediaDarkChange?;\n\n  @UseScope()\n  $$scopeSsr: ScopeModuleASsr;\n\n  protected async __init__() {\n    const cookieTheme = this.sys.config.ssr.cookie;\n    const cookieThemeDarkDefault = this.$$scopeSsr.config.cookieThemeDarkDefault;\n    // support admin\n    this.name = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themename'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n        },\n        defaultData: this.scope.config.defaultTheme,\n      },\n    });\n    this.darkMode = this.$useState(cookieTheme ? 'cookie' : 'local', {\n      queryKey: ['themedark'],\n      meta: {\n        persister: {\n          maxAge: this.scope.config.model.themename.persister.maxAge,\n          deserialize: (value, deserializeDefault) => {\n            if (cookieTheme && value === 'auto') value = cookieThemeDarkDefault;\n            return deserializeDefault(value);\n          },\n        },\n        defaultData: cookieTheme ? cookieThemeDarkDefault : 'auto',\n      },\n    });\n    this._updateDark();\n\n    this.$watch(\n      () => this.darkMode,\n      () => {\n        this._updateDark();\n      },\n    );\n\n    if (process.env.CLIENT) {\n      this.$watch([() => this.name, () => this._dark], () => {\n        this._applyTheme();\n      });\n    }\n\n    // not use watch.immediate for await done\n    await this._applyThemeWrapper();\n  }\n\n  protected __dispose__() {\n    this._listenMediaDarkChange(false);\n  }\n\n  private _updateDark() {\n    this._dark = this._getDarkFromDarkMode(this.darkMode);\n  }\n\n  async _applyThemeWrapper() {\n    await this._applyTheme();\n    if (this.sys.config.ssr.ignoreCookieOnServer) {\n      this.toggleDark();\n      await this._applyTheme();\n    }\n  }\n\n  async _applyTheme() {\n    const name = this.name;\n    const dark = this._dark;\n    const theme = await this._loadThemeBean(name);\n    if (!theme) {\n      this.name = this.scope.config.defaultTheme;\n      await this._applyTheme();\n      return;\n    }\n    const res = await theme.apply({ name, dark });\n    this.token = cast(res).token;\n    const handler = res.handler ?? this.scope.config.defaultThemeHandler;\n    if (handler) {\n      const themeHandler = (await this.bean._getBean(\n        beanFullNameFromOnionName(handler, 'meta'),\n        true,\n      )) as unknown as IThemeHandler;\n      await themeHandler.apply({ name, dark, token: this.token } as any);\n    }\n  }\n\n  async _loadThemeBean(name: keyof IThemeRecord): Promise<IThemeBase | undefined> {\n    const parts = name.split(':');\n    if (parts.length === 1) {\n      throw new Error(`invalid theme name: ${name}`);\n    }\n    const moduleName = parts[0];\n    if (!this.app.meta.module.exists(moduleName)) return;\n    return (await this.bean._getBean(beanFullNameFromOnionName(name, 'theme'), true)) as IThemeBase;\n  }\n\n  toggleDark() {\n    this.darkMode = !this._dark;\n    this._updateDark(); // immediate\n  }\n\n  _getDarkFromDarkMode(mode?: ThemeDarkMode) {\n    if (mode === undefined) mode = 'auto';\n    if (mode === 'auto') {\n      this._listenMediaDarkChange(true);\n      return !!this._mediaDark?.matches;\n    } else {\n      this._listenMediaDarkChange(false);\n      return mode;\n    }\n  }\n\n  _listenMediaDarkChange(listen: boolean) {\n    if (process.env.SERVER) return;\n    if (listen) {\n      if (!this._mediaDark) {\n        this._mediaDark = window.matchMedia('(prefers-color-scheme: dark)');\n        this._onMediaDarkChange = async () => {\n          this._updateDark();\n          this._applyTheme();\n        };\n        this._mediaDark.addEventListener('change', this._onMediaDarkChange);\n      }\n    } else {\n      if (this._mediaDark) {\n        this._mediaDark.removeEventListener('change', this._onMediaDarkChange);\n        this._onMediaDarkChange = undefined;\n        this._mediaDark = undefined;\n      }\n    }\n  }\n}\n","import type { ZovaSys } from 'zova';\nimport type { TypeMetaRecordSelectorSpecificNameKeys } from 'zova-module-a-meta';\n\nimport type { ICssRecord } from '../types/css.js';\nimport type { IThemeRecord } from '../types/theme.js';\n\nexport const config = (_sys: ZovaSys) => {\n  return {\n    defaultCss: 'home-theme:base' as keyof ICssRecord,\n    defaultTheme: 'home-theme:default' as keyof IThemeRecord,\n    defaultThemeHandler: '' as TypeMetaRecordSelectorSpecificNameKeys<'themeHandler'>,\n    model: {\n      themename: {\n        persister: {\n          maxAge: Infinity,\n        },\n      },\n    },\n  };\n};\n","export const __ThisModule__ = 'a-style';\nexport { ScopeModuleAStyle as ScopeModule } from './index.js';\n","import type { TypeStyle } from 'typestyle';\nimport type { NestedCSSProperties } from 'typestyle/lib/types.js';\nimport type { BeanBase, BeanContainer, IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit } from 'zova';\n\nimport { classes, createTypeStyle, cssRaw, cssRule, style } from 'typestyle';\nimport { beanFullNameFromOnionName, BeanSimple, SymbolBeanFullName, useComputed } from 'zova';\n\nimport type { ScopeModule } from './.metadata/this.js';\n\nimport { __ThisModule__ } from './.metadata/this.js';\nimport { BeanTheme } from './bean/bean.theme.js';\n\nexport class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit {\n  private _beanTheme: BeanTheme;\n  private _beanCssBase: any;\n  private _styleInstance: TypeStyle;\n\n  async appInitialize() {\n    if (process.env.SERVER) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.context.onRendered((err?: Error) => {\n        if (err) return;\n        const styles = this._styleInstance.getStyles();\n        this.ctx.meta.$ssr.context._meta.endingHeadTags += `<style id=\"styles-target\">${styles}</style>`;\n      });\n    }\n    if (process.env.CLIENT && this.ctx.meta.$ssr.isRuntimeSsrPreHydration) {\n      this._styleInstance = createTypeStyle();\n      this.ctx.meta.$ssr.onHydrated(() => {\n        this._styleInstance.setStylesTarget(document.getElementById('styles-target')!);\n      });\n    }\n  }\n\n  async appInitialized() {\n    // theme\n    this._beanTheme = await this.bean._getBean(BeanTheme, true);\n    // css base\n    const scope: ScopeModule = await this.bean.getScope(__ThisModule__);\n    this._beanCssBase = await this.bean._getBean(beanFullNameFromOnionName(scope.config.defaultCss, 'css'), true);\n  }\n\n  async beanInit(bean: BeanContainer, beanInstance: BeanBase) {\n    // eslint-disable-next-line\n    const self = this;\n    bean.defineProperty(beanInstance, '$style', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (props, ...args) {\n          return self._patchStyle(beanInstance, props, ...args);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRule', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (selector: string, ...objects: NestedCSSProperties[]) {\n          return self._patchCssRule(beanInstance, selector, ...objects);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssRaw', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (mustBeValidCSS: string) {\n          return self._patchCssRaw(beanInstance, mustBeValidCSS);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssBase', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanCssBase;\n      },\n    });\n    bean.defineProperty(beanInstance, '$cssMerge', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return function (...args) {\n          return self._patchCssMerge(beanInstance, ...args);\n        };\n      },\n    });\n    bean.defineProperty(beanInstance, '$theme', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return self._beanTheme;\n      },\n    });\n    bean.defineProperty(beanInstance, '$token', {\n      enumerable: false,\n      configurable: true,\n      get() {\n        return useComputed(() => self._beanTheme.token);\n      },\n    });\n  }\n\n  _patchStyle(beanInstance: BeanBase, props, ...args) {\n    // undefined/null/false\n    if (!props) return undefined;\n    if (this.sys.env.META_MODE === 'development') {\n      if (props && typeof props === 'object') {\n        props = Object.assign({ $debugName: beanInstance[SymbolBeanFullName].replaceAll('.', '_') }, props);\n      }\n    }\n    if (this._styleInstance) {\n      return this._styleInstance.style(props, ...args);\n    } else {\n      return style(props, ...args);\n    }\n  }\n\n  _patchCssRule(_beanInstance: BeanBase, selector: string, ...objects: NestedCSSProperties[]) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRule(selector, ...objects);\n    } else {\n      return cssRule(selector, ...objects);\n    }\n  }\n\n  _patchCssRaw(_beanInstance: BeanBase, mustBeValidCSS: string) {\n    if (this._styleInstance) {\n      return this._styleInstance.cssRaw(mustBeValidCSS);\n    } else {\n      return cssRaw(mustBeValidCSS);\n    }\n  }\n\n  _patchCssMerge(beanInstance: BeanBase, ...args: any[]): string {\n    const args2 = args.map(item => {\n      if (Array.isArray(item)) {\n        return this._patchCssMerge(beanInstance, ...item);\n      } else if (typeof item === 'string' && item.startsWith('cssBase:')) {\n        const varName = item.substring('cssBase:'.length);\n        return beanInstance.$cssBase[varName];\n      }\n      return item;\n    });\n    return classes(...args2);\n  }\n}\n","// eslint-disable\n/** bean: begin */\nexport * from '../bean/bean.theme.js';\n\nimport 'zova';\ndeclare module 'zova' {\n  \n  \n}\ndeclare module 'zova-module-a-style' {\n  \n        export interface BeanTheme {\n          /** @internal */\n          get scope(): ScopeModuleAStyle;\n        }\n\n        export interface BeanTheme {\n          get $beanFullName(): 'a-style.bean.theme';\n          get $onionName(): 'a-style:theme';\n          \n        } \n}\n/** bean: end */\n/** bean: begin */\nimport { BeanTheme } from '../bean/bean.theme.js';\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanRecordGeneral {\n    'a-style.bean.theme': BeanTheme;\n  }\n}\n/** bean: end */\n/** config: begin */\nexport * from '../config/config.js';\nimport { config } from '../config/config.js';\n/** config: end */\n/** monkey: begin */\nexport * from '../monkey.js';\n/** monkey: end */\n/** scope: begin */\nimport { BeanScopeBase, type BeanScopeUtil, TypeModuleConfig } from 'zova';\nimport { Scope } from 'zova-module-a-bean';\n\n@Scope()\nexport class ScopeModuleAStyle extends BeanScopeBase {}\n\nexport interface ScopeModuleAStyle {\n  util: BeanScopeUtil;\nconfig: TypeModuleConfig<typeof config>;\n}\n\nimport 'zova';\ndeclare module 'zova' {\n  export interface IBeanScopeRecord {\n    'a-style': ScopeModuleAStyle;\n  }\n  \n  export interface IBeanScopeConfig {\n    'a-style': ReturnType<typeof config>;\n  }\n\n  \n\n  \n}\n  \n/** scope: end */\n","import { createBeanDecorator } from 'zova';\n\nimport type { IDecoratorCssOptions } from '../types/css.js';\nimport type { IDecoratorThemeOptions } from '../types/theme.js';\n\nexport function Css<T extends IDecoratorCssOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('css', 'app', true, options);\n}\n\nexport function Theme<T extends IDecoratorThemeOptions>(options?: T): ClassDecorator {\n  return createBeanDecorator('theme', 'app', true, options);\n}\n","import type { IThemeRecord } from '../types/theme.js';\n\nexport function $getThemeName<K extends keyof IThemeRecord>(themeName: K): K {\n  return themeName;\n}\n","import { BeanBase, deepExtend } from 'zova';\n\nimport type { IDecoratorThemeOptions, IThemeApplyParams, ThemeToken } from '../types/theme.js';\n\nexport class BeanThemeBase extends BeanBase {\n  protected getOptionsToken(params: IThemeApplyParams) {\n    const options = this.$onionOptions as IDecoratorThemeOptions;\n    return options.token?.(params);\n  }\n\n  protected mergeOptionsToken(params: IThemeApplyParams, token: ThemeToken) {\n    const optionsToken = this.getOptionsToken(params);\n    if (optionsToken) {\n      token = deepExtend(token, optionsToken);\n    }\n    return token;\n  }\n}\n"],"mappings":"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"}

package/dist/monkey.d.ts

@@ -11,5 +11,6 @@ export declare class Monkey extends BeanSimple implements IMonkeyAppInitialize,
     _patchStyle(beanInstance: BeanBase, props: any, ...args: any[]): string | undefined;
     _patchCssRule(_beanInstance: BeanBase, selector: string, ...objects: NestedCSSProperties[]): void;
     _patchCssRaw(_beanInstance: BeanBase, mustBeValidCSS: string): void;
+    _patchCssMerge(beanInstance: BeanBase, ...args: any[]): string;
 }
 //# sourceMappingURL=monkey.d.ts.map

package/dist/monkey.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"monkey.d.ts","sourceRoot":"","sources":["../src/monkey.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAGlH,OAAO,EAA6B,UAAU,EAAmC,MAAM,MAAM,CAAC;AAO9F,qBAAa,MAAO,SAAQ,UAAW,YAAW,oBAAoB,EAAE,qBAAqB,EAAE,eAAe;IAC5G,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,cAAc,CAAY;IAE5B,aAAa;IAiBb,cAAc;IAQd,QAAQ,CAAC,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ;IAqD1D,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,KAAA,EAAE,GAAG,IAAI,OAAA;IAelD,aAAa,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,mBAAmB,EAAE;IAQ1F,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM;CAO7D"}
+{"version":3,"file":"monkey.d.ts","sourceRoot":"","sources":["../src/monkey.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,eAAe,EAAE,MAAM,MAAM,CAAC;AAGlH,OAAO,EAA6B,UAAU,EAAmC,MAAM,MAAM,CAAC;AAO9F,qBAAa,MAAO,SAAQ,UAAW,YAAW,oBAAoB,EAAE,qBAAqB,EAAE,eAAe;IAC5G,OAAO,CAAC,UAAU,CAAY;IAC9B,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,cAAc,CAAY;IAE5B,aAAa;IAiBb,cAAc;IAQd,QAAQ,CAAC,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,QAAQ;IA8D1D,WAAW,CAAC,YAAY,EAAE,QAAQ,EAAE,KAAK,KAAA,EAAE,GAAG,IAAI,OAAA;IAelD,aAAa,CAAC,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,OAAO,EAAE,mBAAmB,EAAE;IAQ1F,YAAY,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM;IAQ5D,cAAc,CAAC,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,MAAM;CAY/D"}

package/dist/types/style.d.ts

@@ -7,6 +7,7 @@ declare module 'zova' {
         $cssRule: typeof cssRule;
         $cssRaw: typeof cssRaw;
         $theme: BeanTheme;
+        $cssMerge: (...args: any[]) => string;
     }
 }
 //# sourceMappingURL=style.d.ts.map

package/dist/types/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/types/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,CAAC;AAEd,OAAO,QAAQ,MAAM,CAAC;IACpB,UAAiB,QAAQ;QACvB,MAAM,EAAE,OAAO,KAAK,CAAC;QACrB,QAAQ,EAAE,OAAO,OAAO,CAAC;QACzB,OAAO,EAAE,OAAO,MAAM,CAAC;QACvB,MAAM,EAAE,SAAS,CAAC;KACnB;CACF"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../src/types/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAExD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,MAAM,CAAC;AAEd,OAAO,QAAQ,MAAM,CAAC;IACpB,UAAiB,QAAQ;QACvB,MAAM,EAAE,OAAO,KAAK,CAAC;QACrB,QAAQ,EAAE,OAAO,OAAO,CAAC;QACzB,OAAO,EAAE,OAAO,MAAM,CAAC;QACvB,MAAM,EAAE,SAAS,CAAC;QAClB,SAAS,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,MAAM,CAAC;KACvC;CACF"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zova-module-a-style",
-  "version": "5.1.18",
-  "gitHead": "ddec2a32e5fd0e85af5967caa29e4d0e5e0f6117",
+  "version": "5.1.19",
+  "gitHead": "106d9830a06a019121adf3af44e0ae22063aed55",
   "description": "style",
   "keywords": [
     "Zova Module"

package/src/monkey.ts

@@ -2,7 +2,7 @@ import type { TypeStyle } from 'typestyle';
 import type { NestedCSSProperties } from 'typestyle/lib/types.js';
 import type { BeanBase, BeanContainer, IMonkeyAppInitialize, IMonkeyAppInitialized, IMonkeyBeanInit } from 'zova';
 
-import { createTypeStyle, cssRaw, cssRule, style } from 'typestyle';
+import { classes, createTypeStyle, cssRaw, cssRule, style } from 'typestyle';
 import { beanFullNameFromOnionName, BeanSimple, SymbolBeanFullName, useComputed } from 'zova';
 
 import type { ScopeModule } from './.metadata/this.js';
@@ -77,6 +77,15 @@ export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyA
         return self._beanCssBase;
       },
     });
+    bean.defineProperty(beanInstance, '$cssMerge', {
+      enumerable: false,
+      configurable: true,
+      get() {
+        return function (...args) {
+          return self._patchCssMerge(beanInstance, ...args);
+        };
+      },
+    });
     bean.defineProperty(beanInstance, '$theme', {
       enumerable: false,
       configurable: true,
@@ -123,4 +132,17 @@ export class Monkey extends BeanSimple implements IMonkeyAppInitialize, IMonkeyA
       return cssRaw(mustBeValidCSS);
     }
   }
+
+  _patchCssMerge(beanInstance: BeanBase, ...args: any[]): string {
+    const args2 = args.map(item => {
+      if (Array.isArray(item)) {
+        return this._patchCssMerge(beanInstance, ...item);
+      } else if (typeof item === 'string' && item.startsWith('cssBase:')) {
+        const varName = item.substring('cssBase:'.length);
+        return beanInstance.$cssBase[varName];
+      }
+      return item;
+    });
+    return classes(...args2);
+  }
 }

package/src/types/style.ts

@@ -9,5 +9,6 @@ declare module 'zova' {
     $cssRule: typeof cssRule;
     $cssRaw: typeof cssRaw;
     $theme: BeanTheme;
+    $cssMerge: (...args: any[]) => string;
   }
 }