Feat: Add new API genStyleUtils.

README.md

@@ -1,9 +1,9 @@
-# @ant-design/cssinjs-util
+# @ant-design/cssinjs-utils
 A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.
 
 ## Install
 ``` bash
-npm i @ant-design/cssinjs-util --save
+npm i @ant-design/cssinjs-utils --save
 ```
 
 ## Usage

docs/demos/genStyleUtils.md

@@ -0,0 +1,108 @@
+---
+title: genStyleUtils
+nav:
+  title: API
+  path: /genStyleUtils
+---
+# `genStyleUtils` 使用文档
+
+`genStyleUtils` 提供了用于在 `antd` 生态开发中，生成和管理样式的实用工具函数集。
+
+## 入参介绍
+
+### `genStyleUtils<CompTokenMap>(getConfigProviderContext?, getThemeProviderContext?)`
+- `config`: 可选，配置
+  - `useCSP`: 使用 CSP 的钩子函数
+  - `usePrefix`: 使用样式前缀的钩子函数
+  - `useToken`: 使用 token 的钩子函数
+- `CompTokenMap`: 范型参数，表示组件 token 映射
+- `DesignTokenn`: 范型参数，表示设计 token
+- `AliasToken`: 范型参数，表示别名 token
+> 使用建议：为了更好的获得 TS 类型支持，建议您在使用 `genStyleUtils` 的时候传入范型参数 `CompTokenMap` `DesignTokenn` `AliasToken`
+
+## 如何使用
+``` typescript
+import React from 'react';
+import { genStyleUtils } from '@ant-design/cssinjs-utils';
+
+// Step1: 定义组件 Token 映射
+interface YourCompTokenMap {
+  Button?: {};
+  Avatar?: {};
+  // ...
+}
+
+// Step2: 定义设计 Token
+interface YourDesignTokenn {
+  color?: string;
+}
+
+// Step3: 定义别名 Token
+interface YourAliasToken {
+  colorFillContentHover?: string;
+}
+
+// Step4: 使用 `genStyleUtils` 生成工具函数集
+const {
+  genStyleHooks,
+  genComponentStyleHook,
+  genSubStyleComponent,
+} = genStyleUtils<YourCompTokenMap, YourDesignTokenn, YourAliasToken>({
+  useCSP: () => {
+    // ...
+  },
+  usePrefix: () => {
+    // ...
+  },
+  useToken: () => {
+    // ...
+  },
+});
+```
+
+## 工具介绍
+
+### `genStyleHooks(component, styleFn, getDefaultToken?, options?)`
+
+- `component`: 组件名称 `ComponentName` 或组件名称数组 `[ComponentName, ComponentName]`。
+- `styleFn`: 根据标记和样式信息生成 CSS 插值的函数。
+- `getDefaultToken`: 可选，用于检索默认标记的函数或值。
+- `options`: 可选，包含额外的配置选项如 `resetStyle`、`resetFont`、`deprecatedTokens`、`clientOnly` 等。
+
+### `genComponentStyleHook(component, styleFn, getDefaultToken?, options?)`
+
+- `component`: 组件名称 `ComponentName` 或组件名称数组 `[ComponentName, ComponentName]`。
+- `styleFn`: 根据标记和样式信息生成 CSS 插值的函数。
+- `getDefaultToken`: 可选，用于检索默认标记的函数或值。
+- `options`: 可选，包含额外的配置选项如 `resetStyle`、`resetFont`、`deprecatedTokens`、`clientOnly` 等。
+
+### `genSubStyleComponent(component, styleFn, getDefaultToken?, options?)`
+
+- `component`: 组件名称 `ComponentName` 或组件名称数组 `[ComponentName, ComponentName]`。
+- `styleFn`: 根据标记和样式信息生成 CSS 插值的函数。
+- `getDefaultToken`: 可选，用于检索默认标记的函数或值。
+- `options`: 可选，包含额外的配置选项如 `resetStyle`、`resetFont`、`deprecatedTokens`、`clientOnly` 等。
+
+## 示例用法
+
+### `genStyleHooks`
+
+```javascript
+const useStyle = genStyleHooks('Button', styleFn, getDefaultToken, { resetStyle: true });
+const [wrapStyle, hashId] = useStyle('button');
+```
+
+### `genComponentStyleHook`
+
+```javascript
+const useStyle = genComponentStyleHook('Button', styleFn, getDefaultToken, { clientOnly: true });
+const [wrapStyle, hashId] = useStyle('button');
+```
+
+### `genSubStyleComponent`
+
+```javascript
+const SubButtonStyle = genSubStyleComponent('Button', styleFn, getDefaultToken, { resetFont: true });
+
+() => <SubButtonStyle prefixCls="sub-button" />;
+```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@ant-design/cssinjs-util",
+  "name": "@ant-design/cssinjs-utils",
   "version": "1.0.0",
   "description": "A cssinjs util library to support Ant Design (antd) and its ecosystem libraries.",
   "keywords": [
@@ -30,15 +30,14 @@
     "start": "dumi dev",
     "compile": "father build",
     "prepublishOnly": "npm run compile && np --yolo --no-publish",
-    "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
+    "lint": "eslint src/ --ext .tsx,.ts,.jsx,.js",
     "test": "rc-test",
     "coverage": "rc-test --coverage"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.1.4",
     "@rc-component/father-plugin": "^1.0.1",
     "@testing-library/react": "^15.0.4",
-    "@types/classnames": "^2.2.10",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.11.6",
     "@types/react": "^18.0.0",
@@ -57,9 +56,9 @@
     "typescript": "^5.1.6"
   },
   "dependencies": {
-    "@babel/runtime": "^7.23.2",
     "@ant-design/cssinjs": "^1.21.0",
-    "classnames": "^2.3.2",
+    "@ant-design/fast-color": "^1.2.0",
+    "@babel/runtime": "^7.23.2",
     "rc-util": "^5.38.0"
   },
   "peerDependencies": {

src/_util/hooks/useUniqueMemo.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+
+const BEAT_LIMIT = 1000 * 60 * 10;
+
+/**
+ * A helper class to map keys to values.
+ * It supports both primitive keys and object keys.
+ */
+class ArrayKeyMap<T> {
+  map = new Map<string, T>();
+
+  // Use WeakMap to avoid memory leak
+  objectIDMap = new WeakMap<object, number>();
+
+  nextID = 0;
+
+  lastAccessBeat = new Map<string, number>();
+
+  // We will clean up the cache when reach the limit
+  accessBeat = 0;
+
+  set(keys: React.DependencyList, value: any) {
+    // New set will trigger clear
+    this.clear();
+
+    // Set logic
+    const compositeKey = this.getCompositeKey(keys);
+    this.map.set(compositeKey, value);
+    this.lastAccessBeat.set(compositeKey, Date.now());
+  }
+
+  get(keys: React.DependencyList) {
+    const compositeKey = this.getCompositeKey(keys);
+
+    const cache = this.map.get(compositeKey);
+    this.lastAccessBeat.set(compositeKey, Date.now());
+    this.accessBeat += 1;
+
+    return cache;
+  }
+
+  getCompositeKey(keys: React.DependencyList) {
+    const ids = keys.map<string>((key) => {
+      if (key && typeof key === 'object') {
+        return `obj_${this.getObjectID(key)}`;
+      }
+      return `${typeof key}_${key}`;
+    });
+    return ids.join('|');
+  }
+
+  getObjectID(obj: object) {
+    if (this.objectIDMap.has(obj)) {
+      return this.objectIDMap.get(obj);
+    }
+    const id = this.nextID;
+    this.objectIDMap.set(obj, id);
+
+    this.nextID += 1;
+
+    return id;
+  }
+
+  clear() {
+    if (this.accessBeat > 10000) {
+      const now = Date.now();
+
+      this.lastAccessBeat.forEach((beat, key) => {
+        if (now - beat > BEAT_LIMIT) {
+          this.map.delete(key);
+          this.lastAccessBeat.delete(key);
+        }
+      });
+
+      this.accessBeat = 0;
+    }
+  }
+}
+
+const uniqueMap = new ArrayKeyMap();
+
+/**
+ * Like `useMemo`, but this hook result will be shared across all instances.
+ */
+function useUniqueMemo<T>(memoFn: () => T, deps: React.DependencyList) {
+  return React.useMemo<T>(() => {
+    const cachedValue = uniqueMap.get(deps);
+    if (cachedValue) {
+      return cachedValue as T;
+    }
+    const newValue = memoFn();
+    uniqueMap.set(deps, newValue);
+    return newValue;
+  }, deps);
+}
+
+export default useUniqueMemo;

src/hooks/useCSP.ts

@@ -0,0 +1,10 @@
+export type UseCSP = () => {
+  nonce?: string;
+};
+
+/**
+ * Provide a default hook since not everyone need config this.
+ */
+const useDefaultCSP: UseCSP = () => ({});
+
+export default useDefaultCSP;

src/hooks/usePrefix.ts

@@ -0,0 +1,11 @@
+export type UsePrefix = () => {
+  /**
+   * All the component use `@ant-design/cssinjs-utils` should have same `rootPrefixCls`.
+   */
+  rootPrefixCls: string;
+  /**
+   * `iconPrefixCls` comes from the setting of `@ant-design/icons`.
+   * Here maybe little coupling but everyone need use this.
+   */
+  iconPrefixCls: string;
+};

src/hooks/useToken.ts

@@ -0,0 +1,52 @@
+import type { Theme, TokenType } from '@ant-design/cssinjs';
+
+import type { OverrideTokenMap, TokenMap } from '../interface';
+
+export type TokenMapWithTheme<
+  CompTokenMap extends TokenMap,
+  DesignToken extends TokenType,
+  AliasToken extends TokenType,
+> = {
+    [key in keyof OverrideTokenMap<CompTokenMap>]?: OverrideTokenMap<CompTokenMap>[key] & {
+      theme?: Theme<DesignToken, AliasToken>;
+    };
+  };
+
+export interface UseTokenReturn<
+  CompTokenMap extends TokenMap,
+  DesignToken extends TokenType,
+  AliasToken extends TokenType,
+> {
+  token: OverrideTokenMap<CompTokenMap>;
+  realToken?: OverrideTokenMap<CompTokenMap>;
+  /** Just merge `token` & `override` at top to save perf */
+  override: { override: OverrideTokenMap<CompTokenMap> };
+  theme?: Theme<DesignToken, AliasToken>;
+  components?: TokenMapWithTheme<CompTokenMap, DesignToken, AliasToken>;
+  hashId?: string;
+  hashed?: string | boolean;
+  cssVar?: {
+    prefix?: string;
+    key?: string;
+  };
+}
+
+export type UseToken<
+  CompTokenMap extends TokenMap,
+  DesignToken extends TokenType,
+  AliasToken extends TokenType,
+> = () => UseTokenReturn<CompTokenMap, DesignToken, AliasToken>;
+
+function useDefaultToken<
+  CompTokenMap extends TokenMap,
+  DesignToken extends TokenType,
+  AliasToken extends TokenType,
+> (): UseTokenReturn<CompTokenMap, DesignToken, AliasToken> {
+  return {
+    token: {},
+    override: { override: {} },
+    hashed: true,
+  }
+};
+
+export default useDefaultToken;

src/index.ts

@@ -1 +1 @@
-console.log('Hello world!');
+export { default as genStyleUtils } from './util/genStyleUtils';

src/interface/components.ts

@@ -0,0 +1,14 @@
+import type { TokenType } from '@ant-design/cssinjs';
+
+export type TokenMap = Record<string, TokenType>;
+
+export type TokenMapKey<CompTokenMap extends TokenMap> = Extract<keyof CompTokenMap, string>;
+
+export type OverrideTokenMap<CompTokenMap extends TokenMap> = Partial<CompTokenMap>;
+
+export type GlobalTokenWithComponent<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = CompTokenMap &
+  CompTokenMap[C];
+
+export type ComponentToken<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = Exclude<OverrideTokenMap<CompTokenMap>[C], undefined>;
+
+export type ComponentTokenKey<CompTokenMap extends TokenMap, C extends TokenMapKey<CompTokenMap>> = keyof ComponentToken<CompTokenMap, C>;

src/interface/index.ts

@@ -0,0 +1,10 @@
+export type {
+  OverrideTokenMap,
+  TokenMap,
+  TokenMapKey,
+  GlobalTokenWithComponent,
+  ComponentToken,
+  ComponentTokenKey,
+} from './components';
+
+export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];