Merge 1e9df1182e into 1547514ae1

components/__tests__/__snapshots__/index.test.ts.snap

@@ -57,6 +57,7 @@ exports[`antd exports modules correctly 1`] = `
   "Splitter",
   "Statistic",
   "Steps",
+  "StyleProvider",
   "Switch",
   "Table",
   "Tabs",
@@ -71,8 +72,12 @@ exports[`antd exports modules correctly 1`] = `
   "Typography",
   "Upload",
   "Watermark",
+  "createCache",
+  "extractStyle",
+  "legacyLogicalPropertiesTransformer",
   "message",
   "notification",
+  "px2remTransformer",
   "theme",
   "unstableSetRender",
   "version",

components/config-provider/demo/holderRender.tsx

@@ -1,7 +1,15 @@
 import React, { useContext, useLayoutEffect } from 'react';
-import { StyleProvider } from '@ant-design/cssinjs';
 import { ExclamationCircleFilled } from '@ant-design/icons';
-import { App, Button, ConfigProvider, message, Modal, notification, Space } from 'antd';
+import {
+  App,
+  Button,
+  ConfigProvider,
+  message,
+  Modal,
+  notification,
+  Space,
+  StyleProvider,
+} from 'antd';
 
 const Demo: React.FC = () => {
   const { locale, theme } = useContext(ConfigProvider.ConfigContext);

components/index.ts

@@ -1,3 +1,12 @@
+export {
+  createCache,
+  extractStyle,
+  legacyLogicalPropertiesTransformer,
+  px2remTransformer,
+  StyleProvider,
+} from '@ant-design/cssinjs';
+export type { StyleProviderProps } from '@ant-design/cssinjs';
+
 export type { Breakpoint } from './_util/responsiveObserver';
 export type { GetProps, GetRef, GetProp } from './_util/type';
 export { default as Affix } from './affix';

docs/blog/extract-ssr.en-US.md

@@ -56,7 +56,7 @@ It worked well at the beginning, and the official website of antd directly suppo
 And when most components are converted to CSS-in-JS, inline styles can become huge. So we removed the automatic inlining function in the later stage, and converted it to a form that needs to be collected manually:
 
 ```tsx
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import { renderToString } from 'react-dom/server';
 
 const cache = createCache();

docs/blog/extract-ssr.zh-CN.md

@@ -56,7 +56,7 @@ juejin_url: https://juejin.cn/post/7322352551088603163
 而当大部分组件都转成 CSS-in-JS 后，内联样式会变得十分巨大。所以我们在后期移除了自动内联的功能，转成了需要手动收取的形式：
 
 ```tsx
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import { renderToString } from 'react-dom/server';
 
 const cache = createCache();

docs/react/compatible-style.en-US.md

@@ -24,10 +24,10 @@ If you need to support older browsers, please use [StyleProvider](https://github
 - Minimum Chrome Version Supported: 88
 - Default Enabled: Yes
 
-The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
+The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `StyleProvider` to disable the default lowering of specificity (please ensure version consistency with antd).
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 
 // Config `hashPriority` to `high` instead of default `low`
 // Which will remove `:where` wrapper
@@ -70,10 +70,10 @@ Raise priority through plugin:
 - Minimum Chrome Version Supported: 89
 - Default Enabled: Yes
 
-To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider` of `@ant-design/cssinjs`:
+To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider`:
 
 ```tsx
-import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
+import { legacyLogicalPropertiesTransformer, StyleProvider } from 'antd';
 
 // `transformers` provides a way to transform CSS properties
 export default () => (
@@ -106,8 +106,7 @@ When toggled, styles will downgrade CSS logical properties:
 Ant Design supports configuring `@layer` for unified css priority downgrade since `5.17.0`. After the downgrade, the style of antd will always be lower than the default CSS selector priority, so that users can override the style (please be sure to check the browser compatibility of `@layer`).When enable `layer`, the child element **must** wrap `ConfigProvider` to update the icon-related styles:
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, StyleProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>
@@ -133,7 +132,7 @@ antd styles will be encapsulated in `@layer` to lower the priority:
 In responsive web development, there is a need for a convenient and flexible way to achieve page adaptation and responsive design. The `px2remTransformer` transformer can quickly and accurately convert pixel units in style sheets to rem units relative to the root element (HTML tag), enabling the implementation of adaptive and responsive layouts.
 
 ```tsx
-import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
+import { px2remTransformer, StyleProvider } from 'antd';
 
 const px2rem = px2remTransformer({
   rootValue: 32, // 32px = 1rem; @default 16
@@ -180,10 +179,10 @@ For more details, please refer to: [px2rem.ts#Options](https://github.com/ant-de
 
 ## Shadow DOM Usage
 
-Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@ant-design/cssinjs` to configure the `container` property to set the insertion position:
+Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` to configure the `container` property to set the insertion position:
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 import { createRoot } from 'react-dom/client';
 
 const shadowRoot = someEle.attachShadow({ mode: 'open' });
@@ -207,7 +206,7 @@ In some cases, you may need antd to coexist with other style libraries, such as
 As mentioned earlier, when using StyleProvider, you must wrap ConfigProvider to update icon-related styles:
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>

docs/react/compatible-style.zh-CN.md

@@ -24,10 +24,10 @@ Ant Design 5.x 支持[最近 2 个版本的现代浏览器](https://browsersl.is
 - Chrome 最低支持版本：88
 - 默认启用：是
 
-Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
+Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `StyleProvider` 取消默认的降权操作：
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 
 // `hashPriority` 默认为 `low`，配置为 `high` 后，
 // 会移除 `:where` 选择器封装
@@ -70,10 +70,10 @@ export default () => (
 - Chrome 最低支持版本：89
 - 默认启用：是
 
-为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
+为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `StyleProvider` 配置 `transformers` 将其转换：
 
 ```tsx | pure
-import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
+import { legacyLogicalPropertiesTransformer, StyleProvider } from 'antd';
 
 // `transformers` 提供预处理功能将样式进行转换
 export default () => (
@@ -106,8 +106,7 @@ export default () => (
 Ant Design 从 `5.17.0` 起支持配置 `layer` 进行统一降权。经过降权后，antd 的样式将始终低于默认的 CSS 选择器优先级，以便于用户进行样式覆盖（请务必注意检查 `@layer` 浏览器兼容性）。StyleProvider 开启 `layer` 时，子元素**必须**包裹 ConfigProvider 以更新图标相关样式：
 
 ```tsx | pure
-import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider } from 'antd';
+import { ConfigProvider, StyleProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>
@@ -133,7 +132,7 @@ antd 的样式会被封装在 `@layer` 中，以降低优先级：
 在响应式网页开发中，需要一种方便且灵活的方式来实现页面的适配和响应式设计。`px2remTransformer` 转换器可以快速而准确地将样式表中的像素单位转换为相对于根元素（HTML 标签）的 rem 单位，实现页面的自适应和响应式布局。
 
 ```tsx | pure
-import { px2remTransformer, StyleProvider } from '@ant-design/cssinjs';
+import { px2remTransformer, StyleProvider } from 'antd';
 
 const px2rem = px2remTransformer({
   rootValue: 32, // 32px = 1rem; @default 16
@@ -180,10 +179,10 @@ export default () => (
 
 ## Shadow DOM 场景
 
-在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：
+在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `StyleProvider` 配置 `container` 属性用于设置插入位置：
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 import { createRoot } from 'react-dom/client';
 
 const shadowRoot = someEle.attachShadow({ mode: 'open' });
@@ -207,7 +206,7 @@ root.render(
 如前所述，使用 StyleProvider 时必须包裹 ConfigProvider 以更新图标相关样式：
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 
 export default () => (
   <StyleProvider layer>

docs/react/server-side-rendering.en-US.md

@@ -12,17 +12,16 @@ There are two options for server-side rendering styles, each with advantages and
 
 ## Inline Style
 
-Use `@ant-design/cssinjs` to extract style:
+Use `extractStyle` to extract style:
 
 ```tsx
 import React from 'react';
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
-import type Entity from '@ant-design/cssinjs/es/Cache';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import { renderToString } from 'react-dom/server';
 
 const App = () => {
   // SSR Render
-  const cache = React.useMemo<Entity>(() => createCache(), []);
+  const cache = React.useMemo(() => createCache(), []);
   const html = renderToString(
     <StyleProvider cache={cache}>
       <MyApp />
@@ -155,7 +154,7 @@ Take Next.js for example（[example](https://github.com/ant-design/ant-design-ex
 Then, you just need to import this file into the `pages/_app.tsx` file:
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 import type { AppProps } from 'next/app';
 
 import '../public/antd.min.css'; // add this line
@@ -240,8 +239,8 @@ More about static-style-extract, see [static-style-extract](https://github.com/a
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import { extractStyle } from '@ant-design/cssinjs';
 import type Entity from '@ant-design/cssinjs/lib/Cache';
+import { extractStyle } from 'antd';
 
 export interface DoExtraStyleOptions {
   cache: Entity;
@@ -287,7 +286,7 @@ Export on demand using the above tools in `_document.tsx`
 
 ```tsx
 // _document.tsx
-import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from 'antd';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 

docs/react/server-side-rendering.zh-CN.md

@@ -12,17 +12,16 @@ title: 服务端渲染
 
 ## 内联样式
 
-使用 `@ant-design/cssinjs` 将所需样式抽离：
+使用 `extractStyle` 将所需样式抽离：
 
 ```tsx
 import React from 'react';
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
-import type Entity from '@ant-design/cssinjs/es/Cache';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import { renderToString } from 'react-dom/server';
 
 const App = () => {
   // SSR Render
-  const cache = React.useMemo<Entity>(() => createCache(), []);
+  const cache = React.useMemo(() => createCache(), []);
   const html = renderToString(
     <StyleProvider cache={cache}>
       <MyApp />
@@ -155,7 +154,7 @@ fs.writeFileSync(outputPath, css);
 然后，你只需要在`pages/_app.tsx`文件中引入这个文件即可：
 
 ```tsx
-import { StyleProvider } from '@ant-design/cssinjs';
+import { StyleProvider } from 'antd';
 import type { AppProps } from 'next/app';
 
 import '../public/antd.min.css'; // 添加这行
@@ -240,8 +239,8 @@ const cssText = extractStyle((node) => (
 import { createHash } from 'crypto';
 import fs from 'fs';
 import path from 'path';
-import { extractStyle } from '@ant-design/cssinjs';
 import type Entity from '@ant-design/cssinjs/lib/Cache';
+import { extractStyle } from 'antd';
 
 export interface DoExtraStyleOptions {
   cache: Entity;
@@ -287,7 +286,7 @@ export const doExtraStyle = (opts: DoExtraStyleOptions) => {
 
 ```tsx
 // _document.tsx
-import { createCache, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, StyleProvider } from 'antd';
 import type { DocumentContext } from 'next/document';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 

docs/react/use-with-next.en-US.md

@@ -86,21 +86,11 @@ For more detailed information, please refer to [with-nextjs-app-router-inline-st
 
 If you are using the Pages Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
 
-1. Install `@ant-design/cssinjs`
-
-> Notes for developers
->
-> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
->
-> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
-
-<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
-
-2. Rewrite `pages/_document.tsx`
+1. Rewrite `pages/_document.tsx`
 
 ```tsx
 import React from 'react';
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import type { DocumentContext } from 'next/document';
 
@@ -142,7 +132,7 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
 export default MyDocument;
 ```
 
-3. Supports custom themes
+2. Supports custom themes
 
 ```ts
 // theme/themeConfig.ts
@@ -158,7 +148,7 @@ const theme: ThemeConfig = {
 export default theme;
 ```
 
-4. Rewrite `pages/_app.tsx`
+3. Rewrite `pages/_app.tsx`
 
 ```tsx
 import React from 'react';
@@ -176,7 +166,7 @@ const App = ({ Component, pageProps }: AppProps) => (
 export default App;
 ```
 
-5. Use antd in page component
+4. Use antd in page component
 
 ```tsx
 import React from 'react';

docs/react/use-with-next.zh-CN.md

@@ -86,21 +86,11 @@ export default RootLayout;
 
 如果你在 Next.js 当中使用了 Pages Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
 
-1. 安装 `@ant-design/cssinjs`
-
-> 开发者注意事项：
->
-> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
->
-> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
-
-<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save' bun='$ bun add @ant-design/cssinjs'></InstallDependencies>
-
-2. 改写 `pages/_document.tsx`
+1. 改写 `pages/_document.tsx`
 
 ```tsx
 import React from 'react';
-import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
+import { createCache, extractStyle, StyleProvider } from 'antd';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
 import type { DocumentContext } from 'next/document';
 
@@ -142,7 +132,7 @@ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
 export default MyDocument;
 ```
 
-3. 支持自定义主题
+2. 支持自定义主题
 
 ```ts
 // theme/themeConfig.ts
@@ -158,7 +148,7 @@ const theme: ThemeConfig = {
 export default theme;
 ```
 
-4. 改写 `pages/_app.tsx`
+3. 改写 `pages/_app.tsx`
 
 ```tsx
 import React from 'react';
@@ -176,7 +166,7 @@ const App = ({ Component, pageProps }: AppProps) => (
 export default App;
 ```
 
-5. 在页面中使用 antd
+4. 在页面中使用 antd
 
 ```tsx
 import React from 'react';

tests/__snapshots__/index.test.ts.snap

@@ -57,6 +57,7 @@ exports[`antd dist files exports modules correctly 1`] = `
   "Splitter",
   "Statistic",
   "Steps",
+  "StyleProvider",
   "Switch",
   "Table",
   "Tabs",
@@ -71,8 +72,12 @@ exports[`antd dist files exports modules correctly 1`] = `
   "Typography",
   "Upload",
   "Watermark",
+  "createCache",
+  "extractStyle",
+  "legacyLogicalPropertiesTransformer",
   "message",
   "notification",
+  "px2remTransformer",
   "theme",
   "unstableSetRender",
   "version",