@unocss/postcss 0.50.7 → 0.51.0
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.md +2 -230
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -5,237 +5,9 @@ PostCSS plugin for UnoCSS. Supports `@apply`、`@screen` and `theme()` directive
|
|
|
5
5
|
> **Warning**: Experimental
|
|
6
6
|
> This package is in an experimental state right now. It doesn't follow semver, and may introduce breaking changes in patch versions.
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
## Documentation
|
|
9
9
|
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
```bash
|
|
13
|
-
npm i -D @unocss/postcss
|
|
14
|
-
```
|
|
15
|
-
|
|
16
|
-
```ts
|
|
17
|
-
// postcss.config.cjs
|
|
18
|
-
module.exports = {
|
|
19
|
-
plugins: {
|
|
20
|
-
'@unocss/postcss': {
|
|
21
|
-
// Optional
|
|
22
|
-
content: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}'],
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
// uno.config.ts
|
|
30
|
-
import { defineConfig, presetUno } from 'unocss'
|
|
31
|
-
|
|
32
|
-
export default defineConfig({
|
|
33
|
-
presets: [
|
|
34
|
-
presetUno(),
|
|
35
|
-
],
|
|
36
|
-
})
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
```css
|
|
40
|
-
/* style.css */
|
|
41
|
-
@unocss;
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
## Usage
|
|
45
|
-
|
|
46
|
-
### `@unocss`
|
|
47
|
-
|
|
48
|
-
`@unocss` at-rule is a placeholder. It will be replaced by the generated CSS.
|
|
49
|
-
|
|
50
|
-
You can also inject each layer individually:
|
|
51
|
-
|
|
52
|
-
```css
|
|
53
|
-
/* style.css */
|
|
54
|
-
@unocss preflights;
|
|
55
|
-
@unocss default;
|
|
56
|
-
|
|
57
|
-
/*
|
|
58
|
-
Fallback layer. It's always recommended to include.
|
|
59
|
-
Only unused layers will be injected here.
|
|
60
|
-
*/
|
|
61
|
-
@unocss;
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
If you want to include all layers no matter whether they are previously included or not, you can use `@unocss all`. This is useful if you want to include generated CSS in multiple files.
|
|
65
|
-
|
|
66
|
-
```css
|
|
67
|
-
@unocss all;
|
|
68
|
-
```
|
|
69
|
-
|
|
70
|
-
### `@apply`
|
|
71
|
-
|
|
72
|
-
```css
|
|
73
|
-
.custom-div {
|
|
74
|
-
@apply text-center my-0 font-medium;
|
|
75
|
-
}
|
|
76
|
-
```
|
|
77
|
-
|
|
78
|
-
Will be transformed to:
|
|
79
|
-
|
|
80
|
-
```css
|
|
81
|
-
.custom-div {
|
|
82
|
-
margin-top: 0rem;
|
|
83
|
-
margin-bottom: 0rem;
|
|
84
|
-
text-align: center;
|
|
85
|
-
font-weight: 500;
|
|
86
|
-
}
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
### `@screen`
|
|
90
|
-
|
|
91
|
-
The `@screen` directive allows you to create media queries that reference your breakpoints by name comes from [`theme.breakpoints`](https://github.com/unocss/unocss/blob/main/README.md#extend-theme).
|
|
92
|
-
|
|
93
|
-
```css
|
|
94
|
-
.grid {
|
|
95
|
-
--uno: grid grid-cols-2;
|
|
96
|
-
}
|
|
97
|
-
@screen xs {
|
|
98
|
-
.grid {
|
|
99
|
-
--uno: grid-cols-1;
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
@screen sm {
|
|
103
|
-
.grid {
|
|
104
|
-
--uno: grid-cols-3;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
/* ... */
|
|
108
|
-
...
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
Will be transformed to:
|
|
112
|
-
|
|
113
|
-
```css
|
|
114
|
-
.grid {
|
|
115
|
-
display: grid;
|
|
116
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
117
|
-
}
|
|
118
|
-
@media (min-width: 320px) {
|
|
119
|
-
.grid {
|
|
120
|
-
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
@media (min-width: 640px) {
|
|
124
|
-
.grid {
|
|
125
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
/* ... */
|
|
129
|
-
```
|
|
130
|
-
|
|
131
|
-
#### Breakpoint Variant Support
|
|
132
|
-
`@screen` also supports `lt`、`at` variants
|
|
133
|
-
|
|
134
|
-
##### `@screen lt`
|
|
135
|
-
|
|
136
|
-
```css
|
|
137
|
-
.grid {
|
|
138
|
-
--uno: grid grid-cols-2;
|
|
139
|
-
}
|
|
140
|
-
@screen lt-xs {
|
|
141
|
-
.grid {
|
|
142
|
-
--uno: grid-cols-1;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
@screen lt-sm {
|
|
146
|
-
.grid {
|
|
147
|
-
--uno: grid-cols-3;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
/* ... */
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
Will be transformed to:
|
|
154
|
-
|
|
155
|
-
```css
|
|
156
|
-
.grid {
|
|
157
|
-
display: grid;
|
|
158
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
159
|
-
}
|
|
160
|
-
@media (max-width: 319.9px) {
|
|
161
|
-
.grid {
|
|
162
|
-
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
@media (max-width: 639.9px) {
|
|
166
|
-
.grid {
|
|
167
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
/* ... */
|
|
171
|
-
```
|
|
172
|
-
|
|
173
|
-
##### `@screen at`
|
|
174
|
-
|
|
175
|
-
```css
|
|
176
|
-
.grid {
|
|
177
|
-
--uno: grid grid-cols-2;
|
|
178
|
-
}
|
|
179
|
-
@screen at-xs {
|
|
180
|
-
.grid {
|
|
181
|
-
--uno: grid-cols-1;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
@screen at-xl {
|
|
185
|
-
.grid {
|
|
186
|
-
--uno: grid-cols-3;
|
|
187
|
-
}
|
|
188
|
-
}
|
|
189
|
-
@screen at-xxl {
|
|
190
|
-
.grid {
|
|
191
|
-
--uno: grid-cols-4;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
/* ... */
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
Will be transformed to:
|
|
198
|
-
|
|
199
|
-
```css
|
|
200
|
-
.grid {
|
|
201
|
-
display: grid;
|
|
202
|
-
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
203
|
-
}
|
|
204
|
-
@media (min-width: 320px) and (max-width: 639.9px) {
|
|
205
|
-
.grid {
|
|
206
|
-
grid-template-columns: repeat(1, minmax(0, 1fr));
|
|
207
|
-
}
|
|
208
|
-
}
|
|
209
|
-
@media (min-width: 1280px) and (max-width: 1535.9px) {
|
|
210
|
-
.grid {
|
|
211
|
-
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
@media (min-width: 1536px) {
|
|
215
|
-
.grid {
|
|
216
|
-
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
/* ... */
|
|
220
|
-
```
|
|
221
|
-
|
|
222
|
-
### `theme()`
|
|
223
|
-
|
|
224
|
-
Use the `theme()` function to access your theme config values using dot notation.
|
|
225
|
-
|
|
226
|
-
```css
|
|
227
|
-
.btn-blue {
|
|
228
|
-
background-color: theme('colors.blue.500');
|
|
229
|
-
}
|
|
230
|
-
```
|
|
231
|
-
|
|
232
|
-
Will be compiled to:
|
|
233
|
-
|
|
234
|
-
```css
|
|
235
|
-
.btn-blue {
|
|
236
|
-
background-color: #3b82f6;
|
|
237
|
-
}
|
|
238
|
-
```
|
|
10
|
+
Please refer to the [documentation](https://unocss.dev/integrations/postcss).
|
|
239
11
|
|
|
240
12
|
## License
|
|
241
13
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unocss/postcss",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
4
4
|
"description": "PostCSS plugin for UnoCSS",
|
|
5
5
|
"author": "sibbng <sibbngheid@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"fast-glob": "^3.2.12",
|
|
41
41
|
"magic-string": "^0.30.0",
|
|
42
42
|
"postcss": "^8.4.21",
|
|
43
|
-
"@unocss/config": "0.
|
|
44
|
-
"@unocss/core": "0.
|
|
43
|
+
"@unocss/config": "0.51.0",
|
|
44
|
+
"@unocss/core": "0.51.0"
|
|
45
45
|
},
|
|
46
46
|
"scripts": {
|
|
47
47
|
"build": "unbuild",
|