✨ feat: support iconPrefixCls and prefixCls on createStyles

docs/api/create-styles.en-US.md

@@ -192,19 +192,25 @@ Type: `string`
 The prefix marked on the ThemeProvider. By using this parameter, you can flexibly override the antd prefix.
 
 ```ts
-const useStyles = createStyles(({ css, prefixCls }) => {
-  return {
-    primary: css`
-      .${prefixCls}-btn {
-        border: 12px;
-      }
-    `,
-  };
-});
+const useStyles = createStyles(({ css, prefixCls, iconPrefixCls }) => ({
+  button: css`
+    &.${prefixCls}-btn {
+      background: lightsteelblue;
+      border: none;
+      color: royalblue;
+    }
+
+    .${iconPrefixCls} {
+      color: darkblue;
+    }
+  `,
+}));
 ```
 
 The above style code can accurately override regardless of the value of the prefixCls wrapped by the outer ThemeProvider.
 
+<code src="../demos/api/createStyles/with-antd-cp.tsx"></code>
+
 ## ClassNameGeneratorOption
 
 The second parameter of `createStyles` can be used to control the generated className.

docs/api/create-styles.zh-CN.md

@@ -185,25 +185,31 @@ declare module 'antd-style' {
 
 判断亮暗色主题的语法糖，实现上等价于 `appearance === 'dark'`，直接使用 isDarkMode 可以降低外观的判断成本。
 
-### prefixCls
+### prefixCls 与 iconPrefixCls
 
 类型：`string`
 
-在 ThemeProvider 上标记的 prefixCls，利用该参数，可以实现灵活的 antd 前缀覆盖。
+在 ThemeProvider 上标记的 prefixCls/iconPrefixCls，利用该参数，可以实现灵活的 antd 前缀覆盖。
 
 ```ts
-const useStyles = createStyles(({ css, prefixCls }) => {
-  return {
-    primary: css`
-      .${prefixCls}-btn {
-        border: 12px;
-      }
-    `,
-  };
-});
+const useStyles = createStyles(({ css, prefixCls, iconPrefixCls }) => ({
+  button: css`
+    &.${prefixCls}-btn {
+      background: lightsteelblue;
+      border: none;
+      color: royalblue;
+    }
+
+    .${iconPrefixCls} {
+      color: darkblue;
+    }
+  `,
+}));
 ```
 
-上述样式代码，无论外层包裹的 ThemeProvider prefixCls 改成什么值，均可准确覆盖到。
+上述样式代码，无论是包裹的 `ThemeProvider` / `ConfigProvider` prefixCls 改成什么值，均可准确覆盖到。
+
+<code src="../demos/api/createStyles/with-antd-cp.tsx"></code>
 
 ## ClassNameGeneratorOption
 

docs/demos/api/createStyles/with-antd-cp.tsx

@@ -0,0 +1,32 @@
+import { SmileOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider } from 'antd';
+import { createStyles } from 'antd-style';
+
+const useStyles = createStyles(({ css, prefixCls, iconPrefixCls }) => ({
+  button: css`
+    &.${prefixCls}-btn {
+      background: lightsteelblue;
+      border: none;
+      color: royalblue;
+    }
+
+    .${iconPrefixCls} {
+      color: darkblue;
+    }
+  `,
+}));
+
+const App = () => {
+  const { styles } = useStyles();
+
+  return (
+    <Button className={styles.button} icon={<SmileOutlined />}>
+      CP Button
+    </Button>
+  );
+};
+export default () => (
+  <ConfigProvider prefixCls={'cp'} iconPrefixCls={'cpicon'}>
+    <App />
+  </ConfigProvider>
+);

package.json

@@ -96,7 +96,7 @@
     "@types/react-dom": "^18",
     "@types/testing-library__jest-dom": "^5",
     "@umijs/lint": "^4",
-    "@vitest/coverage-v8": "latest",
+    "@vitest/coverage-v8": "0.34.6",
     "antd": "^5",
     "babel-plugin-antd-style": "^1",
     "chalk": "^4",
@@ -133,7 +133,7 @@
     "ts-node": "^10",
     "typescript": "^5",
     "vite": "^4.5.0",
-    "vitest": "latest",
+    "vitest": "0.34.6",
     "zustand": "^4"
   },
   "peerDependencies": {

src/factories/createStyles/index.ts

@@ -57,7 +57,7 @@ export const createStylesFactory =
 
         // 函数场景
         if (styleOrGetStyle instanceof Function) {
-          const { stylish, appearance, isDarkMode, prefixCls, ...token } = theme;
+          const { stylish, appearance, isDarkMode, prefixCls, iconPrefixCls, ...token } = theme;
 
           // 创建响应式断点选择器的工具函数
           // @ts-ignore
@@ -73,6 +73,7 @@ export const createStylesFactory =
               appearance,
               isDarkMode,
               prefixCls,
+              iconPrefixCls,
               // 工具函数们
               cx,
               css: serializeCSS,
@@ -121,8 +122,8 @@ export const createStylesFactory =
       }, [props, theme]);
 
       return useMemo(() => {
-        const { prefixCls, ...res } = theme;
-        return { styles, cx, theme: res, prefixCls };
+        const { prefixCls, iconPrefixCls, ...res } = theme;
+        return { styles, cx, theme: res, prefixCls, iconPrefixCls };
       }, [styles, theme]);
     };
   };

src/factories/createStyles/types.ts

@@ -31,6 +31,7 @@ export interface CreateStylesUtils extends CommonStyleUtils {
    * @default ant
    */
   prefixCls: string;
+  iconPrefixCls: string;
 }
 
 /**
@@ -39,6 +40,7 @@ export interface CreateStylesUtils extends CommonStyleUtils {
 export interface ReturnStyles<T extends BaseReturnType> extends Pick<CommonStyleUtils, 'cx'> {
   styles: ReturnStyleToUse<T>;
   theme: Omit<Theme, 'prefixCls'>;
+  iconPrefixCls: string;
   prefixCls: string;
 }
 

src/factories/createThemeProvider/TokenContainer.tsx

@@ -20,7 +20,7 @@ const TokenContainer: <T, S>(props: TokenContainerProps<T, S>) => ReactElement |
   customToken: customTokenOrFn,
   defaultCustomToken: defaultCustomTokenFn,
   customStylish: stylishOrGetStylish,
-  prefixCls = 'ant',
+  prefixCls,
   StyledThemeProvider,
 }) => {
   const themeState = useThemeMode();

src/factories/createThemeProvider/index.tsx

@@ -63,6 +63,7 @@ export const createThemeProvider = (
       onThemeModeChange,
       styled,
     }) => {
+      // 从上一层的 Context 中获取上下文信息，以实现嵌套继承的效果
       const {
         prefixCls: defaultPrefixCls,
         StyledThemeContext,

src/factories/createUseTheme.ts

@@ -4,35 +4,46 @@ import { Context, useContext, useMemo } from 'react';
 import { DEFAULT_THEME_CONTEXT } from '@/functions/setupStyled';
 import { useAntdTheme } from '@/hooks/useAntdTheme';
 import { useThemeMode } from '@/hooks/useThemeMode';
+import { ConfigProvider } from 'antd';
 
 interface CreateUseThemeOptions {
   StyleEngineContext: Context<StyleEngine>;
 }
 
 export const createUseTheme = (options: CreateUseThemeOptions) => (): Theme => {
   const { StyleEngineContext } = options;
-  const { StyledThemeContext, CustomThemeContext, prefixCls } = useContext(StyleEngineContext);
+  const {
+    StyledThemeContext,
+    CustomThemeContext,
+    prefixCls: outPrefixCls,
+  } = useContext(StyleEngineContext);
 
   const antdTheme = useAntdTheme();
   const themeState = useThemeMode();
 
   const defaultCustomTheme = useContext(CustomThemeContext);
   const styledTheme = useContext(StyledThemeContext ?? DEFAULT_THEME_CONTEXT) || {};
 
+  const { iconPrefixCls, getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+
+  const antdPrefixCls = getPrefixCls();
+  const prefixCls = outPrefixCls ?? antdPrefixCls;
+
   const initTheme = useMemo<Theme>(
     () => ({
       ...antdTheme,
       ...themeState,
       ...defaultCustomTheme,
-      prefixCls: prefixCls || 'ant',
+      prefixCls,
+      iconPrefixCls,
     }),
-    [antdTheme, themeState, prefixCls, defaultCustomTheme],
+    [antdTheme, themeState, defaultCustomTheme, prefixCls, iconPrefixCls],
   );
 
   //  如果是个空值，说明没有套 Provider，返回 antdTheme 的默认值
   if (!styledTheme || Object.keys(styledTheme).length === 0) {
     return initTheme;
   }
 
-  return styledTheme as Theme;
+  return { ...styledTheme, prefixCls, iconPrefixCls } as Theme;
 };

src/functions/createInstance.ts

@@ -34,6 +34,7 @@ export interface CreateOptions<T> {
    * 默认的组件 prefixCls
    */
   prefixCls?: string;
+  iconPrefixCls?: string;
   /**
    * 是否开启急速模式
    *
@@ -87,6 +88,7 @@ export const createInstance = <T = any>(options: CreateOptions<T>) => {
     CustomThemeContext,
     StyledThemeContext: styledThemeContext,
     prefixCls: internalOptions?.prefixCls,
+    iconPrefixCls: internalOptions?.iconPrefixCls,
   });
 
   const useTheme = createUseTheme({ StyleEngineContext });

src/types/styled.ts

@@ -35,4 +35,5 @@ export interface StyleEngine {
    * @description 当前组件的 CSS 类名前缀
    */
   prefixCls?: string;
+  iconPrefixCls?: string;
 }

src/types/theme.ts

@@ -1,4 +1,4 @@
-import { ThemeConfig, MappingAlgorithm } from 'antd';
+import { MappingAlgorithm, ThemeConfig } from 'antd';
 import { AliasToken } from 'antd/es/theme/interface';
 
 import { BrowserPrefers, ThemeAppearance, ThemeMode } from './appearance';
@@ -76,4 +76,5 @@ export interface Theme extends FullToken, ThemeContextState {
    * antd 组件的 prefixCls
    */
   prefixCls: string;
+  iconPrefixCls: string;
 }