feat: Drawer support cssVar (ant-design#45905)

Signed-off-by: MadCcc <[email protected]>
Co-authored-by: MadCcc <[email protected]>

components/drawer/DrawerPanel.tsx

@@ -1,6 +1,7 @@
+import * as React from 'react';
 import classNames from 'classnames';
 import type { DrawerProps as RCDrawerProps } from 'rc-drawer';
-import * as React from 'react';
+
 import useClosable from '../_util/hooks/useClosable';
 import { ConfigContext } from '../config-provider';
 

components/drawer/index.tsx

@@ -8,6 +8,7 @@ import type { CSSMotionProps } from 'rc-motion';
 import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { devUseWarning } from '../_util/warning';
+import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
 // CSSINJS
@@ -16,7 +17,7 @@ import { usePanelRef } from '../watermark/context';
 import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import useStyle from './style';
-import zIndexContext from '../_util/zindexContext';
+import useCSSVar from './style/cssVar';
 
 const SizeTypes = ['default', 'large'] as const;
 type sizeType = typeof SizeTypes[number];
@@ -70,10 +71,11 @@ const Drawer: React.FC<DrawerProps> & {
   } = props;
 
   const { getPopupContainer, getPrefixCls, direction, drawer } = React.useContext(ConfigContext);
+
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const getContainer =
     // 有可能为 false，所以不能直接判断
@@ -149,7 +151,7 @@ const Drawer: React.FC<DrawerProps> & {
   const [zIndex, contextZIndex] = useZIndex('Drawer', rest.zIndex);
 
   // =========================== Render ===========================
-  return wrapSSR(
+  return wrapCSSVar(
     <NoCompactStyle>
       <NoFormStyle status override>
         <zIndexContext.Provider value={contextZIndex}>
@@ -214,8 +216,8 @@ const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterfa
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const cls = classNames(
     prefixCls,
@@ -225,7 +227,7 @@ const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterfa
     className,
   );
 
-  return wrapSSR(
+  return wrapCSSVar(
     <div className={cls} style={style}>
       <DrawerPanel prefixCls={prefixCls} {...restProps} />
     </div>,

components/drawer/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister<'Drawer'>('Drawer', prepareComponentToken);

components/drawer/style/index.ts

@@ -1,4 +1,6 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { unit } from '@ant-design/cssinjs';
+
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
@@ -23,7 +25,7 @@ export interface ComponentToken {
 export interface DrawerToken extends FullToken<'Drawer'> {}
 
 // =============================== Base ===============================
-const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
+const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
   const {
     componentCls,
     zIndexPopup,
@@ -150,10 +152,10 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
         display: 'flex',
         flex: 0,
         alignItems: 'center',
-        padding: `${padding}px ${paddingLG}px`,
+        padding: `${unit(padding)} ${unit(paddingLG)}`,
         fontSize: fontSizeLG,
         lineHeight: lineHeightLG,
-        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
+        borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
 
         '&-title': {
           display: 'flex',
@@ -213,8 +215,8 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
       // Footer
       [`${componentCls}-footer`]: {
         flexShrink: 0,
-        padding: `${footerPaddingBlock}px ${footerPaddingInline}px`,
-        borderTop: `${lineWidth}px ${lineType} ${colorSplit}`,
+        padding: `${unit(footerPaddingBlock)} ${unit(footerPaddingInline)}`,
+        borderTop: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
       },
 
       // ====================== RTL =======================
@@ -225,17 +227,18 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Drawer'> = (token) => ({
+  zIndexPopup: token.zIndexPopupBase,
+  footerPaddingBlock: token.paddingXS,
+  footerPaddingInline: token.padding,
+});
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Drawer',
   (token) => {
     const drawerToken = mergeToken<DrawerToken>(token, {});
-
     return [genDrawerStyle(drawerToken), genMotionStyle(drawerToken)];
   },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase,
-    footerPaddingBlock: token.paddingXS,
-    footerPaddingInline: token.padding,
-  }),
+  prepareComponentToken,
 );

components/drawer/style/motion.ts

@@ -1,7 +1,7 @@
 import type { DrawerToken } from '.';
 import type { GenerateStyle } from '../../theme/internal';
 
-const genMotionStyle: GenerateStyle<DrawerToken> = (token: DrawerToken) => {
+const genMotionStyle: GenerateStyle<DrawerToken> = (token) => {
   const { componentCls, motionDurationSlow } = token;
 
   const sharedPanelMotion = {

scripts/check-cssinjs.tsx

@@ -35,7 +35,6 @@ async function checkCSSVar() {
     'checkbox',
     'collapse',
     'color-picker',
-    'drawer',
     'float-button',
     'grid',
     'icon',