0.0.17 • Published 3 years ago
vite-plugin-unocss-to-uni v0.0.17
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
},
})