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

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