refactor(Grid): use genCssVar hook to generate CSS variables (#56635)

components/grid/col.tsx

@@ -4,6 +4,7 @@ import { clsx } from 'clsx';
 import type { Breakpoint } from '../_util/responsiveObserver';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
+import { genCssVar } from '../theme/util/genStyleUtils';
 import RowContext from './RowContext';
 import { useColStyle } from './style';
 
@@ -33,12 +34,16 @@ export interface ColProps
   prefixCls?: string;
 }
 
+const isNumber = (value: any): value is number => {
+  return typeof value === 'number' && !Number.isNaN(value);
+};
+
 function parseFlex(flex: FlexType): string {
   if (flex === 'auto') {
     return '1 1 auto';
   }
 
-  if (typeof flex === 'number') {
+  if (isNumber(flex)) {
     return `${flex} ${flex} auto`;
   }
 
@@ -70,9 +75,12 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   } = props;
 
   const prefixCls = getPrefixCls('col', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
 
   const [hashId, cssVarCls] = useColStyle(prefixCls);
 
+  const [varName] = genCssVar(rootPrefixCls, 'col');
+
   // ===================== Size ======================
   const sizeStyle: Record<string, string> = {};
 
@@ -102,7 +110,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     // Responsive flex layout
     if (sizeProps.flex) {
       sizeClassObj[`${prefixCls}-${size}-flex`] = true;
-      sizeStyle[`--${prefixCls}-${size}-flex`] = parseFlex(sizeProps.flex);
+      sizeStyle[varName(`${size}-flex`)] = parseFlex(sizeProps.flex);
     }
   });
 

components/grid/style/index.ts

@@ -99,8 +99,11 @@ const genGridColStyle: GenerateStyle<GridColToken> = (token): CSSObject => {
 };
 
 const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObject => {
-  const { prefixCls, componentCls, gridColumns, antCls } = token;
-  const [varName, varRef] = genCssVar(antCls, 'grid');
+  const { componentCls, gridColumns, antCls } = token;
+
+  const [gridVarName, gridVarRef] = genCssVar(antCls, 'grid');
+  const [, colVarRef] = genCssVar(antCls, 'col');
+
   const gridColumnsStyle: CSSObject = {};
   for (let i = gridColumns; i >= 0; i--) {
     if (i === 0) {
@@ -131,12 +134,12 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
         // Form set `display: flex` on Col which will override `display: block`.
         // Let's get it from css variable to support override.
         {
-          [varName('display')]: 'block',
+          [gridVarName('display')]: 'block',
           // Fallback to display if variable not support
           display: 'block',
         },
         {
-          display: varRef('display'),
+          display: gridVarRef('display'),
           flex: `0 0 ${(i / gridColumns) * 100}%`,
           maxWidth: `${(i / gridColumns) * 100}%`,
         },
@@ -158,7 +161,7 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
 
   // Flex CSS Var
   gridColumnsStyle[`${componentCls}${sizeCls}-flex`] = {
-    flex: `var(--${prefixCls}${sizeCls}-flex)`,
+    flex: colVarRef(`${sizeCls.replace(/-/, '')}-flex`),
   };
 
   return gridColumnsStyle;
@@ -205,14 +208,13 @@ export const useColStyle = genStyleHooks(
     });
     const gridMediaSizesMap: Record<string, number> = getMediaSize(gridToken);
     delete gridMediaSizesMap.xs;
-
     return [
       genGridColStyle(gridToken),
       genGridStyle(gridToken, ''),
       genGridStyle(gridToken, '-xs'),
       Object.keys(gridMediaSizesMap)
         .map((key) => genGridMediaStyle(gridToken, gridMediaSizesMap[key], `-${key}`))
-        .reduce((pre, cur) => ({ ...pre, ...cur }), {}),
+        .reduce<CSSObject>((pre, cur) => ({ ...pre, ...cur }), {}),
     ];
   },
   prepareColComponentToken,