Skip to content

Commit 71e032d

Browse files
yunsiiyunsii
committed
✨ feat: init project
1 parent 0b062b3 commit 71e032d

24 files changed

+1863
-264
lines changed

‎README.md

+6-10
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1-
# pkg-name
1+
# postcss-antd-fixes
22

3-
[![NPM version](https://img.shields.io/npm/v/pkg-name?color=a1b858&label=)](https://www.npmjs.com/package/pkg-name)
3+
[![NPM version](https://img.shields.io/npm/v/postcss-antd-fixes?color=a1b858&label=)](https://www.npmjs.com/package/postcss-antd-fixes)
44

5-
## Usage
5+
PostCSS plugin tries to fix all issues about [antd](https://www.npmjs.com/package/antd) with any others global CSS reset
66

7-
- Search and replace all `pkg-name` to `what-you-want-package-name`
8-
- Update [\_theme.tsx](./docs/pages/_theme.tsx) package href, remove useless navs
9-
- Update or remove test cases
10-
- Add some keywords to [package.json](./package.json)
11-
- Update the author information, like name, link, etc.
7+
## Features
128

13-
Finally, you can remove the [usage section](#usage) completely.
9+
- support antd + [TailwindCSS preflight.css](https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css), ref: [ant-design/ant-design#38794](https://github.com/ant-design/ant-design/issues/38794)
1410

1511
## Build & Publish
1612

@@ -25,4 +21,4 @@ Finally, you can remove the [usage section](#usage) completely.
2521
2622
## License
2723

28-
[MIT](./LICENSE) License © 2022 [Yuns](https://github.com/yunsii)
24+
[MIT](./LICENSE) License © 2023 [Yuns](https://github.com/yunsii)

‎docs/pages/_theme.tsx

+4-13
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import './global.css'
12
import React from 'react'
23
import { createTheme, defaultSideNavs } from 'vite-pages-theme-doc'
34

@@ -9,21 +10,11 @@ const theme: Theme = (props) => {
910
const { loadedData, loadState } = props
1011

1112
const DocTheme = createTheme({
12-
logo: <div style={{ fontSize: '20px' }}>pkg-name</div>,
13+
logo: <div style={{ fontSize: '20px' }}>postcss-antd-fixes</div>,
1314
topNavs: [
1415
{
15-
label: 'Components',
16-
path: '/components',
17-
activeIfMatch: '/components',
18-
},
19-
{
20-
label: 'Hooks',
21-
path: '/hooks',
22-
activeIfMatch: '/hooks',
23-
},
24-
{
25-
label: 'pkg-name',
26-
href: 'https://github.com/yunsii/starter-vite-react-library',
16+
label: 'postcss-antd-fixes',
17+
href: 'https://github.com/yunsii/postcss-antd-fixes',
2718
},
2819
],
2920
sideNavs: (ctx) => {

‎docs/pages/antd$.tsx

+217
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import {
2+
Button,
3+
Cascader,
4+
ConfigProvider,
5+
Image,
6+
Input,
7+
Pagination,
8+
Select,
9+
Space,
10+
Switch,
11+
Table,
12+
Tag,
13+
theme,
14+
} from 'antd'
15+
import React from 'react'
16+
import { UserAddOutlined, UserOutlined } from '@ant-design/icons'
17+
18+
import type { ColumnsType } from 'antd/es/table'
19+
20+
interface Option {
21+
value: string | number
22+
label: string
23+
children?: Option[]
24+
}
25+
26+
const options: Option[] = [
27+
{
28+
value: 'zhejiang',
29+
label: 'Zhejiang',
30+
children: [
31+
{
32+
value: 'hangzhou',
33+
label: 'Hangzhou',
34+
children: [
35+
{
36+
value: 'xihu',
37+
label: 'West Lake',
38+
},
39+
],
40+
},
41+
],
42+
},
43+
{
44+
value: 'jiangsu',
45+
label: 'Jiangsu',
46+
children: [
47+
{
48+
value: 'nanjing',
49+
label: 'Nanjing',
50+
children: [
51+
{
52+
value: 'zhonghuamen',
53+
label: 'Zhong Hua Men',
54+
},
55+
],
56+
},
57+
],
58+
},
59+
]
60+
61+
interface DataType {
62+
key: string
63+
name: string
64+
age: number
65+
address: string
66+
tags: string[]
67+
}
68+
69+
const columns: ColumnsType<DataType> = [
70+
{
71+
title: 'Name',
72+
dataIndex: 'name',
73+
key: 'name',
74+
render: (text) => <a>{text}</a>,
75+
},
76+
{
77+
title: 'Age',
78+
dataIndex: 'age',
79+
key: 'age',
80+
},
81+
{
82+
title: 'Address',
83+
dataIndex: 'address',
84+
key: 'address',
85+
},
86+
{
87+
title: 'Tags',
88+
key: 'tags',
89+
dataIndex: 'tags',
90+
render: (_, { tags }) => (
91+
<>
92+
{tags.map((tag) => {
93+
let color = tag.length > 5 ? 'geekblue' : 'green'
94+
if (tag === 'loser') {
95+
color = 'volcano'
96+
}
97+
return (
98+
<Tag color={color} key={tag}>
99+
{tag.toUpperCase()}
100+
</Tag>
101+
)
102+
})}
103+
</>
104+
),
105+
},
106+
{
107+
title: 'Action',
108+
key: 'action',
109+
render: (_, record) => (
110+
<Space size='middle'>
111+
<a>Invite {record.name}</a>
112+
<a>Delete</a>
113+
</Space>
114+
),
115+
},
116+
]
117+
118+
const data: DataType[] = [
119+
{
120+
key: '1',
121+
name: 'John Brown',
122+
age: 32,
123+
address: 'New York No. 1 Lake Park',
124+
tags: ['nice', 'developer'],
125+
},
126+
{
127+
key: '2',
128+
name: 'Jim Green',
129+
age: 42,
130+
address: 'London No. 1 Lake Park',
131+
tags: ['loser'],
132+
},
133+
{
134+
key: '3',
135+
name: 'Joe Black',
136+
age: 32,
137+
address: 'Sydney No. 1 Lake Park',
138+
tags: ['cool', 'teacher'],
139+
},
140+
]
141+
142+
interface DemosProps {
143+
dark?: boolean
144+
}
145+
146+
const Demos = (props: DemosProps) => {
147+
const { dark } = props
148+
149+
return (
150+
<div className={`${dark ? 'bg-black' : 'bg-gray-200'} p-2 [&>div]:my-4`}>
151+
<div>
152+
<Button className='text-sm text-sky-400' icon={<UserAddOutlined rev />}>
153+
Hello
154+
</Button>
155+
<Button
156+
disabled
157+
// I think it's okay to add extra condition to change style
158+
className='text-sm [&[disabled]]:text-sky-400'
159+
icon={<UserAddOutlined rev />}
160+
>
161+
Hello
162+
</Button>
163+
<button>hello</button>
164+
</div>
165+
<div>
166+
<Switch />
167+
</div>
168+
<div>
169+
<Input placeholder='hello' prefix={<UserOutlined rev />} />
170+
</div>
171+
<div>
172+
<Pagination defaultCurrent={1} total={50} />
173+
</div>
174+
<div>
175+
<Image
176+
width={200}
177+
src='https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
178+
/>
179+
</div>
180+
<div>
181+
<Select
182+
defaultValue='lucy'
183+
style={{ width: 120 }}
184+
options={[
185+
{ value: 'jack', label: 'Jack' },
186+
{ value: 'lucy', label: 'Lucy' },
187+
{ value: 'Yiminghe', label: 'yiminghe' },
188+
{ value: 'disabled', label: 'Disabled', disabled: true },
189+
]}
190+
/>
191+
</div>
192+
<div>
193+
<Table columns={columns} dataSource={data} />
194+
</div>
195+
<div>
196+
<Cascader options={options} placeholder='Please select' />
197+
</div>
198+
</div>
199+
)
200+
}
201+
202+
export default function antd() {
203+
return (
204+
<>
205+
<h2 className='my-3'>Default mode</h2>
206+
<Demos />
207+
<h2 className='my-3'>Dark mode</h2>
208+
<ConfigProvider
209+
theme={{
210+
algorithm: theme.darkAlgorithm,
211+
}}
212+
>
213+
<Demos dark />
214+
</ConfigProvider>
215+
</>
216+
)
217+
}

‎docs/pages/global.css

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
.vp-local-navCtn svg {
6+
display: inline;
7+
vertical-align: unset;
8+
}
9+
10+
.vp-local-layout .vp-local-body .vp-local-content .ant-image .ant-image-img {
11+
width: 100%;
12+
max-width: unset;
13+
}
14+
15+
.vp-local-layout .vp-local-header {
16+
z-index: 1000 !important;
17+
}
18+
19+
.markdown-body li {
20+
list-style: disc;
21+
}

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>pkg-name</title>
7+
<title>postcss-antd-fixes</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎package.json

+23-10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "pkg-name",
2+
"name": "postcss-antd-fixes",
33
"description": "",
44
"version": "0.0.0",
55
"author": "Yuns <[email protected]>",
@@ -11,19 +11,26 @@
1111
"files": [
1212
"dist"
1313
],
14-
"keywords": [],
14+
"keywords": [
15+
"postcss",
16+
"postcss-plugin",
17+
"antd",
18+
"Ant Design",
19+
"tailwind",
20+
"tailwindcss"
21+
],
1522
"funding": [
1623
"https://opencollective.com/yuns",
1724
"https://afdian.net/@yunslove"
1825
],
19-
"homepage": "https://github.com/yunsii/pkg-name#readme",
26+
"homepage": "https://github.com/yunsii/postcss-antd-fixes#readme",
2027
"repository": {
2128
"type": "git",
22-
"url": "https://github.com/yunsii/pkg-name"
29+
"url": "https://github.com/yunsii/postcss-antd-fixes"
2330
},
24-
"bugs": "https://github.com/yunsii/pkg-name/issues",
31+
"bugs": "https://github.com/yunsii/postcss-antd-fixes/issues",
2532
"scripts": {
26-
"dev": "vite --config vite.docs.config.ts",
33+
"dev": "vite --config vite.docs.config.ts --force",
2734
"build:docs": "tsc && vite build --config vite.docs.config.ts",
2835
"bd": "pnpm run build:docs",
2936
"ssg": "rimraf dist-docs && vite-pages ssr --configFile vite.docs.config.ts",
@@ -40,11 +47,8 @@
4047
"test:ui": "vitest --config vite.lib.config.ts --ui",
4148
"coverage": "vitest run --config vite.lib.config.ts --coverage"
4249
},
43-
"peerDependencies": {
44-
"react": ">=16.9.0",
45-
"react-dom": ">=16.9.0"
46-
},
4750
"devDependencies": {
51+
"@ant-design/cssinjs": "^1.16.2",
4852
"@antfu/eslint-config": "^0.35.3",
4953
"@antfu/eslint-config-react": "^0.35.3",
5054
"@changesets/cli": "^2.26.2",
@@ -62,17 +66,20 @@
6266
"@vitejs/plugin-react": "^4.0.1",
6367
"@vitest/coverage-v8": "^0.32.2",
6468
"@vitest/ui": "^0.32.2",
69+
"autoprefixer": "^10.4.15",
6570
"eslint": "^8.28.0",
6671
"eslint-config-prettier": "^8.6.0",
6772
"husky": "^8.0.1",
6873
"lint-staged": "^13.2.3",
74+
"postcss": "^8.4.28",
6975
"prettier": "^2.7.1",
7076
"react": "^18.2.0",
7177
"react-dom": "^18.2.0",
7278
"react-router-dom": "^6.14.0",
7379
"react-test-renderer": "^18.2.0",
7480
"rimraf": "^5.0.1",
7581
"serve": "^14.2.0",
82+
"antd": "^5.8.3",
7683
"tslib": "^2.4.0",
7784
"typescript": "^5.1.6",
7885
"unplugin-auto-import": "^0.16.4",
@@ -92,5 +99,11 @@
9299
"publishConfig": {
93100
"registry": "https://registry.npmjs.org",
94101
"access": "public"
102+
},
103+
"peerDependencies": {
104+
"postcss": "^8.0.0"
105+
},
106+
"dependencies": {
107+
"tailwindcss": "^3.3.3"
95108
}
96109
}

0 commit comments

Comments
 (0)