refactor: Form style should always before Grid (ant-design#44485)

* fix: use css variable to support dynamic display

* chore: support order

* chore: add ie fallback

* chore: add ie fallback

components/form/FormItemInput.tsx

@@ -1,10 +1,12 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { ColProps } from '../grid/col';
 import Col from '../grid/col';
 import { FormContext, FormItemPrefixContext } from './context';
 import ErrorList from './ErrorList';
 import type { ValidateStatus } from './FormItem';
+import FallbackCmp from './style/fallbackCmp';
 
 interface FormItemInputMiscProps {
   prefixCls: string;
@@ -116,6 +118,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = (pr
       <Col {...mergedWrapperCol} className={className}>
         {dom}
       </Col>
+      <FallbackCmp prefixCls={prefixCls} />
     </FormContext.Provider>
   );
 };

components/form/style/fallbackCmp.ts

@@ -0,0 +1,29 @@
+/**
+ * Fallback of IE.
+ * Safe to remove.
+ */
+
+// Style as inline component
+import { prepareToken, type FormToken } from '.';
+import { genSubStyleComponent, type GenerateStyle } from '../../theme/internal';
+
+// ============================= Fallback =============================
+const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
+  const { formItemCls } = token;
+
+  return {
+    '@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)': {
+      // Fallback for IE, safe to remove we not support it anymore
+      [`${formItemCls}-control`]: {
+        display: 'flex',
+      },
+    },
+  };
+};
+
+// ============================== Export ==============================
+export default genSubStyleComponent(['Form', 'item-item'], (token, { rootPrefixCls }) => {
+  const formToken = prepareToken(token, rootPrefixCls);
+
+  return [genFallbackStyle(formToken)];
+});

components/form/style/index.ts

@@ -4,6 +4,7 @@ import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
 
 export interface FormToken extends FullToken<'Form'> {
@@ -149,7 +150,6 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Label                           =
       // ==============================================================
       [`${formItemCls}-label`]: {
-        display: 'inline-block',
         flexGrow: 0,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
@@ -232,7 +232,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
       // =                            Input                           =
       // ==============================================================
       [`${formItemCls}-control`]: {
-        display: 'flex',
+        ['--ant-display' as any]: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
 
@@ -477,20 +477,38 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
+export const prepareToken: (
+  token: Parameters<GenStyleFn<'Form'>>[0],
+  rootPrefixCls: string,
+) => FormToken = (token, rootPrefixCls) => {
   const formToken = mergeToken<FormToken>(token, {
     formItemCls: `${token.componentCls}-item`,
     rootPrefixCls,
   });
 
-  return [
-    genFormStyle(formToken),
-    genFormItemStyle(formToken),
-    genFormValidateMotionStyle(formToken),
-    genHorizontalStyle(formToken),
-    genInlineStyle(formToken),
-    genVerticalStyle(formToken),
-    genCollapseMotion(formToken),
-    zoomIn,
-  ];
-});
+  return formToken;
+};
+
+export default genComponentStyleHook(
+  'Form',
+  (token, { rootPrefixCls }) => {
+    const formToken = prepareToken(token, rootPrefixCls);
+
+    return [
+      genFormStyle(formToken),
+      genFormItemStyle(formToken),
+      genFormValidateMotionStyle(formToken),
+      genHorizontalStyle(formToken),
+      genInlineStyle(formToken),
+      genVerticalStyle(formToken),
+      genCollapseMotion(formToken),
+      zoomIn,
+    ];
+  },
+  null,
+  {
+    // Let From style before the Grid
+    // ref https://github.com/ant-design/ant-design/issues/44386
+    order: -1000,
+  },
+);

components/grid/style/index.ts

@@ -93,8 +93,7 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
   const gridColumnsStyle: CSSObject = {};
   for (let i = gridColumns; i >= 0; i--) {
     if (i === 0) {
-      // ref: https://github.com/ant-design/ant-design/issues/44456
-      gridColumnsStyle[`${componentCls}${componentCls}${componentCls}${sizeCls}-${i}`] = {
+      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
         display: 'none',
       };
       gridColumnsStyle[`${componentCls}-push-${i}`] = {
@@ -116,11 +115,21 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec
         order: 0,
       };
     } else {
-      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = {
-        display: 'block',
-        flex: `0 0 ${(i / gridColumns) * 100}%`,
-        maxWidth: `${(i / gridColumns) * 100}%`,
-      };
+      gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = [
+        // https://github.com/ant-design/ant-design/issues/44456
+        // Form set `display: flex` on Col which will override `display: block`.
+        // Let's get it from css variable to support override.
+        {
+          ['--ant-display' as any]: 'block',
+          // Fallback to display if variable not support
+          display: 'block',
+        },
+        {
+          display: 'var(--ant-display)',
+          flex: `0 0 ${(i / gridColumns) * 100}%`,
+          maxWidth: `${(i / gridColumns) * 100}%`,
+        },
+      ];
       gridColumnsStyle[`${componentCls}${sizeCls}-push-${i}`] = {
         insetInlineStart: `${(i / gridColumns) * 100}%`,
       };

components/theme/util/genComponentStyleHook.ts

@@ -59,17 +59,22 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
   componentName: ComponentName | [ComponentName, string],
   styleFn: GenStyleFn<ComponentName>,
   getDefaultToken?:
+    | null
     | OverrideTokenWithoutDerivative[ComponentName]
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
-  options?: {
+  options: {
     resetStyle?: boolean;
     // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
     deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
     /**
      * Only use component style in client side. Ignore in SSR.
      */
     clientOnly?: boolean;
-  },
+    /**
+     * Set order of component style. Default is -999.
+     */
+    order?: number;
+  } = {},
 ) {
   const cells = (Array.isArray(componentName) ? componentName : [componentName, componentName]) as [
     ComponentName,
@@ -90,10 +95,10 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
       token,
       hashId,
       nonce: () => csp?.nonce!,
-      clientOnly: options?.clientOnly,
+      clientOnly: options.clientOnly,
 
       // antd is always at top of styles
-      order: -999,
+      order: options.order || -999,
     };
 
     // Generate style for all a tags in antd component.
@@ -117,7 +122,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           const { token: proxyToken, flush } = statisticToken(token);
 
           const customComponentToken = { ...(token[component] as ComponentToken<ComponentName>) };
-          if (options?.deprecatedTokens) {
+          if (options.deprecatedTokens) {
             const { deprecatedTokens } = options;
             deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
               if (process.env.NODE_ENV !== 'production') {
@@ -165,7 +170,7 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
           });
           flush(component, mergedComponentToken);
           return [
-            options?.resetStyle === false ? null : genCommonStyle(token, prefixCls),
+            options.resetStyle === false ? null : genCommonStyle(token, prefixCls),
             styleInterpolation,
           ];
         },