feat: only cssvar mode (#31)

* feat: only cssvar mode

* chore: update

* chore: cov

Author: MadCcc

src/interface/index.ts

@@ -7,5 +7,3 @@ export type {
   ComponentTokenKey,
   GlobalToken,
 } from './components';
-
-export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];

src/util/genStyleUtils.tsx renamed to src/util/genStyleUtils.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 import type { CSSInterpolation, CSSObject, TokenType } from '@ant-design/cssinjs';
 
@@ -9,7 +9,6 @@ import type {
   GlobalTokenWithComponent,
   TokenMap,
   TokenMapKey,
-  UseComponentStyleResult,
 } from '../interface';
 
 import type AbstractCalculator from './calc/calculator';
@@ -197,10 +196,10 @@ function genStyleUtils<
     const useCSSVar = genCSSVarRegister(componentName, getDefaultToken, mergedOptions);
 
     return (prefixCls: string, rootCls: string = prefixCls) => {
-      const [, hashId] = useStyle(prefixCls, rootCls);
-      const [wrapCSSVar, cssVarCls] = useCSSVar(rootCls);
+      const hashId = useStyle(prefixCls, rootCls);
+      const cssVarCls = useCSSVar(rootCls);
 
-      return [wrapCSSVar, hashId, cssVarCls] as const;
+      return [hashId, cssVarCls] as const;
     };
   }
 
@@ -218,9 +217,11 @@ function genStyleUtils<
       prefixToken: (key: string) => string;
     },
   ) {
-    const { unitless: compUnitless, injectStyle = true, prefixToken, ignore } = options;
+    const { unitless: compUnitless, prefixToken, ignore } = options;
+
+    return (rootCls: string) => {
+      const { cssVar } = useToken();
 
-    const CSSVarRegister: React.FC<Readonly<CSSVarRegisterProps>> = ({ rootCls, cssVar = {} }) => {
       const { realToken } = useToken();
       useCSSVarRegister(
         {
@@ -246,34 +247,18 @@ function genStyleUtils<
               deprecatedTokens: options?.deprecatedTokens,
             },
           );
-          Object.keys(defaultToken).forEach((key) => {
-            componentToken[prefixToken(key)] = componentToken[key];
-            delete componentToken[key];
-          });
+          if (defaultToken) {
+            Object.keys(defaultToken).forEach((key) => {
+              componentToken[prefixToken(key)] = componentToken[key];
+              delete componentToken[key];
+            });
+          }
           return componentToken;
         },
       );
-      return null;
-    };
-
-    const useCSSVar = (rootCls: string) => {
-      const { cssVar } = useToken();
 
-      return [
-        (node: React.ReactElement): React.ReactElement =>
-          injectStyle && cssVar ? (
-            <>
-              <CSSVarRegister rootCls={rootCls} cssVar={cssVar} component={component} />
-              {node}
-            </>
-          ) : (
-            node
-          ),
-        cssVar?.key,
-      ] as const;
+      return cssVar?.key;
     };
-
-    return useCSSVar;
   }
 
   function genComponentStyleHook<C extends TokenMapKey<CompTokenMap>>(
@@ -312,25 +297,23 @@ function genStyleUtils<
     };
 
     // Return new style hook
-    return (prefixCls: string, rootCls: string = prefixCls): UseComponentStyleResult => {
+    return (prefixCls: string, rootCls: string = prefixCls): string => {
       const { theme, realToken, hashId, token, cssVar } = useToken();
 
       const { rootPrefixCls, iconPrefixCls } = usePrefix();
       const csp = useCSP();
 
-      const type = cssVar ? 'css' : 'js';
+      const type = 'css';
 
       // Use unique memo to share the result across all instances
       const calc = useUniqueMemo(() => {
         const unitlessCssVar = new Set<string>();
-        if (cssVar) {
-          Object.keys(options.unitless || {}).forEach((key) => {
-            // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
-            // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
-            unitlessCssVar.add(token2CSSVar(key, cssVar.prefix));
-            unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix(component, cssVar.prefix)));
-          });
-        }
+        Object.keys(options.unitless || {}).forEach((key) => {
+          // Some component proxy the AliasToken (e.g. Image) and some not (e.g. Modal)
+          // We should both pass in `unitlessCssVar` to make sure the CSSVar can be unitless.
+          unitlessCssVar.add(token2CSSVar(key, cssVar.prefix));
+          unitlessCssVar.add(token2CSSVar(key, getCompVarPrefix(component, cssVar.prefix)));
+        });
 
         return genCalc(type, unitlessCssVar);
       }, [type, component, cssVar?.prefix]);
@@ -359,7 +342,7 @@ function genStyleUtils<
         );
       }
 
-      const wrapSSR = useStyleRegister(
+      useStyleRegister(
         { ...sharedConfig, path: [concatComponent, prefixCls, iconPrefixCls] },
         () => {
           if (options.injectStyle === false) {
@@ -382,7 +365,7 @@ function genStyleUtils<
             { deprecatedTokens: options.deprecatedTokens },
           );
 
-          if (cssVar && defaultComponentToken && typeof defaultComponentToken === 'object') {
+          if (defaultComponentToken && typeof defaultComponentToken === 'object') {
             Object.keys(defaultComponentToken).forEach((key) => {
               defaultComponentToken[key] = `var(${token2CSSVar(
                 key,
@@ -398,12 +381,10 @@ function genStyleUtils<
               iconCls: `.${iconPrefixCls}`,
               antCls: `.${rootPrefixCls}`,
               calc,
-              // @ts-ignore
               max,
-              // @ts-ignore
               min,
             },
-            cssVar ? defaultComponentToken : componentToken,
+            defaultComponentToken,
           );
 
           const styleInterpolation = styleFn(mergedToken, {
@@ -421,7 +402,7 @@ function genStyleUtils<
         },
       );
 
-      return [wrapSSR, hashId];
+      return hashId;
     };
   }
 

tests/genStyleUtils.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { render, renderHook } from '@testing-library/react';
 
 import { genStyleUtils } from '../src';
-import type { CSSVarRegisterProps, SubStyleComponentProps } from '../src/util/genStyleUtils';
+import type { CSSVarRegisterProps, SubStyleComponentProps } from '@/util/genStyleUtils';
 import { createCache, StyleProvider } from '@ant-design/cssinjs';
 
 interface TestCompTokenMap {
@@ -46,7 +46,9 @@ describe('genStyleUtils', () => {
     it('should generate style hooks', () => {
       const component = 'TestComponent';
       const styleFn = jest.fn();
-      const getDefaultToken = jest.fn();
+      const getDefaultToken = {
+        mockCompToken: 'mock'
+      };
       const hooks = genStyleHooks(component, styleFn, getDefaultToken);
 
       expect(hooks).toBeInstanceOf(Function);
@@ -55,7 +57,7 @@ describe('genStyleUtils', () => {
         result: { current },
       } = renderHook(() => hooks('test-prefix'));
       expect(current).toBeInstanceOf(Array);
-      expect(current).toHaveLength(3);
+      expect(current).toHaveLength(2);
     });
   });