Merge pull request #11 from arvinxx/feat/emotion-instance

独立 Emotion Instance

.dumi/theme/components/Provider/customTheme.ts

@@ -1,5 +1,6 @@
 import type { GetAntdTheme, GetCustomToken, ThemeConfig } from 'antd-style';
 
+import { GetCustomStylish } from 'antd-style';
 import { darkAlgorithm, lightAlgorithm } from './algorithms';
 
 export const getAntdTheme: GetAntdTheme = (appearance) => {
@@ -21,7 +22,7 @@ export const getAntdTheme: GetAntdTheme = (appearance) => {
   return theme;
 };
 
-interface DumiThemeToken {
+interface SiteToken {
   headerHeight: number;
   sidebarWidth: number;
   tocWidth: number;
@@ -30,10 +31,25 @@ interface DumiThemeToken {
    */
   contentMaxWidth: number;
 }
-declare module 'antd-style' {
-  interface CustomToken extends DumiThemeToken {}
-}
 
-export const getCustomToken: GetCustomToken<DumiThemeToken> = () => {
+export const getCustomToken: GetCustomToken<SiteToken> = () => {
   return { headerHeight: 64, sidebarWidth: 240, tocWidth: 176, contentMaxWidth: 1152 };
 };
+
+declare module 'antd-style' {
+  interface CustomToken extends SiteToken {}
+  interface CustomStylish extends SiteStylish {}
+}
+
+export interface SiteStylish {
+  clickableText: string;
+}
+
+export const getCustomStylish: GetCustomStylish<SiteStylish> = ({ css, token }) => ({
+  clickableText: css`
+    color: ${token.colorTextSecondary};
+    &:hover {
+      color: ${token.colorText};
+    }
+  `,
+});

.dumi/theme/components/Provider/index.tsx

@@ -3,13 +3,18 @@ import { ThemeProvider } from 'antd-style';
 import { PropsWithChildren } from 'react';
 
 import { useThemeStore } from '../../store/useThemeStore';
-import { getAntdTheme, getCustomToken } from './customTheme';
+import { getAntdTheme, getCustomStylish, getCustomToken } from './customTheme';
 
 export default ({ children }: PropsWithChildren) => {
   const themeMode = useThemeStore((s) => s.themeMode);
 
   return (
-    <ThemeProvider themeMode={themeMode} theme={getAntdTheme} customToken={getCustomToken}>
+    <ThemeProvider
+      themeMode={themeMode}
+      theme={getAntdTheme}
+      customStylish={getCustomStylish}
+      customToken={getCustomToken}
+    >
       <App>{children}</App>
     </ThemeProvider>
   );

src/containers/ThemeProvider/TokenContainer.tsx

@@ -1,6 +1,7 @@
 import { ThemeProvider as Provider } from '@emotion/react';
 import { ReactElement, useMemo } from 'react';
 
+import { css, cx } from '@/functions';
 import { useThemeMode } from '@/hooks';
 import { useAntdTheme } from '@/hooks/useAntdTheme';
 import type { ThemeProviderProps } from './type';
@@ -38,6 +39,8 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
         stylish: antdStylish,
         appearance,
         isDarkMode,
+        css,
+        cx,
       });
     }
     return stylishOrGetStylish;

src/functions/createStyles.ts

@@ -1,6 +1,5 @@
-import { css, cx, type CSSObject } from '@emotion/css';
-import type { Emotion } from '@emotion/css/create-instance';
 import { useMemo } from 'react';
+import { css, cx, type CSSObject, type Emotion } from './css';
 
 import { useTheme } from '@/hooks';
 import {

src/functions/css.ts

@@ -0,0 +1,33 @@
+import createEmotion from '@emotion/css/create-instance';
+
+const {
+  css,
+  cx,
+  injectGlobal,
+  keyframes,
+  sheet,
+  flush,
+  merge,
+  hydrate,
+  getRegisteredStyles,
+  cache,
+} = createEmotion({
+  key: 'ant-css',
+  speedy: false,
+});
+
+export { type CSSObject } from '@emotion/css';
+export type { Emotion } from '@emotion/css/create-instance';
+export {
+  css,
+  cx,
+  injectGlobal,
+  keyframes,
+  sheet,
+  flush,
+  merge,
+  hydrate,
+  getRegisteredStyles,
+  createEmotion,
+  cache,
+};

src/functions/index.ts

@@ -1,6 +1,6 @@
-export { css, cx, injectGlobal, keyframes, sheet } from '@emotion/css';
 export { withTheme } from '@emotion/react';
 export * from './createGlobalStyle';
 export * from './createStyish';
 export * from './createStyles';
+export * from './css';
 export * from './styled';

src/hooks/useTheme.ts

@@ -1,7 +1,7 @@
 import { Theme } from '@/types';
 import { useTheme as _useTheme } from '@emotion/react';
-
 import { useMemo } from 'react';
+
 import { useAntdTheme } from './useAntdTheme';
 import { useThemeMode } from './useThemeMode';
 

src/types/theme.ts

@@ -14,6 +14,7 @@ export interface ThemeContextState {
   isDarkMode: boolean;
 }
 
+export type AppearanceState = Omit<ThemeContextState, 'themeMode'>;
 export type AntdToken = AliasToken;
 
 /**
@@ -25,18 +26,18 @@ export interface AntdStylish {}
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface CustomToken {}
 
-export type GetCustomToken<T> = (theme: {
+export interface CustomTokenParams extends AppearanceState {
   token: AntdToken;
-  appearance: ThemeAppearance;
-  isDarkMode: boolean;
-}) => T;
+}
+
+export type GetCustomToken<T> = (theme: CustomTokenParams) => T;
 
-export type GetCustomStylish<S> = (theme: {
+export interface CustomStylishParams extends CommonStyleUtils, AppearanceState {
   token: FullToken;
   stylish: AntdStylish;
-  appearance: ThemeAppearance;
-  isDarkMode: boolean;
-}) => S;
+}
+
+export type GetCustomStylish<S> = (theme: CustomStylishParams) => S;
 
 export type GetAntdThemeConfig = (appearance: ThemeAppearance) => ThemeConfig | undefined;
 

tests/functions/__snapshots__/createStyish.test.tsx.snap

@@ -2,8 +2,8 @@
 
 exports[`createStylish 默认快照 1`] = `
 {
-  "containerBgHover": "css-5g3hbo",
-  "containerBgL2": "css-1ho7cfh",
-  "defaultButton": "css-1d5q7n7",
+  "containerBgHover": "ant-css-5g3hbo",
+  "containerBgL2": "ant-css-1ho7cfh",
+  "defaultButton": "ant-css-1d5q7n7",
 }
 `;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "include": ["src", ".dumi/**/*", ".dumirc.ts", "*.ts"],
+  "exclude": [".dumi/theme"],
   "compilerOptions": {
     "strict": true,
     "declaration": true,