feat: preserve breakpoint tokens value (#45981)

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,
           },

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`,

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,
       },
     },
   );

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",