♻️ fix: 将 styled-components 替换为 @emotion/styled， 减少产物体积

example/.dumirc.ts

@@ -58,7 +58,7 @@ export default defineConfig({
   alias: {
     'dumi-theme-antd-style': path.join(__dirname, '../src'),
   },
-
+  extraBabelPlugins: ['@emotion'],
   styles: [
     `html, body { background: transparent;  }
 

package.json

@@ -56,6 +56,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7",
+    "@emotion/styled": "^11",
     "@floating-ui/react": "^0.17",
     "animated-scroll-to": "^2",
     "antd-style": "alpha",
@@ -68,13 +69,14 @@
     "react-layout-kit": "^1",
     "react-syntax-highlighter": "^15",
     "shiki-es": "^0.2",
-    "styled-components": "beta",
     "use-merge-value": "^1",
     "zustand": "^4"
   },
   "devDependencies": {
     "@ant-design/icons": "^5",
     "@commitlint/cli": "^17",
+    "@emotion/babel-plugin": "^11",
+    "@emotion/react": "^11",
     "@emotion/styled": "^11.10.5",
     "@testing-library/jest-dom": "^5",
     "@testing-library/react": "^13",

src/components/ApiHeader/index.tsx

@@ -11,7 +11,7 @@ import NpmFilled from './NpmFilled';
 import PackagePhobia from './PackagePhobia';
 import Unpkg from './Unpkg';
 
-import { Label, useStyles } from './style';
+import { useStyles } from './style';
 
 interface ApiTitleProps {
   title: string;
@@ -93,9 +93,13 @@ export const ApiHeader: FC<ApiTitleProps> = memo(
         )}
         <Flexbox style={{ marginTop: 16 }} gap={mobile ? 16 : 24}>
           <Flexbox horizontal={!mobile} gap={mobile ? 12 : 0}>
-            <Label type={'secondary'} style={{ display: 'flex', alignItems: 'center' }}>
+            <Typography.Text
+              className={styles.label}
+              type={'secondary'}
+              style={{ display: 'flex', alignItems: 'center' }}
+            >
               引入方法
-            </Label>
+            </Typography.Text>
             <Code>{`import { ${componentName} } from '${pkg}';`}</Code>
           </Flexbox>
           <Divider dashed style={{ margin: '2px 0' }} />

src/components/ApiHeader/style.ts

@@ -1,10 +1,4 @@
-import { Typography } from 'antd';
 import { createStyles } from 'antd-style';
-import { styled } from 'styled-components';
-
-export const Label = styled(Typography.Text)`
-  width: 80px;
-` as any;
 
 export const useStyles = createStyles(({ css, token, responsive: r, stylish }) => ({
   title: css`
@@ -14,6 +8,9 @@ export const useStyles = createStyles(({ css, token, responsive: r, stylish }) =
       font-size: 32px !important;
     }
   `,
+  label: css`
+    width: 80px;
+  `,
   desc: css`
     font-size: ${token.fontSizeLG}px;
     line-height: ${token.lineHeightLG}px;

src/components/Burger/style.ts

@@ -1,6 +1,6 @@
+import styled from '@emotion/styled';
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
-import { styled } from 'styled-components';
 
 export const FillRect = styled.div`
   background: ${(p) => rgba(p.theme.colorBgContainer, 0.8)};

src/components/NativeSelect/SelectItem/index.tsx

@@ -5,7 +5,7 @@ import { useStyles } from './style';
 interface SelectItemProps {
   value: any;
   label: any;
-  prefixCls?: string;
+  prefixCls: string;
   isSelected?: boolean;
   isActive?: boolean;
   ref?: ForwardedRef<HTMLButtonElement>;
@@ -14,7 +14,7 @@ interface SelectItemProps {
 
 const SelectItem: FC<SelectItemProps> = forwardRef(
   ({ value, label, prefixCls, isSelected, isActive, disabled, ...props }, ref) => {
-    const { styles, cx } = useStyles({ prefixCls, selected: isSelected });
+    const { styles, cx } = useStyles(prefixCls);
 
     return (
       <button

src/components/NativeSelect/index.tsx

@@ -193,6 +193,7 @@ const NativeSelect: FC<NativeSelectProps> = ({
                   {options.map((item, i) => {
                     return (
                       <SelectItem
+                        prefixCls={cls}
                         key={item.value}
                         value={item.value}
                         label={renderItem ? renderItem(item, i) : item.label}

src/components/ThemeSwitch/index.tsx

@@ -1,7 +1,7 @@
+import styled from '@emotion/styled';
 import type { ThemeMode } from 'antd-style';
 import { memo, ReactNode, type FC } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { styled } from 'styled-components';
 
 import { useThemeStore } from '../../store/useThemeStore';
 import NativeSelect from '../NativeSelect';

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src", "tests", ".dumi/**/*", "example/.dumirc.ts", "*.ts"],
+  "include": ["src", "tests", ".dumi/**/*", "typings", "example/.dumirc.ts", "*.ts"],
   "compilerOptions": {
     "strict": true,
     "declaration": true,

typings/global.d.ts

@@ -0,0 +1,6 @@
+import { Theme as AntdStyleTheme } from 'antd-style';
+
+declare module '@emotion/react' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends AntdStyleTheme {}
+}