From 682904a9ec782699027f3da9e0a00e79a3171d72 Mon Sep 17 00:00:00 2001
From: MadCcc <madccc@foxmail.com>
Date: Tue, 21 Nov 2023 15:26:41 +0800
Subject: [PATCH] feat: preserve breakpoint tokens value (#45981)

---
 components/list/style/index.ts   |  9 +++------
 components/modal/style/index.tsx |  2 +-
 components/theme/useToken.ts     | 23 +++++++++++++++++++++++
 package.json                     |  2 +-
 4 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/components/list/style/index.ts b/components/list/style/index.ts
index 465fa6e88f..6363d9eea9 100644
--- a/components/list/style/index.ts
+++ b/components/list/style/index.ts
@@ -106,7 +106,7 @@ const genBorderedStyle = (token: ListToken): CSSObject => {
 const genResponsiveStyle = (token: ListToken): CSSObject => {
   const { componentCls, screenSM, screenMD, marginLG, marginSM, margin } = token;
   return {
-    [`@media screen and (max-width:${screenMD})`]: {
+    [`@media screen and (max-width:${screenMD}px)`]: {
       [`${componentCls}`]: {
         [`${componentCls}-item`]: {
           [`${componentCls}-item-action`]: {
@@ -124,7 +124,7 @@ const genResponsiveStyle = (token: ListToken): CSSObject => {
       },
     },
 
-    [`@media screen and (max-width: ${screenSM})`]: {
+    [`@media screen and (max-width: ${screenSM}px)`]: {
       [`${componentCls}`]: {
         [`${componentCls}-item`]: {
           flexWrap: 'wrap',
@@ -299,10 +299,7 @@ const genBaseStyle: GenerateStyle<ListToken> = (token) => {
             insetBlockStart: '50%',
             insetInlineEnd: 0,
             width: lineWidth,
-            height: token
-              .calc(token.fontHeight)
-              .sub(token.calc(token.marginXXS).mul(2))
-              .equal(),
+            height: token.calc(token.fontHeight).sub(token.calc(token.marginXXS).mul(2)).equal(),
             transform: 'translateY(-50%)',
             backgroundColor: token.colorSplit,
           },
diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx
index 4fc7ea370b..d600310348 100644
--- a/components/modal/style/index.tsx
+++ b/components/modal/style/index.tsx
@@ -174,7 +174,7 @@ const genModalStyle: GenerateStyle<ModalToken> = (token) => {
           },
         },
 
-        [`@media (max-width: ${token.screenSMMax})`]: {
+        [`@media (max-width: ${token.screenSMMax}px)`]: {
           [componentCls]: {
             maxWidth: 'calc(100vw - 16px)',
             margin: `${unit(token.marginXS)} auto`,
diff --git a/components/theme/useToken.ts b/components/theme/useToken.ts
index 4c7a17206a..ef2fa912eb 100644
--- a/components/theme/useToken.ts
+++ b/components/theme/useToken.ts
@@ -44,6 +44,28 @@ export const ignore: {
   motionUnit: true,
 };
 
+const preserve: {
+  [key in keyof AliasToken]?: boolean;
+} = {
+  screenXS: true,
+  screenXSMin: true,
+  screenXSMax: true,
+  screenSM: true,
+  screenSMMin: true,
+  screenSMMax: true,
+  screenMD: true,
+  screenMDMin: true,
+  screenMDMax: true,
+  screenLG: true,
+  screenLGMin: true,
+  screenLGMax: true,
+  screenXL: true,
+  screenXLMin: true,
+  screenXLMax: true,
+  screenXXL: true,
+  screenXXLMin: true,
+};
+
 export const getComputedToken = (
   originToken: SeedToken,
   overrideToken: DesignTokenProviderProps['components'] & {
@@ -122,6 +144,7 @@ export default function useToken(): [
         key: cssVar.key,
         unitless,
         ignore,
+        preserve,
       },
     },
   );
diff --git a/package.json b/package.json
index 44156716ce..1155af5f2b 100644
--- a/package.json
+++ b/package.json
@@ -113,7 +113,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^7.0.0",
-    "@ant-design/cssinjs": "^1.18.0-alpha.1",
+    "@ant-design/cssinjs": "^1.18.0-alpha.2",
     "@ant-design/icons": "^5.2.6",
     "@ant-design/react-slick": "~1.0.2",
     "@babel/runtime": "^7.18.3",