From 5224c052475759544d5b8775cf00db8a95875822 Mon Sep 17 00:00:00 2001
From: c0dedance <38075730+c0dedance@users.noreply.github.com>
Date: Tue, 14 Nov 2023 09:42:37 +0800
Subject: [PATCH] refactor: statistic support css var (#45841)

* refactor: statistic support css var

* chore: remove statistic from ignore list

---------

Signed-off-by: MadCcc <madccc@foxmail.com>
Co-authored-by: MadCcc <madccc@foxmail.com>
---
 components/statistic/Statistic.tsx   |  6 ++++--
 components/statistic/style/cssVar.ts |  4 ++++
 components/statistic/style/index.tsx | 18 ++++++++++--------
 scripts/check-cssinjs.tsx            |  1 -
 4 files changed, 18 insertions(+), 11 deletions(-)
 create mode 100644 components/statistic/style/cssVar.ts

diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index 19d49dade05e..0eb10d65b224 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -5,6 +5,7 @@ import { ConfigContext } from '../config-provider';
 import Skeleton from '../skeleton';
 import StatisticNumber from './Number';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import type { FormatConfig, valueType } from './utils';
 
 export interface StatisticProps extends FormatConfig {
@@ -47,7 +48,8 @@ const Statistic: React.FC<StatisticProps> = (props) => {
 
   const prefixCls = getPrefixCls('statistic', customizePrefixCls);
 
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const valueNode: React.ReactNode = (
     <StatisticNumber
@@ -70,7 +72,7 @@ const Statistic: React.FC<StatisticProps> = (props) => {
     hashId,
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div
       className={cls}
       style={{ ...statistic?.style, ...style }}
diff --git a/components/statistic/style/cssVar.ts b/components/statistic/style/cssVar.ts
new file mode 100644
index 000000000000..9a9fd3282dc5
--- /dev/null
+++ b/components/statistic/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Statistic', prepareComponentToken);
diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx
index 348601cd622d..f02747f60f48 100644
--- a/components/statistic/style/index.tsx
+++ b/components/statistic/style/index.tsx
@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -66,17 +66,19 @@ const genStatisticStyle: GenerateStyle<StatisticToken> = (token: StatisticToken)
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Statistic'> = (token) => {
+  const { fontSizeHeading3, fontSize } = token;
+  return {
+    titleFontSize: fontSize,
+    contentFontSize: fontSizeHeading3,
+  };
+};
+
 export default genComponentStyleHook(
   'Statistic',
   (token) => {
     const statisticToken = mergeToken<StatisticToken>(token, {});
     return [genStatisticStyle(statisticToken)];
   },
-  (token) => {
-    const { fontSizeHeading3, fontSize } = token;
-    return {
-      titleFontSize: fontSize,
-      contentFontSize: fontSizeHeading3,
-    };
-  },
+  prepareComponentToken,
 );
diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
index b3dd9936edb3..332f1748799c 100644
--- a/scripts/check-cssinjs.tsx
+++ b/scripts/check-cssinjs.tsx
@@ -62,7 +62,6 @@ async function checkCSSVar() {
     'select',
     'slider',
     'space',
-    'statistic',
     'steps',
     'switch',
     'table',