tailwind-preset-antd 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +135 -135
  2. package/dist/components.js +7 -3
  3. package/dist/core/genCssVarByTokens.js +2 -2
  4. package/dist/hooks/useCompatibleInsertionEffect.js +25 -0
  5. package/dist/plugin.js +1 -1
  6. package/package.json +76 -76
package/README.md CHANGED
@@ -1,135 +1,135 @@
1
- 像使用 tailwindcss 一样使用 antd design token。
2
-
3
- 提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
4
-
5
- [English](./README.en-US.md) | 简体中文
6
-
7
- # 项目介绍
8
-
9
- 以前：
10
-
11
- ```tsx
12
- import { theme } from "antd";
13
-
14
- function App() {
15
- const { token } = theme.useToken();
16
-
17
- return <div style={{ backgroundColor: token.colorPrimary }}></div>;
18
- }
19
- ```
20
-
21
- 现在：
22
-
23
- ```tsx
24
- function App() {
25
- return <div className="bg-colorPrimary"></div>;
26
- }
27
- ```
28
-
29
- ## 基础使用
30
-
31
- ### tailwindcss v4
32
-
33
- 在你的 css 中使用插件
34
-
35
- ```css
36
- @plugin "tailwind-preset-antd/plugin";
37
-
38
- /* or
39
- @plugin "tailwind-preset-antd/plugin" {
40
- twPrefix: "ant";
41
- cssVarPrefix: "abcd";
42
- }
43
- */
44
- ```
45
-
46
- 在你的任意组件中注入 css 变量的组件
47
-
48
- ```tsx
49
- import AntdTokenCssVar from "tailwind-preset-antd/components";
50
-
51
- export default function App() {
52
- return (
53
- <>
54
- <AntdTokenCssVar />
55
- </>
56
- );
57
- }
58
- ```
59
-
60
- ### tailwindcss v3
61
-
62
- 在你的 `tailwind.config.ts` 中使用插件
63
-
64
- ```js
65
- // tailwind.config.ts
66
- import type { Config } from "tailwindcss/types/config";
67
- import tailwindPresetAntd from "tailwind-preset-antd/plugin";
68
-
69
- const config: Config = {
70
- // ...
71
- // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
- plugins: [tailwindPresetAntd],
73
- };
74
-
75
- export default config;
76
- ```
77
-
78
- 在你的任意组件中注入 css 变量的组件
79
-
80
- ```tsx
81
- import AntdTokenCssVar from "tailwind-preset-antd/components";
82
-
83
- export default function App() {
84
- return (
85
- <>
86
- <AntdTokenCssVar />
87
- </>
88
- );
89
- }
90
- ```
91
-
92
- 如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
93
-
94
- ## 配置项
95
-
96
- - `twPrefix`: tw 类名前缀，默认为 `''`
97
- - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
98
-
99
- 例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
100
-
101
- ```tsx
102
- /**
103
- * :root{
104
- * --abcd-colorPrimary: 47 84 235;
105
- * }
106
- */
107
- function App() {
108
- return <div className="bg-ant-colorPrimary"></div>;
109
- }
110
-
111
- // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
112
- ```
113
-
114
- ### 与 tailwind-merge 配合使用
115
-
116
- 如果使用 `tailwind-merge`，需进行额外配置，此问题详见 [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260)
117
-
118
- ```js
119
- import { extendTailwindMerge } from "tailwind-merge";
120
- import { fontSizes } from "tailwind-preset-antd/preset";
121
-
122
- const twMerge = extendTailwindMerge({
123
- // prefix:"" // 如果配置了 twPrefix
124
- extend: {
125
- theme: {
126
- text: [...fontSizes], // tw-merge v3
127
- // colors:[...colorPresets] // tw-merge v2
128
- },
129
- },
130
- });
131
- ```
132
-
133
- ## 鸣谢
134
-
135
- - [react-antd-admin](https://github.com/condorheroblog/react-antd-admin)：此项目的 tailwindcss 插件使用启发了此仓库的开发
1
+ 像使用 tailwindcss 一样使用 antd design token。
2
+
3
+ 提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
4
+
5
+ [English](./README.en-US.md) | 简体中文
6
+
7
+ # 项目介绍
8
+
9
+ 以前：
10
+
11
+ ```tsx
12
+ import { theme } from "antd";
13
+
14
+ function App() {
15
+ const { token } = theme.useToken();
16
+
17
+ return <div style={{ backgroundColor: token.colorPrimary }}></div>;
18
+ }
19
+ ```
20
+
21
+ 现在：
22
+
23
+ ```tsx
24
+ function App() {
25
+ return <div className="bg-colorPrimary"></div>;
26
+ }
27
+ ```
28
+
29
+ ## 基础使用
30
+
31
+ ### tailwindcss v4
32
+
33
+ 在你的 css 中使用插件
34
+
35
+ ```css
36
+ @plugin "tailwind-preset-antd/plugin";
37
+
38
+ /* or
39
+ @plugin "tailwind-preset-antd/plugin" {
40
+ twPrefix: "ant";
41
+ cssVarPrefix: "abcd";
42
+ }
43
+ */
44
+ ```
45
+
46
+ 在你的任意组件中注入 css 变量的组件
47
+
48
+ ```tsx
49
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
50
+
51
+ export default function App() {
52
+ return (
53
+ <>
54
+ <AntdTokenCssVar />
55
+ </>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### tailwindcss v3
61
+
62
+ 在你的 `tailwind.config.ts` 中使用插件
63
+
64
+ ```js
65
+ // tailwind.config.ts
66
+ import type { Config } from "tailwindcss/types/config";
67
+ import tailwindPresetAntd from "tailwind-preset-antd/plugin";
68
+
69
+ const config: Config = {
70
+ // ...
71
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
+ plugins: [tailwindPresetAntd],
73
+ };
74
+
75
+ export default config;
76
+ ```
77
+
78
+ 在你的任意组件中注入 css 变量的组件
79
+
80
+ ```tsx
81
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
82
+
83
+ export default function App() {
84
+ return (
85
+ <>
86
+ <AntdTokenCssVar />
87
+ </>
88
+ );
89
+ }
90
+ ```
91
+
92
+ 如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
93
+
94
+ ## 配置项
95
+
96
+ - `twPrefix`: tw 类名前缀，默认为 `''`
97
+ - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
98
+
99
+ 例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
100
+
101
+ ```tsx
102
+ /**
103
+ * :root{
104
+ * --abcd-colorPrimary: 47 84 235;
105
+ * }
106
+ */
107
+ function App() {
108
+ return <div className="bg-ant-colorPrimary"></div>;
109
+ }
110
+
111
+ // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
112
+ ```
113
+
114
+ ### 与 tailwind-merge 配合使用
115
+
116
+ 如果使用 `tailwind-merge`，需进行额外配置，此问题详见 [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260)
117
+
118
+ ```js
119
+ import { extendTailwindMerge } from "tailwind-merge";
120
+ import { fontSizes } from "tailwind-preset-antd/preset";
121
+
122
+ const twMerge = extendTailwindMerge({
123
+ // prefix:"" // 如果配置了 twPrefix
124
+ extend: {
125
+ theme: {
126
+ text: [...fontSizes], // tw-merge v3
127
+ // colors:[...colorPresets] // tw-merge v2
128
+ },
129
+ },
130
+ });
131
+ ```
132
+
133
+ ## 鸣谢
134
+
135
+ - [react-antd-admin](https://github.com/condorheroblog/react-antd-admin)：此项目的 tailwindcss 插件使用启发了此仓库的开发
package/dist/components.js CHANGED
@@ -1,13 +1,17 @@
1
1
  import { genCSSVarByTokens } from "./core/genCssVarByTokens.js";
2
+ import useCompatibleInsertionEffect from "./hooks/useCompatibleInsertionEffect.js";
2
3
  import { theme } from "antd";
3
- import { useInsertionEffect } from "react";
4
+ import { useRef } from "react";
4
5
  //#region src/components.tsx
5
6
  const styleId = "antd-token-inject";
6
7
  function AntdTokenCssVar(props) {
7
8
  const { cssVarPrefix } = props;
8
9
  const { token } = theme.useToken();
9
- useInsertionEffect(() => {
10
- const cssVar = genCSSVarByTokens(token, cssVarPrefix);
10
+ const cssVarRef = useRef("");
11
+ useCompatibleInsertionEffect(() => {
12
+ cssVarRef.current = genCSSVarByTokens(token, cssVarPrefix);
13
+ }, () => {
14
+ const cssVar = cssVarRef.current;
11
15
  const style = document.querySelector(`#${styleId}`) || document.createElement("style");
12
16
  style.id = styleId;
13
17
  style.setAttribute("plugin-name", "tailwind-preset-antd");
package/dist/core/genCssVarByTokens.js CHANGED
@@ -19,8 +19,8 @@ function genCSSVarByTokens(tokens, cssVarPrefix = "a") {
19
19
  for (let i = 0; i < presetTokens.length; i++) {
20
20
  const key = presetTokens[i];
21
21
  const value = tokens[key];
22
- if (value === void 0 && process.env.NODE_ENV !== "production") {
23
- console.warn(`[tailwind-preset-antd]: ${key} is not defined in antd design token`);
22
+ if (value === void 0) {
23
+ if (process.env.NODE_ENV === "development") console.warn(`[tailwind-preset-antd]: ${key} is not defined in antd design token`);
24
24
  continue;
25
25
  }
26
26
  if (colorPalettes.includes(key)) {
package/dist/hooks/useCompatibleInsertionEffect.js ADDED
@@ -0,0 +1,25 @@
1
+ import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
2
+ import * as React from "react";
3
+ //#region src/hooks/useCompatibleInsertionEffect.ts
4
+ const { useInsertionEffect } = _objectSpread2({}, React);
5
+ /**
6
+ * Polyfill `useInsertionEffect` for React < 18
7
+ * @param renderEffect will be executed in `useMemo`, and do not have callback
8
+ * @param effect will be executed in `useLayoutEffect`
9
+ * @param deps
10
+ */
11
+ const useInsertionEffectPolyfill = (renderEffect, effect, deps) => {
12
+ React.useMemo(renderEffect, deps);
13
+ React.useLayoutEffect(() => effect(true), deps);
14
+ };
15
+ /**
16
+ * Compatible `useInsertionEffect`
17
+ * will use `useInsertionEffect` if React version >= 18,
18
+ * otherwise use `useInsertionEffectPolyfill`.
19
+ */
20
+ const useCompatibleInsertionEffect = useInsertionEffect ? (renderEffect, effect, deps) => useInsertionEffect(() => {
21
+ renderEffect();
22
+ return effect();
23
+ }, deps) : useInsertionEffectPolyfill;
24
+ //#endregion
25
+ export { useCompatibleInsertionEffect as default };
package/dist/plugin.js CHANGED
@@ -1,5 +1,5 @@
1
- import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
2
1
  import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
2
+ import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
3
3
  import plugin from "tailwindcss/plugin";
4
4
  //#region src/plugin.ts
5
5
  /**
package/package.json CHANGED
@@ -1,76 +1,76 @@
1
- {
2
- "name": "tailwind-preset-antd",
3
- "version": "0.1.0",
4
- "description": "Use antd design token like using tailwindcss",
5
- "keywords": [
6
- "antd",
7
- "tailwindcss"
8
- ],
9
- "homepage": "https://json-q.github.io/tailwind-preset-antd/",
10
- "license": "MIT",
11
- "author": "json-q",
12
- "repository": {
13
- "type": "git",
14
- "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
15
- },
16
- "files": [
17
- "dist"
18
- ],
19
- "type": "module",
20
- "sideEffects": false,
21
- "exports": {
22
- "./components": "./dist/components.js",
23
- "./plugin": "./dist/plugin.js",
24
- "./preset": "./dist/preset.js",
25
- "./package.json": "./package.json"
26
- },
27
- "scripts": {
28
- "play": "vite",
29
- "build:play": "vite build",
30
- "preview:play": "vite preview",
31
- "build": "tsdown",
32
- "dev": "tsdown --watch",
33
- "test": "vitest",
34
- "ui": "vitest --ui",
35
- "snapshot": "vitest -u",
36
- "coverage": "vitest --coverage",
37
- "release": "bumpp",
38
- "prepublishOnly": "pnpm run build",
39
- "lint:package": "publint",
40
- "typecheck": "tsc --noEmit",
41
- "lint": "oxlint",
42
- "lint:fix": "oxlint --fix",
43
- "fmt": "oxfmt",
44
- "fmt:check": "oxfmt --check"
45
- },
46
- "dependencies": {
47
- "hex-rgb": "^5.0.0"
48
- },
49
- "devDependencies": {
50
- "@tailwindcss/vite": "^4.2.4",
51
- "@testing-library/jest-dom": "^6.9.1",
52
- "@testing-library/react": "^16.3.2",
53
- "@types/node": "^25.6.2",
54
- "@types/react": "^19.2.14",
55
- "@types/react-dom": "^19.2.3",
56
- "@vitejs/plugin-react": "^6.0.1",
57
- "@vitest/coverage-v8": "4.1.5",
58
- "bumpp": "^11.1.0",
59
- "jsdom": "^29.1.1",
60
- "oxfmt": "^0.48.0",
61
- "oxlint": "^1.63.0",
62
- "postcss": "^8.5.14",
63
- "publint": "^0.3.19",
64
- "react-dom": "^19.2.6",
65
- "tailwindcss": "^4.2.4",
66
- "tsdown": "^0.22.0",
67
- "typescript": "^6.0.3",
68
- "vite": "^8.0.11",
69
- "vitest": "^4.1.5"
70
- },
71
- "peerDependencies": {
72
- "antd": ">=5",
73
- "react": ">=18",
74
- "tailwindcss": "^3 || ^4"
75
- }
76
- }
1
+ {
2
+ "name": "tailwind-preset-antd",
3
+ "version": "0.1.1",
4
+ "description": "Use antd design token like using tailwindcss",
5
+ "keywords": [
6
+ "antd",
7
+ "tailwindcss"
8
+ ],
9
+ "homepage": "https://json-q.github.io/tailwind-preset-antd/",
10
+ "license": "MIT",
11
+ "author": "json-q",
12
+ "repository": {
13
+ "type": "git",
14
+ "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
15
+ },
16
+ "files": [
17
+ "dist"
18
+ ],
19
+ "type": "module",
20
+ "sideEffects": false,
21
+ "exports": {
22
+ "./components": "./dist/components.js",
23
+ "./plugin": "./dist/plugin.js",
24
+ "./preset": "./dist/preset.js",
25
+ "./package.json": "./package.json"
26
+ },
27
+ "scripts": {
28
+ "play": "vite",
29
+ "build:play": "vite build",
30
+ "preview:play": "vite preview",
31
+ "build": "tsdown",
32
+ "dev": "tsdown --watch",
33
+ "test": "vitest",
34
+ "ui": "vitest --ui",
35
+ "snapshot": "vitest -u",
36
+ "coverage": "vitest run --coverage",
37
+ "release": "bumpp",
38
+ "prepublishOnly": "pnpm run build",
39
+ "lint:package": "publint",
40
+ "typecheck": "tsc --noEmit",
41
+ "lint": "oxlint",
42
+ "lint:fix": "oxlint --fix",
43
+ "fmt": "oxfmt",
44
+ "fmt:check": "oxfmt --check"
45
+ },
46
+ "dependencies": {
47
+ "hex-rgb": "^5.0.0"
48
+ },
49
+ "devDependencies": {
50
+ "@tailwindcss/vite": "^4.2.4",
51
+ "@testing-library/jest-dom": "^6.9.1",
52
+ "@testing-library/react": "^16.3.2",
53
+ "@types/node": "^25.6.2",
54
+ "@types/react": "^19.2.14",
55
+ "@types/react-dom": "^19.2.3",
56
+ "@vitejs/plugin-react": "^6.0.1",
57
+ "@vitest/coverage-v8": "4.1.5",
58
+ "bumpp": "^11.1.0",
59
+ "jsdom": "^29.1.1",
60
+ "oxfmt": "^0.48.0",
61
+ "oxlint": "^1.63.0",
62
+ "postcss": "^8.5.14",
63
+ "publint": "^0.3.19",
64
+ "react-dom": "^19.2.6",
65
+ "tailwindcss": "^4.2.4",
66
+ "tsdown": "^0.22.0",
67
+ "typescript": "^6.0.3",
68
+ "vite": "^8.0.11",
69
+ "vitest": "^4.1.5"
70
+ },
71
+ "peerDependencies": {
72
+ "antd": ">=5",
73
+ "react": ">=16.9.0",
74
+ "tailwindcss": "^3 || ^4"
75
+ }
76
+ }