tailwind-preset-antd 0.0.1 → 0.0.2

package/playground/src/App.tsx

@@ -1,226 +0,0 @@
-import { Divider } from "antd";
-
-const colorPalettes = [
-  "red",
-  "volcano",
-  "orange",
-  "lime",
-  "gold",
-  "yellow",
-  "green",
-  "cyan",
-  "blue",
-  "geekblue",
-  "purple",
-  "magenta",
-];
-
-const getColorClass = (color: string, index: number) => {
-  const classes = {
-    red: [
-      "bg-red-1",
-      "bg-red-2",
-      "bg-red-3",
-      "bg-red-4",
-      "bg-red-5",
-      "bg-red-6",
-      "bg-red-7",
-      "bg-red-8",
-      "bg-red-9",
-      "bg-red-10",
-    ],
-    volcano: [
-      "bg-volcano-1",
-      "bg-volcano-2",
-      "bg-volcano-3",
-      "bg-volcano-4",
-      "bg-volcano-5",
-      "bg-volcano-6",
-      "bg-volcano-7",
-      "bg-volcano-8",
-      "bg-volcano-9",
-      "bg-volcano-10",
-    ],
-    orange: [
-      "bg-orange-1",
-      "bg-orange-2",
-      "bg-orange-3",
-      "bg-orange-4",
-      "bg-orange-5",
-      "bg-orange-6",
-      "bg-orange-7",
-      "bg-orange-8",
-      "bg-orange-9",
-      "bg-orange-10",
-    ],
-    lime: [
-      "bg-lime-1",
-      "bg-lime-2",
-      "bg-lime-3",
-      "bg-lime-4",
-      "bg-lime-5",
-      "bg-lime-6",
-      "bg-lime-7",
-      "bg-lime-8",
-      "bg-lime-9",
-      "bg-lime-10",
-    ],
-    gold: [
-      "bg-gold-1",
-      "bg-gold-2",
-      "bg-gold-3",
-      "bg-gold-4",
-      "bg-gold-5",
-      "bg-gold-6",
-      "bg-gold-7",
-      "bg-gold-8",
-      "bg-gold-9",
-      "bg-gold-10",
-    ],
-    yellow: [
-      "bg-yellow-1",
-      "bg-yellow-2",
-      "bg-yellow-3",
-      "bg-yellow-4",
-      "bg-yellow-5",
-      "bg-yellow-6",
-      "bg-yellow-7",
-      "bg-yellow-8",
-      "bg-yellow-9",
-      "bg-yellow-10",
-    ],
-    green: [
-      "bg-green-1",
-      "bg-green-2",
-      "bg-green-3",
-      "bg-green-4",
-      "bg-green-5",
-      "bg-green-6",
-      "bg-green-7",
-      "bg-green-8",
-      "bg-green-9",
-      "bg-green-10",
-    ],
-    cyan: [
-      "bg-cyan-1",
-      "bg-cyan-2",
-      "bg-cyan-3",
-      "bg-cyan-4",
-      "bg-cyan-5",
-      "bg-cyan-6",
-      "bg-cyan-7",
-      "bg-cyan-8",
-      "bg-cyan-9",
-      "bg-cyan-10",
-    ],
-    blue: [
-      "bg-blue-1",
-      "bg-blue-2",
-      "bg-blue-3",
-      "bg-blue-4",
-      "bg-blue-5",
-      "bg-blue-6",
-      "bg-blue-7",
-      "bg-blue-8",
-      "bg-blue-9",
-      "bg-blue-10",
-    ],
-    geekblue: [
-      "bg-geekblue-1",
-      "bg-geekblue-2",
-      "bg-geekblue-3",
-      "bg-geekblue-4",
-      "bg-geekblue-5",
-      "bg-geekblue-6",
-      "bg-geekblue-7",
-      "bg-geekblue-8",
-      "bg-geekblue-9",
-      "bg-geekblue-10",
-    ],
-    purple: [
-      "bg-purple-1",
-      "bg-purple-2",
-      "bg-purple-3",
-      "bg-purple-4",
-      "bg-purple-5",
-      "bg-purple-6",
-      "bg-purple-7",
-      "bg-purple-8",
-      "bg-purple-9",
-      "bg-purple-10",
-    ],
-    magenta: [
-      "bg-magenta-1",
-      "bg-magenta-2",
-      "bg-magenta-3",
-      "bg-magenta-4",
-      "bg-magenta-5",
-      "bg-magenta-6",
-      "bg-magenta-7",
-      "bg-magenta-8",
-      "bg-magenta-9",
-      "bg-magenta-10",
-    ],
-  };
-  return classes[color as keyof typeof classes][index];
-};
-
-export default function App() {
-  return (
-    <div className="text-fontSize p-8">
-      <Divider>Tailwindcss color palettes for antd</Divider>
-      <div className="flex flex-col items-center gap-4 p-4">
-        {colorPalettes.map((color) => (
-          <div key={color} className="flex gap-1">
-            <div className="w-16 text-sm font-bold">{color}</div>
-            <div className="flex gap-1">
-              {Array.from({ length: 10 }, (_, i) => (
-                <div
-                  key={i}
-                  className={`${getColorClass(color, i)} text-colorTextLightSolid flex h-8 w-8 items-center justify-center rounded text-xs`}
-                >
-                  {i + 1}
-                </div>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <Divider>Rewrite antd component use plugin</Divider>
-      <div className="flex justify-center gap-6">
-        {/* Card */}
-        <div
-          style={{ width: 300 }}
-          className="text-colorTextHeading border-colorBorderSecondary rounded-borderRadiusLG flex flex-col justify-center border border-solid"
-        >
-          {/* header */}
-          <div className="px-marginLG border-colorBorderSecondary flex h-14 items-center border-b border-solid font-semibold">
-            <div className="flex w-full items-center">
-              <div className="inline-block flex-1 overflow-hidden text-ellipsis whitespace-nowrap">
-                Default size card
-              </div>
-              <div className="text-fontSize font-normal">
-                <a className="text-colorPrimary cursor-pointer">More</a>
-              </div>
-            </div>
-          </div>
-          {/* content */}
-          <div className="p-marginLG">
-            <p>Card content</p>
-            <p>Card content</p>
-            <p>Card content</p>
-          </div>
-        </div>
-
-        {/* Button */}
-        <button
-          type="button"
-          className="px-margin rounded-borderRadius bg-colorPrimary text-colorTextLightSolid hover:bg-colorPrimaryHover active:bg-colorPrimaryActive h-8 cursor-pointer transition-colors"
-        >
-          Primary Button
-        </button>
-      </div>
-    </div>
-  );
-}

package/playground/src/global.css

@@ -1,4 +0,0 @@
-@import "tailwindcss";
-
-/* prettier-ignore */
-@plugin "../../src/plugin.ts";

package/playground/src/index.tsx

@@ -1,15 +0,0 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import { ConfigProvider } from "antd";
-import App from "./App";
-import AntdTokenCssVar from "../../src/components";
-import "./global.css";
-
-createRoot(document.querySelector("#app")!).render(
-  <StrictMode>
-    <ConfigProvider>
-      <AntdTokenCssVar />
-      <App />
-    </ConfigProvider>
-  </StrictMode>
-);

package/src/components.test.tsx

@@ -1,56 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

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

package/src/core/genCssVarByToken.test.ts

@@ -1,46 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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