vite-plugin-unocss-to-uni
v0.0.17
Published
Adapt unocss to uni-app
Downloads
22
Maintainers
Readme
vite-plugin-unocss-to-uni
A Vite plugin that supports UnoCSS in uni-app, which can transform some
class
that mini-program can't use.
:warning: It's recommended to use unocss-preset-uni instead of this plugin.
class
transform
| form | to | sample |
| ---- | ------- | ---------------------- |
| \.
| -point-
| p-0.5
-> p-0-point-5
|
| \/
| -div-
| p-1/2
-> p-1-div-2
|
| \:
| -c-
| dark:text-green-500
-> dark-c-text-green-500
|
| \%
| -pct
| opacity-10%
-> opacity-10-pct
|
| \!
| i-
| !bg-black
-> i-bg-black
|
| \#
| -h-
| bg-#121212
-> bg--h-121212
|
| \(
| p-
| bg-[hsl(2.7,81.9%,69.6%)]
-> bg-[hslp-2.7,81.9%,69.6%)]
|
| \)
| -q
| bg-[hsl(2.7,81.9%,69.6%)]
-> bg-[hsl(2.7,81.9%,69.6%-q]
|
| \[
| l-
| bg-[hsl(2.7,81.9%,69.6%)]
-> bg-l-hsl(2.7,81.9%,69.6%)]
|
| \]
| -r
| bg-[hsl(2.7,81.9%,69.6%)]
-> bg-[hsl(2.7,81.9%,69.6%)-r
|
| \,
| -comma-
| bg-[hsl(2.7,81.9%,69.6%)]
-> bg-[hsl(2.7-comma-81.9%-comma-69.6%)]
|
Usage
Prepare
- 🎨 UnoCSS - The instant on-demand atomic CSS engine.
Install
pnpm add -D vite-plugin-unocss-to-uni
Configure vite.config.ts
import { defineConfig } from 'vite'
...
import Unocss from 'unocss/vite'
import { UnocssToUni } from 'vite-plugin-unocss-to-uni'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Unocss(),
// Make sure it's behind Unocss
UnocssToUni(),
],
})
Configure unocss.config.ts
import {
defineConfig,
presetIcons,
presetUno,
...
} from 'unocss'
import { unocssToUniProcess } from 'vite-plugin-unocss-to-uni'
export default defineConfig({
...
presets: [
// https://github.com/unocss/unocss/blob/main/packages/preset-mini/src/preflights.ts
// The miniprogram does not support the `*` selector.
{
...presetUno(),
preflights: [
{
layer: 'preflights',
getCSS(ctx: PreflightContext<any>) {
if (ctx.theme.preflightBase)
return `page{${entriesToCss(Object.entries(ctx.theme.preflightBase))}}`
},
},
],
},
...
],
...
postprocess: (t) => {
t.selector = unocssToUniProcess(t.selector)
return t
},
})