tailwind-preset-antd 0.0.1 → 0.1.0

package/README.en-US.md

@@ -1,13 +1,10 @@
-A tailwindcss plugin based on antd Design Token.
+Use antd design token like using tailwindcss.
 
-English | [简体中文](./README.zh-CN.md)
+Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
 
-# Project Introduction
-
-Version requirements:
+[简体中文](./README.md) | English
 
-- antd >= 5
-- tailwindcss >= 3
+# Project Introduction
 
 Before:
 
@@ -31,28 +28,25 @@ function App() {
 
 ## Basic Usage
 
-### tailwindcss v3
+### tailwindcss v4
 
-1. Register tailwind plugin
+Use plugin in your css
 
-```js
-// tailwind.config.ts
-import type { Config } from "tailwindcss/types/config";
-import antdThemePreset from "tailwind-preset-antd/plugin";
-
-const config: Config = {
-  // ...
-  // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
-  plugins: [antdThemePreset],
-};
+```css
+@plugin "tailwind-preset-antd/plugin";
 
-export default config;
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+*/
 ```
 
-2. Register global css variables based on antd token
+Inject css variables component in any component
 
-```jsx
-import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
 
 export default function App() {
   return (
@@ -63,25 +57,28 @@ export default function App() {
 }
 ```
 
-If you use the `tailwind-merge` plugin, you need to add `fontSizes` to its configuration. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
+### tailwindcss v3
 
-### tailwindcss v4
+Use plugin in your `tailwind.config.ts`
 
-See [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
+```ts
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import tailwindPresetAntd from "tailwind-preset-antd/plugin";
 
-```css
-@plugin "tailwind-preset-antd/plugin";
+const config: Config = {
+  // ...
+  // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [tailwindPresetAntd],
+};
 
-/* or
-@plugin "tailwind-preset-antd/plugin" {
-  twPrefix: "ant";
-  cssVarPrefix: "abcd";
-}
-*/
+export default config;
 ```
 
-```jsx
-import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+Inject css variables component in any component
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
 
 export default function App() {
   return (
@@ -92,14 +89,16 @@ export default function App() {
 }
 ```
 
+If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
+
 ## Configuration Options
 
 - `twPrefix`: tw class name prefix, default is `''`
-- `cssVarPrefix`: Generated css var variable prefix, default is `'a'`
+- `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
 
 For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
 
-```jsx
+```tsx
 /**
  * :root{
  *  --abcd-colorPrimary: 47 84 235;
@@ -109,7 +108,7 @@ function App() {
   return <div className="bg-ant-colorPrimary"></div>;
 }
 
-// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
+// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
 ```
 
 ### Using with tailwind-merge

package/README.md

@@ -1,13 +1,10 @@
-基于 Antd Design Token 的 tailwindcss 插件。
+像使用 tailwindcss 一样使用 antd design token。
 
-[English](./README.md) | 简体中文
+提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
 
-# 项目介绍
-
-版本要求：
+[English](./README.en-US.md) | 简体中文
 
-- antd >= 5
-- tailwindcss >= 3
+# 项目介绍
 
 以前：
 
@@ -15,9 +12,9 @@
 import { theme } from "antd";
 
 function App() {
-  const { cssVar } = theme.useToken(); // antd v6
+  const { token } = theme.useToken();
 
-  return <div style={{ backgroundColor: cssVar.colorPrimary }}></div>;
+  return <div style={{ backgroundColor: token.colorPrimary }}></div>;
 }
 ```
 
@@ -31,28 +28,25 @@ function App() {
 
 ## 基础使用
 
-### tailwindcss v3
+### tailwindcss v4
 
-1. 注册 tailwind 插件
+在你的 css 中使用插件
 
-```js
-// tailwind.config.ts
-import type { Config } from "tailwindcss/types/config";
-import antdThemePreset from "tailwind-preset-antd/plugin";
-
-const config: Config = {
-  // ...
- // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
-  plugins: [antdThemePreset],
-};
+```css
+@plugin "tailwind-preset-antd/plugin";
 
-export default config;
+/* or
+@plugin "tailwind-preset-antd/plugin" {
+  twPrefix: "ant";
+  cssVarPrefix: "abcd";
+}
+ */
 ```
 
-2. 注册基于 antd token 的全局 css 变量
+在你的任意组件中注入 css 变量的组件
 
-```jsx
-import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
 
 export default function App() {
   return (
@@ -63,25 +57,28 @@ export default function App() {
 }
 ```
 
-如果使用了 `tailwind-merge` 插件，则需要将 `fontSizes` 添加至其配置中，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
+### tailwindcss v3
 
-### tailwindcss v4
+在你的 `tailwind.config.ts` 中使用插件
 
-查看 [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
+```js
+// tailwind.config.ts
+import type { Config } from "tailwindcss/types/config";
+import tailwindPresetAntd from "tailwind-preset-antd/plugin";
 
-```css
-@plugin "tailwind-preset-antd/plugin";
+const config: Config = {
+  // ...
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
+  plugins: [tailwindPresetAntd],
+};
 
-/* or
-@plugin "tailwind-preset-antd/plugin" {
-  twPrefix: "ant";
-  cssVarPrefix: "abcd";
-}
- */
+export default config;
 ```
 
-```jsx
-import { AntdTokenCssVar } from "tailwind-preset-antd/components";
+在你的任意组件中注入 css 变量的组件
+
+```tsx
+import AntdTokenCssVar from "tailwind-preset-antd/components";
 
 export default function App() {
   return (
@@ -92,14 +89,16 @@ export default function App() {
 }
 ```
 
+如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
+
 ## 配置项
 
 - `twPrefix`: tw 类名前缀，默认为 `''`
-- `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`
+- `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
 
 例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
 
-```jsx
+```tsx
 /**
  * :root{
  *  --abcd-colorPrimary: 47 84 235;
@@ -109,7 +108,7 @@ function App() {
   return <div className="bg-ant-colorPrimary"></div>;
 }
 
-// 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
+// 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
 ```
 
 ### 与 tailwind-merge 配合使用

package/dist/_virtual/_@oxc-project_runtime@0.129.0/helpers/defineProperty.js

@@ -0,0 +1,12 @@
+import { toPropertyKey } from "./toPropertyKey.js";
+//#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+export { _defineProperty };

package/dist/_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js

@@ -0,0 +1,25 @@
+import { _defineProperty } from "./defineProperty.js";
+//#region \0@oxc-project+runtime@0.129.0/helpers/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+export { _objectSpread2 };

package/dist/_virtual/_@oxc-project_runtime@0.129.0/helpers/toPrimitive.js

@@ -0,0 +1,14 @@
+import { _typeof } from "./typeof.js";
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+export { toPrimitive };

package/dist/_virtual/_@oxc-project_runtime@0.129.0/helpers/toPropertyKey.js

@@ -0,0 +1,9 @@
+import { _typeof } from "./typeof.js";
+import { toPrimitive } from "./toPrimitive.js";
+//#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+export { toPropertyKey };

package/dist/_virtual/_@oxc-project_runtime@0.129.0/helpers/typeof.js

@@ -0,0 +1,11 @@
+//#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+export { _typeof };

package/dist/components.d.ts

@@ -0,0 +1,7 @@
+//#region src/components.d.ts
+interface AntdTokenCssVarProps {
+  cssVarPrefix?: string;
+}
+declare function AntdTokenCssVar(props: AntdTokenCssVarProps): null;
+//#endregion
+export { AntdTokenCssVar as default };

package/dist/components.js

@@ -0,0 +1,23 @@
+import { genCSSVarByTokens } from "./core/genCssVarByTokens.js";
+import { theme } from "antd";
+import { useInsertionEffect } from "react";
+//#region src/components.tsx
+const styleId = "antd-token-inject";
+function AntdTokenCssVar(props) {
+	const { cssVarPrefix } = props;
+	const { token } = theme.useToken();
+	useInsertionEffect(() => {
+		const cssVar = genCSSVarByTokens(token, cssVarPrefix);
+		const style = document.querySelector(`#${styleId}`) || document.createElement("style");
+		style.id = styleId;
+		style.setAttribute("plugin-name", "tailwind-preset-antd");
+		style.textContent = `:root{${cssVar}}`;
+		document.head.appendChild(style);
+		return () => {
+			document.head.removeChild(style);
+		};
+	}, [token, cssVarPrefix]);
+	return null;
+}
+//#endregion
+export { AntdTokenCssVar as default };

package/dist/core/genCssVarByTokens.js

@@ -0,0 +1,48 @@
+import { hexToRgb, isRGBColor } from "../utils/index.js";
+import { functionalColors } from "../preset/tokens/functionalColors.js";
+import { colorPalettes } from "../preset/tokens/colorPalettes.js";
+import { semanticColors } from "../preset/tokens/semanticColors.js";
+import { margins } from "../preset/tokens/margins.js";
+import { fontSizes } from "../preset/tokens/fontSizes.js";
+import { borderRadius } from "../preset/tokens/borderRadius.js";
+//#region src/core/genCssVarByTokens.ts
+function genCSSVarByTokens(tokens, cssVarPrefix = "a") {
+	let colorsVariables = "";
+	const presetTokens = [
+		...colorPalettes,
+		...functionalColors,
+		...semanticColors,
+		...margins,
+		...borderRadius,
+		...fontSizes
+	];
+	for (let i = 0; i < presetTokens.length; i++) {
+		const key = presetTokens[i];
+		const value = tokens[key];
+		if (value === void 0 && process.env.NODE_ENV !== "production") {
+			console.warn(`[tailwind-preset-antd]: ${key} is not defined in antd design token`);
+			continue;
+		}
+		if (colorPalettes.includes(key)) {
+			colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
+			continue;
+		}
+		if (functionalColors.includes(key)) {
+			const rgb = hexToRgb(value);
+			colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
+			continue;
+		}
+		if (semanticColors.includes(key)) {
+			const rgb = isRGBColor(value) ? value : `rgb(${hexToRgb(value)})`;
+			colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
+			continue;
+		}
+		if (fontSizes.includes(key) || margins.includes(key) || borderRadius.includes(key)) {
+			colorsVariables += `--${cssVarPrefix}-${key}:${value}px;`;
+			continue;
+		}
+	}
+	return colorsVariables;
+}
+//#endregion
+export { genCSSVarByTokens };

package/dist/core/genTailwindTheme.js

@@ -0,0 +1,46 @@
+import { functionalColors } from "../preset/tokens/functionalColors.js";
+import { colorPalettes } from "../preset/tokens/colorPalettes.js";
+import { semanticColors } from "../preset/tokens/semanticColors.js";
+import { margins } from "../preset/tokens/margins.js";
+import { fontSizes } from "../preset/tokens/fontSizes.js";
+import { borderRadius } from "../preset/tokens/borderRadius.js";
+//#region src/core/genTailwindTheme.ts
+function genTwPrefixKey(key, prefix) {
+	return prefix ? `${prefix}-${key}` : key;
+}
+function createColorPalettes(cssVarPrefix = "a", twPrefix) {
+	const colorPaletteVar = {};
+	colorPalettes.forEach((color) => {
+		colorPaletteVar[genTwPrefixKey(color, twPrefix)] = `rgb(var(--${cssVarPrefix}-${color}))`;
+	});
+	functionalColors.forEach((key) => {
+		colorPaletteVar[genTwPrefixKey(key, twPrefix)] = `rgb(var(--${cssVarPrefix}-${key}))`;
+	});
+	semanticColors.forEach((key) => {
+		colorPaletteVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return colorPaletteVar;
+}
+function createFontSize(cssVarPrefix = "a", twPrefix) {
+	const fontSizeVar = {};
+	fontSizes.forEach((key) => {
+		fontSizeVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return fontSizeVar;
+}
+function createSpacing(cssVarPrefix = "a", twPrefix) {
+	const spacingVar = {};
+	margins.forEach((key) => {
+		spacingVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return spacingVar;
+}
+function createBorderRadius(cssVarPrefix = "a", twPrefix) {
+	const radiusVar = {};
+	borderRadius.forEach((key) => {
+		radiusVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return radiusVar;
+}
+//#endregion
+export { createBorderRadius, createColorPalettes, createFontSize, createSpacing };

package/dist/plugin.d.ts

@@ -0,0 +1,28 @@
+//#region src/plugin.d.ts
+interface PluginOptions {
+  /**
+   * @description tw class prefix
+   * @default '''
+   */
+  twPrefix?: string;
+  /**
+   * @description css variables prefix
+   * @default 'a'
+   */
+  cssVarPrefix?: string;
+}
+interface PluginWithOptions<T> {
+  (options?: T): {
+    handler: (api: any) => void;
+  };
+  __isOptionsFunction: true;
+}
+/**
+ * @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
+ * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
+ * @see https://ant.design/docs/react/customize-theme-cn#maptoken
+ * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
+ */
+declare const twAntdPresetPlugin: PluginWithOptions<PluginOptions>;
+//#endregion
+export { twAntdPresetPlugin as default };

package/dist/plugin.js

@@ -0,0 +1,28 @@
+import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
+import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
+import plugin from "tailwindcss/plugin";
+//#region src/plugin.ts
+/**
+* @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
+* @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
+* @see https://ant.design/docs/react/customize-theme-cn#maptoken
+* @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
+*/
+const twAntdPresetPlugin = plugin.withOptions(() => () => {}, (options = {}) => {
+	const { cssVarPrefix = "a", twPrefix = "" } = options;
+	return { theme: { extend: {
+		colors: _objectSpread2(_objectSpread2({}, createColorPalettes(cssVarPrefix, twPrefix)), {}, {
+			white: "rgb(255 255 255)",
+			black: "rgb(0 0 0)",
+			current: "currentColor",
+			inherit: "inherit",
+			transparent: "transparent"
+		}),
+		fontSize: _objectSpread2({}, createFontSize(cssVarPrefix, twPrefix)),
+		radius: _objectSpread2({}, createBorderRadius(cssVarPrefix, twPrefix)),
+		borderRadius: _objectSpread2({}, createBorderRadius(cssVarPrefix, twPrefix)),
+		spacing: _objectSpread2({}, createSpacing(cssVarPrefix, twPrefix))
+	} } };
+});
+//#endregion
+export { twAntdPresetPlugin as default };

package/dist/preset/tokens/borderRadius.d.ts

@@ -0,0 +1,6 @@
+import { AliasTokenKey } from "../../utils/type.js";
+
+//#region src/preset/tokens/borderRadius.d.ts
+declare const borderRadius: AliasTokenKey[];
+//#endregion
+export { borderRadius };

package/dist/preset/tokens/borderRadius.js

@@ -0,0 +1,9 @@
+//#region src/preset/tokens/borderRadius.ts
+const borderRadius = [
+	"borderRadiusXS",
+	"borderRadiusSM",
+	"borderRadius",
+	"borderRadiusLG"
+];
+//#endregion
+export { borderRadius };

package/dist/preset/tokens/colorPalettes.d.ts

@@ -0,0 +1,11 @@
+import { PresetColorKey } from "antd/es/theme/internal.js";
+import { ColorPalettes, LegacyColorPalettes } from "antd/es/theme/interface/index.js";
+
+//#region src/preset/tokens/colorPalettes.d.ts
+type PresetColorPalettes = ColorPalettes & PresetColorKey & LegacyColorPalettes;
+/**
+ * `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
+ */
+declare const colorPalettes: PresetColorPalettes[];
+//#endregion
+export { colorPalettes };

package/dist/preset/tokens/colorPalettes.js

@@ -0,0 +1,23 @@
+/**
+* `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
+*/
+const colorPalettes = [
+	"red",
+	"volcano",
+	"orange",
+	"lime",
+	"gold",
+	"yellow",
+	"green",
+	"cyan",
+	"blue",
+	"geekblue",
+	"purple",
+	"magenta"
+].flatMap((color) => [
+	color,
+	...Array.from({ length: 10 }, (_, i) => `${color}${i + 1}`),
+	...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)
+]);
+//#endregion
+export { colorPalettes };

package/dist/preset/tokens/fontSizes.d.ts

@@ -0,0 +1,6 @@
+import { AliasTokenKey } from "../../utils/type.js";
+
+//#region src/preset/tokens/fontSizes.d.ts
+declare const fontSizes: AliasTokenKey[];
+//#endregion
+export { fontSizes };

package/dist/preset/tokens/fontSizes.js

@@ -0,0 +1,9 @@
+//#region src/preset/tokens/fontSizes.ts
+const fontSizes = [
+	"fontSizeSM",
+	"fontSize",
+	"fontSizeLG",
+	"fontSizeXL"
+];
+//#endregion
+export { fontSizes };

package/dist/preset/tokens/functionalColors.d.ts

@@ -0,0 +1,6 @@
+import { AliasTokenKey } from "../../utils/type.js";
+
+//#region src/preset/tokens/functionalColors.d.ts
+declare const functionalColors: AliasTokenKey[];
+//#endregion
+export { functionalColors };