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

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 };

package/dist/hooks/useCacheToken.js

@@ -0,0 +1,133 @@
+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";
+
+//#region src/hooks/useCacheToken.ts
+const EMPTY_OVERRIDE = {};
+const hashPrefix = process.env.NODE_ENV !== "production" ? "css-dev-only-do-not-override" : "css";
+const tokenKeys = /* @__PURE__ */ new Map();
+function recordCleanToken(tokenKey) {
+	tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) + 1);
+}
+function removeStyleTags(key, instanceId) {
+	if (typeof document !== "undefined") document.querySelectorAll(`style[${ATTR_TOKEN}="${key}"]`).forEach((style) => {
+		if (style[CSS_IN_JS_INSTANCE] === instanceId) style.parentNode?.removeChild(style);
+	});
+}
+const TOKEN_THRESHOLD = -1;
+function cleanTokenStyle(tokenKey, instanceId) {
+	tokenKeys.set(tokenKey, (tokenKeys.get(tokenKey) || 0) - 1);
+	const cleanableKeyList = /* @__PURE__ */ new Set();
+	tokenKeys.forEach((value, key) => {
+		if (value <= 0) cleanableKeyList.add(key);
+	});
+	if (tokenKeys.size - cleanableKeyList.size > TOKEN_THRESHOLD) cleanableKeyList.forEach((key) => {
+		removeStyleTags(key, instanceId);
+		tokenKeys.delete(key);
+	});
+}
+function getComputedToken(originToken, overrideToken, theme, format) {
+	let mergedDerivativeToken = {
+		...theme.getDerivativeToken(originToken),
+		...overrideToken
+	};
+	if (format) mergedDerivativeToken = format(mergedDerivativeToken);
+	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
+* @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
+*/
+function useCacheToken(theme, tokens, option) {
+	const styleContext = useStyleContext();
+	const salt = computed(() => option.value.salt ?? "");
+	const override = computed(() => option.value.override ? option.value.override : EMPTY_OVERRIDE);
+	const formatToken = computed(() => option.value.formatToken);
+	const compute = computed(() => option.value.getComputedToken);
+	const cssVar = computed(() => option.value.cssVar);
+	const resolvedTokens = computed(() => tokens.value.map((token) => typeof token === "function" ? token() : token));
+	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(() => flattenToken(cssVar.value));
+	return useGlobalCache(computed(() => TOKEN_PREFIX), computed(() => [
+		salt.value,
+		theme.value.id,
+		tokenStr.value,
+		overrideTokenStr.value,
+		cssVarStr.value
+	]), () => {
+		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 hashId = hash(mergedSalt);
+		const hashCls = `${hashPrefix}-${hash(mergedSalt)}`;
+		actualToken._tokenKey = token2key(actualToken, mergedSalt);
+		const [tokenWithCssVar, cssVarsStr] = transformToken(mergedDerivativeToken, cssVar.value.key, {
+			prefix: cssVar.value.prefix,
+			ignore: cssVar.value.ignore,
+			unitless: cssVar.value.unitless,
+			preserve: cssVar.value.preserve,
+			hashPriority: styleContext.value.hashPriority,
+			hashCls: cssVar.value.hashed ? hashCls : void 0
+		});
+		tokenWithCssVar._hashId = hashId;
+		recordCleanToken(cssVar.value.key);
+		return [
+			tokenWithCssVar,
+			hashCls,
+			actualToken,
+			cssVarsStr,
+			cssVar.value.key
+		];
+	}, ([, , , , themeKey]) => {
+		cleanTokenStyle(themeKey, styleContext.value.cache.instanceId);
+	}, (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,
+			prepend: "queue",
+			attachTo: styleContext.value.container,
+			priority: -999
+		});
+		style[CSS_IN_JS_INSTANCE] = styleContext.value.cache.instanceId;
+		style.setAttribute(ATTR_TOKEN, themeKey);
+	});
+}
+
+//#endregion
+export { TOKEN_PREFIX, useCacheToken as default, extract, getComputedToken };

package/dist/hooks/useGlobalCache.d.ts

@@ -0,0 +1,9 @@
+import { Ref } from "vue";
+
+//#region src/hooks/useGlobalCache.d.ts
+type ExtractStyle<CacheValue> = (cache: CacheValue, effectStyles: Record<string, boolean>, options?: {
+  plain?: boolean;
+  autoPrefix?: boolean;
+}) => [order: number, styleId: string, style: string] | null;
+//#endregion
+export { ExtractStyle };

package/dist/hooks/useGlobalCache.js

@@ -0,0 +1,68 @@
+import { pathKey } from "../Cache.js";
+import { useStyleContext } from "../StyleContext.js";
+import { computed, watch } from "vue";
+
+//#region src/hooks/useGlobalCache.ts
+const isDev = process.env.NODE_ENV !== "production";
+const effectMap = /* @__PURE__ */ new Map();
+/**
+* Global cache for CSS-in-JS styles
+*
+* This hook manages a reference-counted cache to ensure styles are properly
+* created, shared, and cleaned up across component instances.
+*
+* Key differences from React version:
+* - 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
+*/
+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 getCacheEntity = () => styleContext.value.cache.opGet(fullPathStr.value);
+	buildCache();
+	const cacheContent = computed(() => {
+		let entity = styleContext.value.cache.opGet(fullPathStr.value);
+		if (isDev && !entity) {
+			buildCache();
+			entity = getCacheEntity();
+		}
+		return entity[1];
+	});
+	watch(fullPathStr, (_, _1, onCleanup) => {
+		const currentPath = fullPathStr.value;
+		buildCache(([times, cache]) => [times + 1, cache]);
+		if (!effectMap.has(currentPath)) {
+			onCacheEffect?.(cacheContent.value);
+			effectMap.set(currentPath, true);
+			Promise.resolve().then(() => {
+				effectMap.delete(currentPath);
+			});
+		}
+		const globalCache = styleContext.value.cache;
+		onCleanup(() => {
+			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 });
+	return cacheContent;
+}
+
+//#endregion
+export { useGlobalCache };

package/dist/hooks/useStyleRegister.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from "../theme/Theme.js";
+import { Keyframe } from "../Keyframes.js";
+import "../linters/index.js";
+import "../StyleContext.js";
+import "../transformers/interface.js";
+import "./useGlobalCache.js";
+import { Ref } from "vue";
+import * as CSS from "csstype";
+
+//#region src/hooks/useStyleRegister.d.ts
+declare const SKIP_CHECK = "_skip_check_";
+declare const MULTI_VALUE = "_multi_value_";
+interface LayerConfig {
+  name: string;
+  dependencies?: string[];
+}
+type CSSProperties = Omit<CSS.PropertiesFallback<number | string>, 'animationName'> & {
+  animationName?: CSS.PropertiesFallback<number | string>['animationName'] | Keyframe;
+};
+type CSSPropertiesWithMultiValues = { [K in keyof CSSProperties]: CSSProperties[K] | readonly Extract<CSSProperties[K], string>[] | {
+  [SKIP_CHECK]?: boolean;
+  [MULTI_VALUE]?: boolean;
+  value: CSSProperties[K] | CSSProperties[K][];
+} };
+type CSSPseudos = { [K in CSS.Pseudos]?: CSSObject };
+type ArrayCSSInterpolation = readonly CSSInterpolation[];
+type InterpolationPrimitive = null | undefined | boolean | number | string | CSSObject;
+type CSSInterpolation = InterpolationPrimitive | ArrayCSSInterpolation | Keyframe;
+type CSSOthersObject = Record<string, CSSInterpolation>;
+interface CSSObject extends CSSPropertiesWithMultiValues, CSSPseudos, CSSOthersObject {}
+declare function useStyleRegister(info: Ref<{
+  theme: Theme<any, any>;
+  token: any;
+  path: string[];
+  hashId?: string;
+  layer?: LayerConfig;
+  nonce?: string | (() => string);
+  clientOnly?: boolean;
+  /**
+   * Tell cssinjs the insert order of style.
+   * It's useful when you need to insert style
+   * before other style to overwrite for the same selector priority.
+   */
+  order?: number;
+}>, styleFn: () => CSSInterpolation): void;
+//#endregion
+export { CSSInterpolation, CSSObject, useStyleRegister };

package/dist/hooks/useStyleRegister.js

@@ -0,0 +1,237 @@
+import { ATTR_CACHE_PATH, ATTR_MARK, CSS_IN_JS_INSTANCE, useStyleContext } from "../StyleContext.js";
+import { isClientSide, toStyleStr } from "../util/index.js";
+import { useGlobalCache } from "./useGlobalCache.js";
+import contentQuotesLinter_default from "../linters/contentQuotesLinter.js";
+import hashedAnimationLinter_default from "../linters/hashedAnimationLinter.js";
+import "../linters/index.js";
+import { CSS_FILE_STYLE, existPath, getStyleAndHash } from "../util/cacheMapUtil.js";
+import hash from "@emotion/hash";
+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
+const isDev = process.env.NODE_ENV !== "production";
+const SKIP_CHECK = "_skip_check_";
+const MULTI_VALUE = "_multi_value_";
+function normalizeStyle(styleStr, autoPrefix) {
+	return (autoPrefix ? serialize(compile(styleStr), middleware([prefixer, stringify])) : serialize(compile(styleStr), stringify)).replace(/\{%%%:[^;];\}/g, ";");
+}
+function isCompoundCSSProperty(value) {
+	return typeof value === "object" && value && (SKIP_CHECK in value || MULTI_VALUE in value);
+}
+function injectSelectorHash(key, hashId, hashPriority) {
+	if (!hashId) return key;
+	const hashClassName = `.${hashId}`;
+	const hashSelector = hashPriority === "low" ? `:where(${hashClassName})` : hashClassName;
+	return key.split(",").map((k) => {
+		const fullPath = k.trim().split(/\s+/);
+		let firstPath = fullPath[0] || "";
+		const htmlElement = firstPath.match(/^\w+/)?.[0] || "";
+		firstPath = `${htmlElement}${hashSelector}${firstPath.slice(htmlElement.length)}`;
+		return [firstPath, ...fullPath.slice(1)].join(" ");
+	}).join(",");
+}
+function parseStyle(interpolation, config = {}, { root, injectHash, parentSelectors } = {
+	root: true,
+	parentSelectors: []
+}) {
+	const { hashId, layer, path, hashPriority, transformers = [], linters = [] } = config;
+	let styleStr = "";
+	let effectStyle = {};
+	function parseKeyframes(keyframes) {
+		const animationName = keyframes.getName(hashId);
+		if (!effectStyle[animationName]) {
+			const [parsedStr] = parseStyle(keyframes.style, config, {
+				root: false,
+				parentSelectors
+			});
+			effectStyle[animationName] = `@keyframes ${keyframes.getName(hashId)}${parsedStr}`;
+		}
+	}
+	function flattenList(list, fullList = []) {
+		list.forEach((item) => {
+			if (Array.isArray(item)) flattenList(item, fullList);
+			else if (item) fullList.push(item);
+		});
+		return fullList;
+	}
+	flattenList(Array.isArray(interpolation) ? interpolation : [interpolation]).forEach((originStyle) => {
+		const style = typeof originStyle === "string" && !root ? {} : originStyle;
+		if (typeof style === "string") styleStr += `${style}\n`;
+		else if (style._keyframe) parseKeyframes(style);
+		else {
+			const mergedStyle = transformers.reduce((prev, trans) => trans?.visit?.(prev) || prev, style);
+			Object.keys(mergedStyle).forEach((key) => {
+				const value = mergedStyle[key];
+				if (typeof value === "object" && value && (key !== "animationName" || !value._keyframe) && !isCompoundCSSProperty(value)) {
+					let subInjectHash = false;
+					let mergedKey = key.trim();
+					let nextRoot = false;
+					if ((root || injectHash) && hashId) if (mergedKey.startsWith("@")) subInjectHash = true;
+					else if (mergedKey === "&") mergedKey = injectSelectorHash("", hashId, hashPriority);
+					else mergedKey = injectSelectorHash(key, hashId, hashPriority);
+					else if (root && !hashId && (mergedKey === "&" || mergedKey === "")) {
+						mergedKey = "";
+						nextRoot = true;
+					}
+					const [parsedStr, childEffectStyle] = parseStyle(value, config, {
+						root: nextRoot,
+						injectHash: subInjectHash,
+						parentSelectors: [...parentSelectors, mergedKey]
+					});
+					effectStyle = {
+						...effectStyle,
+						...childEffectStyle
+					};
+					styleStr += `${mergedKey}${parsedStr}`;
+				} else {
+					function appendStyle(cssKey, cssValue) {
+						if (process.env.NODE_ENV !== "production" && (typeof value !== "object" || !value?.[SKIP_CHECK])) [
+							contentQuotesLinter_default,
+							hashedAnimationLinter_default,
+							...linters
+						].forEach((linter) => linter(cssKey, cssValue, {
+							path,
+							hashId,
+							parentSelectors
+						}));
+						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 (cssKey === "animationName" && cssValue?._keyframe) {
+							parseKeyframes(cssValue);
+							formatValue = cssValue.getName(hashId);
+						}
+						styleStr += `${styleName}:${formatValue};`;
+					}
+					const actualValue = value?.value ?? value;
+					if (typeof value === "object" && value?.[MULTI_VALUE] && Array.isArray(actualValue)) actualValue.forEach((item) => {
+						appendStyle(key, item);
+					});
+					else appendStyle(key, actualValue);
+				}
+			});
+		}
+	});
+	if (!root) styleStr = `{${styleStr}}`;
+	else if (layer) {
+		if (styleStr) styleStr = `@layer ${layer.name} {${styleStr}}`;
+		if (layer.dependencies) effectStyle[`@layer ${layer.name}`] = layer.dependencies.map((deps) => `@layer ${deps}, ${layer.name};`).join("\n");
+	}
+	return [styleStr, effectStyle];
+}
+function uniqueHash(path, styleStr) {
+	return hash(`${path.join("%")}${styleStr}`);
+}
+const STYLE_PREFIX = "style";
+function useStyleRegister(info, styleFn) {
+	const styleContext = useStyleContext();
+	const enableLayer = computed(() => !!styleContext.value.layer);
+	const order = computed(() => info.value.order ?? 0);
+	const hashId = computed(() => info.value.hashId);
+	const fullPath = computed(() => {
+		const path = [hashId.value || ""];
+		if (enableLayer.value) path.push("layer");
+		path.push(...info.value.path);
+		return path;
+	});
+	const isMergedClientSide = computed(() => {
+		let merged = isClientSide;
+		if (isDev && styleContext.value.mock !== void 0) merged = styleContext.value.mock === "client";
+		return merged;
+	});
+	useGlobalCache(computed(() => STYLE_PREFIX), fullPath, () => {
+		const cachePath = fullPath.value.join("|");
+		const context = styleContext.value;
+		const infoValue = info.value;
+		if (existPath(cachePath)) {
+			const [inlineCacheStyleStr, styleHash] = getStyleAndHash(cachePath);
+			if (inlineCacheStyleStr) return [
+				inlineCacheStyleStr,
+				styleHash,
+				{},
+				infoValue.clientOnly,
+				order.value
+			];
+		}
+		const [parsedStyle, effectStyle] = parseStyle(styleFn(), {
+			hashId: infoValue.hashId,
+			hashPriority: context.hashPriority,
+			layer: enableLayer.value ? infoValue.layer : void 0,
+			path: infoValue.path.join("-"),
+			transformers: context.transformers || [],
+			linters: context.linters || []
+		});
+		const styleStr = normalizeStyle(parsedStyle, styleContext.value.autoPrefix || false);
+		return [
+			styleStr,
+			uniqueHash(fullPath.value, styleStr),
+			effectStyle,
+			infoValue.clientOnly,
+			order.value
+		];
+	}, (cacheValue, fromHMR) => {
+		const [, styleId] = cacheValue;
+		if (fromHMR && isClientSide) removeCSS(styleId, { mark: ATTR_MARK });
+	}, (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 { nonce } = info.value;
+		const mergedCSSConfig = {
+			mark: ATTR_MARK,
+			prepend: enableLayer$1 ? false : "queue",
+			attachTo: container,
+			priority
+		};
+		const nonceStr = typeof nonce === "function" ? nonce() : nonce;
+		if (nonceStr) mergedCSSConfig.csp = { nonce: nonceStr };
+		const effectLayerKeys = [];
+		const effectRestKeys = [];
+		Object.keys(effectStyle).forEach((key) => {
+			if (key.startsWith("@layer")) effectLayerKeys.push(key);
+			else effectRestKeys.push(key);
+		});
+		effectLayerKeys.forEach((effectKey) => {
+			updateCSS(normalizeStyle(effectStyle[effectKey], autoPrefix || false), `_layer-${effectKey}`, {
+				...mergedCSSConfig,
+				prepend: true
+			});
+		});
+		const style = updateCSS(styleStr, styleId, mergedCSSConfig);
+		style[CSS_IN_JS_INSTANCE] = cache.instanceId;
+		if (isDev) style.setAttribute(ATTR_CACHE_PATH, fullPath.value.join("|"));
+		effectRestKeys.forEach((effectKey) => {
+			updateCSS(normalizeStyle(effectStyle[effectKey], autoPrefix || false), `_effect-${effectKey}`, mergedCSSConfig);
+		});
+	});
+}
+const extract = (cache, effectStyles, options) => {
+	const [styleStr, styleId, effectStyle, clientOnly, order] = cache;
+	const { plain, autoPrefix } = options || {};
+	if (clientOnly) return null;
+	let keyStyleText = styleStr;
+	const sharedAttrs = {
+		"data-rc-order": "prependQueue",
+		"data-rc-priority": `${order}`
+	};
+	keyStyleText = toStyleStr(styleStr, void 0, styleId, sharedAttrs, plain);
+	if (effectStyle) Object.keys(effectStyle).forEach((effectKey) => {
+		if (!effectStyles[effectKey]) {
+			effectStyles[effectKey] = true;
+			const effectStyleHTML = toStyleStr(normalizeStyle(effectStyle[effectKey], autoPrefix || false), void 0, `_effect-${effectKey}`, sharedAttrs, plain);
+			if (effectKey.startsWith("@layer")) keyStyleText = effectStyleHTML + keyStyleText;
+			else keyStyleText += effectStyleHTML;
+		}
+	});
+	return [
+		order,
+		styleId,
+		keyStyleText
+	];
+};
+
+//#endregion
+export { STYLE_PREFIX, useStyleRegister as default, extract, uniqueHash };

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { AbstractCalculator } from "./theme/calc/calculator.js";
+import { genCalc } from "./theme/calc/index.js";
+import { DerivativeFunc, TokenType } from "./theme/interface.js";
+import { Theme } from "./theme/Theme.js";
+import { createTheme } from "./theme/createTheme.js";
+import { ComponentToken, ComponentTokenKey, GlobalToken, GlobalTokenWithComponent, OverrideTokenMap, TokenMap, TokenMapKey } from "./cssinjs-utils/interface/components.js";
+import { Keyframe } from "./Keyframes.js";
+import { Linter } from "./linters/interface.js";
+import { linter as linter$1 } from "./linters/legacyNotSelectorLinter.js";
+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, 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";
+import { unit } from "./util/index.js";
+import { CSSUtil, CSSVarRegisterProps, FullToken, GenStyleFn, GetCompUnitless, GetDefaultToken, GetDefaultTokenFn, GetResetStyles, StyleInfo, SubStyleComponentProps, TokenWithCommonCls, genStyleUtils } from "./cssinjs-utils/util/genStyleUtils.js";
+import { merge, statistic, statisticToken } from "./cssinjs-utils/util/statistic.js";
+import "./cssinjs-utils/index.js";
+
+//#region src/index.d.ts
+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, 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

@@ -0,0 +1,30 @@
+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";
+import "./theme/index.js";
+import { token2CSSVar } from "./util/css-variables.js";
+import { supportLogicProps, supportWhere, unit } from "./util/index.js";
+import useCacheToken, { getComputedToken } from "./hooks/useCacheToken.js";
+import legacyNotSelectorLinter_default from "./linters/legacyNotSelectorLinter.js";
+import logicalPropertiesLinter_default from "./linters/logicalPropertiesLinter.js";
+import NaNLinter_default from "./linters/NaNLinter.js";
+import parentSelectorLinter_default from "./linters/parentSelectorLinter.js";
+import "./linters/index.js";
+import useStyleRegister from "./hooks/useStyleRegister.js";
+import useCSSVarRegister from "./hooks/useCSSVarRegister.js";
+import extractStyle from "./extractStyle.js";
+import Keyframes_default from "./Keyframes.js";
+import autoPrefix_default from "./transformers/autoPrefix.js";
+import legacyLogicalProperties_default from "./transformers/legacyLogicalProperties.js";
+import px2rem_default from "./transformers/px2rem.js";
+import statistic_default, { merge, statistic } from "./cssinjs-utils/util/statistic.js";
+import genStyleUtils_default from "./cssinjs-utils/util/genStyleUtils.js";
+import "./cssinjs-utils/index.js";
+
+//#region src/index.ts
+const _experimental = { supportModernCSS: () => supportWhere() && supportLogicProps() };
+
+//#endregion
+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/linters/NaNLinter.d.ts

@@ -0,0 +1,6 @@
+import { Linter } from "./interface.js";
+
+//#region src/linters/NaNLinter.d.ts
+declare const linter: Linter;
+//#endregion
+export { linter };

package/dist/linters/NaNLinter.js

@@ -0,0 +1,10 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/NaNLinter.ts
+const linter = (key, value, info) => {
+	if (typeof value === "string" && /NaN/.test(value) || Number.isNaN(value)) lintWarning(`Unexpected 'NaN' in property '${key}: ${value}'.`, info);
+};
+var NaNLinter_default = linter;
+
+//#endregion
+export { NaNLinter_default as default };

package/dist/linters/contentQuotesLinter.js

@@ -0,0 +1,18 @@
+import { lintWarning } from "./utils.js";
+
+//#region src/linters/contentQuotesLinter.ts
+const linter = (key, value, info) => {
+	if (key === "content") {
+		if (typeof value !== "string" || ![
+			"normal",
+			"none",
+			"initial",
+			"inherit",
+			"unset"
+		].includes(value) && !/(attr|counters?|url|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/.test(value) && !value.startsWith("var(") && (value.charAt(0) !== value.charAt(value.length - 1) || value.charAt(0) !== "\"" && value.charAt(0) !== "'")) lintWarning(`You seem to be using a value for 'content' without quotes, try replacing it with \`content: '"${value}"'\`.`, info);
+	}
+};
+var contentQuotesLinter_default = linter;
+
+//#endregion
+export { contentQuotesLinter_default as default };