feat: Grid support cssVar (#45855)

* feat: Grid support cssVar

* fix: fix

* fix: fix

---------

Signed-off-by: lijianan <574980606@qq.com>

components/grid/col.tsx

@@ -5,6 +5,7 @@ import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
 import RowContext from './RowContext';
 import { useColStyle } from './style';
+import { useColCssVar } from './style/cssVar';
 
 // https://github.com/ant-design/ant-design/issues/14324
 type ColSpanType = number | string;
@@ -67,7 +68,9 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
   } = props;
 
   const prefixCls = getPrefixCls('col', customizePrefixCls);
-  const [wrapSSR, hashId] = useColStyle(prefixCls);
+
+  const [, hashId] = useColStyle(prefixCls);
+  const wrapCSSVar = useColCssVar(prefixCls);
 
   let sizeClassObj = {};
   sizes.forEach((size) => {
@@ -126,7 +129,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
     }
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div {...others} style={{ ...mergedStyle, ...style }} className={classes} ref={ref}>
       {children}
     </div>,

components/grid/row.tsx

@@ -7,6 +7,7 @@ import { ConfigContext } from '../config-provider';
 import RowContext from './RowContext';
 import type { RowContextState } from './RowContext';
 import { useRowStyle } from './style';
+import { useRowCssVar } from './style/cssVar';
 
 const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const;
 const RowJustify = [
@@ -146,7 +147,10 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   };
 
   const prefixCls = getPrefixCls('row', customizePrefixCls);
-  const [wrapSSR, hashId] = useRowStyle(prefixCls);
+
+  const [, hashId] = useRowStyle(prefixCls);
+  const wrapCSSVar = useRowCssVar(prefixCls);
+
   const gutters = getGutter();
   const classes = classNames(
     prefixCls,
@@ -180,7 +184,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
     [gutterH, gutterV, wrap],
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <RowContext.Provider value={rowContext}>
       <div {...others} className={classes} style={{ ...rowStyle, ...style }} ref={ref}>
         {children}

components/grid/style/cssVar.ts

@@ -0,0 +1,6 @@
+import { prepareColComponentToken, prepareRowComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export const useColCssVar = genCSSVarRegister<'Grid'>('Grid', prepareColComponentToken);
+
+export const useRowCssVar = genCSSVarRegister<'Grid'>('Grid', prepareRowComponentToken);

components/grid/style/index.ts

@@ -1,9 +1,15 @@
-import type { CSSObject } from '@ant-design/cssinjs';
+import { unit, type CSSObject } from '@ant-design/cssinjs';
 
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
-interface GridRowToken extends FullToken<'Grid'> {}
+export interface ComponentToken {
+  //
+}
+
+interface GridRowToken extends FullToken<'Grid'> {
+  //
+}
 
 interface GridColToken extends FullToken<'Grid'> {
   gridColumns: number;
@@ -156,35 +162,40 @@ const genGridMediaStyle = (
   screenSize: number,
   sizeCls: string,
 ): CSSObject => ({
-  [`@media (min-width: ${screenSize}px)`]: {
+  [`@media (min-width: ${unit(screenSize)})`]: {
     ...genGridStyle(token, sizeCls),
   },
 });
 
+export const prepareRowComponentToken: GetDefaultToken<'Grid'> = () => ({});
+
+export const prepareColComponentToken: GetDefaultToken<'Grid'> = () => ({});
+
 // ============================== Export ==============================
-export const useRowStyle = genComponentStyleHook('Grid', (token) => [genGridRowStyle(token)]);
+export const useRowStyle = genComponentStyleHook('Grid', genGridRowStyle, prepareRowComponentToken);
 
-export const useColStyle = genComponentStyleHook('Grid', (token) => {
-  const gridToken: GridColToken = mergeToken<GridColToken>(token, {
-    gridColumns: 24, // Row is divided into 24 parts in Grid
-  });
-
-  const gridMediaSizesMap = {
-    '-sm': gridToken.screenSMMin,
-    '-md': gridToken.screenMDMin,
-    '-lg': gridToken.screenLGMin,
-    '-xl': gridToken.screenXLMin,
-    '-xxl': gridToken.screenXXLMin,
-  };
-
-  return [
-    genGridColStyle(gridToken),
-    genGridStyle(gridToken, ''),
-    genGridStyle(gridToken, '-xs'),
-    Object.keys(gridMediaSizesMap)
-      .map((key: keyof typeof gridMediaSizesMap) =>
-        genGridMediaStyle(gridToken, gridMediaSizesMap[key], key),
-      )
-      .reduce((pre, cur) => ({ ...pre, ...cur }), {}),
-  ];
-});
+export const useColStyle = genComponentStyleHook(
+  'Grid',
+  (token) => {
+    const gridToken: GridColToken = mergeToken<GridColToken>(token, {
+      gridColumns: 24, // Row is divided into 24 parts in Grid
+    });
+    const gridMediaSizesMap = {
+      '-sm': gridToken.screenSMMin,
+      '-md': gridToken.screenMDMin,
+      '-lg': gridToken.screenLGMin,
+      '-xl': gridToken.screenXLMin,
+      '-xxl': gridToken.screenXXLMin,
+    } as const;
+    type GridMediaSize = keyof typeof gridMediaSizesMap;
+    return [
+      genGridColStyle(gridToken),
+      genGridStyle(gridToken, ''),
+      genGridStyle(gridToken, '-xs'),
+      Object.keys(gridMediaSizesMap)
+        .map((key: GridMediaSize) => genGridMediaStyle(gridToken, gridMediaSizesMap[key], key))
+        .reduce((pre, cur) => ({ ...pre, ...cur }), {}),
+    ];
+  },
+  prepareColComponentToken,
+);

components/theme/interface/components.ts

@@ -24,6 +24,7 @@ import type { ComponentToken as EmptyComponentToken } from '../../empty/style';
 import type { ComponentToken as FlexComponentToken } from '../../flex/style';
 import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style';
 import type { ComponentToken as FormComponentToken } from '../../form/style';
+import type { ComponentToken as GridComponentToken } from '../../grid/style';
 import type { ComponentToken as ImageComponentToken } from '../../image/style';
 import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style';
 import type { ComponentToken as InputComponentToken } from '../../input/style';
@@ -87,7 +88,7 @@ export interface ComponentTokenMap {
   Flex?: FlexComponentToken;
   FloatButton?: FloatButtonComponentToken;
   Form?: FormComponentToken;
-  Grid?: {};
+  Grid?: GridComponentToken;
   Image?: ImageComponentToken;
   Input?: InputComponentToken;
   InputNumber?: InputNumberComponentToken;

scripts/check-cssinjs.tsx

@@ -29,7 +29,7 @@ console.error = (msg: any) => {
 async function checkCSSVar() {
   await generateCssinjs({
     key: 'check',
-    ignore: ['grid', 'pagination', 'calendar'],
+    ignore: ['pagination', 'calendar'],
     render(Component: any) {
       ReactDOMServer.renderToString(
         <StyleProvider linters={[NaNLinter]}>