tailwind-preset-antd 0.0.1

package/src/components.test.tsx

@@ -0,0 +1,56 @@
+import { render, cleanup } from "@testing-library/react";
+import { describe, expect, it, beforeEach, afterEach } from "vitest";
+import AntdTokenCssVar from "./components";
+
+describe("AntdTokenCssVar", () => {
+  beforeEach(() => {
+    document.head.innerHTML = "";
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render correctly", () => {
+    const { container } = render(<AntdTokenCssVar />);
+    expect(container).toBeDefined();
+    const style = document.querySelector("style#antd-token-inject");
+    expect(style?.textContent).toContain("--a-");
+  });
+
+  it("should inject style element with CSS variables", () => {
+    render(<AntdTokenCssVar />);
+    const style = document.querySelector("style#antd-token-inject");
+    expect(style).toBeTruthy();
+    expect(style?.getAttribute("plugin-name")).toBe("tailwind-preset-antd");
+    expect(style?.textContent).toContain(":root{");
+  });
+
+  it("should use custom cssVarPrefix", () => {
+    render(<AntdTokenCssVar cssVarPrefix="custom" />);
+    const style = document.querySelector("style#antd-token-inject");
+    expect(style?.textContent).toContain("--custom-");
+  });
+
+  it("should remove style element on unmount", () => {
+    const { unmount } = render(<AntdTokenCssVar />);
+    let style = document.querySelector("style#antd-token-inject");
+    expect(style).toBeTruthy();
+
+    unmount();
+    style = document.querySelector("style#antd-token-inject");
+    expect(style).toBeFalsy();
+  });
+
+  it("should update CSS variables when token changes", () => {
+    const { rerender } = render(<AntdTokenCssVar cssVarPrefix="test" />);
+    const style = document.querySelector("style#antd-token-inject");
+    const firstContent = style?.textContent;
+    expect(firstContent).toContain("--test-");
+
+    rerender(<AntdTokenCssVar cssVarPrefix="test2" />);
+    const style2 = document.querySelector("style#antd-token-inject");
+    const secondContent = style2?.textContent;
+    expect(secondContent).toContain("--test2-");
+  });
+});

package/src/components.tsx

@@ -0,0 +1,33 @@
+import { theme } from "antd";
+import { useInsertionEffect } from "react";
+
+import { genCSSVarByTokens } from "./core/genCssVarByTokens";
+
+const styleId = "antd-token-inject";
+
+interface AntdTokenCssVarProps {
+  cssVarPrefix?: string;
+}
+
+export default function AntdTokenCssVar(props: AntdTokenCssVarProps) {
+  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 <style id={styleId}>{`:root{${cssVar}}`}</style>;
+  return null;
+}

package/src/constants/index.ts

@@ -0,0 +1 @@
+export const DEFAULT_CSS_VAR_PREFIX = "a";

package/src/core/genCssVarByToken.test.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { genCSSVarByTokens } from "./genCssVarByTokens";
+
+describe("createColorPalettes", () => {
+  it("should generate css variables correctly", () => {
+    const tokens = {
+      colorPrimary: "#ff0000",
+      colorSuccess: "#00ff00",
+    } as any;
+    const result = genCSSVarByTokens(tokens, "--css-var");
+    expect(result).toContain("--css-var-colorPrimary:255, 0, 0;");
+    expect(result).toContain("--css-var-colorSuccess:0, 255, 0;");
+  });
+
+  it("should generate css variables for color palettes", () => {
+    const tokens = {
+      red: "#ff0000",
+      "red-1": "#ff7875",
+      blue: "#1890ff",
+      "blue-5": "#096dd9",
+    } as any;
+    const result = genCSSVarByTokens(tokens, "--css-var");
+    expect(result).toContain("--css-var-red:255, 0, 0;");
+    expect(result).toContain("--css-var-red-1:255, 120, 117;");
+    expect(result).toContain("--css-var-blue:24, 144, 255;");
+    expect(result).toContain("--css-var-blue-5:9, 109, 217;");
+  });
+
+  it("should ignore startWith rgb", () => {
+    const tokens = { colorText: "rgb(255, 255, 255)" } as any;
+    const result = genCSSVarByTokens(tokens, "--css-var");
+    expect(result).toContain("--css-var-colorText:rgb(255, 255, 255);");
+  });
+
+  it("should generate CSS variables for fontSize, margin, and borderRadius tokens", () => {
+    const tokens = {
+      fontSize: 14,
+      margin: 8,
+      borderRadius: 6,
+    } as any;
+    const result = genCSSVarByTokens(tokens, "--css-var");
+    expect(result).toContain("--css-var-fontSize:14px;");
+    expect(result).toContain("--css-var-margin:8px;");
+    expect(result).toContain("--css-var-borderRadius:6px;");
+  });
+});

package/src/core/genCssVarByTokens.ts

@@ -0,0 +1,45 @@
+import type { GlobalToken } from "antd";
+
+import { DEFAULT_CSS_VAR_PREFIX } from "../constants";
+
+import { hexToRgb, isRGBColor } from "../utils";
+import {
+  borderRadius,
+  colorPalettes,
+  fontSizes,
+  functionalColors,
+  margins,
+  semanticColors,
+} from "../preset";
+
+export function genCSSVarByTokens(
+  tokens: GlobalToken,
+  cssVarPrefix: string = DEFAULT_CSS_VAR_PREFIX
+) {
+  let colorsVariables = "";
+
+  for (const [key, value] of Object.entries(tokens)) {
+    // https://v3.tailwindcss.com/docs/customizing-colors#using-css-variables
+    if (colorPalettes.includes(key)) {
+      colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
+    }
+
+    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;
+}

package/src/core/genTailwindTheme.test.ts

@@ -0,0 +1,95 @@
+import { describe, expect, it } from "vitest";
+import {
+  createColorPalettes,
+  createFontSize,
+  createSpacing,
+  createBorderRadius,
+} from "../core/genTailwindTheme";
+import { colorPalettes } from "../preset";
+
+describe("createColorPalettes", () => {
+  it("should create color palette variables with default prefix", () => {
+    const result = createColorPalettes();
+
+    expect(result["red"]).toBe("rgb(var(--a-red))");
+    expect(result["blue"]).toBe("rgb(var(--a-blue))");
+    expect(result["colorPrimary"]).toBe("rgb(var(--a-colorPrimary))");
+    expect(result["colorSuccess"]).toBe("rgb(var(--a-colorSuccess))");
+    expect(result["colorText"]).toBe("var(--a-colorText)");
+  });
+
+  it("should create color palette variables with custom cssVarPrefix", () => {
+    const result = createColorPalettes("custom");
+
+    expect(result["red"]).toBe("rgb(var(--custom-red))");
+    expect(result["blue"]).toBe("rgb(var(--custom-blue))");
+    expect(result["colorPrimary"]).toBe("rgb(var(--custom-colorPrimary))");
+  });
+
+  it("should create color palette variables with custom twPrefix", () => {
+    const result = createColorPalettes("a", "ant");
+
+    expect(result["ant-red"]).toBe("rgb(var(--a-red))");
+    expect(result["ant-blue"]).toBe("rgb(var(--a-blue))");
+    expect(result["ant-colorPrimary"]).toBe("rgb(var(--a-colorPrimary))");
+  });
+
+  it("should use rgb() wrapper for colorPalettes", () => {
+    const result = createColorPalettes();
+    colorPalettes.forEach((color) => {
+      expect(result[color]).toMatch(/^rgb\(var\(--a-[^)]+\)\)$/);
+    });
+  });
+});
+
+describe("createFontSize", () => {
+  it("should create font size variables with default prefix", () => {
+    const result = createFontSize();
+
+    expect(result["fontSizeSM"]).toBe("var(--a-fontSizeSM)");
+    expect(result["fontSize"]).toBe("var(--a-fontSize)");
+    expect(result["fontSizeLG"]).toBe("var(--a-fontSizeLG)");
+    expect(result["fontSizeXL"]).toBe("var(--a-fontSizeXL)");
+  });
+
+  it("should create font size variables with custom cssVarPrefix", () => {
+    const result = createFontSize("custom");
+
+    expect(result["fontSizeSM"]).toBe("var(--custom-fontSizeSM)");
+    expect(result["fontSize"]).toBe("var(--custom-fontSize)");
+  });
+
+  it("should create font size variables with custom twPrefix", () => {
+    const result = createFontSize("a", "ant");
+
+    expect(result["ant-fontSizeSM"]).toBe("var(--a-fontSizeSM)");
+    expect(result["ant-fontSize"]).toBe("var(--a-fontSize)");
+  });
+
+  it("should create all font size entries", () => {
+    const result = createFontSize();
+    expect(Object.keys(result).length).toBe(4);
+  });
+});
+
+describe("createSpacing", () => {
+  it("should create spacing variables with default prefix", () => {
+    const result = createSpacing();
+
+    expect(result["marginXXS"]).toBe("var(--a-marginXXS)");
+    expect(result["marginXS"]).toBe("var(--a-marginXS)");
+    expect(result["marginSM"]).toBe("var(--a-marginSM)");
+    expect(result["margin"]).toBe("var(--a-margin)");
+  });
+});
+
+describe("createBorderRadius", () => {
+  it("should create border radius variables with default prefix", () => {
+    const result = createBorderRadius();
+
+    expect(result["borderRadiusXS"]).toBe("var(--a-borderRadiusXS)");
+    expect(result["borderRadiusSM"]).toBe("var(--a-borderRadiusSM)");
+    expect(result["borderRadius"]).toBe("var(--a-borderRadius)");
+    expect(result["borderRadiusLG"]).toBe("var(--a-borderRadiusLG)");
+  });
+});

package/src/core/genTailwindTheme.ts

@@ -0,0 +1,62 @@
+import { DEFAULT_CSS_VAR_PREFIX } from "../constants";
+import {
+  borderRadius,
+  fontSizes,
+  functionalColors,
+  margins,
+  semanticColors,
+  colorPalettes,
+} from "../preset";
+
+function genTwPrefixKey(key: string, prefix?: string) {
+  return prefix ? `${prefix}-${key}` : key;
+}
+
+export function createColorPalettes(
+  cssVarPrefix: string = DEFAULT_CSS_VAR_PREFIX,
+  twPrefix?: string
+) {
+  // eg: twPrefix='ant': bg-ant-colorPrimary --> background-color: var(--a-colorPrimary)
+  const colorPaletteVar: Record<string, string> = {};
+
+  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;
+}
+
+export function createFontSize(cssVarPrefix: string = DEFAULT_CSS_VAR_PREFIX, twPrefix?: string) {
+  const fontSizeVar: Record<string, string> = {};
+  fontSizes.forEach((key) => {
+    fontSizeVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+  });
+  return fontSizeVar;
+}
+
+export function createSpacing(cssVarPrefix: string = DEFAULT_CSS_VAR_PREFIX, twPrefix?: string) {
+  const spacingVar: Record<string, string> = {};
+  margins.forEach((key) => {
+    spacingVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+  });
+  return spacingVar;
+}
+
+export function createBorderRadius(
+  cssVarPrefix: string = DEFAULT_CSS_VAR_PREFIX,
+  twPrefix?: string
+) {
+  const radiusVar: Record<string, string> = {};
+  borderRadius.forEach((key) => {
+    radiusVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+  });
+  return radiusVar;
+}

package/src/plugin.ts

@@ -0,0 +1,71 @@
+import type { Config } from "tailwindcss";
+// import type { PluginAPI } from "tailwindcss/plugin";
+import plugin from "tailwindcss/plugin";
+
+import { DEFAULT_CSS_VAR_PREFIX } from "./constants";
+import {
+  createBorderRadius,
+  createColorPalettes,
+  createFontSize,
+  createSpacing,
+} from "./core/genTailwindTheme";
+
+interface PluginOptions {
+  /**
+   * @description tw class prefix
+   * @default '''
+   */
+  twPrefix?: string;
+  /**
+   * @description css variables prefix
+   * @default 'a'
+   */
+  cssVarPrefix?: string;
+}
+
+// override private plugin interface
+interface PluginWithOptions<T> {
+  (options?: T): {
+    handler: (api: any) => void;
+  };
+  __isOptionsFunction: true;
+}
+
+/**
+ * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
+ * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
+ * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
+ * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
+ */
+const twAntdPresetPlugin: PluginWithOptions<PluginOptions> = plugin.withOptions(
+  () => () => {
+    /* empty */
+  },
+  (options: PluginOptions = {}) => {
+    const { cssVarPrefix = DEFAULT_CSS_VAR_PREFIX, twPrefix = "" } = options;
+
+    return {
+      theme: {
+        /**
+         * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+         */
+        extend: {
+          colors: {
+            ...createColorPalettes(cssVarPrefix, twPrefix),
+            white: "rgb(255 255 255)",
+            black: "rgb(0 0 0)",
+            current: "currentColor",
+            inherit: "inherit",
+            transparent: "transparent",
+          },
+          fontSize: { ...createFontSize(cssVarPrefix, twPrefix) },
+          radius: { ...createBorderRadius(cssVarPrefix, twPrefix) }, // v4
+          borderRadius: { ...createBorderRadius(cssVarPrefix, twPrefix) }, // v3
+          spacing: { ...createSpacing(cssVarPrefix, twPrefix) },
+        },
+      },
+    } satisfies Partial<Config>;
+  }
+);
+
+export default twAntdPresetPlugin;

package/src/preset/index.ts

@@ -0,0 +1,13 @@
+import { functionalColors } from "./tokens/functionalColors";
+import { colorPalettes } from "./tokens/colorPalettes";
+import { semanticColors } from "./tokens/semanticColors";
+
+export { margins } from "./tokens/margins";
+export { fontSizes } from "./tokens/fontSizes";
+export { borderRadius } from "./tokens/borderRadius";
+
+export { functionalColors };
+export { colorPalettes };
+export { semanticColors };
+
+export const colorPresets = [...colorPalettes, ...functionalColors, ...semanticColors];

package/src/preset/tokens/borderRadius.ts

@@ -0,0 +1,6 @@
+export const borderRadius = [
+  "borderRadiusXS", // 2
+  "borderRadiusSM", // 4
+  "borderRadius", // 6
+  "borderRadiusLG", // 8
+];

package/src/preset/tokens/colorPalettes.ts

@@ -0,0 +1,24 @@
+// https://ant.design/docs/spec/colors#base-color-palettes
+export const colors = [
+  "red",
+  "volcano",
+  "orange",
+  "lime",
+  "gold",
+  "yellow",
+  "green",
+  "cyan",
+  "blue",
+  "geekblue",
+  "purple",
+  "magenta",
+];
+
+export const colorPaletteCount = 10;
+/**
+ * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
+ */
+export const colorPalettes = colors.flatMap((color) => [
+  color,
+  ...Array.from({ length: colorPaletteCount }, (_, i) => `${color}-${i + 1}`),
+]);

package/src/preset/tokens/fontSizes.ts

@@ -0,0 +1,6 @@
+export const fontSizes = [
+  "fontSizeSM", // 12
+  "fontSize", // 14
+  "fontSizeLG", // 16
+  "fontSizeXL", // 20
+];

package/src/preset/tokens/functionalColors.ts

@@ -0,0 +1,72 @@
+const brandColors = [
+  "colorPrimary",
+  "colorPrimaryBg",
+  "colorPrimaryBgHover",
+  "colorPrimaryBorder",
+  "colorPrimaryBorderHover",
+  "colorPrimaryHover",
+  "colorPrimaryActive",
+  "colorPrimaryTextHover",
+  "colorPrimaryText",
+  "colorPrimaryTextActive",
+];
+
+const successColors = [
+  "colorSuccess",
+  "colorSuccessBg",
+  "colorSuccessBgHover",
+  "colorSuccessBorder",
+  "colorSuccessBorderHover",
+  "colorSuccessHover",
+  "colorSuccessActive",
+  "colorSuccessTextHover",
+  "colorSuccessText",
+  "colorSuccessTextActive",
+];
+
+const warningColors = [
+  "colorWarning",
+  "colorWarningBg",
+  "colorWarningBgHover",
+  "colorWarningBorder",
+  "colorWarningBorderHover",
+  "colorWarningHover",
+  "colorWarningActive",
+  "colorWarningTextHover",
+  "colorWarningText",
+  "colorWarningTextActive",
+];
+
+const errorColors = [
+  "colorError",
+  "colorErrorBg",
+  "colorErrorBgHover",
+  "colorErrorBorder",
+  "colorErrorBorderHover",
+  "colorErrorHover",
+  "colorErrorActive",
+  "colorErrorTextHover",
+  "colorErrorText",
+  "colorErrorTextActive",
+];
+
+const infoColors = [
+  "colorInfo",
+  "colorInfoBg",
+  "colorInfoBgHover",
+  "colorInfoBorder",
+  "colorInfoBorderHover",
+  "colorInfoHover",
+  "colorInfoActive",
+  "colorInfoTextHover",
+  "colorInfoText",
+  "colorInfoTextActive",
+];
+
+export const functionalColors = [
+  ...brandColors,
+  ...successColors,
+  ...warningColors,
+  ...errorColors,
+  ...infoColors,
+];

package/src/preset/tokens/margins.ts

@@ -0,0 +1,11 @@
+// Spacing
+export const margins = [
+  "marginXXS", // 4
+  "marginXS", // 8
+  "marginSM", // 12
+  "margin", // 16
+  "marginMD", // 20
+  "marginLG", // 24
+  "marginXL", // 32
+  "marginXXL", // 48
+];

package/src/preset/tokens/semanticColors.ts

@@ -0,0 +1,29 @@
+export const semanticColors = [
+  // Text
+  "colorText",
+  "colorTextSecondary",
+  "colorTextTertiary",
+  "colorTextQuaternary",
+  "colorTextDescription",
+  "colorTextDisabled",
+  "colorTextHeading",
+  "colorTextLabel",
+  "colorTextLightSolid",
+  "colorTextPlaceholder",
+
+  // BG
+  "colorBgContainer",
+  "colorBgElevated",
+  "colorBgLayout",
+  "colorBgSpotlight",
+  "colorBgMask",
+
+  // Border Color
+  "colorBorder",
+  "colorBorderSecondary",
+  // Fill Color
+  "colorFill",
+  "colorFillSecondary",
+  "colorFillTertiary",
+  "colorFillQuaternary",
+];

package/src/utils/index.ts

@@ -0,0 +1,10 @@
+import hexRgb from "hex-rgb";
+
+export function isRGBColor(color: string) {
+  return color.trim().startsWith("rgb");
+}
+
+export function hexToRgb(hex: string) {
+  const { red, green, blue } = hexRgb(hex);
+  return `${red}, ${green}, ${blue}`;
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "moduleDetection": "force",
+    "module": "preserve",
+    "moduleResolution": "bundler",
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "types": ["node", "vite/client"],
+    "strict": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
+  },
+  "include": ["src", "playground", "vitest.setup.ts"]
+}

package/tsdown.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  target: ["es6", "node16"],
+  exports: true,
+  platform: "neutral",
+  unbundle: true,
+  dts: true,
+  entry: {
+    components: "./src/components.tsx",
+    plugin: "./src/plugin.ts",
+    preset: "./src/preset/index.ts",
+  },
+});

package/vite.config.ts

@@ -0,0 +1,23 @@
+/// <reference types="vitest/config" />
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  root: "./playground",
+  plugins: [react(), tailwindcss()],
+  base: "/tailwind-preset-antd/",
+  build: {
+    outDir: "docs-dist",
+  },
+  test: {
+    root: ".",
+    setupFiles: "./vitest.setup.ts",
+    environment: "jsdom",
+    coverage: {
+      provider: "v8",
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
+    },
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1,11 @@
+import "@testing-library/jest-dom/vitest";
+
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup } from "@testing-library/react";
+import { afterEach, expect } from "vitest";
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});