0.0.17 • Published 3 years ago

vite-plugin-unocss-to-uni v0.0.17

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vite-plugin-unocss-to-uni

Version Downloads

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

formtosample
\.-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
\%-pctopacity-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%)]
\)-qbg-[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%)]
\]-rbg-[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

0.0.13

3 years ago

0.0.14

3 years ago

0.0.15

3 years ago

0.0.16

3 years ago

0.0.17

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago

0.0.0

3 years ago