@antdv-next/cssinjs 0.0.3 → 1.0.0-alpha.1

package/dist/cssinjs-utils/util/genStyleUtils.d.ts

@@ -0,0 +1,127 @@
+import { AbstractCalculator } from "../../theme/calc/calculator.js";
+import { TokenType } from "../../theme/interface.js";
+import { ComponentTokenKey, GlobalTokenWithComponent, TokenMap, TokenMapKey } from "../interface/components.js";
+import { CSSInterpolation, CSSObject, useStyleRegister } from "../../hooks/useStyleRegister.js";
+import "../../index.js";
+import { UseCSP } from "../hooks/useCSP.js";
+import { UsePrefix } from "../hooks/usePrefix.js";
+import { UseToken } from "../hooks/useToken.js";
+import * as vue0 from "vue";
+import { Ref, UnwrapRef } from "vue";
+
+//#region src/cssinjs-utils/util/genStyleUtils.d.ts
+type LayerConfig = UnwrapRef<Parameters<typeof useStyleRegister>[0]>['layer'];
+interface StyleInfo {
+  hashId: string;
+  prefixCls: string;
+  rootPrefixCls: string;
+  iconPrefixCls: string;
+}
+interface CSSUtil {
+  calc: (number: any) => AbstractCalculator;
+  max: (...values: (number | string)[]) => number | string;
+  min: (...values: (number | string)[]) => number | string;
+}
+type TokenWithCommonCls<T> = T & {
+  /** Wrap component class with `.` prefix */
+  componentCls: string;
+  /** Origin prefix which do not have `.` prefix */
+  prefixCls: string;
+  /** Wrap icon class with `.` prefix */
+  iconCls: string;
+  /** Wrap ant prefixCls class with `.` prefix */
+  antCls: string;
+} & CSSUtil;
+type FullToken<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = TokenWithCommonCls<GlobalTokenWithComponent<CompTokenMap, AliasToken, C>>;
+type GenStyleFn<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = (token: FullToken<CompTokenMap, AliasToken, C>, info: StyleInfo) => CSSInterpolation;
+type GetDefaultTokenFn<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = (token: AliasToken & Partial<CompTokenMap[C]>) => CompTokenMap[C];
+type GetDefaultToken<CompTokenMap extends TokenMap, AliasToken extends TokenType, C extends TokenMapKey<CompTokenMap>> = null | CompTokenMap[C] | GetDefaultTokenFn<CompTokenMap, AliasToken, C>;
+interface SubStyleComponentProps {
+  prefixCls: string;
+  rootCls?: string;
+}
+interface CSSVarRegisterProps {
+  rootCls: string;
+  component: string;
+  cssVar: {
+    prefix?: string;
+    key?: string;
+  };
+}
+interface GetResetStylesConfig {
+  prefix: ReturnType<UsePrefix>;
+  csp: ReturnType<UseCSP>;
+}
+type GetResetStyles<AliasToken extends TokenType> = (token: AliasToken, config?: GetResetStylesConfig) => CSSInterpolation;
+type GetCompUnitless<CompTokenMap extends TokenMap, AliasToken extends TokenType> = <C extends TokenMapKey<CompTokenMap>>(component: C | [C, string]) => Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
+declare function genStyleUtils<CompTokenMap extends TokenMap, AliasToken extends TokenType, DesignToken extends TokenType>(config: {
+  usePrefix: UsePrefix;
+  useToken: UseToken<CompTokenMap, AliasToken, DesignToken>;
+  useCSP?: UseCSP;
+  getResetStyles?: GetResetStyles<AliasToken>;
+  getCommonStyle?: (token: AliasToken, componentPrefixCls: string, rootCls?: string, resetFont?: boolean) => CSSObject;
+  getCompUnitless?: GetCompUnitless<CompTokenMap, AliasToken>;
+  layer?: LayerConfig;
+}): {
+  genStyleHooks: <C extends TokenMapKey<CompTokenMap>>(component: C | [C, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>, options?: {
+    resetStyle?: boolean;
+    resetFont?: boolean;
+    deprecatedTokens?: [ComponentTokenKey<CompTokenMap, AliasToken, C>, ComponentTokenKey<CompTokenMap, AliasToken, C>][];
+    /**
+     * Component tokens that do not need unit.
+     */
+    unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
+    /**
+     * Set order of component style.
+     * @default -999
+     */
+    order?: number;
+    /**
+     * Whether generate styles
+     * @default true
+     */
+    injectStyle?: boolean;
+  }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => readonly [Ref<string, string>, vue0.ComputedRef<string | undefined>];
+  genSubStyleComponent: <C extends TokenMapKey<CompTokenMap>>(componentName: C | [C, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>, options?: {
+    resetStyle?: boolean;
+    resetFont?: boolean;
+    deprecatedTokens?: [ComponentTokenKey<CompTokenMap, AliasToken, C>, ComponentTokenKey<CompTokenMap, AliasToken, C>][];
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+    injectStyle?: boolean;
+    unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
+  }) => vue0.DefineComponent<vue0.ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    rootCls: StringConstructor;
+  }>, () => null, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
+    prefixCls: StringConstructor;
+    rootCls: StringConstructor;
+  }>> & Readonly<{}>, {}, {}, {}, {}, string, vue0.ComponentProvideOptions, true, {}, any>;
+  genComponentStyleHook: <C extends TokenMapKey<CompTokenMap>>(componentName: C | [C, string], styleFn: GenStyleFn<CompTokenMap, AliasToken, C>, getDefaultToken?: GetDefaultToken<CompTokenMap, AliasToken, C>, options?: {
+    resetStyle?: boolean;
+    resetFont?: boolean;
+    deprecatedTokens?: [ComponentTokenKey<CompTokenMap, AliasToken, C>, ComponentTokenKey<CompTokenMap, AliasToken, C>][];
+    /**
+     * Only use component style in client side. Ignore in SSR.
+     */
+    clientOnly?: boolean;
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+    injectStyle?: boolean;
+    unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
+  }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => Ref<string, string>;
+};
+//#endregion
+export { CSSUtil, CSSVarRegisterProps, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, StyleInfo, SubStyleComponentProps, TokenWithCommonCls, genStyleUtils };

package/dist/cssinjs-utils/util/genStyleUtils.js

@@ -0,0 +1,188 @@
+import calc_default from "../../theme/calc/index.js";
+import { token2CSSVar } from "../../util/css-variables.js";
+import useStyleRegister from "../../hooks/useStyleRegister.js";
+import useCSSVarRegister from "../../hooks/useCSSVarRegister.js";
+import useUniqueMemo_default from "../_util/hooks/useUniqueMemo.js";
+import useCSP_default from "../hooks/useCSP.js";
+import getComponentToken_default from "./getComponentToken.js";
+import getCompVarPrefix_default from "./getCompVarPrefix.js";
+import statistic_default, { merge } from "./statistic.js";
+import getDefaultComponentToken_default from "./getDefaultComponentToken.js";
+import maxmin_default from "./maxmin.js";
+import "../../index.js";
+import { computed, defineComponent } from "vue";
+
+//#region src/cssinjs-utils/util/genStyleUtils.ts
+function genStyleUtils(config) {
+	const { useCSP = useCSP_default, useToken, usePrefix, getResetStyles, getCommonStyle, getCompUnitless } = config;
+	function genStyleHooks(component, styleFn, getDefaultToken, options) {
+		const componentName = Array.isArray(component) ? component[0] : component;
+		function prefixToken(key) {
+			return `${String(componentName)}${key.slice(0, 1).toUpperCase()}${key.slice(1)}`;
+		}
+		const originUnitless = options?.unitless || {};
+		const compUnitless = {
+			...typeof getCompUnitless === "function" ? getCompUnitless(component) : {},
+			[prefixToken("zIndexPopup")]: true
+		};
+		Object.keys(originUnitless).forEach((key) => {
+			compUnitless[prefixToken(key)] = originUnitless[key];
+		});
+		const mergedOptions = {
+			...options,
+			unitless: compUnitless,
+			prefixToken
+		};
+		const useStyle = genComponentStyleHook(component, styleFn, getDefaultToken, mergedOptions);
+		const useCSSVar = genCSSVarRegister(componentName, getDefaultToken, mergedOptions);
+		return (prefixCls, rootCls = prefixCls) => {
+			return [useStyle(prefixCls, rootCls), useCSSVar(rootCls)];
+		};
+	}
+	function genCSSVarRegister(component, getDefaultToken, options) {
+		const { unitless: compUnitless, prefixToken, ignore } = options;
+		return (rootCls) => {
+			const { cssVar, realToken } = useToken();
+			useCSSVarRegister(computed(() => {
+				const _cssVar = cssVar.value;
+				return {
+					path: [component],
+					prefix: _cssVar?.prefix,
+					key: _cssVar.key,
+					unitless: compUnitless,
+					ignore,
+					token: realToken?.value,
+					scope: rootCls.value
+				};
+			}), () => {
+				const defaultToken = getDefaultComponentToken_default(component, realToken.value, getDefaultToken);
+				const componentToken = getComponentToken_default(component, realToken.value, defaultToken, { deprecatedTokens: options?.deprecatedTokens });
+				if (defaultToken) Object.keys(defaultToken).forEach((key) => {
+					componentToken[prefixToken(key)] = componentToken[key];
+					delete componentToken[key];
+				});
+				return componentToken;
+			});
+			return computed(() => cssVar?.value?.key);
+		};
+	}
+	function genComponentStyleHook(componentName, styleFn, getDefaultToken, options = {}) {
+		const cells = Array.isArray(componentName) ? componentName : [componentName, componentName];
+		const [component] = cells;
+		const concatComponent = cells.join("-");
+		const mergedLayer = config.layer || { name: "antd" };
+		return (prefixCls, rootCls) => {
+			const { theme, realToken, hashId, token, cssVar, zeroRuntime } = useToken();
+			if (computed(() => {
+				return zeroRuntime?.value;
+			}).value) return hashId;
+			const prefix = usePrefix();
+			const csp = useCSP();
+			const type = computed(() => cssVar?.value ? "css" : "js");
+			const calc = computed(() => {
+				return useUniqueMemo_default(() => {
+					const unitlessCssVar = /* @__PURE__ */ new Set();
+					if (cssVar) Object.keys(options.unitless || {}).forEach((key) => {
+						unitlessCssVar.add(token2CSSVar(key, cssVar.value.prefix));
+						unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix_default(component, cssVar.value.prefix)));
+					});
+					return calc_default(type.value, unitlessCssVar);
+				}, [
+					type,
+					component,
+					cssVar?.value?.prefix
+				]);
+			});
+			const maxMinFunc = computed(() => maxmin_default(type.value));
+			const sharedConfig = computed(() => {
+				return {
+					theme: theme?.value,
+					token: token.value,
+					hashId: hashId?.value,
+					nonce: () => csp.value.nonce,
+					clientOnly: options.clientOnly,
+					layer: mergedLayer,
+					order: options.order || -999
+				};
+			});
+			if (typeof getResetStyles === "function") useStyleRegister(computed(() => ({
+				...sharedConfig.value,
+				clientOnly: false,
+				path: ["Shared", prefix.value?.rootPrefixCls]
+			})), () => getResetStyles(token.value, {
+				prefix: computed(() => ({
+					rootPrefixCls: prefix.value.rootPrefixCls,
+					iconPrefixCls: prefix.value.iconPrefixCls
+				})),
+				csp
+			}));
+			useStyleRegister(computed(() => {
+				return {
+					...sharedConfig.value,
+					path: [
+						concatComponent,
+						prefixCls.value,
+						prefix.value.iconPrefixCls
+					]
+				};
+			}), () => {
+				if (options.injectStyle === false) return [];
+				const { token: proxyToken, flush } = statistic_default(token);
+				const defaultComponentToken = getDefaultComponentToken_default(component, realToken.value, getDefaultToken);
+				const componentCls = `.${prefixCls.value}`;
+				const componentToken = getComponentToken_default(component, realToken.value, defaultComponentToken, { deprecatedTokens: options.deprecatedTokens });
+				if (cssVar && defaultComponentToken && typeof defaultComponentToken === "object") Object.keys(defaultComponentToken).forEach((key) => {
+					defaultComponentToken[key] = `var(${token2CSSVar(key, getCompVarPrefix_default(component, cssVar.value.prefix))})`;
+				});
+				const mergedToken = merge(proxyToken.value, {
+					componentCls,
+					prefixCls: prefixCls.value,
+					iconCls: `.${prefix.value.iconPrefixCls}`,
+					antCls: `.${prefix.value.rootPrefixCls}`,
+					calc: calc.value,
+					max: maxMinFunc.value.max,
+					min: maxMinFunc.value.min
+				}, cssVar?.value ? defaultComponentToken : componentToken);
+				const styleInterpolation = styleFn(mergedToken, {
+					hashId: hashId.value,
+					prefixCls: prefixCls.value,
+					rootPrefixCls: prefix.value.rootPrefixCls,
+					iconPrefixCls: prefix.value.iconPrefixCls
+				});
+				flush(component, componentToken);
+				const commonStyle = typeof getCommonStyle === "function" ? getCommonStyle(mergedToken, prefixCls.value, rootCls?.value, options.resetFont) : null;
+				return [options.resetStyle === false ? null : commonStyle, styleInterpolation];
+			});
+			return hashId;
+		};
+	}
+	function genSubStyleComponent(componentName, styleFn, getDefaultToken, options = {}) {
+		const useStyle = genComponentStyleHook(componentName, styleFn, getDefaultToken, {
+			resetStyle: false,
+			order: -998,
+			...options
+		});
+		return defineComponent({
+			props: {
+				prefixCls: String,
+				rootCls: String
+			},
+			setup(props) {
+				useStyle(computed(() => props.prefixCls), computed(() => props.rootCls ?? props.prefixCls));
+				return () => {
+					return null;
+				};
+			},
+			name: `SubStyle_${String(Array.isArray(componentName) ? componentName.join(".") : componentName)}`
+		});
+	}
+	return {
+		genStyleHooks,
+		genSubStyleComponent,
+		genComponentStyleHook
+	};
+}
+var genStyleUtils_default = genStyleUtils;
+
+//#endregion
+export { genStyleUtils_default as default };

package/dist/cssinjs-utils/util/getCompVarPrefix.js

@@ -0,0 +1,8 @@
+//#region src/cssinjs-utils/util/getCompVarPrefix.ts
+function getCompVarPrefix(component, prefix) {
+	return [prefix, component.replace(/([A-Z]+)([A-Z][a-z]+)/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2")].filter(Boolean).join("-");
+}
+var getCompVarPrefix_default = getCompVarPrefix;
+
+//#endregion
+export { getCompVarPrefix_default as default };

package/dist/cssinjs-utils/util/getComponentToken.js

@@ -0,0 +1,22 @@
+import { warning } from "@v-c/util/dist/warning";
+
+//#region src/cssinjs-utils/util/getComponentToken.ts
+function getComponentToken(component, token, defaultToken, options) {
+	const customToken = { ...token[component] };
+	if (options?.deprecatedTokens) options.deprecatedTokens.forEach(([oldKey, newKey]) => {
+		if (process.env.NODE_ENV !== "production") warning(!customToken?.[oldKey], `Component Token \`${String(oldKey)}\` of ${String(component)} is deprecated. Please use \`${String(newKey)}\` instead.`);
+		if (customToken?.[oldKey] || customToken?.[newKey]) customToken[newKey] ??= customToken?.[oldKey];
+	});
+	const mergedToken = {
+		...defaultToken,
+		...customToken
+	};
+	Object.keys(mergedToken).forEach((key) => {
+		if (mergedToken[key] === token[key]) delete mergedToken[key];
+	});
+	return mergedToken;
+}
+var getComponentToken_default = getComponentToken;
+
+//#endregion
+export { getComponentToken_default as default };

package/dist/cssinjs-utils/util/getDefaultComponentToken.js

@@ -0,0 +1,11 @@
+import { merge } from "./statistic.js";
+
+//#region src/cssinjs-utils/util/getDefaultComponentToken.ts
+function getDefaultComponentToken(component, token, getDefaultToken) {
+	if (typeof getDefaultToken === "function") return getDefaultToken(merge(token, token[component] ?? {}));
+	return getDefaultToken ?? {};
+}
+var getDefaultComponentToken_default = getDefaultComponentToken;
+
+//#endregion
+export { getDefaultComponentToken_default as default };

package/dist/cssinjs-utils/util/maxmin.js

@@ -0,0 +1,17 @@
+import { unit } from "../../util/index.js";
+
+//#region src/cssinjs-utils/util/maxmin.ts
+function genMaxMin(type) {
+	if (type === "js") return {
+		max: Math.max,
+		min: Math.min
+	};
+	return {
+		max: (...args) => `max(${args.map((value) => unit(value)).join(",")})`,
+		min: (...args) => `min(${args.map((value) => unit(value)).join(",")})`
+	};
+}
+var maxmin_default = genMaxMin;
+
+//#endregion
+export { maxmin_default as default };

package/dist/cssinjs-utils/util/statistic.d.ts

@@ -0,0 +1,15 @@
+import { TokenMap } from "../interface/components.js";
+
+//#region src/cssinjs-utils/util/statistic.d.ts
+declare function merge<CompTokenMap extends TokenMap>(...objs: Partial<CompTokenMap>[]): CompTokenMap;
+declare const statistic: Record<string, {
+  global: string[];
+  component: Record<string, string | number>;
+}>;
+declare function statisticToken<CompTokenMap extends TokenMap>(token: CompTokenMap): {
+  token: CompTokenMap;
+  keys: Set<string> | undefined;
+  flush: (component: string, componentToken: Record<string, string | number>) => void;
+};
+//#endregion
+export { merge, statistic, statisticToken };

package/dist/cssinjs-utils/util/statistic.js

@@ -0,0 +1,52 @@
+//#region src/cssinjs-utils/util/statistic.ts
+const enableStatistic = process.env.NODE_ENV !== "production" || typeof CSSINJS_STATISTIC !== "undefined";
+let recording = true;
+function merge(...objs) {
+	if (!enableStatistic) return Object.assign({}, ...objs);
+	recording = false;
+	const ret = {};
+	objs.forEach((obj) => {
+		if (!obj || typeof obj !== "object") return;
+		Object.keys(obj).forEach((key) => {
+			Object.defineProperty(ret, key, {
+				configurable: true,
+				enumerable: true,
+				get: () => obj[key]
+			});
+		});
+	});
+	recording = true;
+	return ret;
+}
+const statistic = {};
+function noop() {}
+function statisticToken(token) {
+	let tokenKeys;
+	let proxy = token;
+	let flush = noop;
+	if (enableStatistic && typeof Proxy !== "undefined") {
+		tokenKeys = /* @__PURE__ */ new Set();
+		proxy = new Proxy(token, { get(obj, prop) {
+			if (recording) tokenKeys?.add(String(prop));
+			return obj[prop];
+		} });
+		flush = (componentName, componentToken) => {
+			statistic[componentName] = {
+				global: Array.from(tokenKeys),
+				component: {
+					...statistic[componentName]?.component,
+					...componentToken
+				}
+			};
+		};
+	}
+	return {
+		token: proxy,
+		keys: tokenKeys,
+		flush
+	};
+}
+var statistic_default = statisticToken;
+
+//#endregion
+export { statistic_default as default, merge, statistic };

package/dist/extractStyle.d.ts

@@ -0,0 +1,18 @@
+import { Entity } from "./Cache.js";
+import { ExtractStyle } from "./hooks/useGlobalCache.js";
+import { CSSVarCacheValue } from "./hooks/useCSSVarRegister.js";
+
+//#region src/extractStyle.d.ts
+declare const ExtractStyleFns: {
+  style: ExtractStyle<[styleStr: string, styleId: string, effectStyle: Record<string, string>, clientOnly: boolean | undefined, order: number]>;
+  token: ExtractStyle<[token: any, hashId: string, realToken: any, cssVarStr: string, cssVarKey: string]>;
+  cssVar: ExtractStyle<CSSVarCacheValue<any, Record<string, any>>>;
+};
+type ExtractStyleType = keyof typeof ExtractStyleFns;
+declare function extractStyle(cache: Entity, options?: boolean | {
+  plain?: boolean;
+  types?: ExtractStyleType | ExtractStyleType[];
+  once?: boolean;
+}): string;
+//#endregion
+export { extractStyle };

package/dist/extractStyle.js

@@ -0,0 +1,54 @@
+import { toStyleStr } from "./util/index.js";
+import { TOKEN_PREFIX, extract } from "./hooks/useCacheToken.js";
+import { ATTR_CACHE_MAP, serialize } from "./util/cacheMapUtil.js";
+import { STYLE_PREFIX, extract as extract$2 } from "./hooks/useStyleRegister.js";
+import { CSS_VAR_PREFIX, extract as extract$1 } from "./hooks/useCSSVarRegister.js";
+
+//#region src/extractStyle.ts
+const ExtractStyleFns = {
+	[STYLE_PREFIX]: extract$2,
+	[TOKEN_PREFIX]: extract,
+	[CSS_VAR_PREFIX]: extract$1
+};
+function isNotNull(value) {
+	return value !== null;
+}
+function extractStyle(cache, options) {
+	const { plain = false, types = [
+		"style",
+		"token",
+		"cssVar"
+	], once = false } = typeof options === "boolean" ? { plain: options } : options || {};
+	const matchPrefixRegexp = /* @__PURE__ */ new RegExp(`^(${(typeof types === "string" ? [types] : types).join("|")})%`);
+	const styleKeys = Array.from(cache.cache.keys()).filter((key) => matchPrefixRegexp.test(key));
+	const effectStyles = {};
+	const cachePathMap = {};
+	let styleText = "";
+	styleKeys.map((key) => {
+		if (once && cache.extracted.has(key)) return null;
+		const cachePath = key.replace(matchPrefixRegexp, "").replace(/%/g, "|");
+		const [prefix] = key.split("%");
+		const extractFn = ExtractStyleFns[prefix];
+		const extractedStyle = extractFn(cache.cache.get(key)[1], effectStyles, { plain });
+		if (!extractedStyle) return null;
+		const updateTime = cache.updateTimes.get(key) || 0;
+		const [order, styleId, styleStr] = extractedStyle;
+		if (key.startsWith("style")) cachePathMap[cachePath] = styleId;
+		cache.extracted.add(key);
+		return [
+			order,
+			styleStr,
+			updateTime
+		];
+	}).filter(isNotNull).sort(([o1, , u1], [o2, , u2]) => {
+		if (o1 !== o2) return o1 - o2;
+		return u1 - u2;
+	}).forEach(([, style]) => {
+		styleText += style;
+	});
+	styleText += toStyleStr(`.${ATTR_CACHE_MAP}{content:"${serialize(cachePathMap)}";}`, void 0, void 0, { [ATTR_CACHE_MAP]: ATTR_CACHE_MAP }, plain);
+	return styleText;
+}
+
+//#endregion
+export { extractStyle as default };

package/dist/hooks/useCSSVarRegister.d.ts

@@ -0,0 +1,19 @@
+import "./useGlobalCache.js";
+import { TokenWithCSSVar } from "../util/css-variables.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useCSSVarRegister.d.ts
+type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [cssVarToken: TokenWithCSSVar<V, T>, cssVarStr: string, styleId: string, cssVarKey: string];
+interface CSSVarRegisterConfig {
+  path: string[];
+  key: string;
+  prefix?: string;
+  unitless?: Record<string, boolean>;
+  ignore?: Record<string, boolean>;
+  scope?: string;
+  token: any;
+  hashId?: string;
+}
+declare function useCSSVarRegister<V, T extends Record<string, V>>(config: Ref<CSSVarRegisterConfig>, fn: () => T): Ref<CSSVarCacheValue<V, T>, CSSVarCacheValue<V, T>>;
+//#endregion
+export { CSSVarCacheValue, useCSSVarRegister };

package/dist/hooks/useCSSVarRegister.js

@@ -0,0 +1,74 @@
+import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleContext } from "../StyleContext.js";
+import { transformToken } from "../util/css-variables.js";
+import { isClientSide, toStyleStr } from "../util/index.js";
+import { useGlobalCache } from "./useGlobalCache.js";
+import { uniqueHash } from "./useStyleRegister.js";
+import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
+import { computed } from "vue";
+
+//#region src/hooks/useCSSVarRegister.ts
+const CSS_VAR_PREFIX = "cssVar";
+function useCSSVarRegister(config, fn) {
+	const styleContext = useStyleContext();
+	const stylePath = computed(() => {
+		const { key, prefix, scope = "" } = config.value;
+		return [
+			...config.value.path,
+			key,
+			prefix,
+			scope
+		];
+	});
+	return useGlobalCache(computed(() => CSS_VAR_PREFIX), stylePath, () => {
+		const originToken = fn();
+		const { key, prefix, unitless, ignore, hashId, scope = "" } = config.value;
+		const hashPriority = styleContext.value.hashPriority;
+		const [mergedToken, cssVarsStr] = transformToken(originToken, key, {
+			prefix,
+			unitless,
+			ignore,
+			scope,
+			hashPriority,
+			hashCls: hashId
+		});
+		return [
+			mergedToken,
+			cssVarsStr,
+			uniqueHash(stylePath.value, cssVarsStr),
+			key
+		];
+	}, ([, , styleId]) => {
+		if (isClientSide) removeCSS(styleId, {
+			mark: ATTR_MARK,
+			attachTo: styleContext.value.container
+		});
+	}, ([, cssVarsStr, styleId]) => {
+		if (!cssVarsStr) return;
+		const context = styleContext.value;
+		const style = updateCSS(cssVarsStr, styleId, {
+			mark: ATTR_MARK,
+			prepend: "queue",
+			attachTo: context.container,
+			priority: -999
+		});
+		style[CSS_IN_JS_INSTANCE] = context.cache.instanceId;
+		style.setAttribute(ATTR_TOKEN, config.value.key);
+	});
+}
+const extract = (cache, _effectStyles, options) => {
+	const [, styleStr, styleId, cssVarKey] = cache;
+	const { plain } = options || {};
+	if (!styleStr) return null;
+	const order = -999;
+	return [
+		order,
+		styleId,
+		toStyleStr(styleStr, cssVarKey, styleId, {
+			"data-rc-order": "prependQueue",
+			"data-rc-priority": `${order}`
+		}, plain)
+	];
+};
+
+//#endregion
+export { CSS_VAR_PREFIX, useCSSVarRegister as default, extract };

package/dist/hooks/useCacheToken.d.ts

@@ -0,0 +1,60 @@
+import { Theme } from "../theme/Theme.js";
+import "./useGlobalCache.js";
+import { Ref } from "vue";
+
+//#region src/hooks/useCacheToken.d.ts
+interface Option<DerivativeToken, DesignToken> {
+  /**
+   * Generate token with salt.
+   * This is used to generate different hashId even same derivative token for different version.
+   */
+  salt?: string;
+  override?: object;
+  /**
+   * Format token as you need. Such as:
+   *
+   * - rename token
+   * - merge token
+   * - delete token
+   *
+   * This should always be the same since it's one time process.
+   * It's ok to useMemo outside but this has better cache strategy.
+   */
+  formatToken?: (mergedToken: any) => DerivativeToken;
+  /**
+   * Get final token with origin token, override token and theme.
+   * The parameters do not contain formatToken since it's passed by user.
+   * @param origin The original token.
+   * @param override Extra tokens to override.
+   * @param theme Theme instance. Could get derivative token by `theme.getDerivativeToken`
+   */
+  getComputedToken?: (origin: DesignToken, override: object, theme: Theme<any, any>) => DerivativeToken;
+  /**
+   * Transform token to css variables.
+   */
+  cssVar: {
+    hashed?: boolean;
+    /** Prefix for css variables */
+    prefix?: string;
+    /** Tokens that should not be appended with unit */
+    unitless?: Record<string, boolean>;
+    /** Tokens that should not be transformed to css variables */
+    ignore?: Record<string, boolean>;
+    /** Tokens that preserves origin value */
+    preserve?: Record<string, boolean>;
+    /** Key for current theme. Useful for customizing and should be unique */
+    key: string;
+  };
+}
+declare function getComputedToken<DerivativeToken = object, DesignToken = DerivativeToken>(originToken: DesignToken, overrideToken: object, theme: Theme<any, any>, format?: (token: DesignToken) => DerivativeToken): any;
+type TokenCacheValue<DerivativeToken> = [token: DerivativeToken, hashId: string, realToken: DerivativeToken, cssVarStr: string, cssVarKey: string];
+/**
+ * Cache theme derivative token as global shared one
+ * @param theme Theme entity
+ * @param tokens List of tokens, used for cache. Please do not dynamic generate object directly
+ * @param option Additional config
+ * @returns Call Theme.getDerivativeToken(tokenObject) to get token
+ */
+declare function useCacheToken<DerivativeToken = Record<string, any>, DesignToken = DerivativeToken>(theme: Ref<Theme<any, any>>, tokens: Ref<(Partial<DesignToken> | (() => Partial<DesignToken>))[]>, option: Ref<Option<DerivativeToken, DesignToken>>): Ref<TokenCacheValue<DerivativeToken>, TokenCacheValue<DerivativeToken>>;
+//#endregion
+export { getComputedToken, useCacheToken };