@unocss/postcss 0.50.8 → 0.51.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 (2) hide show
  1. package/README.md +2 -230
  2. 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
- <!-- @unocss-ignore -->
8
+ ## Documentation
9
9
 
10
- ## Install
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
- @apply grid grid-cols-2;
96
- }
97
- @screen xs {
98
- .grid {
99
- @apply grid-cols-1;
100
- }
101
- }
102
- @screen sm {
103
- .grid {
104
- @apply 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
- @apply grid grid-cols-2;
139
- }
140
- @screen lt-xs {
141
- .grid {
142
- @apply grid-cols-1;
143
- }
144
- }
145
- @screen lt-sm {
146
- .grid {
147
- @apply 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
- @apply grid grid-cols-2;
178
- }
179
- @screen at-xs {
180
- .grid {
181
- @apply grid-cols-1;
182
- }
183
- }
184
- @screen at-xl {
185
- .grid {
186
- @apply grid-cols-3;
187
- }
188
- }
189
- @screen at-xxl {
190
- .grid {
191
- @apply 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.50.8",
3
+ "version": "0.51.1",
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.50.8",
44
- "@unocss/core": "0.50.8"
43
+ "@unocss/config": "0.51.1",
44
+ "@unocss/core": "0.51.1"
45
45
  },
46
46
  "scripts": {
47
47
  "build": "unbuild",