refactor: genStyleHooks (#46038)

* refactor: genStyleHooks

* chore: update sciprt

* refactor: affix

* refactor: select

* chore: update

* refactor: update

* refactor: update

* refactor: done

* chore: code clean

* chore: code clean

* chore: fix lint

* chore: decrease size limit

* chore: code clean

* chore: code clean

* chore: remove export

components/affix/index.tsx

@@ -7,7 +7,6 @@ import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import { getFixedBottom, getFixedTop, getTargetRect } from './utils';
 
 const TRIGGER_EVENTS = [
@@ -244,8 +243,7 @@ const Affix = React.forwardRef<AffixRef, AffixProps>((props, ref) => {
     updatePosition();
   }, [target, offsetTop, offsetBottom]);
 
-  const [, hashId] = useStyle(affixPrefixCls);
+  const [wrapCSSVar, hashId] = useStyle(affixPrefixCls);
-  const wrapCSSVar = useCSSVar(affixPrefixCls);
 
   const rootCls = classNames(rootClassName, hashId, affixPrefixCls);
 

components/affix/style/cssVar.ts

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

components/affix/style/index.ts

@@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 
 export interface ComponentToken {
   zIndexPopup: number;
@@ -27,4 +27,4 @@ export const prepareComponentToken: GetDefaultToken<'Affix'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Affix', genSharedAffixStyle, prepareComponentToken);
+export default genStyleHooks('Affix', genSharedAffixStyle, prepareComponentToken);

components/alert/Alert.tsx

@@ -13,7 +13,6 @@ import { replaceElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
@@ -128,8 +127,7 @@ const Alert: React.FC<AlertProps> = (props) => {
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
     setClosed(true);

components/alert/style/cssVar.ts

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

components/alert/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
-import { unit } from '@ant-design/cssinjs';
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 
 export interface ComponentToken {
   // Component token here
@@ -248,7 +248,7 @@ export const prepareComponentToken: GetDefaultToken<'Alert'> = (token) => {
   };
 };
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Alert',
   (token) => [genBaseStyle(token), genTypeStyle(token), genActionStyle(token)],
   prepareComponentToken,

components/anchor/Anchor.tsx

@@ -14,7 +14,6 @@ import type { AnchorLinkBaseProps } from './AnchorLink';
 import AnchorLink from './AnchorLink';
 import AnchorContext from './context';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface AnchorLinkItemProps extends AnchorLinkBaseProps {
   key: React.Key;
@@ -153,9 +152,8 @@ const Anchor: React.FC<AnchorProps> = (props) => {
 
   const prefixCls = getPrefixCls('anchor', customPrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const getCurrentContainer = getContainer ?? getTargetContainer ?? getDefaultContainer;
 

components/anchor/style/cssVar.ts

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

components/anchor/style/index.ts

@@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -165,7 +165,7 @@ export const prepareComponentToken: GetDefaultToken<'Anchor'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Anchor',
   (token) => {
     const { fontSize, fontSizeLG, paddingXXS, calc } = token;

components/app/index.tsx

@@ -11,7 +11,6 @@ import useNotification from '../notification/useNotification';
 import type { AppConfig, useAppProps } from './context';
 import AppContext, { AppConfigContext } from './context';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface AppProps<P = AnyObject> extends AppConfig {
   style?: React.CSSProperties;
@@ -37,8 +36,7 @@ const App: React.FC<AppProps> & { useApp: () => useAppProps } = (props) => {
   } = props;
   const { getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('app', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
   const customClassName = classNames(hashId, prefixCls, className, rootClassName);
 
   const appConfig = useContext<AppConfig>(AppConfigContext);

components/app/style/cssVar.ts

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

components/app/style/index.ts

@@ -1,5 +1,5 @@
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 
 export type ComponentToken = {};
 
@@ -21,4 +21,4 @@ const genBaseStyle: GenerateStyle<AppToken> = (token) => {
 export const prepareComponentToken: GetDefaultToken<'App'> = () => ({});
 
 // ============================== Export ==============================
-export default genComponentStyleHook<'App'>('App', genBaseStyle, prepareComponentToken);
+export default genStyleHooks('App', genBaseStyle, prepareComponentToken);

components/avatar/avatar.tsx

@@ -12,7 +12,6 @@ import useBreakpoint from '../grid/hooks/useBreakpoint';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import AvatarContext from './AvatarContext';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface AvatarProps {
@@ -146,9 +145,8 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
   }
 
   const prefixCls = getPrefixCls('avatar', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   const sizeCls = classNames({
     [`${prefixCls}-lg`]: size === 'large',

components/avatar/group.tsx

@@ -9,7 +9,6 @@ import AvatarContext from './AvatarContext';
 import type { AvatarContextType, AvatarSize } from './AvatarContext';
 import useStyle from './style';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
-import useCSSVar from './style/cssVar';
 
 interface ContextProps {
   children?: React.ReactNode;
@@ -62,9 +61,8 @@ const Group: React.FC<GroupProps> = (props) => {
 
   const prefixCls = getPrefixCls('avatar', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   const cls = classNames(
     groupPrefixCls,

components/avatar/style/cssVar.ts

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

components/avatar/style/index.ts

@@ -1,8 +1,8 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -197,7 +197,7 @@ export const prepareComponentToken: GetDefaultToken<'Avatar'> = (token) => {
   };
 };
 
-export default genComponentStyleHook<'Avatar'>(
+export default genStyleHooks(
   'Avatar',
   (token) => {
     const { colorTextLightSolid, colorTextPlaceholder } = token;

components/back-top/index.tsx

@@ -12,7 +12,6 @@ import { devUseWarning } from '../_util/warning';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface BackTopProps {
   visibilityHeight?: number;
@@ -78,8 +77,7 @@ const BackTop: React.FC<BackTopProps> = (props) => {
 
   const rootPrefixCls = getPrefixCls();
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const classString = classNames(
     hashId,

components/back-top/style/cssVar.ts

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

components/back-top/style/index.ts

@@ -1,8 +1,8 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -89,7 +89,7 @@ export const prepareComponentToken: GetDefaultToken<'BackTop'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook<'BackTop'>(
+export default genStyleHooks(
   'BackTop',
   (token) => {
     const {

components/badge/Ribbon.tsx

@@ -5,7 +5,6 @@ import type { PresetColorType } from '../_util/colors';
 import { isPresetColor } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import { ConfigContext } from '../config-provider';
-import useCSSVar from './style/cssVar';
 import useStyle from './style/ribbon';
 
 type RibbonPlacement = 'start' | 'end';
@@ -35,8 +34,7 @@ const Ribbon: React.FC<RibbonProps> = (props) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const colorInPreset = isPresetColor(color, false);
   const ribbonCls = classNames(

components/badge/index.tsx

@@ -12,7 +12,6 @@ import type { PresetColorKey } from '../theme/internal';
 import Ribbon from './Ribbon';
 import ScrollNumber from './ScrollNumber';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export type { ScrollNumberProps } from './ScrollNumber';
 
@@ -77,8 +76,7 @@ const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps>
   const { getPrefixCls, direction, badge } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('badge', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   // ================================ Misc ================================
   const numberedDisplayCount = (

components/badge/style/cssVar.ts

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

components/badge/style/index.ts

@@ -2,7 +2,7 @@ import { Keyframes, unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
+import { genPresetColor, genStyleHooks, mergeToken } from '../../theme/internal';
 import type { GenStyleFn, GetDefaultToken } from '../../theme/util/genComponentStyleHook';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -367,7 +367,7 @@ export const prepareComponentToken: GetDefaultToken<'Badge'> = (token) => {
   };
 };
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Badge',
   (token) => {
     const badgeToken = prepareToken(token);

components/breadcrumb/Breadcrumb.tsx

@@ -12,7 +12,6 @@ import type { BreadcrumbItemProps } from './BreadcrumbItem';
 import BreadcrumbItem, { InternalBreadcrumbItem } from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useItemRender from './useItemRender';
 import useItems from './useItems';
 
@@ -96,8 +95,7 @@ const Breadcrumb = <T extends AnyObject = AnyObject>(props: BreadcrumbProps<T>)
   let crumbs: React.ReactNode;
 
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const mergedItems = useItems(items, legacyRoutes);
 

components/breadcrumb/style/cssVar.ts

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

components/breadcrumb/style/index.ts

@@ -1,8 +1,8 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -147,7 +147,7 @@ export const prepareComponentToken: GetDefaultToken<'Breadcrumb'> = (token) => (
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Breadcrumb',
   (token) => {
     const breadcrumbToken = mergeToken<BreadcrumbToken>(token, {});

components/button/button.tsx

@@ -26,7 +26,6 @@ import IconWrapper from './IconWrapper';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
 import CompactCmp from './style/compactCmp';
-import useCSSVar from './style/cssVar';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -119,8 +118,7 @@ const InternalButton: React.ForwardRefRenderFunction<
   const { getPrefixCls, autoInsertSpaceInButton, direction, button } = useContext(ConfigContext);
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const disabled = useContext(DisabledContext);
   const mergedDisabled = customDisabled ?? disabled;

components/button/style/cssVar.ts

@@ -1,8 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-import { prepareComponentToken } from '.';
-
-export default genCSSVarRegister('Button', prepareComponentToken, {
-  unitless: {
-    fontWeight: true,
-  },
-});

components/button/style/index.ts

@@ -1,10 +1,10 @@
 import type { CSSProperties } from 'react';
-import { unit } from '@ant-design/cssinjs';
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
 import { genFocusStyle } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genGroupStyle from './group';
 
@@ -705,7 +705,7 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
   };
 };
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Button',
   (token) => {
     const buttonToken = prepareToken(token);
@@ -730,4 +730,9 @@ export default genComponentStyleHook(
     ];
   },
   prepareComponentToken,
+  {
+    unitless: {
+      fontWeight: true,
+    },
+  },
 );

components/calendar/generateCalendar.tsx

@@ -16,7 +16,6 @@ import { useLocale } from '../locale';
 import CalendarHeader from './Header';
 import enUS from './locale/en_US';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 type InjectDefaultProps<Props> = Omit<
   Props,
@@ -120,8 +119,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
 
-    const [, hashId] = useStyle(prefixCls);
+    const [wrapCSSVar, hashId] = useStyle(prefixCls, calendarPrefixCls);
-    const wrapCSSVar = useCSSVar(calendarPrefixCls);
 
     const today = generateConfig.getNow();
 

components/calendar/style/cssVar.ts

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

components/calendar/style/index.ts

@@ -9,7 +9,7 @@ import {
 } from '../../date-picker/style';
 import { resetComponent } from '../../style';
 import type { FullToken, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -225,7 +225,7 @@ export const prepareComponentToken: GetDefaultToken<'Calendar'> = (token) => ({
   ...initPanelComponentToken(token),
 });
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Calendar',
   (token) => {
     const calendarCls = `${token.componentCls}-calendar`;

components/card/Card.tsx

@@ -10,7 +10,6 @@ import type { TabsProps } from '../tabs';
 import Tabs from '../tabs';
 import Grid from './Grid';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export type CardType = 'inner';
 export type CardSize = 'default' | 'small';
@@ -110,8 +109,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   }, [children]);
 
   const prefixCls = getPrefixCls('card', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const loadingBlock = (
     <Skeleton loading active paragraph={{ rows: 4 }} title={false}>

components/card/style/cssVar.ts

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

components/card/style/index.ts

@@ -1,8 +1,8 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import { clearFix, resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -428,7 +428,7 @@ export const prepareComponentToken: GetDefaultToken<'Card'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Card',
   (token) => {
     const cardToken = mergeToken<CardToken>(token, {

components/carousel/index.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export type CarouselEffect = 'scrollx' | 'fade';
 export type DotPosition = 'top' | 'bottom' | 'left' | 'right';
@@ -95,8 +94,7 @@ const Carousel = React.forwardRef<CarouselRef, CarouselProps>((props, ref) => {
     typeof dots === 'boolean' ? false : dots?.className,
   );
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const className = classNames(
     prefixCls,

components/carousel/style/cssVar.ts

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

components/carousel/style/index.ts

@@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
@@ -355,7 +355,7 @@ export const prepareComponentToken: GetDefaultToken<'Carousel'> = () => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Carousel',
   (token) => {
     const { controlHeightLG, controlHeightSM } = token;

components/cascader/Panel.tsx

@@ -11,7 +11,6 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import useStyle from './style';
 import usePanelStyle from './style/panel';
-import useCSSVar from './style/cssVar';
 
 export type PanelPickType = Exclude<PickType, 'checkable'> | 'multiple' | 'rootClassName';
 
@@ -33,10 +32,8 @@ export default function CascaderPanel(props: CascaderPanelProps) {
     direction,
   );
 
-  const [, hashId] = useStyle(cascaderPrefixCls);
+  const rootCls = useCSSVarCls(cascaderPrefixCls);
-  const rootCls = useCSSVarCls(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(cascaderPrefixCls, rootCls);
-  const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
-  const wrapCSSVar = useCSSVar(cascaderRootCls);
   usePanelStyle(cascaderPrefixCls);
 
   const isRtl = mergedDirection === 'rtl';
@@ -59,7 +56,7 @@ export default function CascaderPanel(props: CascaderPanelProps) {
       {...props}
       checkable={checkable}
       prefixCls={cascaderPrefixCls}
-      className={classNames(className, hashId, rootClassName, rootCls, cascaderRootCls)}
+      className={classNames(className, hashId, rootClassName, rootCls)}
       notFoundContent={mergedNotFoundContent}
       direction={mergedDirection}
       expandIcon={mergedExpandIcon}

components/cascader/index.tsx

@@ -27,7 +27,6 @@ import useSize from '../config-provider/hooks/useSize';
 import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import useSelectStyle from '../select/style';
-import useSelectCSSVar from '../select/style/cssVar';
 import useBuiltinPlacements from '../select/useBuiltinPlacements';
 import useIcons from '../select/useIcons';
 import useShowArrow from '../select/useShowArrow';
@@ -37,7 +36,6 @@ import useCheckable from './hooks/useCheckable';
 import useColumnIcons from './hooks/useColumnIcons';
 import CascaderPanel from './Panel';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -214,12 +212,10 @@ const Cascader = React.forwardRef<CascaderRef, CascaderProps<any>>((props, ref)
 
   const rootPrefixCls = getPrefixCls();
 
-  const [, hashId] = useSelectStyle(prefixCls);
-  useStyle(cascaderPrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
+  const [wrapSelectCSSVar, hashId] = useSelectStyle(prefixCls, rootCls);
   const cascaderRootCls = useCSSVarCls(cascaderPrefixCls);
-  const wrapSelectCSSVar = useSelectCSSVar(rootCls);
+  const [wrapCascaderCSSVar] = useStyle(cascaderPrefixCls, cascaderRootCls);
-  const wrapCascaderCSSVar = useCSSVar(cascaderRootCls);
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
 

components/cascader/style/cssVar.ts

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

components/cascader/style/index.ts

@@ -3,7 +3,7 @@ import type { CSSProperties } from 'react';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { GlobalToken } from '../../theme';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook } from '../../theme/internal';
+import { genStyleHooks } from '../../theme/internal';
 import getColumnsStyle from './columns';
 
 export interface ComponentToken {
@@ -104,8 +104,4 @@ export const prepareComponentToken = (token: GlobalToken) => {
   };
 };
 
-export default genComponentStyleHook(
+export default genStyleHooks('Cascader', (token) => [genBaseStyle(token)], prepareComponentToken);
-  'Cascader',
-  (token) => [genBaseStyle(token)],
-  prepareComponentToken,
-);

components/checkbox/Checkbox.tsx

@@ -12,7 +12,6 @@ import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { FormItemInputContext } from '../form/context';
 import GroupContext from './GroupContext';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
@@ -107,9 +106,8 @@ const InternalCheckbox: React.ForwardRefRenderFunction<CheckboxRef, CheckboxProp
   }, [restProps.value]);
 
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const checkboxProps: CheckboxProps = { ...restProps };
   if (checkboxGroup && !skipGroup) {

components/checkbox/Group.tsx

@@ -8,7 +8,6 @@ import type { CheckboxChangeEvent } from './Checkbox';
 import Checkbox from './Checkbox';
 import GroupContext from './GroupContext';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export type CheckboxValueType = string | number | boolean;
 
@@ -112,9 +111,8 @@ const InternalGroup: React.ForwardRefRenderFunction<HTMLDivElement, CheckboxGrou
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const domProps = omit(restProps, ['value', 'disabled']);
 

components/checkbox/style/cssVar.ts

@@ -1,3 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-
-export default genCSSVarRegister('Checkbox', {});

components/checkbox/style/index.ts

@@ -2,7 +2,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { genFocusOutline, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {}
 
@@ -263,6 +263,4 @@ export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
   return [genCheckboxStyle(checkboxToken)];
 }
 
-export default genComponentStyleHook('Checkbox', (token, { prefixCls }) => [
+export default genStyleHooks('Checkbox', (token, { prefixCls }) => [getStyle(prefixCls, token)]);
-  getStyle(prefixCls, token),
-]);

components/collapse/Collapse.tsx

@@ -16,7 +16,6 @@ import type { SizeType } from '../config-provider/SizeContext';
 import type { CollapsibleType } from './CollapsePanel';
 import CollapsePanel from './CollapsePanel';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 /** @deprecated Please use `start` | `end` instead */
 type ExpandIconPositionLegacy = 'left' | 'right';
@@ -77,8 +76,7 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
   const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle');
   const prefixCls = getPrefixCls('collapse', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Collapse');

components/collapse/style/cssVar.ts

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

components/collapse/style/index.ts

@@ -4,7 +4,7 @@ import { unit } from '@ant-design/cssinjs';
 import { resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -311,7 +311,7 @@ export const prepareComponentToken: GetDefaultToken<'Collapse'> = (token) => ({
   contentBg: token.colorBgContainer,
 });
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Collapse',
   (token) => {
     const collapseToken = mergeToken<CollapseToken>(token, {

components/color-picker/ColorPicker.tsx

@@ -32,8 +32,7 @@ import type {
   TriggerPlacement,
   TriggerType,
 } from './interface';
-import useCSSVar from './style/cssVar';
+import useStyle from './style';
-import useStyle from './style/index';
 import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util';
 
 export type ColorPickerProps = Omit<
@@ -137,9 +136,8 @@ const ColorPicker: CompoundedComponent = (props) => {
 
   // ===================== Style =====================
   const mergedSize = useSize(customizeSize);
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
   const rtlCls = { [`${prefixCls}-rtl`]: direction };
   const mergeRootCls = classNames(rootClassName, rootCls, rtlCls);
   const mergeCls = classNames(

components/color-picker/style/cssVar.ts

@@ -1,3 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-
-export default genCSSVarRegister('ColorPicker', {});

components/color-picker/style/index.ts

@@ -1,7 +1,7 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genColorBlockStyle from './color-block';
 import genInputStyle from './input';
 import genPickerStyle from './picker';
@@ -252,7 +252,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
   ];
 };
 
-export default genComponentStyleHook('ColorPicker', (token) => {
+export default genStyleHooks('ColorPicker', (token) => {
   const { colorTextQuaternary, marginSM } = token;
 
   const colorPickerSliderHeight = 8;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -19,7 +19,6 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import useCSSVar from '../style/cssVar';
 import {
   getRangePlaceholder,
   getTimeProps,
@@ -73,9 +72,8 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
     const { format, showTime, picker } = props as any;
     const rootPrefixCls = getPrefixCls();
 
-    const [, hashId] = useStyle(prefixCls);
     const cssVarCls = useCSSVarCls(prefixCls);
-    const wrapCSSVar = useCSSVar(cssVarCls);
+    const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
     const additionalOverrideProps: any = {
       ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}),

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -20,7 +20,6 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import useCSSVar from '../style/cssVar';
 import {
   getPlaceholder,
   getTimeProps,
@@ -81,9 +80,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         const innerRef = React.useRef<RCPicker<DateType>>(null);
         const { format, showTime } = props as any;
 
-        const [, hashId] = useStyle(prefixCls);
         const cssVarCls = useCSSVarCls(prefixCls);
-        const wrapCSSVar = useCSSVar(cssVarCls);
+        const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
         useImperativeHandle(ref, () => ({
           focus: () => innerRef.current?.focus(),

components/date-picker/style/cssVar.ts

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

components/date-picker/style/index.ts

@@ -22,7 +22,7 @@ import {
 } from '../../style/motion';
 import type { GlobalToken } from '../../theme/interface';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import type { ArrowToken } from '../../style/roundedArrow';
 import { genRoundedArrow, getArrowToken } from '../../style/roundedArrow';
@@ -1614,7 +1614,7 @@ export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => (
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'DatePicker',
   (token) => {
     const pickerToken = mergeToken<PickerToken>(initInputToken(token), initPickerPanelToken(token));

components/descriptions/index.tsx

@@ -15,7 +15,6 @@ import type { DescriptionsItemProps } from './Item';
 import DescriptionsItem from './Item';
 import Row from './Row';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 interface CompoundedComponent {
   Item: typeof DescriptionsItem;
@@ -93,8 +92,7 @@ const Descriptions: React.FC<DescriptionsProps> & CompoundedComponent = (props)
   const mergedSize = useSize(customizeSize);
   const rows = useRow(mergedColumn, mergedItems);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   // ======================== Render ========================
   const contextValue = React.useMemo(

components/descriptions/style/cssVar.ts

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

components/descriptions/style/index.ts

@@ -1,8 +1,8 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -228,7 +228,7 @@ export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) =>
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Descriptions',
   (token) => {
     const descriptionToken = mergeToken<DescriptionsToken>(token, {});

components/divider/index.tsx

@@ -4,7 +4,6 @@ import classNames from 'classnames';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface DividerProps {
   prefixCls?: string;
@@ -37,8 +36,7 @@ const Divider: React.FC<DividerProps> = (props) => {
   } = props;
   const prefixCls = getPrefixCls('divider', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
   const hasChildren = !!children;

components/divider/style/cssVar.ts

@@ -1,8 +0,0 @@
-import { prepareComponentToken } from '.';
-import { genCSSVarRegister } from '../../theme/internal';
-
-export default genCSSVarRegister<'Divider'>('Divider', prepareComponentToken, {
-  unitless: {
-    orientationMargin: true,
-  },
-});

components/divider/style/index.ts

@@ -4,7 +4,7 @@ import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -182,7 +182,7 @@ export const prepareComponentToken: GetDefaultToken<'Divider'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Divider',
   (token) => {
     const dividerToken = mergeToken<DividerToken>(token, {
@@ -193,4 +193,9 @@ export default genComponentStyleHook(
     return [genSharedDividerStyle(dividerToken)];
   },
   prepareComponentToken,
+  {
+    unitless: {
+      orientationMargin: true,
+    },
+  },
 );

components/drawer/index.tsx

@@ -11,16 +11,14 @@ import { devUseWarning } from '../_util/warning';
 import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
-// CSSINJS
 import { NoCompactStyle } from '../space/Compact';
 import { usePanelRef } from '../watermark/context';
 import type { DrawerClassNames, DrawerPanelProps, DrawerStyles } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 const SizeTypes = ['default', 'large'] as const;
-type sizeType = typeof SizeTypes[number];
+type sizeType = (typeof SizeTypes)[number];
 
 export interface PushState {
   distance: string | number;
@@ -74,8 +72,7 @@ const Drawer: React.FC<DrawerProps> & {
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const getContainer =
     // 有可能为 false，所以不能直接判断
@@ -216,8 +213,7 @@ const PurePanel: React.FC<Omit<DrawerPanelProps, 'prefixCls'> & PurePanelInterfa
 
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const cls = classNames(
     prefixCls,

components/drawer/style/cssVar.ts

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

components/drawer/style/index.ts

@@ -1,7 +1,7 @@
 import { unit } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genMotionStyle from './motion';
 
 export interface ComponentToken {
@@ -234,7 +234,7 @@ export const prepareComponentToken: GetDefaultToken<'Drawer'> = (token) => ({
 });
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Drawer',
   (token) => {
     const drawerToken = mergeToken<DrawerToken>(token, {});

components/dropdown/dropdown.tsx

@@ -20,7 +20,6 @@ import Menu from '../menu';
 import { OverrideProvider } from '../menu/OverrideContext';
 import { useToken } from '../theme/internal';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const Placements = [
@@ -34,7 +33,7 @@ const Placements = [
   'bottom',
 ] as const;
 
-type Placement = typeof Placements[number];
+type Placement = (typeof Placements)[number];
 type DropdownPlacement = Exclude<Placement, 'topCenter' | 'bottomCenter'>;
 
 type OverlayFunc = () => React.ReactElement;
@@ -172,8 +171,7 @@ const Dropdown: CompoundedComponent = (props) => {
 
   const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
-  const wrapCSSVar = useCSSVar(rootCls);
 
   const [, token] = useToken();
 

components/dropdown/style/cssVar.ts

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

components/dropdown/style/index.ts

@@ -11,7 +11,7 @@ import {
 import type { ArrowOffsetToken } from '../../style/placementArrow';
 import getArrowStyle, { getArrowOffsetToken } from '../../style/placementArrow';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import genStatusStyle from './status';
 import type { ArrowToken } from '../../style/roundedArrow';
 import { getArrowToken } from '../../style/roundedArrow';
@@ -347,7 +347,7 @@ export const prepareComponentToken: GetDefaultToken<'Dropdown'> = (token) => ({
   ...getArrowToken(token),
 });
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Dropdown',
   (token) => {
     const { marginXXS, sizePopupArrow, paddingXXS, componentCls } = token;

components/empty/index.tsx

@@ -6,7 +6,6 @@ import DefaultEmptyImg from './empty';
 import SimpleEmptyImg from './simple';
 
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 const defaultEmptyImg = <DefaultEmptyImg />;
 const simpleEmptyImg = <SimpleEmptyImg />;
@@ -46,8 +45,7 @@ const Empty: CompoundedComponent = ({
   const { getPrefixCls, direction, empty } = React.useContext(ConfigContext);
 
   const prefixCls = getPrefixCls('empty', customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const [locale] = useLocale('Empty');
 

components/empty/style/cssVar.ts

@@ -1,3 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-
-export default genCSSVarRegister('Empty', null);

components/empty/style/index.ts

@@ -1,6 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {}
@@ -75,7 +75,7 @@ const genSharedEmptyStyle: GenerateStyle<EmptyToken> = (token): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Empty', (token) => {
+export default genStyleHooks('Empty', (token) => {
   const { componentCls, controlHeightLG, calc } = token;
 
   const emptyToken: EmptyToken = mergeToken<EmptyToken>(token, {

components/flex/index.tsx

@@ -7,7 +7,6 @@ import { ConfigContext } from '../config-provider';
 import type { ConfigConsumerProps } from '../config-provider';
 import type { FlexProps } from './interface';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import createFlexClassNames from './utils';
 
 const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
@@ -32,8 +31,7 @@ const Flex = React.forwardRef<HTMLElement, FlexProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('flex', customizePrefixCls);
 
-  const [, hashId] = useStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
 
   const mergedVertical = vertical ?? ctxFlex?.vertical;
 

components/flex/style/cssVar.ts

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

components/flex/style/index.ts

@@ -1,7 +1,7 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import { alignItemsValues, flexWrapValues, justifyContentValues } from '../utils';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -97,7 +97,7 @@ const genJustifyContentStyle: GenerateStyle<FlexToken> = (token) => {
 
 export const prepareComponentToken: GetDefaultToken<'Flex'> = () => ({});
 
-export default genComponentStyleHook<'Flex'>(
+export default genStyleHooks(
   'Flex',
   (token) => {
     const { paddingXS, padding, paddingLG } = token;

components/float-button/BackTop.tsx

@@ -11,7 +11,6 @@ import { ConfigContext } from '../config-provider';
 import FloatButtonGroupContext from './context';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
 import type { BackTopProps, FloatButtonProps, FloatButtonRef, FloatButtonShape } from './interface';
-import useStyle from './style';
 
 const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
   const {
@@ -67,7 +66,6 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
 
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
-  const [wrapSSR] = useStyle(prefixCls);
 
   const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
 
@@ -75,7 +73,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
 
   const contentProps: FloatButtonProps = { prefixCls, icon, type, shape: mergeShape, ...restProps };
 
-  return wrapSSR(
+  return (
     <CSSMotion visible={visible} motionName={`${rootPrefixCls}-fade`}>
       {({ className: motionClassName }) => (
         <FloatButton
@@ -85,7 +83,7 @@ const BackTop = React.forwardRef<FloatButtonRef, BackTopProps>((props, ref) => {
           className={classNames(className, motionClassName)}
         />
       )}
-    </CSSMotion>,
+    </CSSMotion>
   );
 });
 

components/float-button/FloatButton.tsx

@@ -18,7 +18,6 @@ import type {
   FloatButtonShape,
 } from './interface';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export const floatButtonPrefixCls = 'float-btn';
@@ -39,9 +38,8 @@ const FloatButton = forwardRef<FloatButtonRef['nativeElement'], FloatButtonProps
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const mergeShape = groupShape || shape;
 

components/float-button/FloatButtonGroup.tsx

@@ -12,7 +12,6 @@ import { FloatButtonGroupProvider } from './context';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
 import type { FloatButtonGroupProps, FloatButtonRef } from './interface';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
@@ -34,9 +33,8 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
 
   const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
   const groupCls = classNames(groupPrefixCls, hashId, rootCls, className, {

components/float-button/style/cssVar.ts

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

components/float-button/style/index.ts

@@ -4,7 +4,7 @@ import { resetComponent } from '../../style';
 import { initFadeMotion } from '../../style/motion/fade';
 import { initMotion } from '../../style/motion/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import getOffset from '../util';
 
 /** Component only token. Which will handle additional calculation of alias token */
@@ -370,7 +370,7 @@ export const prepareComponentToken: GetDefaultToken<'FloatButton'> = (token) =>
   dotOffsetInSquare: getOffset(token.borderRadiusLG),
 });
 
-export default genComponentStyleHook<'FloatButton'>(
+export default genStyleHooks(
   'FloatButton',
   (token) => {
     const {

components/form/ErrorList.tsx

@@ -9,7 +9,6 @@ import type { ValidateStatus } from './FormItem';
 import useDebounce from './hooks/useDebounce';
 
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const EMPTY_LIST: React.ReactNode[] = [];
@@ -56,9 +55,8 @@ const ErrorList: React.FC<ErrorListProps> = ({
 
   const baseClassName = `${prefixCls}-item-explain`;
 
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
 

components/form/Form.tsx

@@ -17,7 +17,6 @@ import useForm, { type FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
 import type { FormLabelAlign } from './interface';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import ValidateMessagesContext from './validateMessagesContext';
 import type { FeedbackIcons } from './FormItem';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
@@ -105,9 +104,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   // Style
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   const formClassName = classNames(
     prefixCls,

components/form/FormItem/index.tsx

@@ -18,7 +18,6 @@ import useFormItemStatus from '../hooks/useFormItemStatus';
 import useFrameState from '../hooks/useFrameState';
 import useItemRef from '../hooks/useItemRef';
 import useStyle from '../style';
-import useCSSVar from '../style/cssVar';
 import { getFieldId, toArray } from '../util';
 import ItemHolder from './ItemHolder';
 import StatusProvider from './StatusProvider';
@@ -32,7 +31,7 @@ interface FieldError {
 }
 
 const ValidateStatuses = ['success', 'warning', 'error', 'validating', ''] as const;
-export type ValidateStatus = typeof ValidateStatuses[number];
+export type ValidateStatus = (typeof ValidateStatuses)[number];
 
 type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 type RcFieldProps<Values = any> = Omit<FieldProps<Values>, 'children'>;
@@ -128,9 +127,8 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   // Style
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   // ========================= Warn =========================
   const warning = devUseWarning('Form.Item');

components/form/style/cssVar.ts

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

components/form/style/index.ts

@@ -1,13 +1,13 @@
 import type { CSSProperties } from 'react';
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
 import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
-import { unit } from '@ant-design/cssinjs';
 
 export interface ComponentToken {
   /**
@@ -570,7 +570,7 @@ export const prepareToken: (
   return formToken;
 };
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Form',
   (token, { rootPrefixCls }) => {
     const formToken = prepareToken(token, rootPrefixCls);

components/grid/col.tsx

@@ -5,7 +5,6 @@ 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;
@@ -69,8 +68,7 @@ const Col = React.forwardRef<HTMLDivElement, ColProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('col', customizePrefixCls);
 
-  const [, hashId] = useColStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useColStyle(prefixCls);
-  const wrapCSSVar = useColCssVar(prefixCls);
 
   let sizeClassObj = {};
   sizes.forEach((size) => {

components/grid/row.tsx

@@ -7,7 +7,6 @@ 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 = [
@@ -27,12 +26,12 @@ type ResponsiveLike<T> = {
 type Gap = number | undefined;
 export type Gutter = number | undefined | Partial<Record<Breakpoint, number>>;
 
-type ResponsiveAligns = ResponsiveLike<typeof RowAligns[number]>;
+type ResponsiveAligns = ResponsiveLike<(typeof RowAligns)[number]>;
-type ResponsiveJustify = ResponsiveLike<typeof RowJustify[number]>;
+type ResponsiveJustify = ResponsiveLike<(typeof RowJustify)[number]>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   gutter?: Gutter | [Gutter, Gutter];
-  align?: typeof RowAligns[number] | ResponsiveAligns;
+  align?: (typeof RowAligns)[number] | ResponsiveAligns;
-  justify?: typeof RowJustify[number] | ResponsiveJustify;
+  justify?: (typeof RowJustify)[number] | ResponsiveJustify;
   prefixCls?: string;
   wrap?: boolean;
 }
@@ -148,8 +147,7 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
 
   const prefixCls = getPrefixCls('row', customizePrefixCls);
 
-  const [, hashId] = useRowStyle(prefixCls);
+  const [wrapCSSVar, hashId] = useRowStyle(prefixCls);
-  const wrapCSSVar = useRowCssVar(prefixCls);
 
   const gutters = getGutter();
   const classes = classNames(

components/grid/style/cssVar.ts

@@ -1,6 +0,0 @@
-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,7 +1,7 @@
-import { unit, type CSSObject } from '@ant-design/cssinjs';
+import { type CSSObject, unit } from '@ant-design/cssinjs';
 
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   //
@@ -172,9 +172,9 @@ export const prepareRowComponentToken: GetDefaultToken<'Grid'> = () => ({});
 export const prepareColComponentToken: GetDefaultToken<'Grid'> = () => ({});
 
 // ============================== Export ==============================
-export const useRowStyle = genComponentStyleHook('Grid', genGridRowStyle, prepareRowComponentToken);
+export const useRowStyle = genStyleHooks('Grid', genGridRowStyle, prepareRowComponentToken);
 
-export const useColStyle = genComponentStyleHook(
+export const useColStyle = genStyleHooks(
   'Grid',
   (token) => {
     const gridToken: GridColToken = mergeToken<GridColToken>(token, {

components/image/PreviewGroup.tsx

@@ -15,9 +15,7 @@ import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
-// CSSINJS
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export const icons = {
   rotateLeft: <RotateLeftOutlined />,
@@ -41,9 +39,8 @@ const InternalPreviewGroup: React.FC<GroupConsumerProps> = ({
   const previewPrefixCls = `${prefixCls}-preview`;
   const rootPrefixCls = getPrefixCls();
 
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const [zIndex] = useZIndex(
     'ImagePreview',

components/image/index.tsx

@@ -8,10 +8,8 @@ import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import defaultLocale from '../locale/en_US';
-// CSSINJS
 import PreviewGroup, { icons } from './PreviewGroup';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface CompositionImage<P> extends React.FC<P> {
@@ -39,9 +37,8 @@ const Image: CompositionImage<ImageProps> = (props) => {
 
   const imageLocale = contextLocale.Image || defaultLocale.Image;
   // Style
-  const [, hashId] = useStyle(prefixCls);
   const rootCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(rootCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, rootCls);
 
   const mergedRootClassName = classNames(rootClassName, hashId, rootCls);
 

components/image/style/cssVar.ts

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

components/image/style/index.ts

@@ -1,11 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 import { genModalMaskStyle } from '../../modal/style';
 import { textEllipsis } from '../../style';
 import { initFadeMotion, initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
-import { unit } from '@ant-design/cssinjs';
 
 export interface ComponentToken {
   /**
@@ -367,7 +367,7 @@ export const prepareComponentToken: GetDefaultToken<'Image'> = (token) => ({
   previewOperationSize: token.fontSizeIcon * 1.5, // FIXME: fontSizeIconLG
 });
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Image',
   (token) => {
     const previewCls = `${token.componentCls}-preview`;

components/input-number/index.tsx

@@ -13,7 +13,6 @@ import useSize from '../config-provider/hooks/useSize';
 import { FormItemInputContext, NoFormStyle } from '../form/context';
 import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface InputNumberProps<T extends ValueType = ValueType>
@@ -56,9 +55,8 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
   const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
   // Style
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);
   let upIcon = <UpOutlined className={`${prefixCls}-handler-up-inner`} />;

components/input-number/style/cssVar.ts

@@ -1,9 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-import { formatComponentToken, prepareComponentToken } from '.';
-
-export default genCSSVarRegister('InputNumber', prepareComponentToken, {
-  format: formatComponentToken,
-  unitless: {
-    handleOpacity: true,
-  },
-});

components/input-number/style/index.ts

@@ -11,7 +11,7 @@ import {
 import { resetComponent, resetIcon } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 import { unit } from '@ant-design/cssinjs';
 import type { FormatComponentToken } from '../../theme/util/genComponentStyleHook';
 
@@ -496,7 +496,7 @@ export const formatComponentToken: FormatComponentToken<'InputNumber'> = (token)
   handleOpacity: token.handleVisible === true ? 1 : 0,
 });
 
-export default genComponentStyleHook(
+export default genStyleHooks(
   'InputNumber',
   (token) => {
     const inputNumberToken = mergeToken<InputNumberToken>(token, initInputToken(token));
@@ -512,5 +512,8 @@ export default genComponentStyleHook(
   prepareComponentToken,
   {
     format: formatComponentToken,
+    unitless: {
+      handleOpacity: true,
+    },
   },
 );

components/input/Group.tsx

@@ -7,7 +7,6 @@ import { ConfigContext } from '../config-provider';
 import type { FormItemStatusContextProps } from '../form/context';
 import { FormItemInputContext } from '../form/context';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 
 export interface GroupProps {
   className?: string;
@@ -27,8 +26,7 @@ const Group: React.FC<GroupProps> = (props) => {
   const { prefixCls: customizePrefixCls, className } = props;
   const prefixCls = getPrefixCls('input-group', customizePrefixCls);
   const inputPrefixCls = getPrefixCls('input');
-  const [, hashId] = useStyle(inputPrefixCls);
+  const [wrapCSSVar, hashId] = useStyle(inputPrefixCls);
-  const wrapCSSVar = useCSSVar(prefixCls);
   const cls = classNames(
     prefixCls,
     {

components/input/Input.tsx

@@ -17,7 +17,6 @@ import { FormItemInputContext, NoFormStyle } from '../form/context';
 import { NoCompactStyle, useCompactItemContext } from '../space/Compact';
 import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import { hasPrefixSuffix } from './utils';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
@@ -96,9 +95,8 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
   const inputRef = useRef<InputRef>(null);
 
   // Style
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   // ===================== Compact Item =====================
   const { compactSize, compactItemClassnames } = useCompactItemContext(prefixCls, direction);

components/input/TextArea.tsx

@@ -17,7 +17,6 @@ import { FormItemInputContext } from '../form/context';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
 import useStyle from './style';
-import useCSSVar from './style/cssVar';
 import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export interface TextAreaProps extends Omit<RcTextAreaProps, 'suffix'> {
@@ -85,9 +84,8 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
   }
 
   // ===================== Style =====================
-  const [, hashId] = useStyle(prefixCls);
   const cssVarCls = useCSSVarCls(prefixCls);
-  const wrapCSSVar = useCSSVar(cssVarCls);
+  const [wrapCSSVar, hashId] = useStyle(prefixCls, cssVarCls);
 
   return wrapCSSVar(
     <RcTextArea

components/input/style/cssVar.ts

@@ -1,4 +0,0 @@
-import { genCSSVarRegister } from '../../theme/internal';
-import { initComponentToken } from '.';
-
-export default genCSSVarRegister('Input', initComponentToken);

components/input/style/index.ts

@@ -1,11 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
 
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { GlobalToken } from '../../theme/interface';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
-import { unit } from '@ant-design/cssinjs';
 
 export interface SharedComponentToken {
   /**
@@ -1093,7 +1093,7 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
+export default genStyleHooks(
   'Input',
   (token) => {
     const inputToken = mergeToken<InputToken>(token, initInputToken(token));