diff --git a/components/__tests__/__snapshots__/index.test.ts.snap b/components/__tests__/__snapshots__/index.test.ts.snap index 18771656d3..a3d12c0bf4 100644 --- a/components/__tests__/__snapshots__/index.test.ts.snap +++ b/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", diff --git a/components/config-provider/demo/holderRender.tsx b/components/config-provider/demo/holderRender.tsx index 5e28c0e94f..36d3be9ec1 100644 --- a/components/config-provider/demo/holderRender.tsx +++ b/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); diff --git a/components/index.ts b/components/index.ts index 5736eeda0f..c74047fee0 100644 --- a/components/index.ts +++ b/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'; diff --git a/docs/blog/extract-ssr.en-US.md b/docs/blog/extract-ssr.en-US.md index 678b763126..cbd3b853d4 100644 --- a/docs/blog/extract-ssr.en-US.md +++ b/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(); diff --git a/docs/blog/extract-ssr.zh-CN.md b/docs/blog/extract-ssr.zh-CN.md index 1f0e55814d..40303c6651 100644 --- a/docs/blog/extract-ssr.zh-CN.md +++ b/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(); diff --git a/docs/react/compatible-style.en-US.md b/docs/react/compatible-style.en-US.md index 837ca53a38..9d42269371 100644 --- a/docs/react/compatible-style.en-US.md +++ b/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 () => ( @@ -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 `