tailwind-preset-antd 0.1.0 → 0.1.2
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.
- package/README.en-US.md +135 -135
- package/README.md +2 -2
- package/dist/components.js +7 -3
- package/dist/core/genCssVarByTokens.js +2 -2
- package/dist/hooks/useCompatibleInsertionEffect.js +25 -0
- package/dist/plugin.js +1 -1
- package/dist/preset/tokens/semanticColors.js +2 -0
- package/package.json +21 -22
package/README.en-US.md
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
Use antd design token like using tailwindcss.
|
|
2
|
-
|
|
3
|
-
Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
|
|
4
|
-
|
|
5
|
-
[简体中文](./README.md) | English
|
|
6
|
-
|
|
7
|
-
# Project Introduction
|
|
8
|
-
|
|
9
|
-
Before:
|
|
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
|
-
Now:
|
|
22
|
-
|
|
23
|
-
```tsx
|
|
24
|
-
function App() {
|
|
25
|
-
return <div className="bg-colorPrimary"></div>;
|
|
26
|
-
}
|
|
27
|
-
```
|
|
28
|
-
|
|
29
|
-
## Basic Usage
|
|
30
|
-
|
|
31
|
-
### tailwindcss v4
|
|
32
|
-
|
|
33
|
-
Use plugin in your 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
|
-
|
|
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
|
-
Use plugin in your `tailwind.config.ts`
|
|
63
|
-
|
|
64
|
-
```ts
|
|
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
|
-
|
|
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
|
-
If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
|
|
93
|
-
|
|
94
|
-
## Configuration Options
|
|
95
|
-
|
|
96
|
-
- `twPrefix`: tw class name prefix, default is `''`
|
|
97
|
-
- `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
|
|
98
|
-
|
|
99
|
-
For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
|
|
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
|
-
// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
|
|
112
|
-
```
|
|
113
|
-
|
|
114
|
-
### Using with tailwind-merge
|
|
115
|
-
|
|
116
|
-
If you use `tailwind-merge`, additional configuration is required. See [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260) for details on this issue
|
|
117
|
-
|
|
118
|
-
```js
|
|
119
|
-
import { extendTailwindMerge } from "tailwind-merge";
|
|
120
|
-
import { fontSizes } from "tailwind-preset-antd/preset";
|
|
121
|
-
|
|
122
|
-
const twMerge = extendTailwindMerge({
|
|
123
|
-
// prefix:"" // if twPrefix is configured
|
|
124
|
-
extend: {
|
|
125
|
-
theme: {
|
|
126
|
-
text: [...fontSizes], // tw-merge v3
|
|
127
|
-
// colors:[...colorPresets] // tw-merge v2
|
|
128
|
-
},
|
|
129
|
-
},
|
|
130
|
-
});
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
## Acknowledgments
|
|
134
|
-
|
|
135
|
-
- [react-antd-admin](https://github.com/condorheroblog/react-antd-admin): The tailwindcss plugin used in this project inspired the development of this repository
|
|
1
|
+
Use antd design token like using tailwindcss.
|
|
2
|
+
|
|
3
|
+
Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
|
|
4
|
+
|
|
5
|
+
[简体中文](./README.md) | English
|
|
6
|
+
|
|
7
|
+
# Project Introduction
|
|
8
|
+
|
|
9
|
+
Before:
|
|
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
|
+
Now:
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
function App() {
|
|
25
|
+
return <div className="bg-colorPrimary"></div>;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
## Basic Usage
|
|
30
|
+
|
|
31
|
+
### tailwindcss v4
|
|
32
|
+
|
|
33
|
+
Use plugin in your 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
|
+
Import `AntdTokenCssVar` in your component. If you use theme switching, `AntdTokenCssVar` must be used inside antd `ConfigProvider`
|
|
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
|
+
Use plugin in your `tailwind.config.ts`
|
|
63
|
+
|
|
64
|
+
```ts
|
|
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
|
+
Import `AntdTokenCssVar` in your component. If you use theme switching, `AntdTokenCssVar` must be used inside antd `ConfigProvider`
|
|
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
|
+
If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
|
|
93
|
+
|
|
94
|
+
## Configuration Options
|
|
95
|
+
|
|
96
|
+
- `twPrefix`: tw class name prefix, default is `''`
|
|
97
|
+
- `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
|
|
98
|
+
|
|
99
|
+
For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
|
|
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
|
+
// Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
### Using with tailwind-merge
|
|
115
|
+
|
|
116
|
+
If you use `tailwind-merge`, additional configuration is required. See [discussions](https://github.com/tailwindlabs/tailwindcss/discussions/19260) for details on this issue
|
|
117
|
+
|
|
118
|
+
```js
|
|
119
|
+
import { extendTailwindMerge } from "tailwind-merge";
|
|
120
|
+
import { fontSizes } from "tailwind-preset-antd/preset";
|
|
121
|
+
|
|
122
|
+
const twMerge = extendTailwindMerge({
|
|
123
|
+
// prefix:"" // if twPrefix is configured
|
|
124
|
+
extend: {
|
|
125
|
+
theme: {
|
|
126
|
+
text: [...fontSizes], // tw-merge v3
|
|
127
|
+
// colors:[...colorPresets] // tw-merge v2
|
|
128
|
+
},
|
|
129
|
+
},
|
|
130
|
+
});
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Acknowledgments
|
|
134
|
+
|
|
135
|
+
- [react-antd-admin](https://github.com/condorheroblog/react-antd-admin): The tailwindcss plugin used in this project inspired the development of this repository
|
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@ function App() {
|
|
|
43
43
|
*/
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
|
|
46
|
+
在你的组件中导入 `AntdTokenCssVar`。如果你使用主题切换，则 `AntdTokenCssVar` 必须在 antd `ConfigProvider` 中使用
|
|
47
47
|
|
|
48
48
|
```tsx
|
|
49
49
|
import AntdTokenCssVar from "tailwind-preset-antd/components";
|
|
@@ -75,7 +75,7 @@ const config: Config = {
|
|
|
75
75
|
export default config;
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
在你的组件中导入 `AntdTokenCssVar`。如果你使用主题切换，则 `AntdTokenCssVar` 必须在 antd `ConfigProvider` 中使用
|
|
79
79
|
|
|
80
80
|
```tsx
|
|
81
81
|
import AntdTokenCssVar from "tailwind-preset-antd/components";
|
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 {
|
|
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
|
-
|
|
10
|
-
|
|
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");
|
|
@@ -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
|
|
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)) {
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tailwind-preset-antd",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Use antd design token like using tailwindcss",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"antd",
|
|
@@ -24,25 +24,6 @@
|
|
|
24
24
|
"./preset": "./dist/preset.js",
|
|
25
25
|
"./package.json": "./package.json"
|
|
26
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
27
|
"dependencies": {
|
|
47
28
|
"hex-rgb": "^5.0.0"
|
|
48
29
|
},
|
|
@@ -70,7 +51,25 @@
|
|
|
70
51
|
},
|
|
71
52
|
"peerDependencies": {
|
|
72
53
|
"antd": ">=5",
|
|
73
|
-
"react": ">=
|
|
54
|
+
"react": ">=16.9.0",
|
|
74
55
|
"tailwindcss": "^3 || ^4"
|
|
56
|
+
},
|
|
57
|
+
"scripts": {
|
|
58
|
+
"play": "vite",
|
|
59
|
+
"build:play": "vite build",
|
|
60
|
+
"preview:play": "vite preview",
|
|
61
|
+
"build": "tsdown",
|
|
62
|
+
"dev": "tsdown --watch",
|
|
63
|
+
"test": "vitest",
|
|
64
|
+
"ui": "vitest --ui",
|
|
65
|
+
"snapshot": "vitest -u",
|
|
66
|
+
"coverage": "vitest run --coverage",
|
|
67
|
+
"release": "bumpp",
|
|
68
|
+
"lint:package": "publint",
|
|
69
|
+
"typecheck": "tsc --noEmit",
|
|
70
|
+
"lint": "oxlint",
|
|
71
|
+
"lint:fix": "oxlint --fix",
|
|
72
|
+
"fmt": "oxfmt",
|
|
73
|
+
"fmt:check": "oxfmt --check"
|
|
75
74
|
}
|
|
76
|
-
}
|
|
75
|
+
}
|