From fe9ed1a3351d77a174788b6b9ef4e6ba1386287c Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Sun, 25 Jun 2023 15:04:02 +0800
Subject: [PATCH] =?UTF-8?q?:bug:=20docs:=20=E4=BF=AE=E6=AD=A3=20Benchmark?=
 =?UTF-8?q?=20demo=20=E6=97=A0=E6=B3=95=E6=9F=A5=E7=9C=8B=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .dumirc.ts                                    |  3 -
 .../TestCase/AntdStyleFunc/index.tsx          | 78 ----------------
 .../TestCase/AntdStyleProps/index.tsx         | 78 ----------------
 .../TestCase/AntdStyleStatic/index.tsx        | 75 ---------------
 .../TestCase/AntdStyleTokens/index.tsx        | 78 ----------------
 .../benchmark/TestCase/CSSModules/index.tsx   | 24 -----
 .../TestCase/CSSModules/styles.module.css     | 61 ------------
 .../demos/benchmark/TestCase/Chakra/index.tsx | 43 ---------
 .../benchmark/TestCase/EmotionCSS/index.tsx   | 87 -----------------
 .../benchmark/TestCase/EmotionReact/index.tsx | 89 ------------------
 .../TestCase/EmotionStyled/index.tsx          | 89 ------------------
 .../demos/benchmark/TestCase/MuiBox/index.tsx | 42 ---------
 .../benchmark/TestCase/MuiStatic/index.tsx    | 75 ---------------
 .../benchmark/TestCase/MuiStyled/index.tsx    | 89 ------------------
 .../TestCase/MuiStyledTheme/index.tsx         | 87 -----------------
 .../benchmark/TestCase/PureCSS/index.tsx      | 23 -----
 .../benchmark/TestCase/PureCSS/styles.css     | 61 ------------
 .../TestCase/StyledComponents/index.tsx       | 89 ------------------
 .../TestCase/StyledComponentsTheme/index.tsx  | 87 -----------------
 docs/guide/demos/benchmark/TestCase/index.ts  | 93 -------------------
 .../demos/benchmark/components/TestResult.tsx | 25 -----
 .../demos/benchmark/components/TestSuit.tsx   | 85 -----------------
 docs/guide/demos/benchmark/const.ts           |  1 -
 docs/guide/demos/benchmark/index.tsx          | 69 ++------------
 docs/guide/performance-comparsion.md          |  2 +-
 package.json                                  |  4 -
 26 files changed, 7 insertions(+), 1530 deletions(-)
 delete mode 100644 docs/guide/demos/benchmark/TestCase/AntdStyleFunc/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/AntdStyleProps/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/AntdStyleStatic/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/AntdStyleTokens/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/CSSModules/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/CSSModules/styles.module.css
 delete mode 100644 docs/guide/demos/benchmark/TestCase/Chakra/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/EmotionCSS/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/EmotionReact/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/EmotionStyled/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/MuiBox/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/MuiStatic/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/MuiStyled/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/MuiStyledTheme/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/PureCSS/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/PureCSS/styles.css
 delete mode 100644 docs/guide/demos/benchmark/TestCase/StyledComponents/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/StyledComponentsTheme/index.tsx
 delete mode 100644 docs/guide/demos/benchmark/TestCase/index.ts
 delete mode 100644 docs/guide/demos/benchmark/components/TestResult.tsx
 delete mode 100644 docs/guide/demos/benchmark/components/TestSuit.tsx
 delete mode 100644 docs/guide/demos/benchmark/const.ts

diff --git a/.dumirc.ts b/.dumirc.ts
index bf5928fb..2a765a19 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -42,9 +42,6 @@ export default defineConfig({
     html, body { background: #0E1116; }
   }`,
   ],
-  alias: {
-    'react-dom': 'react-dom/profiling',
-  },
   extraBabelPlugins: [
     // 添加 antd-style babel 插件
     require.resolve('babel-plugin-antd-style'),
diff --git a/docs/guide/demos/benchmark/TestCase/AntdStyleFunc/index.tsx b/docs/guide/demos/benchmark/TestCase/AntdStyleFunc/index.tsx
deleted file mode 100644
index a86f1924..00000000
--- a/docs/guide/demos/benchmark/TestCase/AntdStyleFunc/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { createStyles } from 'antd-style';
-
-import { FC } from 'react';
-import { NUM_CARDS } from '../../const';
-
-const sharedItemStyles = {
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-};
-
-const useStyles = createStyles(() => ({
-  container: {
-    border: '1px dashed #ccc',
-    padding: '4px',
-    height: '150px',
-    overflow: 'auto',
-    width: '120px',
-  },
-  cardContainer: {
-    border: '1px solid #ccc',
-    display: 'flex',
-    marginBottom: '4px',
-    padding: '4px',
-    fontSize: '12px',
-  },
-  itemOne: {
-    ...sharedItemStyles,
-    background: 'red',
-  },
-  itemTwo: {
-    ...sharedItemStyles,
-    background: 'orange',
-  },
-  itemThree: {
-    ...sharedItemStyles,
-    background: 'yellow',
-  },
-  itemFour: {
-    ...sharedItemStyles,
-    background: 'green',
-  },
-  itemFive: {
-    ...sharedItemStyles,
-    background: 'blue',
-  },
-  itemSix: {
-    ...sharedItemStyles,
-    background: 'violet',
-  },
-  itemSeven: {
-    ...sharedItemStyles,
-    background: 'pink',
-  },
-}));
-
-const AntdStyleFunc: FC = () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.container}>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <div className={styles.cardContainer} key={i}>
-          Card {i}
-          <div className={styles.itemOne} />
-          <div className={styles.itemTwo} />
-          <div className={styles.itemThree} />
-          <div className={styles.itemFour} />
-          <div className={styles.itemFive} />
-          <div className={styles.itemSix} />
-          <div className={styles.itemSeven} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default AntdStyleFunc;
diff --git a/docs/guide/demos/benchmark/TestCase/AntdStyleProps/index.tsx b/docs/guide/demos/benchmark/TestCase/AntdStyleProps/index.tsx
deleted file mode 100644
index 66d030a9..00000000
--- a/docs/guide/demos/benchmark/TestCase/AntdStyleProps/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { createStyles } from 'antd-style';
-
-import { FC } from 'react';
-import { NUM_CARDS } from '../../const';
-
-const sharedItemStyles = {
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-};
-
-const useStyles = createStyles((_, sharedItemStyles: any) => ({
-  container: {
-    border: '1px dashed #ccc',
-    padding: '4px',
-    height: '150px',
-    overflow: 'auto',
-    width: '120px',
-  },
-  cardContainer: {
-    border: '1px solid #ccc',
-    display: 'flex',
-    marginBottom: '4px',
-    padding: '4px',
-    fontSize: '12px',
-  },
-  itemOne: {
-    ...sharedItemStyles,
-    background: 'red',
-  },
-  itemTwo: {
-    ...sharedItemStyles,
-    background: 'orange',
-  },
-  itemThree: {
-    ...sharedItemStyles,
-    background: 'yellow',
-  },
-  itemFour: {
-    ...sharedItemStyles,
-    background: 'green',
-  },
-  itemFive: {
-    ...sharedItemStyles,
-    background: 'blue',
-  },
-  itemSix: {
-    ...sharedItemStyles,
-    background: 'violet',
-  },
-  itemSeven: {
-    ...sharedItemStyles,
-    background: 'pink',
-  },
-}));
-
-const AntdStyleWithProps: FC = () => {
-  const { styles } = useStyles(sharedItemStyles);
-
-  return (
-    <div className={styles.container}>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <div className={styles.cardContainer} key={i}>
-          Card {i}
-          <div className={styles.itemOne} />
-          <div className={styles.itemTwo} />
-          <div className={styles.itemThree} />
-          <div className={styles.itemFour} />
-          <div className={styles.itemFive} />
-          <div className={styles.itemSix} />
-          <div className={styles.itemSeven} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default AntdStyleWithProps;
diff --git a/docs/guide/demos/benchmark/TestCase/AntdStyleStatic/index.tsx b/docs/guide/demos/benchmark/TestCase/AntdStyleStatic/index.tsx
deleted file mode 100644
index cffc623a..00000000
--- a/docs/guide/demos/benchmark/TestCase/AntdStyleStatic/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { createStyles } from 'antd-style';
-
-import { NUM_CARDS } from '../../const';
-
-const sharedItemStyles = {
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-};
-
-const useStaticStyles = createStyles({
-  container: {
-    border: '1px dashed #ccc',
-    padding: '4px',
-    height: '150px',
-    overflow: 'auto',
-    width: '120px',
-  },
-  cardContainer: {
-    border: '1px solid #ccc',
-    display: 'flex',
-    marginBottom: '4px',
-    padding: '4px',
-    fontSize: '12px',
-  },
-  itemOne: {
-    ...sharedItemStyles,
-    background: 'red',
-  },
-  itemTwo: {
-    ...sharedItemStyles,
-    background: 'orange',
-  },
-  itemThree: {
-    ...sharedItemStyles,
-    background: 'yellow',
-  },
-  itemFour: {
-    ...sharedItemStyles,
-    background: 'green',
-  },
-  itemFive: {
-    ...sharedItemStyles,
-    background: 'blue',
-  },
-  itemSix: {
-    ...sharedItemStyles,
-    background: 'violet',
-  },
-  itemSeven: {
-    ...sharedItemStyles,
-    background: 'pink',
-  },
-});
-
-const AntdStyleStatic = () => {
-  const { styles } = useStaticStyles();
-  return (
-    <div className={styles.container}>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <div className={styles.cardContainer} key={i}>
-          Card {i}
-          <div className={styles.itemOne} />
-          <div className={styles.itemTwo} />
-          <div className={styles.itemThree} />
-          <div className={styles.itemFour} />
-          <div className={styles.itemFive} />
-          <div className={styles.itemSix} />
-          <div className={styles.itemSeven} />
-        </div>
-      ))}
-    </div>
-  );
-};
-export default AntdStyleStatic;
diff --git a/docs/guide/demos/benchmark/TestCase/AntdStyleTokens/index.tsx b/docs/guide/demos/benchmark/TestCase/AntdStyleTokens/index.tsx
deleted file mode 100644
index b491c8d6..00000000
--- a/docs/guide/demos/benchmark/TestCase/AntdStyleTokens/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { createStyles } from 'antd-style';
-
-import { FC } from 'react';
-import { NUM_CARDS } from '../../const';
-
-const sharedItemStyles = {
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-};
-
-const useStyles = createStyles(({ token }) => ({
-  container: {
-    border: `1px dashed ${token.colorBorder}`,
-    padding: '4px',
-    height: '150px',
-    overflow: 'auto',
-    width: '120px',
-  },
-  cardContainer: {
-    border: '1px solid #ccc',
-    display: 'flex',
-    marginBottom: '4px',
-    padding: '4px',
-    fontSize: '12px',
-  },
-  itemOne: {
-    ...sharedItemStyles,
-    background: token.red,
-  },
-  itemTwo: {
-    ...sharedItemStyles,
-    background: token.orange,
-  },
-  itemThree: {
-    ...sharedItemStyles,
-    background: token.yellow,
-  },
-  itemFour: {
-    ...sharedItemStyles,
-    background: token.green,
-  },
-  itemFive: {
-    ...sharedItemStyles,
-    background: token.blue,
-  },
-  itemSix: {
-    ...sharedItemStyles,
-    background: token.volcano,
-  },
-  itemSeven: {
-    ...sharedItemStyles,
-    background: token.pink,
-  },
-}));
-
-const AntdStyleTokens: FC = () => {
-  const { styles } = useStyles();
-
-  return (
-    <div className={styles.container}>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <div className={styles.cardContainer} key={i}>
-          Card {i}
-          <div className={styles.itemOne} />
-          <div className={styles.itemTwo} />
-          <div className={styles.itemThree} />
-          <div className={styles.itemFour} />
-          <div className={styles.itemFive} />
-          <div className={styles.itemSix} />
-          <div className={styles.itemSeven} />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default AntdStyleTokens;
diff --git a/docs/guide/demos/benchmark/TestCase/CSSModules/index.tsx b/docs/guide/demos/benchmark/TestCase/CSSModules/index.tsx
deleted file mode 100644
index 2ece6247..00000000
--- a/docs/guide/demos/benchmark/TestCase/CSSModules/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { FC } from 'react';
-import { NUM_CARDS } from '../../const';
-
-// @ts-ignore
-import styles from './styles.module.css';
-
-const PureCss: FC = () => (
-  <div className={styles.container}>
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <div className={styles.card} key={i}>
-        Card {i}
-        <div className={styles.one} />
-        <div className={styles.two} />
-        <div className={styles.three} />
-        <div className={styles.four} />
-        <div className={styles.five} />
-        <div className={styles.six} />
-        <div className={styles.seven} />
-      </div>
-    ))}
-  </div>
-);
-
-export default PureCss;
diff --git a/docs/guide/demos/benchmark/TestCase/CSSModules/styles.module.css b/docs/guide/demos/benchmark/TestCase/CSSModules/styles.module.css
deleted file mode 100644
index 0f423708..00000000
--- a/docs/guide/demos/benchmark/TestCase/CSSModules/styles.module.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.container {
-  border: 1px dashed #ccc;
-  padding: 4px;
-  height: 150px;
-  overflow: auto;
-  width: 120px;
-}
-
-.card {
-  border: 1px solid #ccc;
-  display: flex;
-  margin-bottom: 4px;
-  padding: 4px;
-  font-size: 12px;
-}
-
-.one {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: red;
-}
-
-.two {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: orange;
-}
-
-.three {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: yellow;
-}
-.four {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: green;
-}
-
-.five {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: blue;
-}
-.six {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: violet;
-}
-.seven {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: pink;
-}
diff --git a/docs/guide/demos/benchmark/TestCase/Chakra/index.tsx b/docs/guide/demos/benchmark/TestCase/Chakra/index.tsx
deleted file mode 100644
index f6bedf43..00000000
--- a/docs/guide/demos/benchmark/TestCase/Chakra/index.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Box } from '@chakra-ui/react';
-
-import { NUM_CARDS } from '../../const';
-
-const ChakraContainer = ({ children }) => (
-  <Box border="1px dashed #ccc" padding="4px" height="150px" overflow="auto" width="120px">
-    {children}
-  </Box>
-);
-
-const ChakraCardContainer = ({ children }) => (
-  <Box border="1px solid #ccc" display="flex" marginBottom="4px" padding="4px" fontSize="12px">
-    {children}
-  </Box>
-);
-const ChakraItemOne = () => <Box width="5px" height="5px" marginLeft="5px" background="red" />;
-const ChakraItemTwo = () => <Box width="5px" height="5px" marginLeft="5px" background="orange" />;
-const ChakraItemThree = () => <Box width="5px" height="5px" marginLeft="5px" background="yellow" />;
-const ChakraItemFour = () => <Box width="5px" height="5px" marginLeft="5px" background="green" />;
-const ChakraItemFive = () => <Box width="5px" height="5px" marginLeft="5px" background="blue" />;
-const ChakraItemSix = () => <Box width="5px" height="5px" marginLeft="5px" background="violet" />;
-const ChakraItemSeven = () => <Box width="5px" height="5px" marginLeft="5px" background="pink" />;
-
-function Chakra() {
-  return (
-    <ChakraContainer>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <ChakraCardContainer key={i}>
-          Card {i}
-          <ChakraItemOne />
-          <ChakraItemTwo />
-          <ChakraItemThree />
-          <ChakraItemFour />
-          <ChakraItemFive />
-          <ChakraItemSix />
-          <ChakraItemSeven />
-        </ChakraCardContainer>
-      ))}
-    </ChakraContainer>
-  );
-}
-
-export default Chakra;
diff --git a/docs/guide/demos/benchmark/TestCase/EmotionCSS/index.tsx b/docs/guide/demos/benchmark/TestCase/EmotionCSS/index.tsx
deleted file mode 100644
index 4148f650..00000000
--- a/docs/guide/demos/benchmark/TestCase/EmotionCSS/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { css } from '@emotion/css';
-
-import { NUM_CARDS } from '../../const';
-
-const container = css`
-  border: 1px dashed #ccc;
-  padding: 4px;
-  height: 150px;
-  overflow: auto;
-  width: 120px;
-`;
-
-const card = css`
-  border: 1px solid #ccc;
-  display: flex;
-  margin-bottom: 4px;
-  padding: 4px;
-  font-size: 12px;
-`;
-
-const one = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: red;
-`;
-
-const two = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: orange;
-`;
-
-const three = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: yellow;
-`;
-
-const four = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: green;
-`;
-
-const five = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: blue;
-`;
-
-const six = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: violet;
-`;
-
-const seven = css`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: pink;
-`;
-
-const EmotionCSS = () => (
-  <div className={container}>
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <div className={card} key={i}>
-        Card {i}
-        <div className={one} />
-        <div className={two} />
-        <div className={three} />
-        <div className={four} />
-        <div className={five} />
-        <div className={six} />
-        <div className={seven} />
-      </div>
-    ))}
-  </div>
-);
-
-export default EmotionCSS;
diff --git a/docs/guide/demos/benchmark/TestCase/EmotionReact/index.tsx b/docs/guide/demos/benchmark/TestCase/EmotionReact/index.tsx
deleted file mode 100644
index 811d1f66..00000000
--- a/docs/guide/demos/benchmark/TestCase/EmotionReact/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-/** @jsxImportSource @emotion/react */
-import { css } from '@emotion/react';
-
-import { NUM_CARDS } from '../../const';
-
-const EmotionReactCSS = () => (
-  <div
-    css={css`
-      border: 1px dashed #ccc;
-      padding: 4px;
-      height: 150px;
-      overflow: auto;
-      width: 120px;
-    `}
-  >
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <div
-        css={css`
-          border: 1px solid #ccc;
-          display: flex;
-          margin-bottom: 4px;
-          padding: 4px;
-          font-size: 12px;
-        `}
-        key={i}
-      >
-        Card {i}
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: red;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: orange;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: yellow;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: green;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: blue;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: violet;
-          `}
-        />
-        <div
-          css={css`
-            width: 5px;
-            height: 5px;
-            margin-left: 5px;
-            background: pink;
-          `}
-        />
-      </div>
-    ))}
-  </div>
-);
-
-export default EmotionReactCSS;
diff --git a/docs/guide/demos/benchmark/TestCase/EmotionStyled/index.tsx b/docs/guide/demos/benchmark/TestCase/EmotionStyled/index.tsx
deleted file mode 100644
index ddff280f..00000000
--- a/docs/guide/demos/benchmark/TestCase/EmotionStyled/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import styled from '@emotion/styled';
-
-import { NUM_CARDS } from '../../const';
-
-const EmotionStyledContainer = styled.div`
-  border: 1px dashed #ccc;
-  padding: 4px;
-  height: 150px;
-  overflow: auto;
-  width: 120px;
-`;
-
-const EmotionStyledCardContainer = styled.div`
-  border: 1px solid #ccc;
-  display: flex;
-  margin-bottom: 4px;
-  padding: 4px;
-  font-size: 12px;
-`;
-
-const EmotionStyledItemOne = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: red;
-`;
-
-const EmotionStyledItemTwo = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: orange;
-`;
-
-const EmotionStyledItemThree = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: yellow;
-`;
-
-const EmotionStyledItemFour = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: green;
-`;
-
-const EmotionStyledItemFive = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: blue;
-`;
-
-const EmotionStyledItemSix = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: violet;
-`;
-
-const EmotionStyledItemSeven = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: pink;
-`;
-
-function EmotionStyledTable(props) {
-  return (
-    <EmotionStyledContainer>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <EmotionStyledCardContainer key={i}>
-          Card {i}
-          <EmotionStyledItemOne />
-          <EmotionStyledItemTwo />
-          <EmotionStyledItemThree />
-          <EmotionStyledItemFour />
-          <EmotionStyledItemFive />
-          <EmotionStyledItemSix />
-          <EmotionStyledItemSeven />
-        </EmotionStyledCardContainer>
-      ))}
-    </EmotionStyledContainer>
-  );
-}
-
-export default EmotionStyledTable;
diff --git a/docs/guide/demos/benchmark/TestCase/MuiBox/index.tsx b/docs/guide/demos/benchmark/TestCase/MuiBox/index.tsx
deleted file mode 100644
index 91229cea..00000000
--- a/docs/guide/demos/benchmark/TestCase/MuiBox/index.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Box } from '@material-ui/core';
-
-import { FC, PropsWithChildren } from 'react';
-import { NUM_CARDS } from '../../const';
-
-const MuiBoxContainer: FC<PropsWithChildren> = ({ children }) => (
-  <Box border="1px dashed #ccc" padding="4px" height="150px" overflow="auto" width="120px">
-    {children}
-  </Box>
-);
-
-const MuiBoxCardContainer: FC<PropsWithChildren> = ({ children }) => (
-  <Box border="1px solid #ccc" display="flex" marginBottom="4px" padding="4px" fontSize="12px">
-    {children}
-  </Box>
-);
-const MuiBoxItemOne = () => <Box width="5px" height="5px" ml="5px" bgcolor="red" />;
-const MuiBoxItemTwo = () => <Box width="5px" height="5px" ml="5px" bgcolor="orange" />;
-const MuiBoxItemThree = () => <Box width="5px" height="5px" ml="5px" bgcolor="yellow" />;
-const MuiBoxItemFour = () => <Box width="5px" height="5px" ml="5px" bgcolor="green" />;
-const MuiBoxItemFive = () => <Box width="5px" height="5px" ml="5px" bgcolor="blue" />;
-const MuiBoxItemSix = () => <Box width="5px" height="5px" ml="5px" bgcolor="violet" />;
-const MuiBoxItemSeven = () => <Box width="5px" height="5px" ml="5px" bgcolor="pink" />;
-
-const MuiBox: FC = () => (
-  <MuiBoxContainer>
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <MuiBoxCardContainer key={i}>
-        Card {i}
-        <MuiBoxItemOne />
-        <MuiBoxItemTwo />
-        <MuiBoxItemThree />
-        <MuiBoxItemFour />
-        <MuiBoxItemFive />
-        <MuiBoxItemSix />
-        <MuiBoxItemSeven />
-      </MuiBoxCardContainer>
-    ))}
-  </MuiBoxContainer>
-);
-
-export default MuiBox;
diff --git a/docs/guide/demos/benchmark/TestCase/MuiStatic/index.tsx b/docs/guide/demos/benchmark/TestCase/MuiStatic/index.tsx
deleted file mode 100644
index 5f257558..00000000
--- a/docs/guide/demos/benchmark/TestCase/MuiStatic/index.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { makeStyles } from '@material-ui/core';
-
-import { NUM_CARDS } from '../../const';
-
-const sharedItemStyles = {
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-};
-
-const useStaticStyles = makeStyles({
-  container: {
-    border: '1px dashed #ccc',
-    padding: '4px',
-    height: '150px',
-    overflow: 'auto',
-    width: '120px',
-  },
-  cardContainer: {
-    border: '1px solid #ccc',
-    display: 'flex',
-    marginBottom: '4px',
-    padding: '4px',
-    fontSize: '12px',
-  },
-  itemOne: {
-    ...sharedItemStyles,
-    background: 'red',
-  },
-  itemTwo: {
-    ...sharedItemStyles,
-    background: 'orange',
-  },
-  itemThree: {
-    ...sharedItemStyles,
-    background: 'yellow',
-  },
-  itemFour: {
-    ...sharedItemStyles,
-    background: 'green',
-  },
-  itemFive: {
-    ...sharedItemStyles,
-    background: 'blue',
-  },
-  itemSix: {
-    ...sharedItemStyles,
-    background: 'violet',
-  },
-  itemSeven: {
-    ...sharedItemStyles,
-    background: 'pink',
-  },
-});
-
-function MuiStaticTable(props) {
-  const classes = useStaticStyles();
-  return (
-    <div className={classes.container}>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <div className={classes.cardContainer} key={i}>
-          Card {i}
-          <div className={classes.itemOne} />
-          <div className={classes.itemTwo} />
-          <div className={classes.itemThree} />
-          <div className={classes.itemFour} />
-          <div className={classes.itemFive} />
-          <div className={classes.itemSix} />
-          <div className={classes.itemSeven} />
-        </div>
-      ))}
-    </div>
-  );
-}
-export default MuiStaticTable;
diff --git a/docs/guide/demos/benchmark/TestCase/MuiStyled/index.tsx b/docs/guide/demos/benchmark/TestCase/MuiStyled/index.tsx
deleted file mode 100644
index 62d04390..00000000
--- a/docs/guide/demos/benchmark/TestCase/MuiStyled/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { styled } from '@material-ui/core';
-
-import { NUM_CARDS } from '../../const';
-
-const StyledContainer = styled('div')({
-  border: '1px dashed #ccc',
-  padding: '4px',
-  height: '150px',
-  overflow: 'auto',
-  width: '120px',
-});
-
-const StyledCardContainer = styled('div')({
-  border: '1px solid #ccc',
-  display: 'flex',
-  marginBottom: '4px',
-  padding: '4px',
-  fontSize: '12px',
-});
-
-const StyledItemOne = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'red',
-});
-
-const StyledItemTwo = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'orange',
-});
-
-const StyledItemThree = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'yellow',
-});
-
-const StyledItemFour = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'green',
-});
-
-const StyledItemFive = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'blue',
-});
-
-const StyledItemSix = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'violet',
-});
-
-const StyledItemSeven = styled('div')({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'pink',
-});
-
-function MuiStyledTable(props) {
-  return (
-    <StyledContainer>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <StyledCardContainer key={i}>
-          Card {i}
-          <StyledItemOne />
-          <StyledItemTwo />
-          <StyledItemThree />
-          <StyledItemFour />
-          <StyledItemFive />
-          <StyledItemSix />
-          <StyledItemSeven />
-        </StyledCardContainer>
-      ))}
-    </StyledContainer>
-  );
-}
-
-export default MuiStyledTable;
diff --git a/docs/guide/demos/benchmark/TestCase/MuiStyledTheme/index.tsx b/docs/guide/demos/benchmark/TestCase/MuiStyledTheme/index.tsx
deleted file mode 100644
index a394e65d..00000000
--- a/docs/guide/demos/benchmark/TestCase/MuiStyledTheme/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { styled } from '@material-ui/core';
-
-import { NUM_CARDS } from '../../const';
-
-const StyledThemeContainer = styled('div')(({ theme }) => ({
-  border: '1px dashed #ccc',
-  padding: '4px',
-  height: '150px',
-  overflow: 'auto',
-  width: '120px',
-}));
-
-const StyledThemeCardContainer = styled('div')(({ theme }) => ({
-  border: '1px solid #ccc',
-  display: 'flex',
-  marginBottom: '4px',
-  padding: '4px',
-  fontSize: '12px',
-}));
-
-const StyledThemeItemOne = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'red',
-}));
-
-const StyledThemeItemTwo = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'orange',
-}));
-
-const StyledThemeItemThree = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'yellow',
-}));
-
-const StyledThemeItemFour = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'green',
-}));
-
-const StyledThemeItemFive = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'blue',
-}));
-
-const StyledThemeItemSix = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'violet',
-}));
-
-const StyledThemeItemSeven = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'pink',
-}));
-
-const MuiStyledThemeTable = () => (
-  <StyledThemeContainer>
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <StyledThemeCardContainer key={i}>
-        Card {i}
-        <StyledThemeItemOne />
-        <StyledThemeItemTwo />
-        <StyledThemeItemThree />
-        <StyledThemeItemFour />
-        <StyledThemeItemFive />
-        <StyledThemeItemSix />
-        <StyledThemeItemSeven />
-      </StyledThemeCardContainer>
-    ))}
-  </StyledThemeContainer>
-);
-
-export default MuiStyledThemeTable;
diff --git a/docs/guide/demos/benchmark/TestCase/PureCSS/index.tsx b/docs/guide/demos/benchmark/TestCase/PureCSS/index.tsx
deleted file mode 100644
index f5486a5d..00000000
--- a/docs/guide/demos/benchmark/TestCase/PureCSS/index.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { FC } from 'react';
-import { NUM_CARDS } from '../../const';
-
-import './styles.css';
-
-const PureCss: FC = () => (
-  <div className="container">
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <div className="card-container" key={i}>
-        Card {i}
-        <div className="item-one" />
-        <div className="item-two" />
-        <div className="item-three" />
-        <div className="item-four" />
-        <div className="item-five" />
-        <div className="item-six" />
-        <div className="item-seven" />
-      </div>
-    ))}
-  </div>
-);
-
-export default PureCss;
diff --git a/docs/guide/demos/benchmark/TestCase/PureCSS/styles.css b/docs/guide/demos/benchmark/TestCase/PureCSS/styles.css
deleted file mode 100644
index 01b69df4..00000000
--- a/docs/guide/demos/benchmark/TestCase/PureCSS/styles.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.container {
-  border: 1px dashed #ccc;
-  padding: 4px;
-  height: 150px;
-  overflow: auto;
-  width: 120px;
-}
-
-.card-container {
-  border: 1px solid #ccc;
-  display: flex;
-  margin-bottom: 4px;
-  padding: 4px;
-  font-size: 12px;
-}
-
-.item-one {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: red;
-}
-
-.item-two {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: orange;
-}
-
-.item-three {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: yellow;
-}
-.item-four {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: green;
-}
-
-.item-five {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: blue;
-}
-.item-six {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: violet;
-}
-.item-seven {
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: pink;
-}
diff --git a/docs/guide/demos/benchmark/TestCase/StyledComponents/index.tsx b/docs/guide/demos/benchmark/TestCase/StyledComponents/index.tsx
deleted file mode 100644
index 00f69dd1..00000000
--- a/docs/guide/demos/benchmark/TestCase/StyledComponents/index.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { styled } from 'styled-components';
-
-import { NUM_CARDS } from '../../const';
-
-const EmotionStyledContainer = styled.div`
-  border: 1px dashed #ccc;
-  padding: 4px;
-  height: 150px;
-  overflow: auto;
-  width: 120px;
-`;
-
-const EmotionStyledCardContainer = styled.div`
-  border: 1px solid #ccc;
-  display: flex;
-  margin-bottom: 4px;
-  padding: 4px;
-  font-size: 12px;
-`;
-
-const EmotionStyledItemOne = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: red;
-`;
-
-const EmotionStyledItemTwo = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: orange;
-`;
-
-const EmotionStyledItemThree = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: yellow;
-`;
-
-const EmotionStyledItemFour = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: green;
-`;
-
-const EmotionStyledItemFive = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: blue;
-`;
-
-const EmotionStyledItemSix = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: violet;
-`;
-
-const EmotionStyledItemSeven = styled.div`
-  width: 5px;
-  height: 5px;
-  margin-left: 5px;
-  background: pink;
-`;
-
-function StyledComponentTable() {
-  return (
-    <EmotionStyledContainer>
-      {new Array(NUM_CARDS).fill(0).map((_, i) => (
-        <EmotionStyledCardContainer key={i}>
-          Card {i}
-          <EmotionStyledItemOne />
-          <EmotionStyledItemTwo />
-          <EmotionStyledItemThree />
-          <EmotionStyledItemFour />
-          <EmotionStyledItemFive />
-          <EmotionStyledItemSix />
-          <EmotionStyledItemSeven />
-        </EmotionStyledCardContainer>
-      ))}
-    </EmotionStyledContainer>
-  );
-}
-
-export default StyledComponentTable;
diff --git a/docs/guide/demos/benchmark/TestCase/StyledComponentsTheme/index.tsx b/docs/guide/demos/benchmark/TestCase/StyledComponentsTheme/index.tsx
deleted file mode 100644
index 2a7c1ffe..00000000
--- a/docs/guide/demos/benchmark/TestCase/StyledComponentsTheme/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { styled } from 'styled-components';
-
-import { NUM_CARDS } from '../../const';
-
-const StyledThemeContainer = styled('div')(({ theme }) => ({
-  border: '1px dashed #ccc',
-  padding: '4px',
-  height: '150px',
-  overflow: 'auto',
-  width: '120px',
-}));
-
-const StyledThemeCardContainer = styled('div')(({ theme }) => ({
-  border: '1px solid #ccc',
-  display: 'flex',
-  marginBottom: '4px',
-  padding: '4px',
-  fontSize: '12px',
-}));
-
-const StyledThemeItemOne = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'red',
-}));
-
-const StyledThemeItemTwo = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'orange',
-}));
-
-const StyledThemeItemThree = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'yellow',
-}));
-
-const StyledThemeItemFour = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'green',
-}));
-
-const StyledThemeItemFive = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'blue',
-}));
-
-const StyledThemeItemSix = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'violet',
-}));
-
-const StyledThemeItemSeven = styled('div')(({ theme }) => ({
-  width: '5px',
-  height: '5px',
-  marginLeft: '5px',
-  background: 'pink',
-}));
-
-const StyledComponentTheme = () => (
-  <StyledThemeContainer>
-    {new Array(NUM_CARDS).fill(0).map((_, i) => (
-      <StyledThemeCardContainer key={i}>
-        Card {i}
-        <StyledThemeItemOne />
-        <StyledThemeItemTwo />
-        <StyledThemeItemThree />
-        <StyledThemeItemFour />
-        <StyledThemeItemFive />
-        <StyledThemeItemSix />
-        <StyledThemeItemSeven />
-      </StyledThemeCardContainer>
-    ))}
-  </StyledThemeContainer>
-);
-
-export default StyledComponentTheme;
diff --git a/docs/guide/demos/benchmark/TestCase/index.ts b/docs/guide/demos/benchmark/TestCase/index.ts
deleted file mode 100644
index 6efabeb2..00000000
--- a/docs/guide/demos/benchmark/TestCase/index.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { FC } from 'react';
-
-import AntdStyleFunc from './AntdStyleFunc';
-import AntdStyleProps from './AntdStyleProps';
-import AntdStyleStatic from './AntdStyleStatic';
-
-import EmotionCSS from './EmotionCSS';
-import EmotionReact from './EmotionReact';
-import EmotionStyled from './EmotionStyled';
-
-import MuiBox from './MuiBox';
-import MUIStatic from './MuiStatic';
-import MuiStyled from './MuiStyled';
-import MuiStyledTheme from './MuiStyledTheme';
-
-import CSSModules from './CSSModules';
-import PureCss from './PureCSS';
-
-import AntdStyleTokens from './AntdStyleTokens';
-import StyledComponents from './StyledComponents';
-import StyledComponentsTheme from './StyledComponentsTheme';
-
-interface Case {
-  name: string;
-  path?: string;
-  component: FC;
-}
-interface Usage {
-  name: string;
-  cases: Case[];
-}
-
-export const demoPathPrefix =
-  'https://github.com/ant-design/antd-style/tree/master/docs/guide/demos/benchmark/TestCase';
-
-export const TestCases: Usage[] = [
-  {
-    name: 'Pure CSS',
-    cases: [
-      { name: 'Pure CSS', component: PureCss, path: '/PureCSS/index.tsx' },
-      { name: 'CSS Modules', component: CSSModules, path: '/CSSModules/index.tsx' },
-    ],
-  },
-  {
-    name: 'antd-style',
-    cases: [
-      {
-        name: 'createStyles Static',
-        component: AntdStyleStatic,
-        path: '/AntdStyleStatic/index.tsx',
-      },
-      { name: 'createStyles Function', component: AntdStyleFunc, path: '/AntdStyleFunc/index.tsx' },
-      {
-        name: 'createStyles Tokens',
-        component: AntdStyleTokens,
-        path: '/AntdStyleTokens/index.tsx',
-      },
-      { name: 'createStyles Props', component: AntdStyleProps, path: '/AntdStyleProps/index.tsx' },
-    ],
-  },
-  {
-    name: 'Emotion',
-    cases: [
-      { name: 'Emotion CSS', component: EmotionCSS, path: '/EmotionCSS/index.tsx' },
-      { name: 'Emotion Styled', component: EmotionStyled, path: '/EmotionCSS/index.tsx' },
-      { name: 'Emotion React CSS', component: EmotionReact, path: '/EmotionReact/index.tsx' },
-    ],
-  },
-  {
-    name: 'StyledComponents',
-    cases: [
-      {
-        name: 'StyledComponents',
-        component: StyledComponents,
-        path: '/StyledComponents/index.tsx',
-      },
-      {
-        name: 'StyledComponentsTheme',
-        component: StyledComponentsTheme,
-        path: '/StyledComponentsTheme/index.tsx',
-      },
-    ],
-  },
-  {
-    name: 'Material UI V4',
-    cases: [
-      { name: 'MUI Static', component: MUIStatic, path: '/MuiStatic/index.tsx' },
-      { name: 'MUI Styled', component: MuiStyled, path: '/MuiStyled/index.tsx' },
-      { name: 'MUI Box', component: MuiBox, path: '/MuiBox/index.tsx' },
-      { name: 'MuiStyledTheme', component: MuiStyledTheme, path: '/MuiStyledTheme/index.tsx' },
-    ],
-  },
-];
diff --git a/docs/guide/demos/benchmark/components/TestResult.tsx b/docs/guide/demos/benchmark/components/TestResult.tsx
deleted file mode 100644
index 377804f9..00000000
--- a/docs/guide/demos/benchmark/components/TestResult.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Center, Flexbox } from 'react-layout-kit';
-import { TestCases } from '../TestCase';
-import { TestSuit } from './TestSuit';
-
-export const TestResult = () => {
-  return (
-    <Flexbox gap={24}>
-      {TestCases.map((item) => (
-        <Flexbox horizontal gap={24}>
-          <Center width={100}>{item.name}</Center>
-          <Flexbox horizontal gap={8}>
-            {item.cases.map((testCase) => (
-              <TestSuit
-                key={testCase.name}
-                name={testCase.name}
-                path={testCase.path}
-                Component={testCase.component}
-              />
-            ))}
-          </Flexbox>
-        </Flexbox>
-      ))}
-    </Flexbox>
-  );
-};
diff --git a/docs/guide/demos/benchmark/components/TestSuit.tsx b/docs/guide/demos/benchmark/components/TestSuit.tsx
deleted file mode 100644
index e941b305..00000000
--- a/docs/guide/demos/benchmark/components/TestSuit.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Card } from 'antd';
-import { createStyles } from 'antd-style';
-import { FC, Profiler, useCallback, useState } from 'react';
-
-import { demoPathPrefix } from '../TestCase';
-
-let max = 0;
-
-const useStyles = createStyles(({ css, token }) => ({
-  time: css`
-    color: ${token.colorTextTertiary};
-  `,
-  error: css`
-    color: ${token.colorError};
-  `,
-  warning: css`
-    color: ${token.colorWarning};
-  `,
-  title: css`
-    color: ${token.colorText};
-    display: flex;
-    gap: 8px;
-  `,
-}));
-
-const CodeOutlined = () => (
-  <svg viewBox="0 0 1024 1024" width={12} fill={'currentColor'}>
-    <path d="M853.333 469.333A42.667 42.667 0 0 0 810.667 512v256A42.667 42.667 0 0 1 768 810.667H256A42.667 42.667 0 0 1 213.333 768V256A42.667 42.667 0 0 1 256 213.333h256A42.667 42.667 0 0 0 512 128H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128V512a42.667 42.667 0 0 0-42.667-42.667z"></path>
-    <path d="M682.667 213.333h67.413L481.707 481.28a42.667 42.667 0 0 0 0 60.587 42.667 42.667 0 0 0 60.586 0L810.667 273.92v67.413A42.667 42.667 0 0 0 853.333 384 42.667 42.667 0 0 0 896 341.333V170.667A42.667 42.667 0 0 0 853.333 128H682.667a42.667 42.667 0 0 0 0 85.333z"></path>
-  </svg>
-);
-
-interface TestSuitProps {
-  name: string;
-  Component: FC;
-  path?: string;
-}
-
-export const TestSuit: FC<TestSuitProps> = ({ Component, name, path }) => {
-  const { styles, cx } = useStyles();
-
-  const [perf, setPerf] = useState<number | null>(null);
-
-  const onRender = useCallback(
-    (
-      id: string, // the "id" prop of the Profiler tree that has just committed
-      phase: string, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
-      actualDuration: number, // time spent rendering the committed update
-      baseDuration: number, // estimated time to render the entire subtree without memoization
-      startTime: number, // when React began rendering this update
-      commitTime: number, // when React committed this update
-      interactions: any, // the Set of interactions belonging to this update
-    ) => {
-      if (phase === 'mount') {
-        if (baseDuration > max) {
-          max = baseDuration;
-        }
-        setPerf(baseDuration);
-      }
-    },
-    [],
-  );
-
-  const time = perf ? Math.round(perf * 100) / 100 : 0;
-  return (
-    <Card
-      title={
-        <a href={demoPathPrefix + path} target="_blank" className={styles.title}>
-          {name} <CodeOutlined />
-        </a>
-      }
-      style={{ width: 300 }}
-      extra={
-        <div className={cx(time >= 300 ? styles.error : time >= 50 ? styles.warning : styles.time)}>
-          {time}ms
-        </div>
-      }
-      size={'small'}
-    >
-      <Profiler id={name} onRender={onRender}>
-        <Component />
-      </Profiler>
-    </Card>
-  );
-};
diff --git a/docs/guide/demos/benchmark/const.ts b/docs/guide/demos/benchmark/const.ts
deleted file mode 100644
index 510b3cb6..00000000
--- a/docs/guide/demos/benchmark/const.ts
+++ /dev/null
@@ -1 +0,0 @@
-export let NUM_CARDS = 100;
diff --git a/docs/guide/demos/benchmark/index.tsx b/docs/guide/demos/benchmark/index.tsx
index 3e57d5f4..1c07589f 100644
--- a/docs/guide/demos/benchmark/index.tsx
+++ b/docs/guide/demos/benchmark/index.tsx
@@ -1,66 +1,9 @@
 /**
  * iframe: 600
  */
-import { PlayCircleOutlined } from '@ant-design/icons';
-import { App, Button, Card, Descriptions, Divider } from 'antd';
-import { createStyles } from 'antd-style';
-import { useCallback, useState } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import { TestResult } from './components/TestResult';
-import { NUM_CARDS } from './const';
-
-const useStyles = createStyles(({ css, token }) => {
-  return {
-    container: css`
-      padding: 24px;
-      min-height: 100vh;
-      background: ${token.colorBgLayout};
-    `,
-  };
-});
-
-export default () => {
-  const { styles } = useStyles();
-  const [runCount, setRunCount] = useState(0);
-
-  const onClickRun = useCallback(() => {
-    let nextRunCount = runCount + 1;
-    setRunCount(-1);
-    setTimeout(() => {
-      setRunCount(nextRunCount);
-    }, 100);
-  }, [runCount]);
-
-  return (
-    <App className={styles.container}>
-      <Card
-        title={'单次渲染性能对比'}
-        extra={
-          <Button
-            type={'primary'}
-            icon={<PlayCircleOutlined />}
-            onClick={onClickRun}
-            loading={runCount === -1}
-          >
-            {runCount > 0 ? '重新运行' : '运行测试'}
-          </Button>
-        }
-      >
-        <Descriptions layout={'vertical'}>
-          <Descriptions.Item label={'测试基准'}>渲染 {NUM_CARDS} 张卡片</Descriptions.Item>
-          <Descriptions.Item label={'统计指标'}>
-            使用 React 的 &lt;Profiler /&gt; 组件统计渲染完成时间
-          </Descriptions.Item>
-        </Descriptions>
-      </Card>
-
-      {runCount > 0 && (
-        <Flexbox style={{ marginTop: 12 }}>
-          <Divider>测试结果</Divider>
-          <TestResult key={runCount} />
-        </Flexbox>
-      )}
-    </App>
-  );
-};
+export default () => (
+  <iframe
+    src={'https://cssinjs-benchmark.arvinx.app/'}
+    style={{ border: 'none', width: '100%', height: '100vh' }}
+  />
+);
diff --git a/docs/guide/performance-comparsion.md b/docs/guide/performance-comparsion.md
index 75d64da8..90c64d78 100644
--- a/docs/guide/performance-comparsion.md
+++ b/docs/guide/performance-comparsion.md
@@ -13,7 +13,7 @@ import { FullscreenOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
 
 export default () => (
-  <a href="~demos/docs-guide-performance-comparsion-demo-benchmark" target={'_blank'}>
+  <a href="https://cssinjs-benchmark.arvinx.app/" target={'_blank'}>
     <Button type={'primary'} icon={<FullscreenOutlined />}>
       点击全屏查看
     </Button>
diff --git a/package.json b/package.json
index 25e1bb0b..f49bcf18 100644
--- a/package.json
+++ b/package.json
@@ -80,14 +80,10 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^5",
-    "@chakra-ui/react": "latest",
     "@commitlint/cli": "^17",
-    "@emotion/babel-plugin": "^11",
     "@emotion/jest": "^11",
-    "@emotion/react": "^11",
     "@emotion/styled": "^11",
     "@floating-ui/react": "^0.24",
-    "@material-ui/core": "^4",
     "@react-three/fiber": "^8",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^13",