format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -15,34 +15,30 @@ pnpm add -D unocss
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import { defineConfig } from 'vite'
|
||||
import UnoCSS from 'unocss/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
UnoCSS(),
|
||||
],
|
||||
})
|
||||
plugins: [UnoCSS()],
|
||||
});
|
||||
```
|
||||
|
||||
Create config file:
|
||||
|
||||
```ts
|
||||
// uno.config.ts
|
||||
import { defineConfig, presetWind3 } from 'unocss'
|
||||
import { defineConfig, presetWind3 } from 'unocss';
|
||||
|
||||
export default defineConfig({
|
||||
presets: [
|
||||
presetWind3(),
|
||||
],
|
||||
})
|
||||
presets: [presetWind3()],
|
||||
});
|
||||
```
|
||||
|
||||
Add to entry:
|
||||
|
||||
```ts
|
||||
// main.ts
|
||||
import 'virtual:uno.css'
|
||||
import 'virtual:uno.css';
|
||||
```
|
||||
|
||||
## Modes
|
||||
@@ -52,7 +48,7 @@ import 'virtual:uno.css'
|
||||
Standard mode - generates global CSS injected via `uno.css` import.
|
||||
|
||||
```ts
|
||||
import 'virtual:uno.css'
|
||||
import 'virtual:uno.css';
|
||||
```
|
||||
|
||||
### vue-scoped
|
||||
@@ -62,7 +58,7 @@ Injects generated CSS into Vue SFC `<style scoped>`.
|
||||
```ts
|
||||
UnoCSS({
|
||||
mode: 'vue-scoped',
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### shadow-dom
|
||||
@@ -72,20 +68,20 @@ For Web Components using Shadow DOM:
|
||||
```ts
|
||||
UnoCSS({
|
||||
mode: 'shadow-dom',
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Add placeholder in component styles:
|
||||
|
||||
```ts
|
||||
const template = document.createElement('template')
|
||||
const template = document.createElement('template');
|
||||
template.innerHTML = `
|
||||
<style>
|
||||
:host { ... }
|
||||
@unocss-placeholder
|
||||
</style>
|
||||
<div class="m-1em">...</div>
|
||||
`
|
||||
`;
|
||||
```
|
||||
|
||||
### per-module (experimental)
|
||||
@@ -101,8 +97,8 @@ Generates CSS per chunk on build for MPA.
|
||||
Edit classes directly in browser DevTools:
|
||||
|
||||
```ts
|
||||
import 'virtual:uno.css'
|
||||
import 'virtual:unocss-devtools'
|
||||
import 'virtual:uno.css';
|
||||
import 'virtual:unocss-devtools';
|
||||
```
|
||||
|
||||
**Warning:** Uses MutationObserver to detect changes. Dynamic classes from scripts will also be included.
|
||||
@@ -113,15 +109,15 @@ import 'virtual:unocss-devtools'
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import React from '@vitejs/plugin-react'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import React from '@vitejs/plugin-react';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
UnoCSS(), // Must be before React when using attributify
|
||||
React(),
|
||||
],
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**Note:** Remove `tsc` from build script if using `@unocss/preset-attributify`.
|
||||
@@ -133,9 +129,9 @@ Works out of the box with `@vitejs/plugin-vue`.
|
||||
### Svelte
|
||||
|
||||
```ts
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import extractorSvelte from '@unocss/extractor-svelte'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
import extractorSvelte from '@unocss/extractor-svelte';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
@@ -144,7 +140,7 @@ export default {
|
||||
}),
|
||||
svelte(),
|
||||
],
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
Supports `class:foo` and `class:foo={bar}` syntax.
|
||||
@@ -156,43 +152,34 @@ Same as Svelte, use `sveltekit()` from `@sveltejs/kit/vite`.
|
||||
### Solid
|
||||
|
||||
```ts
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import solidPlugin from 'vite-plugin-solid'
|
||||
import UnoCSS from 'unocss/vite';
|
||||
import solidPlugin from 'vite-plugin-solid';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
UnoCSS(),
|
||||
solidPlugin(),
|
||||
],
|
||||
}
|
||||
plugins: [UnoCSS(), solidPlugin()],
|
||||
};
|
||||
```
|
||||
|
||||
### Preact
|
||||
|
||||
```ts
|
||||
import Preact from '@preact/preset-vite'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import Preact from '@preact/preset-vite';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
UnoCSS(),
|
||||
Preact(),
|
||||
],
|
||||
}
|
||||
plugins: [UnoCSS(), Preact()],
|
||||
};
|
||||
```
|
||||
|
||||
### Elm
|
||||
|
||||
```ts
|
||||
import Elm from 'vite-plugin-elm'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import Elm from 'vite-plugin-elm';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
Elm(),
|
||||
UnoCSS(),
|
||||
],
|
||||
}
|
||||
plugins: [Elm(), UnoCSS()],
|
||||
};
|
||||
```
|
||||
|
||||
### Web Components (Lit)
|
||||
@@ -200,10 +187,8 @@ export default {
|
||||
```ts
|
||||
UnoCSS({
|
||||
mode: 'shadow-dom',
|
||||
shortcuts: [
|
||||
{ 'cool-blue': 'bg-blue-500 text-white' },
|
||||
],
|
||||
})
|
||||
shortcuts: [{ 'cool-blue': 'bg-blue-500 text-white' }],
|
||||
});
|
||||
```
|
||||
|
||||
```ts
|
||||
@@ -213,7 +198,7 @@ export class MyElement extends LitElement {
|
||||
static styles = css`
|
||||
:host { ... }
|
||||
@unocss-placeholder
|
||||
`
|
||||
`;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -232,8 +217,8 @@ Visit `http://localhost:5173/__unocss` in dev mode to:
|
||||
With `@vitejs/plugin-legacy`:
|
||||
|
||||
```ts
|
||||
import legacy from '@vitejs/plugin-legacy'
|
||||
import UnoCSS from 'unocss/vite'
|
||||
import legacy from '@vitejs/plugin-legacy';
|
||||
import UnoCSS from 'unocss/vite';
|
||||
|
||||
export default {
|
||||
plugins: [
|
||||
@@ -247,7 +232,7 @@ export default {
|
||||
renderModernChunks: false,
|
||||
}),
|
||||
],
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## VanillaJS / TypeScript
|
||||
@@ -259,13 +244,10 @@ By default, `.js` and `.ts` files are not extracted. Configure to include:
|
||||
export default defineConfig({
|
||||
content: {
|
||||
pipeline: {
|
||||
include: [
|
||||
/\.(vue|svelte|[jt]sx|html)($|\?)/,
|
||||
'src/**/*.{js,ts}',
|
||||
],
|
||||
include: [/\.(vue|svelte|[jt]sx|html)($|\?)/, 'src/**/*.{js,ts}'],
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Or use magic comment in files:
|
||||
@@ -274,10 +256,10 @@ Or use magic comment in files:
|
||||
// @unocss-include
|
||||
export const classes = {
|
||||
active: 'bg-primary text-white',
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
<!--
|
||||
<!--
|
||||
Source references:
|
||||
- https://unocss.dev/integrations/vite
|
||||
-->
|
||||
|
||||
Reference in New Issue
Block a user