perf: only one parent selector in style (#40325)

* chore: add parent selector * chore: update lint script * chore: code clean * perf: style * chore: remove demo test cssinjs * fix: input group
2025-06-07 09:26:06 +08:00 · 2023-01-20 10:31:27 +08:00 · 2023-01-20 10:31:27 +08:00 · 40944a1c02
commit 40944a1c02
parent c054a2bb80
24 changed files with 266 additions and 213 deletions
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@ -2,6 +2,7 @@ import {
  createCache,
  legacyNotSelectorLinter,
  logicalPropertiesLinter,
+  parentSelectorLinter,
  StyleProvider,
 } from '@ant-design/cssinjs';
 import { ConfigProvider, theme as antdTheme } from 'antd';
@ -107,7 +108,10 @@ const GlobalLayout: React.FC = () => {
  );

  return (
-    <StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}>
+    <StyleProvider
+      cache={styleCache}
+      linters={[logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter]}
+    >
      <SiteContext.Provider value={siteContextValue}>
        <ConfigProvider
          theme={{
--- a/components/alert/style/index.ts
+++ b/components/alert/style/index.ts
@ -53,7 +53,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
      wordWrap: 'break-word',
      borderRadius,

-      '&&-rtl': {
+      [`&${componentCls}-rtl`]: {
        direction: 'rtl',
      },

@ -77,7 +77,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
        color: colorText,
      },

-      '&&-motion-leave': {
+      [`&${componentCls}-motion-leave`]: {
        overflow: 'hidden',
        opacity: 1,
        transition: `max-height ${duration} ${motionEaseInOutCirc}, opacity ${duration} ${motionEaseInOutCirc},
@ -85,7 +85,7 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
        margin-bottom ${duration} ${motionEaseInOutCirc}`,
      },

-      '&&-motion-leave-active': {
+      [`&${componentCls}-motion-leave-active`]: {
        maxHeight: 0,
        marginBottom: '0 !important',
        paddingTop: 0,
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -55,30 +55,13 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
      },

      // make `btn-icon-only` not too narrow
-      '&-icon-only&-compact-item': {
+      [`&-icon-only${componentCls}-compact-item`]: {
        flex: 'none',
      },
      // Special styles for Primary Button
      [`&-compact-item${componentCls}-primary`]: {
-        '&:not([disabled]) + &:not([disabled])': {
-          position: 'relative',
-
-          '&:before': {
-            position: 'absolute',
-            top: -token.lineWidth,
-            insetInlineStart: -token.lineWidth,
-            display: 'inline-block',
-            width: token.lineWidth,
-            height: `calc(100% + ${token.lineWidth * 2}px)`,
-            backgroundColor: token.colorPrimaryHover,
-            content: '""',
-          },
-        },
-      },
-      // Special styles for Primary Button
-      '&-compact-vertical-item': {
-        [`&${componentCls}-primary`]: {
-          '&:not([disabled]) + &:not([disabled])': {
+        [`&:not([disabled]) + ${componentCls}-compact-item${componentCls}-primary:not([disabled])`]:
+          {
            position: 'relative',

            '&:before': {
@ -86,12 +69,31 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
              top: -token.lineWidth,
              insetInlineStart: -token.lineWidth,
              display: 'inline-block',
-              width: `calc(100% + ${token.lineWidth * 2}px)`,
-              height: token.lineWidth,
+              width: token.lineWidth,
+              height: `calc(100% + ${token.lineWidth * 2}px)`,
              backgroundColor: token.colorPrimaryHover,
              content: '""',
            },
          },
+      },
+      // Special styles for Primary Button
+      '&-compact-vertical-item': {
+        [`&${componentCls}-primary`]: {
+          [`&:not([disabled]) + ${componentCls}-compact-vertical-item${componentCls}-primary:not([disabled])`]:
+            {
+              position: 'relative',
+
+              '&:before': {
+                position: 'absolute',
+                top: -token.lineWidth,
+                insetInlineStart: -token.lineWidth,
+                display: 'inline-block',
+                width: `calc(100% + ${token.lineWidth * 2}px)`,
+                height: token.lineWidth,
+                backgroundColor: token.colorPrimaryHover,
+                content: '""',
+              },
+            },
        },
      },
    },
--- a/components/calendar/style/index.ts
+++ b/components/calendar/style/index.ts
@ -119,7 +119,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
          display: 'none',
        },
        // >>> Selected
-        '&-in-view:is(&-selected)': {
+        [`&-in-view${componentCls}-cell-selected`]: {
          [`${calendarCls}-date, ${calendarCls}-date-today`]: {
            background: calendarItemActiveBg,
          },
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@ -55,11 +55,11 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        },

        // Checkbox near checkbox
-        '& + &': {
+        [`& + ${wrapperCls}`]: {
          marginInlineStart: token.marginXS,
        },

-        '&&-in-form-item': {
+        [`&${wrapperCls}-in-form-item`]: {
          'input[type="checkbox"]': {
            width: 14, // FIXME: magic
            height: 14, // FIXME: magic
--- a/components/config-provider/style/index.ts
+++ b/components/config-provider/style/index.ts
@ -9,7 +9,12 @@ const useStyle = (iconPrefixCls: string) => {
    { theme, token, hashId: '', path: ['ant-design-icons', iconPrefixCls] },
    () => [
      {
-        [`.${iconPrefixCls}`]: resetIcon(),
+        [`.${iconPrefixCls}`]: {
+          ...resetIcon(),
+          [`.${iconPrefixCls} .${iconPrefixCls}-icon`]: {
+            display: 'block',
+          },
+        },
      },
    ],
  );
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@ -870,7 +870,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {

  return {
    [componentCls]: {
-      '&-status-error&': {
+      [`&-status-error${componentCls}`]: {
        '&, &:not([disabled]):hover': {
          backgroundColor: colorBgContainer,
          borderColor: colorError,
@ -891,7 +891,7 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = (token) => {
        },
      },

-      '&-status-warning&': {
+      [`&-status-warning${componentCls}`]: {
        '&, &:not([disabled]):hover': {
          backgroundColor: colorBgContainer,
          borderColor: colorWarning,
@ -984,7 +984,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          ...genActiveStyle(token),
        },

-        '&&-disabled': {
+        [`&${componentCls}-disabled`]: {
          background: colorBgContainerDisabled,
          borderColor: colorBorder,
          cursor: 'not-allowed',
@ -994,7 +994,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          },
        },

-        '&&-borderless': {
+        [`&${componentCls}-borderless`]: {
          backgroundColor: 'transparent !important',
          borderColor: 'transparent !important',
          boxShadow: 'none !important',
@ -1178,11 +1178,11 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
          },
          zIndex: zIndexPopup,

-          '&&-hidden': {
+          [`&${componentCls}-dropdown-hidden`]: {
            display: 'none',
          },

-          '&&-placement-bottomLeft': {
+          [`&${componentCls}-dropdown-placement-bottomLeft`]: {
            [`${componentCls}-range-arrow`]: {
              top: 0,
              display: 'block',
@ -1190,7 +1190,7 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
            },
          },

-          '&&-placement-topLeft': {
+          [`&${componentCls}-dropdown-placement-topLeft`]: {
            [`${componentCls}-range-arrow`]: {
              bottom: 0,
              display: 'block',
@ -1198,29 +1198,33 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
            },
          },

-          [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
-            animationName: slideDownIn,
-          },
+          [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
+          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topRight,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topRight`]:
+            {
+              animationName: slideDownIn,
+            },

-          [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomRight`]: {
-            animationName: slideUpIn,
-          },
+          [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
+          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomRight,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomRight`]:
+            {
+              animationName: slideUpIn,
+            },

-          [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
-            animationName: slideDownOut,
-          },
+          [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft,
+          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topRight`]:
+            {
+              animationName: slideDownOut,
+            },

-          [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomRight`]: {
-            animationName: slideUpOut,
-          },
+          [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft,
+          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomRight`]:
+            {
+              animationName: slideUpOut,
+            },

          // Time picker with additional style
          [`${componentCls}-panel > ${componentCls}-time-panel`]: {
--- a/components/divider/style/index.ts
+++ b/components/divider/style/index.ts
@ -43,7 +43,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
        margin: `${token.dividerHorizontalGutterMargin}px 0`,
      },

-      '&-horizontal&-with-text': {
+      [`&-horizontal${componentCls}-with-text`]: {
        display: 'flex',
        alignItems: 'center',
        margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`,
@ -66,7 +66,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
        },
      },

-      '&-horizontal&-with-text-left': {
+      [`&-horizontal${componentCls}-with-text-left`]: {
        '&::before': {
          width: '5%',
        },
@ -76,7 +76,7 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
        },
      },

-      '&-horizontal&-with-text-right': {
+      [`&-horizontal${componentCls}-with-text-right`]: {
        '&::before': {
          width: '95%',
        },
@ -98,52 +98,54 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
        borderWidth: `${lineWidth}px 0 0`,
      },

-      '&-horizontal&-with-text&-dashed': {
+      [`&-horizontal${componentCls}-with-text${componentCls}-dashed`]: {
        '&::before, &::after': {
          borderStyle: 'dashed none none',
        },
      },

-      '&-vertical&-dashed': {
+      [`&-vertical${componentCls}-dashed`]: {
        borderInlineStart: lineWidth,
        borderInlineEnd: 0,
        borderBlockStart: 0,
        borderBlockEnd: 0,
      },

-      '&-plain&-with-text': {
+      [`&-plain${componentCls}-with-text`]: {
        color: token.colorText,
        fontWeight: 'normal',
        fontSize: token.fontSize,
      },

-      '&-horizontal&-with-text-left&-no-default-orientation-margin-left': {
-        '&::before': {
-          width: 0,
+      [`&-horizontal${componentCls}-with-text-left${componentCls}-no-default-orientation-margin-left`]:
+        {
+          '&::before': {
+            width: 0,
+          },
+
+          '&::after': {
+            width: '100%',
+          },
+
+          [`${componentCls}-inner-text`]: {
+            paddingInlineStart: sizePaddingEdgeHorizontal,
+          },
        },

-        '&::after': {
-          width: '100%',
-        },
+      [`&-horizontal${componentCls}-with-text-right${componentCls}-no-default-orientation-margin-right`]:
+        {
+          '&::before': {
+            width: '100%',
+          },

-        [`${componentCls}-inner-text`]: {
-          paddingInlineStart: sizePaddingEdgeHorizontal,
-        },
-      },
+          '&::after': {
+            width: 0,
+          },

-      '&-horizontal&-with-text-right&-no-default-orientation-margin-right': {
-        '&::before': {
-          width: '100%',
+          [`${componentCls}-inner-text`]: {
+            paddingInlineEnd: sizePaddingEdgeHorizontal,
+          },
        },
-
-        '&::after': {
-          width: 0,
-        },
-
-        [`${componentCls}-inner-text`]: {
-          paddingInlineEnd: sizePaddingEdgeHorizontal,
-        },
-      },
    },
  };
 };
--- a/components/dropdown/style/index.ts
+++ b/components/dropdown/style/index.ts
@ -104,17 +104,17 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
        // =============================================================
        // Offset the popover to account for the dropdown arrow
        [`
-        &-show-arrow&-placement-topLeft,
-        &-show-arrow&-placement-top,
-        &-show-arrow&-placement-topRight
+        &-show-arrow${componentCls}-placement-topLeft,
+        &-show-arrow${componentCls}-placement-top,
+        &-show-arrow${componentCls}-placement-topRight
      `]: {
          paddingBottom: dropdownArrowDistance,
        },

        [`
-        &-show-arrow&-placement-bottomLeft,
-        &-show-arrow&-placement-bottom,
-        &-show-arrow&-placement-bottomRight
+        &-show-arrow${componentCls}-placement-bottomLeft,
+        &-show-arrow${componentCls}-placement-bottom,
+        &-show-arrow${componentCls}-placement-bottomRight
      `]: {
          paddingTop: dropdownArrowDistance,
        },
@ -201,35 +201,39 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
        // =============================================================
        // When position is not enough for dropdown, the placement will revert.
        // We will handle this with revert motion name.
-        [`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomLeft,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomLeft
-          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottom,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottom,
-          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active&-placement-bottomRight,
-          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active&-placement-bottomRight`]: {
-          animationName: slideUpIn,
-        },
+        [`&${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomLeft,
+          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomLeft,
+          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottom,
+          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottom,
+          &${antCls}-slide-down-enter${antCls}-slide-down-enter-active${componentCls}-placement-bottomRight,
+          &${antCls}-slide-down-appear${antCls}-slide-down-appear-active${componentCls}-placement-bottomRight`]:
+          {
+            animationName: slideUpIn,
+          },

-        [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-top,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-top,
-          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topRight,
-          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topRight`]: {
-          animationName: slideDownIn,
-        },
+        [`&${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topLeft,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topLeft,
+          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-top,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-top,
+          &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-placement-topRight,
+          &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-placement-topRight`]:
+          {
+            animationName: slideDownIn,
+          },

-        [`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomLeft,
-          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottom,
-          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active&-placement-bottomRight`]: {
-          animationName: slideUpOut,
-        },
+        [`&${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomLeft,
+          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottom,
+          &${antCls}-slide-down-leave${antCls}-slide-down-leave-active${componentCls}-placement-bottomRight`]:
+          {
+            animationName: slideUpOut,
+          },

-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-top,
-          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topRight`]: {
-          animationName: slideDownOut,
-        },
+        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topLeft,
+          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-top,
+          &${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-placement-topRight`]:
+          {
+            animationName: slideDownOut,
+          },
      },
    },

--- a/components/float-button/style/index.ts
+++ b/components/float-button/style/index.ts
@ -103,7 +103,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
        position: 'relative',
        marginBottom: margin,
      },
-      '&&-rtl': {
+      [`&${groupPrefixCls}-rtl`]: {
        direction: 'rtl',
      },
      [componentCls]: {
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@ -388,7 +388,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
      },
    },

-    '&&-compact': {
+    [`&${componentCls}-group-compact`]: {
      display: 'block',
      ...clearFix(),

--- a/components/pagination/style/index.tsx
+++ b/components/pagination/style/index.tsx
@ -118,24 +118,25 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
  const { componentCls } = token;

  return {
-    [`&&-mini ${componentCls}-total-text, &&-mini ${componentCls}-simple-pager`]: {
-      height: token.paginationItemSizeSM,
-      lineHeight: `${token.paginationItemSizeSM}px`,
-    },
+    [`&${componentCls}-mini ${componentCls}-total-text, &${componentCls}-mini ${componentCls}-simple-pager`]:
+      {
+        height: token.paginationItemSizeSM,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+      },

-    [`&&-mini ${componentCls}-item`]: {
+    [`&${componentCls}-mini ${componentCls}-item`]: {
      minWidth: token.paginationItemSizeSM,
      height: token.paginationItemSizeSM,
      margin: 0,
      lineHeight: `${token.paginationItemSizeSM - 2}px`,
    },

-    [`&&-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
+    [`&${componentCls}-mini ${componentCls}-item:not(${componentCls}-item-active)`]: {
      backgroundColor: 'transparent',
      borderColor: 'transparent',
    },

-    [`&&-mini ${componentCls}-prev, &&-mini ${componentCls}-next`]: {
+    [`&${componentCls}-mini ${componentCls}-prev, &${componentCls}-mini ${componentCls}-next`]: {
      minWidth: token.paginationItemSizeSM,
      height: token.paginationItemSizeSM,
      margin: 0,
@ -143,8 +144,8 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
    },

    [`
-    &&-mini ${componentCls}-prev ${componentCls}-item-link,
-    &&-mini ${componentCls}-next ${componentCls}-item-link
+    &${componentCls}-mini ${componentCls}-prev ${componentCls}-item-link,
+    &${componentCls}-mini ${componentCls}-next ${componentCls}-item-link
    `]: {
      backgroundColor: 'transparent',
      borderColor: 'transparent',
@ -155,13 +156,14 @@ const genPaginationMiniStyle: GenerateStyle<PaginationToken, CSSObject> = (token
      },
    },

-    [`&&-mini ${componentCls}-jump-prev, &&-mini ${componentCls}-jump-next`]: {
-      height: token.paginationItemSizeSM,
-      marginInlineEnd: 0,
-      lineHeight: `${token.paginationItemSizeSM}px`,
-    },
+    [`&${componentCls}-mini ${componentCls}-jump-prev, &${componentCls}-mini ${componentCls}-jump-next`]:
+      {
+        height: token.paginationItemSizeSM,
+        marginInlineEnd: 0,
+        lineHeight: `${token.paginationItemSizeSM}px`,
+      },

-    [`&&-mini ${componentCls}-options`]: {
+    [`&${componentCls}-mini ${componentCls}-options`]: {
      marginInlineStart: token.paginationMiniOptionsMarginInlineStart,

      [`&-size-changer`]: {
--- a/components/radio/style/index.tsx
+++ b/components/radio/style/index.tsx
@ -47,7 +47,7 @@ const getGroupRadioStyle: GenerateStyle<RadioToken> = (token) => {
      fontSize: 0,

      // RTL
-      '&&-rtl': {
+      [`&${groupPrefixCls}-rtl`]: {
        direction: 'rtl',
      },

@ -99,7 +99,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
      cursor: 'pointer',

      // RTL
-      '&&-rtl': {
+      [`&${componentCls}-wrapper-rtl`]: {
        direction: 'rtl',
      },

@ -469,7 +469,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
        },
      },

-      '&-disabled&-checked': {
+      [`&-disabled${componentCls}-button-wrapper-checked`]: {
        color: radioDisabledButtonCheckedColor,
        backgroundColor: radioDisabledButtonCheckedBg,
        borderColor: colorBorder,
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -63,16 +63,16 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      },

      // RTL styles
-      '&&-rtl': {
+      [`&${componentCls}-rtl`]: {
        direction: 'rtl',
      },

      // block styles
-      '&&-block': {
+      [`&${componentCls}-block`]: {
        display: 'flex',
      },

-      [`&&-block ${componentCls}-item`]: {
+      [`&${componentCls}-block ${componentCls}-item`]: {
        flex: 1,
        minWidth: 0,
      },
@ -151,7 +151,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      },

      // size styles
-      '&&-lg': {
+      [`&${componentCls}-lg`]: {
        borderRadius: token.borderRadiusLG,
        [`${componentCls}-item-label`]: {
          minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
@ -164,7 +164,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
        },
      },

-      '&&-sm': {
+      [`&${componentCls}-sm`]: {
        borderRadius: token.borderRadiusSM,
        [`${componentCls}-item-label`]: {
          minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -57,26 +57,28 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
        boxShadow: token.boxShadowSecondary,

        [`
-            &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-bottomLeft,
-            &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-bottomLeft
+            &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-bottomLeft,
+            &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-bottomLeft
          `]: {
          animationName: slideUpIn,
        },

        [`
-            &${antCls}-slide-up-enter${antCls}-slide-up-enter-active&-placement-topLeft,
-            &${antCls}-slide-up-appear${antCls}-slide-up-appear-active&-placement-topLeft
+            &${antCls}-slide-up-enter${antCls}-slide-up-enter-active${componentCls}-dropdown-placement-topLeft,
+            &${antCls}-slide-up-appear${antCls}-slide-up-appear-active${componentCls}-dropdown-placement-topLeft
          `]: {
          animationName: slideDownIn,
        },

-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-bottomLeft`]: {
-          animationName: slideUpOut,
-        },
+        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-bottomLeft`]:
+          {
+            animationName: slideUpOut,
+          },

-        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active&-placement-topLeft`]: {
-          animationName: slideDownOut,
-        },
+        [`&${antCls}-slide-up-leave${antCls}-slide-up-leave-active${componentCls}-dropdown-placement-topLeft`]:
+          {
+            animationName: slideDownOut,
+          },

        '&-hidden': {
          display: 'none',
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -259,7 +259,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
        },

        // ==================== In Form ====================
-        '&&-in-form-item': {
+        [`&${componentCls}-in-form-item`]: {
          width: '100%',
        },
      },
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@ -188,7 +188,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
        },
      },

-      '&&-disabled': {
+      [`&${componentCls}-disabled`]: {
        cursor: 'not-allowed',

        [`${componentCls}-rail`]: {
--- a/components/style/index.ts
+++ b/components/style/index.ts
@ -46,10 +46,6 @@ export const resetIcon = (): CSSObject => ({
  svg: {
    display: 'inline-block',
  },
-
-  '& &-icon': {
-    display: 'block',
-  },
 });

 export const clearFix = (): CSSObject => ({
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@ -52,13 +52,13 @@ const genPresetStyle = (token: TagToken) =>
  }));

 const genBaseStyle = (token: TagToken): CSSInterpolation => {
-  const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
+  const { paddingXXS, lineWidth, tagPaddingHorizontal, componentCls } = token;
  const paddingInline = tagPaddingHorizontal - lineWidth;
  const iconMarginInline = paddingXXS - lineWidth;

  return {
    // Result
-    [token.componentCls]: {
+    [componentCls]: {
      ...resetComponent(token),
      display: 'inline-block',
      height: 'auto',
@ -75,7 +75,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
      textAlign: 'start',

      // RTL
-      '&&-rtl': {
+      [`&${componentCls}-rtl`]: {
        direction: 'rtl',
      },

@ -83,7 +83,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
        color: token.tagDefaultColor,
      },

-      [`${token.componentCls}-close-icon`]: {
+      [`${componentCls}-close-icon`]: {
        marginInlineStart: iconMarginInline,
        color: token.colorTextDescription,
        fontSize: token.tagIconSize,
@ -95,7 +95,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
        },
      },

-      [`&&-has-color`]: {
+      [`&${componentCls}-has-color`]: {
        borderColor: 'transparent',

        [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
@ -108,7 +108,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
        borderColor: 'transparent',
        cursor: 'pointer',

-        [`&:not(${token.componentCls}-checkable-checked):hover`]: {
+        [`&:not(${componentCls}-checkable-checked):hover`]: {
          color: token.colorPrimary,
          backgroundColor: token.colorFillSecondary,
        },
--- a/components/tree/style/index.ts
+++ b/components/tree/style/index.ts
@ -75,7 +75,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
      borderRadius: token.borderRadius,
      transition: `background-color ${token.motionDurationSlow}`,

-      '&&-rtl': {
+      [`&${treeCls}-rtl`]: {
        // >>> Switcher
        [`${treeCls}-switcher`]: {
          '&_close': {
--- a/components/typography/style/index.ts
+++ b/components/typography/style/index.ts
@ -26,19 +26,19 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
      color: token.colorText,
      wordBreak: 'break-word',
      lineHeight: token.lineHeight,
-      '&&-secondary': {
+      [`&${componentCls}-secondary`]: {
        color: token.colorTextDescription,
      },

-      '&&-success': {
+      [`&${componentCls}-success`]: {
        color: token.colorSuccess,
      },

-      '&&-warning': {
+      [`&${componentCls}-warning`]: {
        color: token.colorWarning,
      },

-      '&&-danger': {
+      [`&${componentCls}-danger`]: {
        color: token.colorError,
        'a&:active, a&:focus': {
          color: token.colorErrorActive,
@ -48,7 +48,7 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
        },
      },

-      '&&-disabled': {
+      [`&${componentCls}-disabled`]: {
        color: token.colorTextDisabled,
        cursor: 'not-allowed',
        userSelect: 'none',
@ -64,11 +64,11 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
      ...getTitleStyles(token),

      [`
-      & + h1&,
-      & + h2&,
-      & + h3&,
-      & + h4&,
-      & + h5&
+      & + h1${componentCls},
+      & + h2${componentCls},
+      & + h3${componentCls},
+      & + h4${componentCls},
+      & + h5${componentCls}
      `]: {
        marginTop: sizeMarginHeadingVerticalStart,
      },
--- a/package.json
+++ b/package.json
@ -68,13 +68,14 @@
    "dist": "antd-tools run dist",
    "dist:esbuild": "ESBUILD=true npm run dist",
    "dist:esbuild-no-dup-check": "ESBUILD=true NO_DUP_CHECK=true npm run dist",
-    "lint": "npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:md",
+    "lint": "npm run version && npm run tsc && npm run lint:script && npm run lint:demo && npm run lint:md && npm run lint:style",
    "lint-fix": "npm run lint-fix:script && npm run lint-fix:demo",
    "lint-fix:demo": "npm run lint:demo -- --fix",
    "lint-fix:script": "npm run lint:script -- --fix",
    "lint:demo": "eslint components/*/demo/*.md",
    "lint:deps": "antd-tools run deps-lint",
    "lint:md": "remark . -f -q",
+    "lint:style": "ts-node --project tsconfig.node.json scripts/check-cssinjs.js",
    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
    "pre-publish": "npm run test-all -- --skip-build",
    "prettier": "prettier -c --write **/*",
@ -107,7 +108,7 @@
  ],
  "dependencies": {
    "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.5.1",
+    "@ant-design/cssinjs": "^1.5.6",
    "@ant-design/icons": "^5.0.0",
    "@ant-design/react-slick": "~1.0.0",
    "@babel/runtime": "^7.18.3",
--- a/scripts/check-cssinjs.js
+++ b/scripts/check-cssinjs.js
@ -0,0 +1,66 @@
+/* eslint-disable import/no-unresolved,no-console,global-require,import/no-dynamic-require */
+
+const chalk = require('chalk');
+const React = require('react');
+const ReactDOMServer = require('react-dom/server');
+const glob = require('glob');
+const path = require('path');
+const {
+  StyleProvider,
+  logicalPropertiesLinter,
+  legacyNotSelectorLinter,
+  parentSelectorLinter,
+} = require('@ant-design/cssinjs');
+
+console.log(chalk.green(`🔥 Checking CSS-in-JS...`));
+
+let errorCount = 0;
+const originError = console.error;
+console.error = (msg) => {
+  if (msg.includes('Warning: [Ant Design CSS-in-JS]')) {
+    errorCount += 1;
+    console.log(chalk.red(`❌ `), msg.slice(msg.indexOf('Error in')).replace(/\s+/g, ' '));
+  } else {
+    originError(msg);
+  }
+};
+
+const EmptyElement = React.createElement('div');
+
+const styleFiles = glob.sync(
+  path.join(
+    process.cwd(),
+    'components/!(version|config-provider|icon|locale-provider|auto-complete|col|row|time-picker|)/style/index.?(ts|tsx)',
+  ),
+);
+
+styleFiles.forEach((file) => {
+  let useStyle = () => {};
+  if (file.includes('grid')) {
+    const { useColStyle, useRowStyle } = require(file);
+    useStyle = () => {
+      useRowStyle();
+      useColStyle();
+    };
+  } else {
+    useStyle = require(file).default;
+  }
+  const Component = () => {
+    useStyle('check');
+    return EmptyElement;
+  };
+  ReactDOMServer.renderToString(
+    React.createElement(
+      StyleProvider,
+      { linters: [logicalPropertiesLinter, legacyNotSelectorLinter, parentSelectorLinter] },
+      React.createElement(Component),
+    ),
+  );
+});
+
+if (errorCount > 0) {
+  console.log(chalk.red(`❌  CSS-in-JS check failed with ${errorCount} errors.`));
+  process.exit(1);
+} else {
+  console.log(chalk.green(`✅  CSS-in-JS check passed.`));
+}
--- a/tests/shared/demoTest.tsx
+++ b/tests/shared/demoTest.tsx
@ -1,14 +1,8 @@
 /* eslint-disable react/jsx-no-constructed-context-values */
-import {
-  createCache,
-  legacyNotSelectorLinter,
-  logicalPropertiesLinter,
-  StyleProvider,
-} from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import glob from 'glob';
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
-import { render } from '../utils';
 import { TriggerMockContext } from './demoTestContext';
 import { excludeWarning } from './excludeWarning';

@ -58,8 +52,6 @@ export type Options = {
 function baseText(doInject: boolean, component: string, options: Options = {}) {
  const files = glob.sync(`./components/${component}/demo/*.tsx`);

-  let cssinjsTest = false;
-
  files.forEach((file) => {
    const testMethod =
      options.skip === true ||
@ -67,33 +59,6 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
        ? test.skip
        : test;

-    if (!doInject && !cssinjsTest && testMethod !== test.skip) {
-      cssinjsTest = true;
-      testMethod(`cssinjs should not warn in ${component}`, () => {
-        const errSpy = excludeWarning();
-
-        let Demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
-        // Inject Trigger status unless skipped
-        Demo = typeof Demo === 'function' ? <Demo /> : Demo;
-
-        // Inject cssinjs cache to avoid create <style /> element
-        Demo = (
-          <StyleProvider
-            cache={createCache()}
-            linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}
-          >
-            {Demo}
-          </StyleProvider>
-        );
-
-        render(Demo);
-
-        expect(errSpy).not.toHaveBeenCalledWith(expect.stringContaining('[Ant Design CSS-in-JS]'));
-
-        errSpy.mockRestore();
-      });
-    }
-
    // function doTest(name: string, openTrigger = false) {
    testMethod(
      doInject ? `renders ${file} extend context correctly` : `renders ${file} correctly`,