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

package/dist/StyleContext.d.ts

@@ -2,12 +2,13 @@ import { Linter } from "./linters/interface.js";
 import "./linters/index.js";
 import { Entity, KeyType } from "./Cache.js";
 import * as vue7 from "vue";
-import { Ref } from "vue";
+import { App, Ref } from "vue";
 
 //#region src/StyleContext.d.ts
 
 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;
@@ -115,4 +116,4 @@ interface StyleContextProps {
 type StyleProviderProps = StyleContextProps;
 declare const StyleProvider: vue7.DefineSetupFnComponent<Partial<StyleContextProps>, {}, {}, Partial<StyleContextProps> & {}, vue7.PublicProps>;
 //#endregion
-export { StyleProvider, StyleProviderProps, createCache, useStyleContext, useStyleContextProvide };
+export { StyleProvider, StyleProviderProps, createCache, provideStyleContext, useStyleContext, useStyleContextProvide };

package/dist/StyleContext.js

@@ -36,6 +36,9 @@ const StyleContextKey = Symbol("StyleContext");
 function useStyleContextProvide(props) {
 	provide(StyleContextKey, props);
 }
+function provideStyleContext(app, props) {
+	app.provide(StyleContextKey, props);
+}
 function useStyleContext() {
 	return inject(StyleContextKey, ref(defaultStyleContext));
 }
@@ -61,4 +64,4 @@ const StyleProvider = defineComponent((props, { slots }) => {
 ] });
 
 //#endregion
-export { ATTR_CACHE_PATH, ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, StyleProvider, createCache, useStyleContext, useStyleContextProvide };
+export { ATTR_CACHE_PATH, ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, StyleProvider, createCache, provideStyleContext, useStyleContext, useStyleContextProvide };

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

@@ -78,22 +78,22 @@ function genStyleUtils(config) {
 			}).value) return hashId;
 			const prefix = usePrefix();
 			const csp = useCSP();
-			const type = computed(() => cssVar?.value ? "css" : "js");
+			const type = "css";
 			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)));
+					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);
+					return calc_default(type, unitlessCssVar);
 				}, [
 					type,
 					component,
 					cssVar?.value?.prefix
 				]);
 			});
-			const maxMinFunc = computed(() => maxmin_default(type.value));
+			const { max, min } = maxmin_default(type);
 			const sharedConfig = computed(() => {
 				return {
 					theme: theme?.value,
@@ -131,8 +131,8 @@ function genStyleUtils(config) {
 				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))})`;
+				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, {
 					componentCls,
@@ -140,9 +140,9 @@ function genStyleUtils(config) {
 					iconCls: `.${prefix.value.iconPrefixCls}`,
 					antCls: `.${prefix.value.rootPrefixCls}`,
 					calc: calc.value,
-					max: maxMinFunc.value.max,
-					min: maxMinFunc.value.min
-				}, cssVar?.value ? defaultComponentToken : componentToken);
+					max,
+					min
+				}, defaultComponentToken);
 				const styleInterpolation = styleFn(mergedToken, {
 					hashId: hashId.value,
 					prefixCls: prefixCls.value,

package/dist/hooks/useCSSVarRegister.js

@@ -1,22 +1,39 @@
+import { collectStyleText } from "../ssr/styleCollector.js";
 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 canUseDom from "@v-c/util/dist/Dom/canUseDom";
 import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
 import { computed } from "vue";
 
 //#region src/hooks/useCSSVarRegister.ts
 const CSS_VAR_PREFIX = "cssVar";
+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)
+	];
+};
 function useCSSVarRegister(config, fn) {
 	const styleContext = useStyleContext();
 	const stylePath = computed(() => {
-		const { key, prefix, scope = "" } = config.value;
+		const { key, scope = "", token } = config.value;
+		const tokenKey = token?._tokenKey;
 		return [
 			...config.value.path,
 			key,
-			prefix,
-			scope
+			scope,
+			tokenKey
 		];
 	});
 	return useGlobalCache(computed(() => CSS_VAR_PREFIX), stylePath, () => {
@@ -42,7 +59,16 @@ function useCSSVarRegister(config, fn) {
 			mark: ATTR_MARK,
 			attachTo: styleContext.value.container
 		});
-	}, ([, cssVarsStr, styleId]) => {
+	}, (cacheValue) => {
+		const [, cssVarsStr, styleId] = cacheValue;
+		if (!canUseDom()) {
+			const extracted = extract(cacheValue, {}, { plain: false });
+			if (extracted) {
+				const [, , styleText] = extracted;
+				collectStyleText(styleText);
+			}
+			return;
+		}
 		if (!cssVarsStr) return;
 		const context = styleContext.value;
 		const style = updateCSS(cssVarsStr, styleId, {
@@ -55,20 +81,6 @@ function useCSSVarRegister(config, fn) {
 		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.js

@@ -1,8 +1,10 @@
+import { collectStyleText } from "../ssr/styleCollector.js";
 import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleContext } from "../StyleContext.js";
 import { transformToken } from "../util/css-variables.js";
 import { flattenToken, memoResult, toStyleStr, token2key } from "../util/index.js";
 import { useGlobalCache } from "./useGlobalCache.js";
 import hash from "@emotion/hash";
+import canUseDom from "@v-c/util/dist/Dom/canUseDom";
 import { updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
 import { computed } from "vue";
 
@@ -39,6 +41,21 @@ function getComputedToken(originToken, overrideToken, theme, format) {
 	return mergedDerivativeToken;
 }
 const TOKEN_PREFIX = "token";
+const extract = (cache, _effectStyles, options) => {
+	const [, , realToken, styleStr, cssVarKey] = cache;
+	const { plain } = options || {};
+	if (!styleStr) return null;
+	const styleId = realToken._tokenKey;
+	const order = -999;
+	return [
+		order,
+		styleId,
+		toStyleStr(styleStr, cssVarKey, styleId, {
+			"data-rc-order": "prependQueue",
+			"data-rc-priority": `${order}`
+		}, plain)
+	];
+};
 /**
 * Cache theme derivative token as global shared one
 * @param theme Theme entity
@@ -57,7 +74,7 @@ function useCacheToken(theme, tokens, option) {
 	const mergedToken = computed(() => memoResult(() => Object.assign({}, ...resolvedTokens.value), resolvedTokens.value));
 	const tokenStr = computed(() => flattenToken(mergedToken.value));
 	const overrideTokenStr = computed(() => flattenToken(override.value));
-	const cssVarStr = computed(() => cssVar.value ? flattenToken(cssVar.value) : "");
+	const cssVarStr = computed(() => flattenToken(cssVar.value));
 	return useGlobalCache(computed(() => TOKEN_PREFIX), computed(() => [
 		salt.value,
 		theme.value.id,
@@ -67,7 +84,7 @@ function useCacheToken(theme, tokens, option) {
 	]), () => {
 		const mergedDerivativeToken = compute.value ? compute.value(mergedToken.value, override.value, theme.value) : getComputedToken(mergedToken.value, override.value, theme.value, formatToken.value);
 		const actualToken = { ...mergedDerivativeToken };
-		const mergedSalt = `${salt.value}_${cssVar.value?.prefix || ""}`;
+		const mergedSalt = `${salt.value}_${cssVar.value.prefix || ""}`;
 		const hashId = hash(mergedSalt);
 		const hashCls = `${hashPrefix}-${hash(mergedSalt)}`;
 		actualToken._tokenKey = token2key(actualToken, mergedSalt);
@@ -75,7 +92,9 @@ function useCacheToken(theme, tokens, option) {
 			prefix: cssVar.value.prefix,
 			ignore: cssVar.value.ignore,
 			unitless: cssVar.value.unitless,
-			preserve: cssVar.value.preserve
+			preserve: cssVar.value.preserve,
+			hashPriority: styleContext.value.hashPriority,
+			hashCls: cssVar.value.hashed ? hashCls : void 0
 		});
 		tokenWithCssVar._hashId = hashId;
 		recordCleanToken(cssVar.value.key);
@@ -88,7 +107,16 @@ function useCacheToken(theme, tokens, option) {
 		];
 	}, ([, , , , themeKey]) => {
 		cleanTokenStyle(themeKey, styleContext.value.cache.instanceId);
-	}, ([, , , cssVarsStr, themeKey]) => {
+	}, (cacheValue) => {
+		const [, , , cssVarsStr, themeKey] = cacheValue;
+		if (!canUseDom()) {
+			const extracted = extract(cacheValue, {}, { plain: false });
+			if (extracted) {
+				const [, , styleText] = extracted;
+				collectStyleText(styleText);
+			}
+			return;
+		}
 		if (!cssVarsStr) return;
 		const style = updateCSS(cssVarsStr, hash(`css-var-${themeKey}`), {
 			mark: ATTR_MARK,
@@ -100,21 +128,6 @@ function useCacheToken(theme, tokens, option) {
 		style.setAttribute(ATTR_TOKEN, themeKey);
 	});
 }
-const extract = (cache, _effectStyles, options) => {
-	const [, , realToken, styleStr, cssVarKey] = cache;
-	const { plain } = options || {};
-	if (!styleStr) return null;
-	const styleId = realToken._tokenKey;
-	const order = -999;
-	return [
-		order,
-		styleId,
-		toStyleStr(styleStr, cssVarKey, styleId, {
-			"data-rc-order": "prependQueue",
-			"data-rc-priority": `${order}`
-		}, plain)
-	];
-};
 
 //#endregion
 export { TOKEN_PREFIX, useCacheToken as default, extract, getComputedToken };

package/dist/hooks/useGlobalCache.js

@@ -1,6 +1,6 @@
 import { pathKey } from "../Cache.js";
 import { useStyleContext } from "../StyleContext.js";
-import { computed, nextTick, watch, watchEffect } from "vue";
+import { computed, watch } from "vue";
 
 //#region src/hooks/useGlobalCache.ts
 const isDev = process.env.NODE_ENV !== "production";
@@ -29,6 +29,7 @@ function useGlobalCache(prefix, keyPath, cacheFn, onCacheRemove, onCacheEffect)
 		});
 	};
 	const getCacheEntity = () => styleContext.value.cache.opGet(fullPathStr.value);
+	buildCache();
 	const cacheContent = computed(() => {
 		let entity = styleContext.value.cache.opGet(fullPathStr.value);
 		if (isDev && !entity) {
@@ -37,32 +38,29 @@ function useGlobalCache(prefix, keyPath, cacheFn, onCacheRemove, onCacheEffect)
 		}
 		return entity[1];
 	});
-	watch(fullPathStr, async (_, _1, onCleanup) => {
-		await nextTick();
+	watch(fullPathStr, (_, _1, onCleanup) => {
+		const currentPath = fullPathStr.value;
 		buildCache(([times, cache]) => [times + 1, cache]);
-		if (!effectMap.has(fullPathStr.value)) {
+		if (!effectMap.has(currentPath)) {
 			onCacheEffect?.(cacheContent.value);
-			effectMap.set(fullPathStr.value, true);
+			effectMap.set(currentPath, true);
 			Promise.resolve().then(() => {
-				effectMap.delete(fullPathStr.value);
+				effectMap.delete(currentPath);
 			});
 		}
 		const globalCache = styleContext.value.cache;
 		onCleanup(() => {
-			globalCache.opUpdate(fullPathStr.value, (prevCache) => {
+			globalCache.opUpdate(currentPath, (prevCache) => {
 				const [times = 0, cache] = prevCache || [];
 				if (times - 1 === 0) {
 					onCacheRemove?.(cache, false);
-					effectMap.delete(fullPathStr.value);
+					effectMap.delete(currentPath);
 					return null;
 				}
 				return [times - 1, cache];
 			});
 		});
 	}, { immediate: true });
-	if (onCacheEffect) watchEffect(() => {
-		onCacheEffect(cacheContent.value);
-	});
 	return cacheContent;
 }
 

package/dist/index.d.ts

@@ -11,13 +11,14 @@ import { linter as linter$2 } from "./linters/logicalPropertiesLinter.js";
 import { linter } from "./linters/NaNLinter.js";
 import { linter as linter$3 } from "./linters/parentSelectorLinter.js";
 import "./linters/index.js";
-import { StyleProvider, StyleProviderProps, createCache, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
+import { StyleProvider, StyleProviderProps, createCache, provideStyleContext, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
 import { Transformer } from "./transformers/interface.js";
 import { CSSInterpolation, CSSObject, useStyleRegister } from "./hooks/useStyleRegister.js";
 import { token2CSSVar } from "./util/css-variables.js";
 import { useCSSVarRegister } from "./hooks/useCSSVarRegister.js";
 import { extractStyle } from "./extractStyle.js";
 import { getComputedToken, useCacheToken } from "./hooks/useCacheToken.js";
+import { collectStyleText, setStyleCollector } from "./ssr/styleCollector.js";
 import { transform } from "./transformers/autoPrefix.js";
 import { transform as transform$1 } from "./transformers/legacyLogicalProperties.js";
 import { transform as transform$2 } from "./transformers/px2rem.js";
@@ -31,4 +32,4 @@ declare const _experimental: {
   supportModernCSS: () => boolean;
 };
 //#endregion
-export { type AbstractCalculator, type CSSInterpolation, type CSSObject, CSSUtil, CSSVarRegisterProps, ComponentToken, ComponentTokenKey, type DerivativeFunc, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, GlobalToken, GlobalTokenWithComponent, Keyframe as Keyframes, type Linter, linter as NaNLinter, OverrideTokenMap, StyleInfo, StyleProvider, type StyleProviderProps, SubStyleComponentProps, Theme, TokenMap, TokenMapKey, type TokenType, TokenWithCommonCls, type Transformer, _experimental, transform as autoPrefixTransformer, createCache, createTheme, extractStyle, genCalc, genStyleUtils, getComputedToken, transform$1 as legacyLogicalPropertiesTransformer, linter$1 as legacyNotSelectorLinter, linter$2 as logicalPropertiesLinter, merge as mergeToken, linter$3 as parentSelectorLinter, transform$2 as px2remTransformer, statistic, statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };
+export { type AbstractCalculator, type CSSInterpolation, type CSSObject, CSSUtil, CSSVarRegisterProps, ComponentToken, ComponentTokenKey, type DerivativeFunc, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, GlobalToken, GlobalTokenWithComponent, Keyframe as Keyframes, type Linter, linter as NaNLinter, OverrideTokenMap, StyleInfo, StyleProvider, type StyleProviderProps, SubStyleComponentProps, Theme, TokenMap, TokenMapKey, type TokenType, TokenWithCommonCls, type Transformer, _experimental, transform as autoPrefixTransformer, collectStyleText, createCache, createTheme, extractStyle, genCalc, genStyleUtils, getComputedToken, transform$1 as legacyLogicalPropertiesTransformer, linter$1 as legacyNotSelectorLinter, linter$2 as logicalPropertiesLinter, merge as mergeToken, linter$3 as parentSelectorLinter, provideStyleContext, transform$2 as px2remTransformer, setStyleCollector, statistic, statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };

package/dist/index.js

@@ -1,4 +1,5 @@
-import { StyleProvider, createCache, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
+import { collectStyleText, setStyleCollector } from "./ssr/styleCollector.js";
+import { StyleProvider, createCache, provideStyleContext, useStyleContext, useStyleContextProvide } from "./StyleContext.js";
 import calc_default from "./theme/calc/index.js";
 import Theme from "./theme/Theme.js";
 import createTheme from "./theme/createTheme.js";
@@ -26,4 +27,4 @@ import "./cssinjs-utils/index.js";
 const _experimental = { supportModernCSS: () => supportWhere() && supportLogicProps() };
 
 //#endregion
-export { Keyframes_default as Keyframes, NaNLinter_default as NaNLinter, StyleProvider, Theme, _experimental, autoPrefix_default as autoPrefixTransformer, createCache, createTheme, extractStyle, calc_default as genCalc, genStyleUtils_default as genStyleUtils, getComputedToken, legacyLogicalProperties_default as legacyLogicalPropertiesTransformer, legacyNotSelectorLinter_default as legacyNotSelectorLinter, logicalPropertiesLinter_default as logicalPropertiesLinter, merge as mergeToken, parentSelectorLinter_default as parentSelectorLinter, px2rem_default as px2remTransformer, statistic, statistic_default as statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };
+export { Keyframes_default as Keyframes, NaNLinter_default as NaNLinter, StyleProvider, Theme, _experimental, autoPrefix_default as autoPrefixTransformer, collectStyleText, createCache, createTheme, extractStyle, calc_default as genCalc, genStyleUtils_default as genStyleUtils, getComputedToken, legacyLogicalProperties_default as legacyLogicalPropertiesTransformer, legacyNotSelectorLinter_default as legacyNotSelectorLinter, logicalPropertiesLinter_default as logicalPropertiesLinter, merge as mergeToken, parentSelectorLinter_default as parentSelectorLinter, provideStyleContext, px2rem_default as px2remTransformer, setStyleCollector, statistic, statistic_default as statisticToken, token2CSSVar, unit, useCSSVarRegister, useCacheToken, useStyleContext, useStyleContextProvide, useStyleRegister };

package/dist/ssr/styleCollector.d.ts

@@ -0,0 +1,8 @@
+//#region src/ssr/styleCollector.d.ts
+type StyleCollector = {
+  push: (styleText: string) => void;
+} | null;
+declare function setStyleCollector(next: StyleCollector): void;
+declare function collectStyleText(styleText: string): void;
+//#endregion
+export { collectStyleText, setStyleCollector };

package/dist/ssr/styleCollector.js

@@ -0,0 +1,11 @@
+//#region src/ssr/styleCollector.ts
+let collector = null;
+function setStyleCollector(next) {
+	collector = next;
+}
+function collectStyleText(styleText) {
+	collector?.push(styleText);
+}
+
+//#endregion
+export { collectStyleText, setStyleCollector };

package/dist/util/index.js

@@ -3,8 +3,8 @@ import Theme from "../theme/Theme.js";
 import "../theme/index.js";
 import { token2CSSVar } from "./css-variables.js";
 import hash from "@emotion/hash";
-import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
 import canUseDom from "@v-c/util/dist/Dom/canUseDom";
+import { removeCSS, updateCSS } from "@v-c/util/dist/Dom/dynamicCSS";
 
 //#region src/util/index.ts
 const resultCache = /* @__PURE__ */ new WeakMap();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antdv-next/cssinjs",
   "type": "module",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.3",
   "description": "cssinjs solution for ant-design-vue",
   "exports": {
     ".": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@emotion/hash": "^0.8.0",
     "@emotion/unitless": "^0.7.5",
-    "@v-c/util": "^1.0.6",
+    "@v-c/util": "^1.0.7",
     "csstype": "^3.2.3",
     "defu": "^6.1.4",
     "stylis": "^4.3.6"