unocss 0.22.5 → 0.24.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 +24 -21
- package/package.json +12 -12
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<br>
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<img src="https://raw.githubusercontent.com/
|
|
4
|
+
<img src="https://raw.githubusercontent.com/unocss/unocss/main/playground/public/icon-gray.svg" style="width:100px;" />
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
7
|
<h1 align="center">UnoCSS</h1>
|
|
@@ -29,10 +29,10 @@ Inspired by [Windi CSS](http://windicss.org/), [Tailwind CSS](https://tailwindcs
|
|
|
29
29
|
- No parsing, no AST, no scanning, it's **INSTANT** (200x faster than Windi CSS or Tailwind JIT)
|
|
30
30
|
- ~3.5kb min+gzip - zero deps and browser friendly.
|
|
31
31
|
- [Shortcuts](#shortcuts) - aliasing utilities, dynamically.
|
|
32
|
-
- [Attributify Mode](https://github.com/
|
|
33
|
-
- [Pure CSS Icons](https://github.com/
|
|
32
|
+
- [Attributify Mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify/) - group utilities in attributes
|
|
33
|
+
- [Pure CSS Icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons/) - use any icon as a single class.
|
|
34
34
|
- [Inspector](#inspector) - inspect and debug interatively.
|
|
35
|
-
- [CSS-in-JS Runtime version](https://github.com/
|
|
35
|
+
- [CSS-in-JS Runtime version](https://github.com/unocss/unocss/tree/main/packages/runtime)
|
|
36
36
|
- [CSS Scoping](#css-scoping)
|
|
37
37
|
- [VS Code extension](https://marketplace.visualstudio.com/items?itemName=antfu.unocss)
|
|
38
38
|
- Code-splitting for CSS - ships minimal CSS for MPA.
|
|
@@ -89,9 +89,9 @@ import 'uno.css'
|
|
|
89
89
|
|
|
90
90
|
That's it, have fun.
|
|
91
91
|
|
|
92
|
-
See [all packages](https://github.com/
|
|
92
|
+
See [all packages](https://github.com/unocss/unocss/tree/main/packages).
|
|
93
93
|
|
|
94
|
-
Refer to the full documentation on [Vite](https://github.com/
|
|
94
|
+
Refer to the full documentation on [Vite](https://github.com/unocss/unocss/blob/main/packages/vite/README.md):
|
|
95
95
|
- modes: `global`, `dist-chunk`, `per-module`, `vue-scoped`, `svelte-scoped`, and `shadow-dom`.
|
|
96
96
|
- frameworks: `React`, `Preact`, `Svelte`, `SvelteKit`, `Web Components`, `Solid` and `Elm`.
|
|
97
97
|
|
|
@@ -111,13 +111,13 @@ export default {
|
|
|
111
111
|
}
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
-
Refer to the full documentation on https://github.com/
|
|
114
|
+
Refer to the full documentation on https://github.com/unocss/unocss/tree/main/packages/nuxt
|
|
115
115
|
|
|
116
116
|
## Configurations
|
|
117
117
|
|
|
118
118
|
UnoCSS is an atomic-CSS engine instead of a framework. Everything is designed with flexibility and performance in mind. In UnoCSS, there are no core utilities; all functionalities are provided via presets.
|
|
119
119
|
|
|
120
|
-
By default, UnoCSS applies [the default preset](https://github.com/
|
|
120
|
+
By default, UnoCSS applies [the default preset](https://github.com/unocss/unocss/tree/main/packages/preset-uno). Which provides a common superset of the popular utilities-first framework, including Tailwind CSS, Windi CSS, Bootstrap, Tachyons, etc.
|
|
121
121
|
|
|
122
122
|
For example, both `ml-3` (Tailwind), `ms-2` (Bootstrap), `ma4` (Tachyons), `mt-10px` (Windi CSS) are valid.
|
|
123
123
|
|
|
@@ -128,7 +128,7 @@ For example, both `ml-3` (Tailwind), `ms-2` (Bootstrap), `ma4` (Tachyons), `mt-1
|
|
|
128
128
|
.mt-10px { margin-top: 10px; }
|
|
129
129
|
```
|
|
130
130
|
|
|
131
|
-
[Learn more about the default preset](https://github.com/
|
|
131
|
+
[Learn more about the default preset](https://github.com/unocss/unocss/tree/main/packages/preset-uno).
|
|
132
132
|
|
|
133
133
|
### Presets
|
|
134
134
|
|
|
@@ -136,16 +136,16 @@ Presets are the heart of UnoCSS that lets you make your own custom framework in
|
|
|
136
136
|
|
|
137
137
|
###### Official Presets
|
|
138
138
|
|
|
139
|
-
- [@unocss/preset-uno](https://github.com/
|
|
140
|
-
- [@unocss/preset-mini](https://github.com/
|
|
141
|
-
- [@unocss/preset-wind](https://github.com/
|
|
142
|
-
- [@unocss/preset-attributify](https://github.com/
|
|
143
|
-
- [@unocss/preset-icons](https://github.com/
|
|
144
|
-
- [@unocss/preset-web-fonts](https://github.com/
|
|
139
|
+
- [@unocss/preset-uno](https://github.com/unocss/unocss/tree/main/packages/preset-uno) - The default preset (right now it's equivalent to `@unocss/preset-wind`).
|
|
140
|
+
- [@unocss/preset-mini](https://github.com/unocss/unocss/tree/main/packages/preset-mini) - The minimal but essential rules and variants.
|
|
141
|
+
- [@unocss/preset-wind](https://github.com/unocss/unocss/tree/main/packages/preset-wind) - Tailwind / Windi CSS compact preset.
|
|
142
|
+
- [@unocss/preset-attributify](https://github.com/unocss/unocss/tree/main/packages/preset-attributify) - Provides [Attributify Mode](https://github.com/unocss/unocss/tree/main/packages/preset-attributify#attributify-mode) to other presets and rules.
|
|
143
|
+
- [@unocss/preset-icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons) - Use any icon as a class utility.
|
|
144
|
+
- [@unocss/preset-web-fonts](https://github.com/unocss/unocss/tree/main/packages/preset-web-fonts) - Web fonts at ease.
|
|
145
|
+
- [@unocss/preset-typography](https://github.com/unocss/unocss/tree/main/packages/preset-typography) - The typography preset
|
|
145
146
|
|
|
146
147
|
###### Community Presets
|
|
147
148
|
|
|
148
|
-
- [unocss-preset-typography](https://github.com/ydcjeff/unocss-preset-typography) - Typography Preset by [@ydcjeff](https://github.com/ydcjeff)
|
|
149
149
|
- [unocss-preset-scalpel](https://github.com/macheteHot/unocss-preset-scalpel) - Scalpel Preset by [@macheteHot](https://github.com/macheteHot/)
|
|
150
150
|
- [unocss-preset-chroma](https://github.com/chu121su12/unocss-preset-chroma) - Gradient Preset by [@chu121su12](https://github.com/chu121su12)
|
|
151
151
|
|
|
@@ -395,7 +395,7 @@ import '@unocss/reset/eric-meyer.css'
|
|
|
395
395
|
import '@unocss/reset/tailwind.css'
|
|
396
396
|
```
|
|
397
397
|
|
|
398
|
-
Learn more at [@unocss/reset](https://github.com/
|
|
398
|
+
Learn more at [@unocss/reset](https://github.com/unocss/unocss/tree/main/packages/reset).
|
|
399
399
|
|
|
400
400
|
### Custom Variants
|
|
401
401
|
|
|
@@ -440,7 +440,7 @@ As a result, the following CSS will be generated:
|
|
|
440
440
|
|
|
441
441
|
With this, we could have `m-2` applied only when users hover over the element.
|
|
442
442
|
|
|
443
|
-
The variant system is very powerful and can't be covered fully in this guide, you can check [the default preset's implementation](https://github.com/
|
|
443
|
+
The variant system is very powerful and can't be covered fully in this guide, you can check [the default preset's implementation](https://github.com/unocss/unocss/tree/main/packages/preset-mini/src/variants) to see more advanced usages.
|
|
444
444
|
|
|
445
445
|
### Extend Theme
|
|
446
446
|
|
|
@@ -449,7 +449,10 @@ UnoCSS also supports the theming system that you might be familiar with in Tailw
|
|
|
449
449
|
```ts
|
|
450
450
|
theme: {
|
|
451
451
|
colors: {
|
|
452
|
-
'
|
|
452
|
+
'veryCool': '#0000ff', // class="text-very-cool"
|
|
453
|
+
'brand': {
|
|
454
|
+
'primary': '#1f6ae3', //class="bg-brand-primary"
|
|
455
|
+
}
|
|
453
456
|
},
|
|
454
457
|
breakpoints: {
|
|
455
458
|
xs: '320px',
|
|
@@ -538,13 +541,13 @@ By default UnoCSS will scan for components files like: `.jsx`, `.tsx`, `.vue`, `
|
|
|
538
541
|
|
|
539
542
|
### Inspector
|
|
540
543
|
|
|
541
|
-
From v0.7.0, our Vite plugin now ships with a dev inspector ([@unocss/inspector](https://github.com/
|
|
544
|
+
From v0.7.0, our Vite plugin now ships with a dev inspector ([@unocss/inspector](https://github.com/unocss/unocss/tree/main/packages/inspector)) for you to view, play and analyse your custom rules and setup. Visit `http://localhost:3000/__unocss` in your Vite dev server to see it.
|
|
542
545
|
|
|
543
546
|
<img src="https://user-images.githubusercontent.com/11247099/140885990-1827f5ce-f12a-4ed4-9d63-e5145a65fb4a.png">
|
|
544
547
|
|
|
545
548
|
### Runtime (CSS-in-JS)
|
|
546
549
|
|
|
547
|
-
See [@unocss/runtime](https://github.com/
|
|
550
|
+
See [@unocss/runtime](https://github.com/unocss/unocss/tree/main/packages/runtime)
|
|
548
551
|
|
|
549
552
|
### CSS Scoping
|
|
550
553
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unocss",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.24.0",
|
|
4
4
|
"description": "The instant on-demand Atomic CSS engine.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"unocss",
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
"tailwind",
|
|
11
11
|
"windicss"
|
|
12
12
|
],
|
|
13
|
-
"homepage": "https://github.com/
|
|
13
|
+
"homepage": "https://github.com/unocss/unocss#readme",
|
|
14
14
|
"bugs": {
|
|
15
|
-
"url": "https://github.com/
|
|
15
|
+
"url": "https://github.com/unocss/unocss/issues"
|
|
16
16
|
},
|
|
17
17
|
"repository": {
|
|
18
18
|
"type": "git",
|
|
19
|
-
"url": "git+https://github.com/
|
|
19
|
+
"url": "git+https://github.com/unocss/unocss.git"
|
|
20
20
|
},
|
|
21
21
|
"funding": "https://github.com/sponsors/antfu",
|
|
22
22
|
"license": "MIT",
|
|
@@ -42,14 +42,14 @@
|
|
|
42
42
|
"*.d.ts"
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@unocss/core": "0.
|
|
46
|
-
"@unocss/cli": "0.
|
|
47
|
-
"@unocss/reset": "0.
|
|
48
|
-
"@unocss/preset-icons": "0.
|
|
49
|
-
"@unocss/preset-attributify": "0.
|
|
50
|
-
"@unocss/preset-uno": "0.
|
|
51
|
-
"@unocss/preset-web-fonts": "0.
|
|
52
|
-
"@unocss/vite": "0.
|
|
45
|
+
"@unocss/core": "0.24.0",
|
|
46
|
+
"@unocss/cli": "0.24.0",
|
|
47
|
+
"@unocss/reset": "0.24.0",
|
|
48
|
+
"@unocss/preset-icons": "0.24.0",
|
|
49
|
+
"@unocss/preset-attributify": "0.24.0",
|
|
50
|
+
"@unocss/preset-uno": "0.24.0",
|
|
51
|
+
"@unocss/preset-web-fonts": "0.24.0",
|
|
52
|
+
"@unocss/vite": "0.24.0"
|
|
53
53
|
},
|
|
54
54
|
"engines": {
|
|
55
55
|
"node": ">=14"
|