@antdv-next/cssinjs 1.0.0-rc.1 → 1.0.0-rc.3

package/dist/StyleContext.d.mts

@@ -1,11 +1,11 @@
 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<{
@@ -105,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
@@ -81,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;
@@ -96,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/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 delayedRemoveInfo = /* @__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,115 @@ 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 doSingleDecrement = () => {
+			globalCache().opUpdate(pathStr, (prevCache) => {
+				const [times = 0, cache] = prevCache || [];
+				const nextCount = times - 1;
+				if (nextCount === 0) {
+					onCacheRemove?.(cache, false);
+					effectMap.delete(pathStr);
+					return null;
+				}
+				return [nextCount, cache];
+			});
+		};
+		const doAllPendingDecrements = (count) => {
+			for (let i = 0; i < count; i++) doSingleDecrement();
+		};
+		if (immediate || !isClientSide) doSingleDecrement();
+		else {
+			const existingInfo = delayedRemoveInfo.get(pathStr);
+			if (existingInfo) {
+				clearTimeout(existingInfo.timer);
+				const newPendingDecrements = existingInfo.pendingDecrements + 1;
+				const timer = setTimeout(() => {
+					delayedRemoveInfo.delete(pathStr);
+					doAllPendingDecrements(newPendingDecrements);
+				}, REMOVE_STYLE_DELAY);
+				delayedRemoveInfo.set(pathStr, {
+					timer,
+					pendingDecrements: newPendingDecrements
+				});
+			} else {
+				const timer = setTimeout(() => {
+					delayedRemoveInfo.delete(pathStr);
+					doSingleDecrement();
+				}, REMOVE_STYLE_DELAY);
+				delayedRemoveInfo.set(pathStr, {
+					timer,
+					pendingDecrements: 1
+				});
+			}
+		}
 	};
-	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 existingInfo = delayedRemoveInfo.get(newPath);
+		if (existingInfo) {
+			const newPendingDecrements = existingInfo.pendingDecrements - 1;
+			if (newPendingDecrements <= 0) {
+				clearTimeout(existingInfo.timer);
+				delayedRemoveInfo.delete(newPath);
+			} else {
+				clearTimeout(existingInfo.timer);
+				const timer = setTimeout(() => {
+					delayedRemoveInfo.delete(newPath);
+					for (let i = 0; i < newPendingDecrements; i++) globalCache().opUpdate(newPath, (prevCache) => {
+						const [times = 0, cache] = prevCache || [];
+						const nextCount = times - 1;
+						if (nextCount === 0) {
+							onCacheRemove?.(cache, false);
+							effectMap.delete(newPath);
+							return null;
+						}
+						return [nextCount, cache];
+					});
+				}, REMOVE_STYLE_DELAY);
+				delayedRemoveInfo.set(newPath, {
+					timer,
+					pendingDecrements: newPendingDecrements
+				});
+			}
+		} else 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antdv-next/cssinjs",
   "type": "module",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "cssinjs solution for ant-design-vue",
   "exports": {
     ".": {