@antdv-next/cssinjs 1.0.0-beta.2 → 1.0.0-rc.2

package/dist/Cache.d.mts

@@ -2,7 +2,6 @@
 type KeyType = string | number;
 type ValueType = [number, any];
 /** Connect key with `SPLIT` */
-
 declare class Entity {
   instanceId: string;
   constructor(instanceId: string);

package/dist/StyleContext.d.mts

@@ -1,22 +1,21 @@
 import { Linter } from "./linters/interface.mjs";
 import "./linters/index.mjs";
 import { Entity, KeyType } from "./Cache.mjs";
-import * as vue0 from "vue";
+import * as vue7 from "vue";
 import { App, Ref } from "vue";
 
 //#region src/StyleContext.d.ts
-
-declare function createCache(): vue0.Raw<Entity>;
+declare function createCache(): vue7.Raw<Entity>;
 declare function useStyleContextProvide(props: Ref<StyleContextProps>): void;
 declare function provideStyleContext(app: App, props: Ref<StyleContextProps>): void;
 declare function useStyleContext(): Ref<{
-  autoClear?: boolean
-  /** @private Test only. Not work in production. */ | undefined;
+  autoClear?: boolean /** @private Test only. Not work in production. */ | undefined;
   mock?: "server" | "client"
   /**
    * Only set when you need ssr to extract style on you own.
    * If not provided, it will auto create <style /> on the end of Provider in server side.
-   */ | undefined;
+   */
+  | undefined;
   cache: {
     instanceId: string;
     cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
@@ -28,11 +27,9 @@ declare function useStyleContext(): Ref<{
     opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
   };
   defaultCache: boolean;
-  hashPriority?: HashPriority
-  /** Tell cssinjs where to inject style in */ | undefined;
+  hashPriority?: HashPriority /** Tell cssinjs where to inject style in */ | undefined;
   container?: (Element | ShadowRoot) | undefined;
-  ssrInline?: boolean
-  /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
+  ssrInline?: boolean /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
   transformers?: {
     flush?: TransformerFlushCallback<any> | undefined;
     readableType?: undefined | undefined;
@@ -40,19 +37,17 @@ declare function useStyleContext(): Ref<{
     transform?: TransformerTransformCallback<any, any> | undefined;
     writableType?: undefined | undefined;
   }[] | undefined;
-  linters?: Linter[]
-  /** Wrap css in a layer to avoid global style conflict */ | undefined;
-  layer?: boolean
-  /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
+  linters?: Linter[] /** Wrap css in a layer to avoid global style conflict */ | undefined;
+  layer?: boolean /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
   autoPrefix?: boolean | undefined;
 }, StyleContextProps | {
-  autoClear?: boolean
-  /** @private Test only. Not work in production. */ | undefined;
+  autoClear?: boolean /** @private Test only. Not work in production. */ | undefined;
   mock?: "server" | "client"
   /**
    * Only set when you need ssr to extract style on you own.
    * If not provided, it will auto create <style /> on the end of Provider in server side.
-   */ | undefined;
+   */
+  | undefined;
   cache: {
     instanceId: string;
     cache: Map<string, [number, any]> & Omit<Map<string, [number, any]>, keyof Map<any, any>>;
@@ -64,11 +59,9 @@ declare function useStyleContext(): Ref<{
     opUpdate: (keyPathStr: string, valueFn: (origin: [number, any] | null) => [number, any] | null) => void;
   };
   defaultCache: boolean;
-  hashPriority?: HashPriority
-  /** Tell cssinjs where to inject style in */ | undefined;
+  hashPriority?: HashPriority /** Tell cssinjs where to inject style in */ | undefined;
   container?: (Element | ShadowRoot) | undefined;
-  ssrInline?: boolean
-  /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
+  ssrInline?: boolean /** Transform css before inject in document. Please note that `transformers` do not support dynamic update */ | undefined;
   transformers?: {
     flush?: TransformerFlushCallback<any> | undefined;
     readableType?: undefined | undefined;
@@ -76,10 +69,8 @@ declare function useStyleContext(): Ref<{
     transform?: TransformerTransformCallback<any, any> | undefined;
     writableType?: undefined | undefined;
   }[] | undefined;
-  linters?: Linter[]
-  /** Wrap css in a layer to avoid global style conflict */ | undefined;
-  layer?: boolean
-  /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
+  linters?: Linter[] /** Wrap css in a layer to avoid global style conflict */ | undefined;
+  layer?: boolean /** Hardcode here since transformer not support take effect on serialize currently */ | undefined;
   autoPrefix?: boolean | undefined;
 }>;
 type HashPriority = 'low' | 'high';
@@ -114,6 +105,6 @@ interface StyleContextProps {
   autoPrefix?: boolean;
 }
 type StyleProviderProps = StyleContextProps;
-declare const StyleProvider: vue0.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue0.PublicProps>;
+declare const StyleProvider: vue7.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue7.PublicProps>;
 //#endregion
 export { StyleProvider, StyleProviderProps, createCache, provideStyleContext, useStyleContext, useStyleContextProvide };

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

@@ -6,7 +6,7 @@ import "../../index.mjs";
 import { UseCSP } from "../hooks/useCSP.mjs";
 import { UsePrefix } from "../hooks/usePrefix.mjs";
 import { UseToken } from "../hooks/useToken.mjs";
-import * as vue2 from "vue";
+import * as vue0 from "vue";
 import { Ref, UnwrapRef } from "vue";
 
 //#region src/cssinjs-utils/util/genStyleUtils.d.ts
@@ -23,13 +23,9 @@ interface CSSUtil {
   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 */
+  /** 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>>;
@@ -85,7 +81,7 @@ declare function genStyleUtils<CompTokenMap extends TokenMap, AliasToken extends
      * @default true
      */
     injectStyle?: boolean;
-  }) => (prefixCls: Ref<string>, rootCls?: Ref<string | undefined>) => readonly [Ref<string, string>, vue2.ComputedRef<string | undefined>];
+  }) => (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;
@@ -100,13 +96,13 @@ declare function genStyleUtils<CompTokenMap extends TokenMap, AliasToken extends
     order?: number;
     injectStyle?: boolean;
     unitless?: Partial<Record<ComponentTokenKey<CompTokenMap, AliasToken, C>, boolean>>;
-  }) => vue2.DefineComponent<vue2.ExtractPropTypes<{
+  }) => vue0.DefineComponent<vue0.ExtractPropTypes<{
     prefixCls: StringConstructor;
     rootCls: StringConstructor;
-  }>, () => null, {}, {}, {}, vue2.ComponentOptionsMixin, vue2.ComponentOptionsMixin, {}, string, vue2.PublicProps, Readonly<vue2.ExtractPropTypes<{
+  }>, () => null, {}, {}, {}, vue0.ComponentOptionsMixin, vue0.ComponentOptionsMixin, {}, string, vue0.PublicProps, Readonly<vue0.ExtractPropTypes<{
     prefixCls: StringConstructor;
     rootCls: StringConstructor;
-  }>> & Readonly<{}>, {}, {}, {}, {}, string, vue2.ComponentProvideOptions, true, {}, any>;
+  }>> & 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;

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

@@ -72,7 +72,7 @@ function genStyleUtils(config) {
 		const concatComponent = cells.join("-");
 		const mergedLayer = config.layer || { name: "antd" };
 		return (prefixCls, rootCls) => {
-			const { theme, realToken, hashId, token, cssVar, zeroRuntime } = useToken();
+			const { theme, hashId, token, cssVar, zeroRuntime } = useToken();
 			if (computed(() => {
 				return zeroRuntime?.value;
 			}).value) return hashId;
@@ -127,14 +127,14 @@ function genStyleUtils(config) {
 				};
 			}), () => {
 				if (options.injectStyle === false) return [];
-				const { token: proxyToken, flush } = statistic_default(token);
-				const defaultComponentToken = getDefaultComponentToken_default(component, realToken.value, getDefaultToken);
+				const { token: proxyToken, flush } = statistic_default(token.value);
+				const defaultComponentToken = getDefaultComponentToken_default(component, proxyToken, getDefaultToken);
 				const componentCls = `.${prefixCls.value}`;
-				const componentToken = getComponentToken_default(component, realToken.value, defaultComponentToken, { deprecatedTokens: options.deprecatedTokens });
+				const componentToken = getComponentToken_default(component, proxyToken, defaultComponentToken, { deprecatedTokens: options.deprecatedTokens });
 				if (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, {
+				const mergedToken = merge(proxyToken, {
 					componentCls,
 					prefixCls: prefixCls.value,
 					iconCls: `.${prefix.value.iconPrefixCls}`,

package/dist/extractStyle.mjs

@@ -19,7 +19,7 @@ function extractStyle(cache, options) {
 		"token",
 		"cssVar"
 	], once = false } = typeof options === "boolean" ? { plain: options } : options || {};
-	const matchPrefixRegexp = /* @__PURE__ */ new RegExp(`^(${(typeof types === "string" ? [types] : types).join("|")})%`);
+	const matchPrefixRegexp = new RegExp(`^(${(typeof types === "string" ? [types] : types).join("|")})%`);
 	const styleKeys = Array.from(cache.cache.keys()).filter((key) => matchPrefixRegexp.test(key));
 	const effectStyles = {};
 	const cachePathMap = {};

package/dist/hooks/useCacheToken.d.mts

@@ -33,16 +33,11 @@ interface Option<DerivativeToken, DesignToken> {
    * 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 */
+    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;
   };
 }

package/dist/hooks/useGlobalCache.mjs

@@ -1,11 +1,17 @@
 import { pathKey } from "../Cache.mjs";
 import { useStyleContext } from "../StyleContext.mjs";
 import { isClientSide } from "../util/index.mjs";
-import { computed, watch } from "vue";
+import { computed, onBeforeUnmount, shallowRef, watch } from "vue";
 
 //#region src/hooks/useGlobalCache.ts
 const effectMap = /* @__PURE__ */ new Map();
 /**
+* 延迟移除样式的时间（毫秒）
+* 用于解决 Vue Transition 动画期间样式被过早移除的问题
+*/
+const REMOVE_STYLE_DELAY = 500;
+const delayedRemoveTimers = /* @__PURE__ */ new Map();
+/**
 * Global cache for CSS-in-JS styles
 *
 * This hook manages a reference-counted cache to ensure styles are properly
@@ -15,54 +21,78 @@ const effectMap = /* @__PURE__ */ new Map();
 * - No useInsertionEffect needed - Vue's watchEffect handles timing naturally
 * - No StrictMode double-mounting issues - Vue doesn't double-mount
 * - HMR handling is simpler - can rely on Vue's reactivity system
-* - No need for cleanup register pattern - onBeforeUnmount is sufficient
+* - Uses onBeforeUnmount for cleanup instead of watch's onCleanup to have
+*   better control over cleanup timing (important for Transition animations)
 */
 function useGlobalCache(prefix, keyPath, cacheFn, onCacheRemove, onCacheEffect) {
 	const styleContext = useStyleContext();
 	const fullPath = computed(() => [prefix.value, ...keyPath.value]);
 	const fullPathStr = computed(() => pathKey(fullPath.value));
-	const buildCache = (updater) => {
-		styleContext.value.cache.opUpdate(fullPathStr.value, (prevCache) => {
-			const [times = 0, cache] = prevCache || [void 0, void 0];
-			const data = [times, cache || cacheFn()];
-			return updater ? updater(data) : data;
-		});
+	const currentPathRef = shallowRef(fullPathStr.value);
+	const globalCache = () => styleContext.value.cache;
+	const isServerSide = () => styleContext.value.mock !== void 0 ? styleContext.value.mock === "server" : !isClientSide;
+	const clearCache = (pathStr, immediate = false) => {
+		if (isServerSide()) return;
+		const existingTimer = delayedRemoveTimers.get(pathStr);
+		if (existingTimer) {
+			clearTimeout(existingTimer);
+			delayedRemoveTimers.delete(pathStr);
+		}
+		const doCleanup = () => {
+			globalCache().opUpdate(pathStr, (prevCache) => {
+				const [times = 0, cache] = prevCache || [];
+				if (times - 1 === 0) {
+					onCacheRemove?.(cache, false);
+					effectMap.delete(pathStr);
+					return null;
+				}
+				return [times - 1, cache];
+			});
+		};
+		if (immediate || !isClientSide) doCleanup();
+		else {
+			const timer = setTimeout(() => {
+				delayedRemoveTimers.delete(pathStr);
+				doCleanup();
+			}, REMOVE_STYLE_DELAY);
+			delayedRemoveTimers.set(pathStr, timer);
+		}
 	};
-	const getCacheEntity = () => styleContext.value.cache.opGet(fullPathStr.value);
-	buildCache();
 	const cacheContent = computed(() => {
-		let entity = styleContext.value.cache.opGet(fullPathStr.value);
+		let entity = globalCache().opGet(fullPathStr.value);
 		if (!entity) {
-			buildCache();
-			entity = getCacheEntity();
+			globalCache().opUpdate(fullPathStr.value, (prevCache) => {
+				const [times = 0, cache] = prevCache || [void 0, void 0];
+				return [times, cache || cacheFn()];
+			});
+			entity = globalCache().opGet(fullPathStr.value);
 		}
 		return entity[1];
 	});
-	watch(fullPathStr, (_, _1, onCleanup) => {
-		const currentPath = fullPathStr.value;
-		buildCache(([times, cache]) => [times + 1, cache]);
-		if (!effectMap.has(currentPath)) {
+	watch(fullPathStr, (newPath, oldPath) => {
+		if (oldPath) clearCache(oldPath, true);
+		currentPathRef.value = newPath;
+		const existingTimer = delayedRemoveTimers.get(newPath);
+		if (existingTimer) {
+			clearTimeout(existingTimer);
+			delayedRemoveTimers.delete(newPath);
+		}
+		globalCache().opUpdate(newPath, (prevCache) => {
+			const [times = 0, cache] = prevCache || [void 0, void 0];
+			const mergedCache = cache || cacheFn();
+			return [times + 1, mergedCache];
+		});
+		if (!effectMap.has(newPath)) {
 			onCacheEffect?.(cacheContent.value);
-			effectMap.set(currentPath, true);
+			effectMap.set(newPath, true);
 			Promise.resolve().then(() => {
-				effectMap.delete(currentPath);
+				effectMap.delete(newPath);
 			});
 		}
-		const globalCache = styleContext.value.cache;
-		const isServerSide = styleContext.value.mock !== void 0 ? styleContext.value.mock === "server" : !isClientSide;
-		onCleanup(() => {
-			if (isServerSide) return;
-			globalCache.opUpdate(currentPath, (prevCache) => {
-				const [times = 0, cache] = prevCache || [];
-				if (times - 1 === 0) {
-					onCacheRemove?.(cache, false);
-					effectMap.delete(currentPath);
-					return null;
-				}
-				return [times - 1, cache];
-			});
-		});
 	}, { immediate: true });
+	onBeforeUnmount(() => {
+		clearCache(currentPathRef.value);
+	});
 	return cacheContent;
 }
 

package/dist/hooks/useStyleRegister.mjs

@@ -6,9 +6,9 @@ import contentQuotesLinter_default from "../linters/contentQuotesLinter.mjs";
 import hashedAnimationLinter_default from "../linters/hashedAnimationLinter.mjs";
 import "../linters/index.mjs";
 import { CSS_FILE_STYLE, existPath, getStyleAndHash } from "../util/cacheMapUtil.mjs";
+import resolveUnitless_default from "../util/resolveUnitless.mjs";
 import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
 import { computed } from "vue";
-import unitless from "@emotion/unitless";
 import { compile, middleware, prefixer, serialize, stringify } from "stylis";
 
 //#region src/hooks/useStyleRegister.ts
@@ -101,7 +101,7 @@ function parseStyle(interpolation, config = {}, { root, injectHash, parentSelect
 						}));
 						const styleName = cssKey.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
 						let formatValue = cssValue;
-						if (!unitless[cssKey] && typeof formatValue === "number" && formatValue !== 0) formatValue = `${formatValue}px`;
+						if (!resolveUnitless_default[cssKey] && typeof formatValue === "number" && formatValue !== 0) formatValue = `${formatValue}px`;
 						if (cssKey === "animationName" && cssValue?._keyframe) {
 							parseKeyframes(cssValue);
 							formatValue = cssValue.getName(hashId);
@@ -180,11 +180,11 @@ function useStyleRegister(info, styleFn) {
 	}, (cacheValue) => {
 		const [styleStr, styleId, effectStyle, , priority] = cacheValue;
 		if (!isMergedClientSide.value || styleStr === CSS_FILE_STYLE) return;
-		const { layer: enableLayer$1, container, autoPrefix, cache } = styleContext.value;
+		const { layer: enableLayer, container, autoPrefix, cache } = styleContext.value;
 		const { nonce } = info.value;
 		const mergedCSSConfig = {
 			mark: ATTR_MARK,
-			prepend: enableLayer$1 ? false : "queue",
+			prepend: enableLayer ? false : "queue",
 			attachTo: container,
 			priority
 		};

package/dist/theme/Theme.d.mts

@@ -1,7 +1,6 @@
 import { DerivativeFunc, TokenType } from "./interface.mjs";
 
 //#region src/theme/Theme.d.ts
-
 /**
  * Theme with algorithms to derive tokens from design tokens.
  * Use `createTheme` first which will help to manage the theme instance cache.

package/dist/theme/createTheme.d.mts

@@ -2,7 +2,6 @@ import { DerivativeFunc, TokenType } from "./interface.mjs";
 import { Theme } from "./Theme.mjs";
 
 //#region src/theme/createTheme.d.ts
-
 /**
  * Same as new Theme, but will always return same one if `derivative` not changed.
  */

package/dist/transformers/legacyLogicalProperties.d.mts

@@ -1,7 +1,6 @@
 import { Transformer } from "./interface.mjs";
 
 //#region src/transformers/legacyLogicalProperties.d.ts
-
 /**
  * Convert css logical properties to legacy properties.
  * Such as: `margin-block-start` to `margin-top`.

package/dist/util/cacheMapUtil.mjs

@@ -8,9 +8,9 @@ const ATTR_CACHE_MAP = "data-ant-cssinjs-cache-path";
 * Which means not exist in `<style />` tag.
 */
 const CSS_FILE_STYLE = "_FILE_STYLE__";
-function serialize(cachePathMap$1) {
-	return Object.keys(cachePathMap$1).map((path) => {
-		return `${path}:${cachePathMap$1[path]}`;
+function serialize(cachePathMap) {
+	return Object.keys(cachePathMap).map((path) => {
+		return `${path}:${cachePathMap[path]}`;
 	}).join(";");
 }
 let cachePathMap;

package/dist/util/index.d.mts

@@ -2,7 +2,6 @@ import "../StyleContext.mjs";
 import { token2CSSVar } from "./css-variables.mjs";
 
 //#region src/util/index.d.ts
-
 declare function unit(num: string | number): string;
 //#endregion
 export { unit };

package/dist/util/resolveUnitless.mjs

@@ -0,0 +1,7 @@
+import unitless from "@emotion/unitless";
+
+//#region src/util/resolveUnitless.ts
+var resolveUnitless_default = unitless.default ? unitless.default : unitless;
+
+//#endregion
+export { resolveUnitless_default as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antdv-next/cssinjs",
   "type": "module",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-rc.2",
   "description": "cssinjs solution for ant-design-vue",
   "exports": {
     ".": {
@@ -30,13 +30,13 @@
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "@emotion/unitless": "^0.7.5",
-    "@v-c/util": "^1.0.8",
+    "@v-c/util": "^1.0.9",
     "csstype": "^3.2.3",
     "defu": "^6.1.4",
     "stylis": "^4.3.6"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^25.0.10",
     "@types/stylis": "^4.2.7",
     "@types/testing-library__jest-dom": "^6.0.0",