From d955d34ca3932fc0fc1a68376003c250dbcfd4a1 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 2 Jun 2023 19:02:28 +0800
Subject: [PATCH 01/14] :arrow_up: chore: update dev deps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd685b67..a88cecfb 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "@emotion/babel-plugin": "^11",
     "@emotion/jest": "^11",
     "@emotion/styled": "^11",
-    "@floating-ui/react": "^0.17",
+    "@floating-ui/react": "^0.24",
     "@react-three/fiber": "^8",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^13",

From ef61d10683ff86dcc3f0e7549ba4588a11a5ce86 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 2 Jun 2023 19:05:31 +0800
Subject: [PATCH 02/14] :bug: fix: fix suspense hydration with ssr

---
 src/factories/createThemeProvider/ThemeSwitcher.tsx | 12 +++++++++---
 src/utils/safeStartTransition.ts                    |  9 +++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/safeStartTransition.ts

diff --git a/src/factories/createThemeProvider/ThemeSwitcher.tsx b/src/factories/createThemeProvider/ThemeSwitcher.tsx
index 0b4a14d6..378397cc 100644
--- a/src/factories/createThemeProvider/ThemeSwitcher.tsx
+++ b/src/factories/createThemeProvider/ThemeSwitcher.tsx
@@ -4,6 +4,7 @@ import useMergeValue from 'use-merge-value';
 import { ThemeModeContext } from '@/context';
 import { BrowserPrefers, ThemeAppearance, ThemeMode, UseTheme } from '@/types';
 import { matchBrowserPrefers } from '@/utils/matchBrowserPrefers';
+import { safeStartTransition } from '@/utils/safeStartTransition';
 
 let darkThemeMatch: MediaQueryList;
 
@@ -32,7 +33,9 @@ const ThemeObserver: FC<{
   useLayoutEffect(() => {
     // 如果不是自动，就明确设定亮暗色
     if (themeMode !== 'auto') {
-      setAppearance(themeMode);
+      safeStartTransition(() => {
+        setAppearance(themeMode);
+      });
       return;
     }
     // 如果是自动的话，则去做一次匹配，并开始监听
@@ -48,7 +51,7 @@ const ThemeObserver: FC<{
     };
   }, [themeMode]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!darkThemeMatch) {
       darkThemeMatch = matchBrowserPrefers('dark');
     }
@@ -117,7 +120,10 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
 
     // Wait until after client-side hydration to show
     useEffect(() => {
-      setStartObserver(true);
+      // 兼容 React18 的 Suspense 问题
+      safeStartTransition(() => {
+        setStartObserver(true);
+      });
     }, []);
 
     return (
diff --git a/src/utils/safeStartTransition.ts b/src/utils/safeStartTransition.ts
new file mode 100644
index 00000000..d2ef0e71
--- /dev/null
+++ b/src/utils/safeStartTransition.ts
@@ -0,0 +1,9 @@
+import { startTransition, TransitionFunction } from 'react';
+
+export const safeStartTransition = (func: TransitionFunction) => {
+  if (typeof startTransition === 'function') {
+    startTransition(func);
+  } else {
+    func();
+  }
+};

From 595a5a6387cb1e0cdeadcc7dc601a25b986f2d9f Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 08:22:00 +0800
Subject: [PATCH 03/14] :sparkles: feat: CacheManager support delete method

---
 src/core/CacheManager.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core/CacheManager.ts b/src/core/CacheManager.ts
index 64be7176..e9408b6f 100644
--- a/src/core/CacheManager.ts
+++ b/src/core/CacheManager.ts
@@ -10,7 +10,11 @@ export class CacheManager {
     this._cacheList.push(cache);
   }
 
-  private hasCache(cache: EmotionCache) {
+  delete(cache: EmotionCache) {
+    this._cacheList = this._cacheList.filter((c) => c.key !== cache.key);
+  }
+
+  hasCache(cache: EmotionCache) {
     return this._cacheList.some((c) => c.key === cache.key);
   }
 

From 1840560c240f79aea1202bab7f797111d94a9ad3 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 08:23:29 +0800
Subject: [PATCH 04/14] :white_check_mark: test: add test for
 matchBrowserPrefers

---
 src/utils/matchBrowserPrefers.test.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/utils/matchBrowserPrefers.test.ts b/src/utils/matchBrowserPrefers.test.ts
index d2e1a309..dc919d2f 100644
--- a/src/utils/matchBrowserPrefers.test.ts
+++ b/src/utils/matchBrowserPrefers.test.ts
@@ -1,3 +1,4 @@
+import { ThemeAppearance } from 'antd-style';
 import { vi } from 'vitest';
 import { matchBrowserPrefers } from './matchBrowserPrefers';
 
@@ -36,4 +37,17 @@ describe('matchBrowserPrefers', () => {
     // 还原全局变量
     global.window = originalWindow;
   });
+  it('should return a MediaQueryList-like object when window object is undefined', () => {
+    const tempWin = window;
+    // eslint-disable-next-line no-global-assign,no-native-reassign
+    window = undefined as any;
+
+    const mode: ThemeAppearance = 'dark';
+    const result = matchBrowserPrefers(mode);
+
+    expect(result.matches).toBe(false);
+
+    // eslint-disable-next-line no-global-assign,no-native-reassign
+    window = tempWin;
+  });
 });

From 018dc2d8c2d8bf434726a0d25557de9a96831353 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 3 Jun 2023 00:28:13 +0000
Subject: [PATCH 05/14] :bookmark: chore(release): v3.3.0-beta.1 [skip ci]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03)

### ✨ Features

* CacheManager support delete method ([595a5a6](https://github.com/ant-design/antd-style/commit/595a5a6))

### 🐛 Bug Fixes

* fix suspense hydration with ssr ([ef61d10](https://github.com/ant-design/antd-style/commit/ef61d10))
---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9259b3d..b3933f7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+# [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03)
+
+### ✨ Features
+
+- CacheManager support delete method ([595a5a6](https://github.com/ant-design/antd-style/commit/595a5a6))
+
+### 🐛 Bug Fixes
+
+- fix suspense hydration with ssr ([ef61d10](https://github.com/ant-design/antd-style/commit/ef61d10))
+
 ## [3.2.2](https://github.com/ant-design/antd-style/compare/v3.2.1...v3.2.2) (2023-06-02)
 
 ### 🐛 Bug Fixes
diff --git a/package.json b/package.json
index a88cecfb..e4b67cdf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.2.2",
+  "version": "3.3.0-beta.1",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",

From a72e2ed5879aa99aef59142e1bdfbbb092f7001b Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 18:24:50 +0800
Subject: [PATCH 06/14] =?UTF-8?q?:memo:=20docs:=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=20StyleProvider=20=E7=9A=84=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/style-provider.md               | 26 +++++++++++++++++-------
 docs/demos/StyleProvider/insertpoint.tsx | 25 +++++++++++++++++++++++
 docs/demos/StyleProvider/speedy.tsx      | 23 +++++++++++++++++++++
 3 files changed, 67 insertions(+), 7 deletions(-)
 create mode 100644 docs/demos/StyleProvider/insertpoint.tsx
 create mode 100644 docs/demos/StyleProvider/speedy.tsx

diff --git a/docs/api/style-provider.md b/docs/api/style-provider.md
index cb475f49..b8869438 100644
--- a/docs/api/style-provider.md
+++ b/docs/api/style-provider.md
@@ -4,27 +4,39 @@ description: 用于全局管理样式插入相关的配置
 order: 2
 group: 容器组件
 demo:
-  cols: 2
   tocDepth: 4
 ---
 
 ## 修改 container
 
-指定 `container` 为 dom 节点，即可使得所有生成的样式（antd、antd-style）均插入到该节点下。
+指定 `container` 即可使得所有生成的样式（antd、antd-style）均插入到该节点下。
 
 <code src="../demos/StyleProvider/customContainer.tsx"></code>
 
-### 修改样式注入点
+## 修改样式注入点
 
-TBD
+一般情况下不太需要用到，如果你需要兼容组件覆写样式的需求时，可以考虑设定组件样式的注入点，使得其在该节点之后注入。
 
-### 开启 speedy 极速模式
+<code src="../demos/StyleProvider/insertpoint.tsx"></code>
 
-TBD
+## 开启 speedy 极速模式
+
+开启 emotion 的 speedy 模式。建议独立应用可以开启。
+
+<code src="../demos/StyleProvider/speedy.tsx"></code>
+
+:::info{title=Speedy模式}
+
+早期的 cssinjs 方案中，样式的插入是一个 style 标签对应一个样式，浏览器解析较慢，但便于修改与调试。
+
+目前 emotion 默认使用现代化的 CSSOM api 插入样式，会把一堆 css 放到一个 <style></style> 标签里，插入后移除相应的内容。这种方式性能很好，支持万级别的样式插入。但与微应用（qiankun）兼容性较差。
+
+antd-style 中默认关闭了 speedy 模式，如果需要，配置 `speedy` 为 `true` 即可。
+:::
 
 ## API
 
-继承 `ant-design/cssinjs` 的 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) api ，其余 api 如下：
+继承 `ant-design/cssinjs` 的 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) ，其余 API 如下：
 
 | 属性名          | 类型                                   | 描述                                                                 |
 | --------------- | -------------------------------------- | -------------------------------------------------------------------- |
diff --git a/docs/demos/StyleProvider/insertpoint.tsx b/docs/demos/StyleProvider/insertpoint.tsx
new file mode 100644
index 00000000..7fdacc4b
--- /dev/null
+++ b/docs/demos/StyleProvider/insertpoint.tsx
@@ -0,0 +1,25 @@
+/**
+ * iframe: 50
+ */
+import { createStyles, css, StyleProvider } from 'antd-style';
+
+const useStyles = createStyles({
+  text: css`
+    color: hotpink;
+  `,
+});
+
+const Text = () => {
+  const { styles } = useStyles();
+  return <div className={styles.text}>插入的 style 节点在第一个 meta 标签之后</div>;
+};
+
+export default () => {
+  const firstMeta = document.getElementsByTagName('meta')[0];
+
+  return (
+    <StyleProvider insertionPoint={firstMeta}>
+      <Text />
+    </StyleProvider>
+  );
+};
diff --git a/docs/demos/StyleProvider/speedy.tsx b/docs/demos/StyleProvider/speedy.tsx
new file mode 100644
index 00000000..9afdc97f
--- /dev/null
+++ b/docs/demos/StyleProvider/speedy.tsx
@@ -0,0 +1,23 @@
+/**
+ * iframe: 50
+ */
+import { createStyles, css, StyleProvider } from 'antd-style';
+
+const useStyles = createStyles({
+  text: css`
+    color: blue;
+  `,
+});
+
+const Text = () => {
+  const { styles } = useStyles();
+  return <div className={styles.text}> 开启 speedy 模式后，style 标签中将不存在具体样式</div>;
+};
+
+export default () => {
+  return (
+    <StyleProvider speedy>
+      <Text />
+    </StyleProvider>
+  );
+};

From a1ab0b794f739eb7342da76e37e96a37fff47852 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 18:31:29 +0800
Subject: [PATCH 07/14] =?UTF-8?q?:memo:=20docs:=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84=20createInstance=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/create-instance.md                   | 49 ++++++++++++-------
 ...nceWithContainer.tsx => withContainer.tsx} |  2 +-
 ...ner.tsx => withStyleProviderContainer.tsx} |  6 ++-
 3 files changed, 37 insertions(+), 20 deletions(-)
 rename docs/demos/api/createInstance/{createInstanceWithContainer.tsx => withContainer.tsx} (96%)
 rename docs/demos/api/createInstance/{createInstanceWithStyleProviderContainer.tsx => withStyleProviderContainer.tsx} (82%)

diff --git a/docs/api/create-instance.md b/docs/api/create-instance.md
index 32dfcff1..910e7970 100644
--- a/docs/api/create-instance.md
+++ b/docs/api/create-instance.md
@@ -60,9 +60,28 @@ export const {
 } = styleInstance;
 ```
 
+## 指定 container
+
+在创建时指定 container ，可以使得样式都在该容器处插入，在 iframe 等场景比较有用。
+
+```ts
+const { css, StyleProvider, createStyles } = createInstance({
+  key: 'test',
+  container: document.body,
+});
+```
+
+<code src="../demos/api/createInstance/withContainer.tsx"></code>
+
+如果你在组件库里用 `createInstance` 暴露出的 `createStyles` 定义好了样式，然后希望在不同的业务场景下指定不同的插入位置。
+
+那么可以在业务应用使用时，在外部包一层 `StyleProvider` 并设置 `container` 来实现自定义位置的插入。
+
+<code src="../demos/api/createInstance/withStyleProviderContainer.tsx"></code>
+
 ## 兼容 styled 主题方案
 
-无论是 `styled-component` 还是 `emotion/styled`，如果需要响应主题变化，都需要在组件外部包裹一个 `ThemeProvider`。这个时候，如果你的组件也需要响应主题变化，就需要在组件内部再包裹一个 `ThemeProvider`，通过在 createInstance 中传入 `styled` 的配置，即可让 `styled` 后的组件也响应自定义 Token。
+如果你使用 `styled-component` 且需要响应主题变化，都需要在组件外部包裹一个 `ThemeProvider`。这个时候，如果你的组件也需要响应主题变化，就需要在组件内部再包裹一个 `ThemeProvider`，通过在 createInstance 中传入 `styled` 的配置，即可让 `styled` 后的组件也响应自定义 Token。
 
 ```ts | pure
 // styled-components 版本
@@ -75,19 +94,15 @@ const componentStyleIntanceWithSC = createInstance({
 });
 ```
 
-## 指定 container
-
-在创建时指定 container ，可以使得样式都在该容器处插入，在 iframe 等场景比较有用。
-
-```ts
-const { css, StyleProvider, createStyles } = createInstance({
-  key: 'test',
-  container: document.body,
-});
-```
-
-<code src="../demos/api/createInstance/createInstanceWithContainer.tsx"></code>
-
-还有一个场景是，组件库里用 `createInstance` 暴露出的 `createStyles` 定义好了样式，想在不同的业务场景下指定不同的插入位置，业务上通过组件外部包一层 `StyleProvider` 并设置 `container` 来实现节点的自行插入。
-
-<code src="../demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx"></code>
+## API
+
+| 属性名        | 类型                                      | 描述                                  |
+| ------------- | ----------------------------------------- | ------------------------------------- |
+| key           | `string`                                  | 生成的 CSS 关键词，默认为 `ant-css`。 |
+| prefixCls     | `string`                                  | 默认的组件前缀。                      |
+| speedy        | `boolean`                                 | 是否开启急速模式，默认为 `false`。    |
+| container     | `Node`                                    | 渲染容器节点。                        |
+| customToken   | `T`                                       | 默认的自定义 Token。                  |
+| hashPriority  | `HashPriority`                            | 控制 CSS 类名生成的优先级。           |
+| ThemeProvider | `Omit<ThemeProviderProps<T>, 'children'>` | 主题提供者。                          |
+| styled        | `StyledConfig`                            | `styled-components` 配置项。          |
diff --git a/docs/demos/api/createInstance/createInstanceWithContainer.tsx b/docs/demos/api/createInstance/withContainer.tsx
similarity index 96%
rename from docs/demos/api/createInstance/createInstanceWithContainer.tsx
rename to docs/demos/api/createInstance/withContainer.tsx
index 28a11d35..7f73f781 100644
--- a/docs/demos/api/createInstance/createInstanceWithContainer.tsx
+++ b/docs/demos/api/createInstance/withContainer.tsx
@@ -1,5 +1,5 @@
 /**
- * iframe: true
+ * iframe: 100
  */
 import { Button } from 'antd';
 import { createInstance } from 'antd-style';
diff --git a/docs/demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx b/docs/demos/api/createInstance/withStyleProviderContainer.tsx
similarity index 82%
rename from docs/demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx
rename to docs/demos/api/createInstance/withStyleProviderContainer.tsx
index bf76a386..b22dc1cb 100644
--- a/docs/demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx
+++ b/docs/demos/api/createInstance/withStyleProviderContainer.tsx
@@ -1,7 +1,8 @@
 /**
- * iframe: true
+ * iframe: 150
  */
-import { Button } from 'antd';
+
+import { Button, Divider } from 'antd';
 import { createInstance } from 'antd-style';
 
 const { css, StyleProvider, createStyles } = createInstance({
@@ -26,6 +27,7 @@ export default () => {
         <Text />
         <Button>按钮</Button>
       </StyleProvider>
+      <Divider>下方 style 插入在 head</Divider>
       <Text />
     </>
   );

From cde16f3d48f5b0b2dfa474f30818fa5ba8d0e070 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 18:44:17 +0800
Subject: [PATCH 08/14] =?UTF-8?q?:memo:=20docs:=20=E8=A1=A5=E5=85=85?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=20useResponsive=20=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/api/use-responsive.md                    | 27 +++++++------------
 .../useResponsive/{ => Demo}/DisplayTag.tsx   |  0
 .../api/useResponsive/{ => Demo}/index.tsx    | 21 +++------------
 docs/demos/api/useResponsive/custom.tsx       | 25 +++++++++++++++++
 docs/demos/api/useResponsive/default.tsx      | 18 +++++++++++++
 5 files changed, 56 insertions(+), 35 deletions(-)
 rename docs/demos/api/useResponsive/{ => Demo}/DisplayTag.tsx (100%)
 rename docs/demos/api/useResponsive/{ => Demo}/index.tsx (85%)
 create mode 100644 docs/demos/api/useResponsive/custom.tsx
 create mode 100644 docs/demos/api/useResponsive/default.tsx

diff --git a/docs/api/use-responsive.md b/docs/api/use-responsive.md
index 744a5dd9..76e5a491 100644
--- a/docs/api/use-responsive.md
+++ b/docs/api/use-responsive.md
@@ -8,34 +8,25 @@ group: Hooks
 
 获取响应式媒体查询的结果。基于 antd 的 [Grid.useBreakpoint](https://ant.design/components/grid-cn#components-grid-demo-usebreakpoint) 封装。
 
-<code src="../demos/api/useResponsive"></code>
-
 ## 用法
 
-```ts
+```tsx | pure
 import { useResponsive } from 'antd-style';
 
 function Theme() {
   const { mobile } = useResponsive();
 
-  useEffect(() => {
-    console.log(theme);
-  }, [theme]);
-
-  return null;
+  // 使用 js 来区分显示移动端
+  return mobile ? <div>mobile</div> : <div>desktop</div>;
 }
 ```
 
-## Typescript
+## 示例
 
-```ts
-useTheme = () => Theme;
-```
+<code src="../demos/api/useResponsive/default.tsx"></code>
+
+## 自定义断点
 
-### 返回值
+通过传入 antd 的断点配置，来自定义响应断点。
 
-| 参数       | 说明           | 类型                   | 默认值  |
-| ---------- | -------------- | ---------------------- | ------- |
-| themeMode  | 主题模式       | `dark  / light / auto` | `light` |
-| appearance | 显示外观       | `dark  / light`        | `light` |
-| isDarkMode | 是否为暗色模式 | `boolean`              | `false` |
+<code src="../demos/api/useResponsive/custom.tsx"></code>
diff --git a/docs/demos/api/useResponsive/DisplayTag.tsx b/docs/demos/api/useResponsive/Demo/DisplayTag.tsx
similarity index 100%
rename from docs/demos/api/useResponsive/DisplayTag.tsx
rename to docs/demos/api/useResponsive/Demo/DisplayTag.tsx
diff --git a/docs/demos/api/useResponsive/index.tsx b/docs/demos/api/useResponsive/Demo/index.tsx
similarity index 85%
rename from docs/demos/api/useResponsive/index.tsx
rename to docs/demos/api/useResponsive/Demo/index.tsx
index 33cd34f3..008130d9 100644
--- a/docs/demos/api/useResponsive/index.tsx
+++ b/docs/demos/api/useResponsive/Demo/index.tsx
@@ -1,12 +1,9 @@
-/**
- * compact: true
- */
-import { Divider, Tooltip } from 'antd';
-import { Breakpoint, ThemeProvider, useResponsive, useTheme } from 'antd-style';
+import { Tooltip } from 'antd';
+import { Breakpoint, useResponsive, useTheme } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 
+import { Label } from '../style';
 import { DisplayTag } from './DisplayTag';
-import { Container, Label } from './style';
 
 const Demo = () => {
   const responsive = useResponsive();
@@ -81,14 +78,4 @@ const Demo = () => {
   );
 };
 
-export default () => {
-  return (
-    <Container>
-      <Demo />
-      <Divider />
-      <ThemeProvider>
-        <Demo />
-      </ThemeProvider>
-    </Container>
-  );
-};
+export default Demo;
diff --git a/docs/demos/api/useResponsive/custom.tsx b/docs/demos/api/useResponsive/custom.tsx
new file mode 100644
index 00000000..f98583ba
--- /dev/null
+++ b/docs/demos/api/useResponsive/custom.tsx
@@ -0,0 +1,25 @@
+/**
+ * compact: true
+ */
+
+import { ThemeProvider } from 'antd-style';
+import Demo from './Demo';
+import { Container } from './style';
+
+export default () => {
+  return (
+    <Container>
+      <ThemeProvider
+        theme={{
+          token: {
+            screenXS: 500,
+            screenMD: 800,
+            screenLG: 1100,
+          },
+        }}
+      >
+        <Demo />
+      </ThemeProvider>
+    </Container>
+  );
+};
diff --git a/docs/demos/api/useResponsive/default.tsx b/docs/demos/api/useResponsive/default.tsx
new file mode 100644
index 00000000..f5b498cb
--- /dev/null
+++ b/docs/demos/api/useResponsive/default.tsx
@@ -0,0 +1,18 @@
+/**
+ * compact: true
+ */
+
+import Demo from './Demo';
+import { Container } from './style';
+
+export default () => {
+  return (
+    <Container>
+      <Demo />
+      {/*<Divider />*/}
+      {/*<ThemeProvider>*/}
+      {/*  <Demo />*/}
+      {/*</ThemeProvider>*/}
+    </Container>
+  );
+};

From 24888e998fa743ac0ecb149a79a2237f4de4e959 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 2 Jun 2023 19:02:28 +0800
Subject: [PATCH 09/14] :arrow_up: chore: update dev deps

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fd685b67..a88cecfb 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "@emotion/babel-plugin": "^11",
     "@emotion/jest": "^11",
     "@emotion/styled": "^11",
-    "@floating-ui/react": "^0.17",
+    "@floating-ui/react": "^0.24",
     "@react-three/fiber": "^8",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^13",

From 9f27b16056f6a1205a9dd5d20c70639bfbde9e1e Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Fri, 2 Jun 2023 19:05:31 +0800
Subject: [PATCH 10/14] :bug: fix: fix suspense hydration with ssr

---
 src/factories/createThemeProvider/ThemeSwitcher.tsx | 12 +++++++++---
 src/utils/safeStartTransition.ts                    |  9 +++++++++
 2 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/safeStartTransition.ts

diff --git a/src/factories/createThemeProvider/ThemeSwitcher.tsx b/src/factories/createThemeProvider/ThemeSwitcher.tsx
index 0b4a14d6..378397cc 100644
--- a/src/factories/createThemeProvider/ThemeSwitcher.tsx
+++ b/src/factories/createThemeProvider/ThemeSwitcher.tsx
@@ -4,6 +4,7 @@ import useMergeValue from 'use-merge-value';
 import { ThemeModeContext } from '@/context';
 import { BrowserPrefers, ThemeAppearance, ThemeMode, UseTheme } from '@/types';
 import { matchBrowserPrefers } from '@/utils/matchBrowserPrefers';
+import { safeStartTransition } from '@/utils/safeStartTransition';
 
 let darkThemeMatch: MediaQueryList;
 
@@ -32,7 +33,9 @@ const ThemeObserver: FC<{
   useLayoutEffect(() => {
     // 如果不是自动，就明确设定亮暗色
     if (themeMode !== 'auto') {
-      setAppearance(themeMode);
+      safeStartTransition(() => {
+        setAppearance(themeMode);
+      });
       return;
     }
     // 如果是自动的话，则去做一次匹配，并开始监听
@@ -48,7 +51,7 @@ const ThemeObserver: FC<{
     };
   }, [themeMode]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (!darkThemeMatch) {
       darkThemeMatch = matchBrowserPrefers('dark');
     }
@@ -117,7 +120,10 @@ const ThemeSwitcher: FC<ThemeSwitcherProps> = memo(
 
     // Wait until after client-side hydration to show
     useEffect(() => {
-      setStartObserver(true);
+      // 兼容 React18 的 Suspense 问题
+      safeStartTransition(() => {
+        setStartObserver(true);
+      });
     }, []);
 
     return (
diff --git a/src/utils/safeStartTransition.ts b/src/utils/safeStartTransition.ts
new file mode 100644
index 00000000..d2ef0e71
--- /dev/null
+++ b/src/utils/safeStartTransition.ts
@@ -0,0 +1,9 @@
+import { startTransition, TransitionFunction } from 'react';
+
+export const safeStartTransition = (func: TransitionFunction) => {
+  if (typeof startTransition === 'function') {
+    startTransition(func);
+  } else {
+    func();
+  }
+};

From b3b74e94fef2470a8ddf6c3b99905004f19fd477 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 08:22:00 +0800
Subject: [PATCH 11/14] :sparkles: feat: CacheManager support delete method

---
 src/core/CacheManager.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core/CacheManager.ts b/src/core/CacheManager.ts
index 64be7176..e9408b6f 100644
--- a/src/core/CacheManager.ts
+++ b/src/core/CacheManager.ts
@@ -10,7 +10,11 @@ export class CacheManager {
     this._cacheList.push(cache);
   }
 
-  private hasCache(cache: EmotionCache) {
+  delete(cache: EmotionCache) {
+    this._cacheList = this._cacheList.filter((c) => c.key !== cache.key);
+  }
+
+  hasCache(cache: EmotionCache) {
     return this._cacheList.some((c) => c.key === cache.key);
   }
 

From ad9003eef39d1fb243cb302c618826fbce75bd6b Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sat, 3 Jun 2023 08:23:29 +0800
Subject: [PATCH 12/14] :white_check_mark: test: add test for
 matchBrowserPrefers

---
 src/utils/matchBrowserPrefers.test.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/utils/matchBrowserPrefers.test.ts b/src/utils/matchBrowserPrefers.test.ts
index d2e1a309..dc919d2f 100644
--- a/src/utils/matchBrowserPrefers.test.ts
+++ b/src/utils/matchBrowserPrefers.test.ts
@@ -1,3 +1,4 @@
+import { ThemeAppearance } from 'antd-style';
 import { vi } from 'vitest';
 import { matchBrowserPrefers } from './matchBrowserPrefers';
 
@@ -36,4 +37,17 @@ describe('matchBrowserPrefers', () => {
     // 还原全局变量
     global.window = originalWindow;
   });
+  it('should return a MediaQueryList-like object when window object is undefined', () => {
+    const tempWin = window;
+    // eslint-disable-next-line no-global-assign,no-native-reassign
+    window = undefined as any;
+
+    const mode: ThemeAppearance = 'dark';
+    const result = matchBrowserPrefers(mode);
+
+    expect(result.matches).toBe(false);
+
+    // eslint-disable-next-line no-global-assign,no-native-reassign
+    window = tempWin;
+  });
 });

From e04196c4d93f3124d445d5fa3adc11dd0a650414 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 3 Jun 2023 00:28:13 +0000
Subject: [PATCH 13/14] :bookmark: chore(release): v3.3.0-beta.1 [skip ci]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03)

### ✨ Features

* CacheManager support delete method ([595a5a6](https://github.com/ant-design/antd-style/commit/595a5a6))

### 🐛 Bug Fixes

* fix suspense hydration with ssr ([ef61d10](https://github.com/ant-design/antd-style/commit/ef61d10))
---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9259b3d..b3933f7d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+# [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03)
+
+### ✨ Features
+
+- CacheManager support delete method ([595a5a6](https://github.com/ant-design/antd-style/commit/595a5a6))
+
+### 🐛 Bug Fixes
+
+- fix suspense hydration with ssr ([ef61d10](https://github.com/ant-design/antd-style/commit/ef61d10))
+
 ## [3.2.2](https://github.com/ant-design/antd-style/compare/v3.2.1...v3.2.2) (2023-06-02)
 
 ### 🐛 Bug Fixes
diff --git a/package.json b/package.json
index a88cecfb..e4b67cdf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.2.2",
+  "version": "3.3.0-beta.1",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",

From 3ceecffd9d448024ab4c6b5b2bcc1d3e40ca3007 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 3 Jun 2023 15:33:18 +0000
Subject: [PATCH 14/14] :bookmark: chore(release): v3.3.0-beta.2 [skip ci]
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# [3.3.0-beta.2](https://github.com/ant-design/antd-style/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-06-03)

### ✨ Features

* CacheManager support delete method ([b3b74e9](https://github.com/ant-design/antd-style/commit/b3b74e9))

### 🐛 Bug Fixes

* fix suspense hydration with ssr ([9f27b16](https://github.com/ant-design/antd-style/commit/9f27b16))
---
 CHANGELOG.md | 10 ++++++++++
 package.json |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3933f7d..213b504f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+# [3.3.0-beta.2](https://github.com/ant-design/antd-style/compare/v3.3.0-beta.1...v3.3.0-beta.2) (2023-06-03)
+
+### ✨ Features
+
+- CacheManager support delete method ([b3b74e9](https://github.com/ant-design/antd-style/commit/b3b74e9))
+
+### 🐛 Bug Fixes
+
+- fix suspense hydration with ssr ([9f27b16](https://github.com/ant-design/antd-style/commit/9f27b16))
+
 # [3.3.0-beta.1](https://github.com/ant-design/antd-style/compare/v3.2.2...v3.3.0-beta.1) (2023-06-03)
 
 ### ✨ Features
diff --git a/package.json b/package.json
index e4b67cdf..631d9fd7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.3.0-beta.1",
+  "version": "3.3.0-beta.2",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",