UnoCSS Applet

Using UnoCSS in applet(for UniApp and Taro) to be compatible with unsupported syntax.

English | 简体中文

Presets and Plugins

• unocss-applet - The default package with common presets and plugins.
• @unocss-applet/preset-applet - The default preset (right now it's equivalent to @unocss/preset-uno).
• @unocss-applet/preset-rem-rpx - Coverts rem <=> rpx for utils.
• @unocss-applet/transformer-attributify - Enables Attributify Mode for applet.
• @unocss-applet/reset - Collection of reset CSS stylesheets.

Installation

npm i unocss-applet --save-dev # with npm
yarn add unocss-applet -D # with yarn
pnpm add unocss-applet -D # with pnpm

Usage

UnoCSS config

uno.config.ts

import type { Preset, SourceCodeTransformer } from 'unocss'
import { defineConfig } from 'unocss'

import {
  presetApplet,
  presetRemRpx,
  transformerAttributify,
} from 'unocss-applet'

// uni-app
const isApplet = process.env?.UNI_PLATFORM?.startsWith('mp-') ?? false
// taro
// const isApplet = process.env.TARO_ENV !== 'h5' ?? false
const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (isApplet) {
  presets.push(presetApplet())
  presets.push(presetRemRpx())
  transformers.push(transformerAttributify({ ignoreAttributes: ['block'] }))
}
else {
  presets.push(presetApplet())
  presets.push(presetAttributify())
  presets.push(presetRemRpx({ mode: 'rpx2rem' }))
}

export default defineConfig({
  presets: [
    // ...
    ...presets,
  ],
  transformers: [
    // ...
    ...transformers,
  ],
})

For Platform

For UniApp with Vue3 and Vite

vite.config.ts

import UnoCSS from 'unocss/vite'

export default {
  plugins: [
    UnoCSS(),
  ],
}

main.ts

import 'virtual:uno.css'

For Taro(v3.5.6) with Vue3 and Webpack5

config/index.js

import UnoCSS from 'unocss/webpack'

const config = {
  mini: {
    // ...
    webpackChain(chain, _webpack) {
      chain.plugin('unocss').use(UnoCSS())
    },
  },
  h5: {
    // ...
    webpackChain(chain, _webpack) {
      chain.plugin('unocss').use(UnoCSS())
    },
  },
}

app.ts

import 'uno.css'

Example

• starter-uni
• ColorTimetable

Acknowledgement

• UnoCSS

License

MIT License © 2022-PRESENT Neil Lee and all contributors.