🐛 fix: fix suspense error in ssr hydration

CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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
+
+- 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

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` 配置项。          |

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 如下：
 
 | 属性名          | 类型                                   | 描述                                                                 |
 | --------------- | -------------------------------------- | -------------------------------------------------------------------- |

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>

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

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

docs/demos/api/createInstance/createInstanceWithContainer.tsx → docs/demos/api/createInstance/withContainer.tsx

@@ -1,5 +1,5 @@
 /**
- * iframe: true
+ * iframe: 100
  */
 import { Button } from 'antd';
 import { createInstance } from 'antd-style';

docs/demos/api/createInstance/createInstanceWithStyleProviderContainer.tsx → 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 />
     </>
   );

docs/demos/api/useResponsive/index.tsx → 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;

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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd-style",
-  "version": "3.2.2",
+  "version": "3.3.0-beta.2",
   "description": "a css-in-js solution for application combine with antd v5 token system and emotion",
   "keywords": [
     "antd",
@@ -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",

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