unocss-applet
TypeScript icon, indicating that this package has built-in type declarations

0.8.2 • Public • Published

UnoCSS Applet

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

NPM version

English | 简体中文

Presets and Plugins

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 '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

Acknowledgement

License

MIT License © 2022-PRESENT Neil Lee

Package Sidebar

Install

npm i unocss-applet

Weekly Downloads

565

Version

0.8.2

License

MIT

Unpacked Size

7.8 kB

Total Files

6

Last publish

Collaborators

  • zguolee