Feat 4.3 spin

components/_util/cssinjs/Cache.ts

@@ -1,11 +1,14 @@
 export type KeyType = string | number;
 type ValueType = [number, any]; // [times, realValue]
+
 const SPLIT = '%';
+
 class Entity {
   instanceId: string;
   constructor(instanceId: string) {
     this.instanceId = instanceId;
   }
+
   /** @private Internal cache map. Do not access this directly */
   cache = new Map<string, ValueType>();
 

components/_util/cssinjs/StyleContext.tsx

@@ -31,7 +31,6 @@ export function createCache() {
     Array.from(styles).forEach(style => {
       (style as any)[CSS_IN_JS_INSTANCE] = (style as any)[CSS_IN_JS_INSTANCE] || cssinjsInstanceId;
 
-      // Not force move if no head
       // Not force move if no head
       if ((style as any)[CSS_IN_JS_INSTANCE] === cssinjsInstanceId) {
         document.head.insertBefore(style, firstChild);

components/_util/cssinjs/extractStyle.ts

@@ -0,0 +1,82 @@
+import type Cache from './Cache';
+import { extract as tokenExtractStyle, TOKEN_PREFIX } from './hooks/useCacheToken';
+import { CSS_VAR_PREFIX, extract as cssVarExtractStyle } from './hooks/useCSSVarRegister';
+import { extract as styleExtractStyle, STYLE_PREFIX } from './hooks/useStyleRegister';
+import { toStyleStr } from './util';
+import { ATTR_CACHE_MAP, serialize as serializeCacheMap } from './util/cacheMapUtil';
+
+const ExtractStyleFns = {
+  [STYLE_PREFIX]: styleExtractStyle,
+  [TOKEN_PREFIX]: tokenExtractStyle,
+  [CSS_VAR_PREFIX]: cssVarExtractStyle,
+};
+
+type ExtractStyleType = keyof typeof ExtractStyleFns;
+
+function isNotNull<T>(value: T | null): value is T {
+  return value !== null;
+}
+
+export default function extractStyle(
+  cache: Cache,
+  options?:
+    | boolean
+    | {
+        plain?: boolean;
+        types?: ExtractStyleType | ExtractStyleType[];
+      },
+) {
+  const { plain = false, types = ['style', 'token', 'cssVar'] } =
+    typeof options === 'boolean' ? { plain: options } : options || {};
+
+  const matchPrefixRegexp = new RegExp(
+    `^(${(typeof types === 'string' ? [types] : types).join('|')})%`,
+  );
+
+  // prefix with `style` is used for `useStyleRegister` to cache style context
+  const styleKeys = Array.from(cache.cache.keys()).filter(key => matchPrefixRegexp.test(key));
+
+  // Common effect styles like animation
+  const effectStyles: Record<string, boolean> = {};
+
+  // Mapping of cachePath to style hash
+  const cachePathMap: Record<string, string> = {};
+
+  let styleText = '';
+
+  styleKeys
+    .map<[number, string] | null>(key => {
+      const cachePath = key.replace(matchPrefixRegexp, '').replace(/%/g, '|');
+      const [prefix] = key.split('%');
+      const extractFn = ExtractStyleFns[prefix as keyof typeof ExtractStyleFns];
+      const extractedStyle = extractFn(cache.cache.get(key)![1], effectStyles, {
+        plain,
+      });
+      if (!extractedStyle) {
+        return null;
+      }
+      const [order, styleId, styleStr] = extractedStyle;
+      if (key.startsWith('style')) {
+        cachePathMap[cachePath] = styleId;
+      }
+      return [order, styleStr];
+    })
+    .filter(isNotNull)
+    .sort(([o1], [o2]) => o1 - o2)
+    .forEach(([, style]) => {
+      styleText += style;
+    });
+
+  // ==================== Fill Cache Path ====================
+  styleText += toStyleStr(
+    `.${ATTR_CACHE_MAP}{content:"${serializeCacheMap(cachePathMap)}";}`,
+    undefined,
+    undefined,
+    {
+      [ATTR_CACHE_MAP]: ATTR_CACHE_MAP,
+    },
+    plain,
+  );
+
+  return styleText;
+}

components/_util/cssinjs/hooks/useCSSVarRegister.ts

@@ -0,0 +1,108 @@
+import { removeCSS, updateCSS } from '../../../vc-util/Dom/dynamicCSS';
+import { ATTR_MARK, ATTR_TOKEN, CSS_IN_JS_INSTANCE, useStyleInject } from '../StyleContext';
+import { isClientSide, toStyleStr } from '../util';
+import type { TokenWithCSSVar } from '../util/css-variables';
+import { transformToken } from '../util/css-variables';
+import type { ExtractStyle } from './useGlobalCache';
+import useGlobalCache from './useGlobalCache';
+import { uniqueHash } from './useStyleRegister';
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+export const CSS_VAR_PREFIX = 'cssVar';
+
+type CSSVarCacheValue<V, T extends Record<string, V> = Record<string, V>> = [
+  cssVarToken: TokenWithCSSVar<V, T>,
+  cssVarStr: string,
+  styleId: string,
+  cssVarKey: string,
+];
+
+const useCSSVarRegister = <V, T extends Record<string, V>>(
+  config: ComputedRef<{
+    path: string[];
+    key: string;
+    prefix?: string;
+    unitless?: Record<string, boolean>;
+    ignore?: Record<string, boolean>;
+    scope?: string;
+    token: any;
+  }>,
+  fn: () => T,
+) => {
+  const styleContext = useStyleInject();
+
+  const stylePath = computed(() => {
+    return [
+      ...config.value.path,
+      config.value.key,
+      config.value.scope || '',
+      config.value.token?._tokenKey,
+    ];
+  });
+
+  const cache = useGlobalCache<CSSVarCacheValue<V, T>>(
+    CSS_VAR_PREFIX,
+    stylePath,
+    () => {
+      const originToken = fn();
+      const [mergedToken, cssVarsStr] = transformToken<V, T>(originToken, config.value.key, {
+        prefix: config.value.prefix,
+        unitless: config.value.unitless,
+        ignore: config.value.ignore,
+        scope: config.value.scope || '',
+      });
+
+      const styleId = uniqueHash(stylePath.value, cssVarsStr);
+      return [mergedToken, cssVarsStr, styleId, config.value.key];
+    },
+    ([, , styleId]) => {
+      if (isClientSide) {
+        removeCSS(styleId, { mark: ATTR_MARK });
+      }
+    },
+    ([, cssVarsStr, styleId]) => {
+      if (!cssVarsStr) {
+        return;
+      }
+
+      const style = updateCSS(cssVarsStr, styleId, {
+        mark: ATTR_MARK,
+        prepend: 'queue',
+        attachTo: styleContext.value.container,
+        priority: -999,
+      });
+
+      (style as any)[CSS_IN_JS_INSTANCE] = styleContext.value.cache?.instanceId;
+
+      // Used for `useCacheToken` to remove on batch when token removed
+      style.setAttribute(ATTR_TOKEN, config.value.key);
+    },
+  );
+
+  return cache;
+};
+
+export const extract: ExtractStyle<CSSVarCacheValue<any>> = (cache, _effectStyles, options) => {
+  const [, styleStr, styleId, cssVarKey] = cache;
+  const { plain } = options || {};
+
+  if (!styleStr) {
+    return null;
+  }
+
+  const order = -999;
+
+  // ====================== Style ======================
+  // Used for rc-util
+  const sharedAttrs = {
+    'data-vc-order': 'prependQueue',
+    'data-vc-priority': `${order}`,
+  };
+
+  const styleText = toStyleStr(styleStr, cssVarKey, styleId, sharedAttrs, plain);
+
+  return [order, styleId, styleText];
+};
+
+export default useCSSVarRegister;