zguolee / vite-plugin-unocss-to-uni

A Vite plugin that supports UnoCSS in uni-app

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.

⚠️ It's recommended to use unocss-applet 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
  },
})

Example

ColorTimetable

License

MIT License © 2022-PRESENT zguolee