Using UnoCSS in Applet(UniApp...)

Last update: Jan 2, 2023

Overview

unocss-applet

Using UnoCSS in Applet(UniApp...).

Presets and Plugins

@unocss-applet/preset-applet - The default preset (right now it's equivalent to @unocss/preset-uno)
@unocss-applet/preset-rem-to-rpx - Coverts rem to rpx for utils.
@unocss-applet/transformer-applet - Compile classes that do not support applets into one class.
@unocss-applet/transformer-attributify - Enables Attributify Mode for applet.

Instal

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.ts
import type { Preset, SourceCodeTransformer } from 'unocss'
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

import {
  presetApplet,
  presetRemToRpx,
  transformerApplet,
  transformerAttributify,
} from 'unocss-applet'

const presets: Preset[] = []
const transformers: SourceCodeTransformer[] = []

if (process.env.UNI_PLATFORM === 'h5') {
  presets.push(presetUno())
  presets.push(presetAttributify())
}
else {
  presets.push(presetApplet())
  presets.push(presetRemToRpx())

  // don't change the order
  transformers.push(transformerAttributify())
  transformers.push(transformerApplet())
}

export default defineConfig({
  presets: [
    presetIcons(),
    /**
     * you can add `presetAttributify()` here to enable unocss attributify mode prompt
     * although preset is not working for applet
     */
    // presetAttributify(),
    ...presets,
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
    ...transformers,
  ],
})

Example

Acknowledgement

UnoCSS

License

Comments

When I remove `transformerRenameClass` , there are other problems, and the custom attributes in the class do not take effect.

1#issuecomment-1216663855

When I remove transformerRenameClass , there are other problems, and the custom attributes in the class do not take effect.

This is the demo repo, you can have a try.

opened by liwenfengg 10
Maybe new conflicts

Excellent work, compared with 'unocss-preset-uni', maybe some giant changes happened in this tool.

However, there is a question. Before I using 'unocss-applet', the compile process could go on smoothly, after using this, an error occoured. This is screenshot:

tm-sheet is a component which I using.

After deleting line 24, vite could pass, but weChat miniprogram tool occured error:

I think there may be some problems.

By the way, an another question is does unocss has the configuration which could set individual prefix like Tailwind CSS

it may solve the conflicts between components and Unocss.

Thanks!

opened by LLinVIP 5
in app side, `shortcuts` and `Attributify Mode` Still not supported

in app side, shortcuts and Attributify Mode Still not supported

text="base #F2FF"

attributify-mode

Originally posted by @liwenfengg in https://github.com/unocss-applet/unocss-applet/issues/3#issuecomment-1219093922
enhancement

opened by liwenfengg 5
小程序端 @apply 支持的问题（不确定是否是 bug）
使用 dark：进行暗黑模式设计，直接使用如下写法，h5、微信和 app 端都正常：

<button class="bg-light-blue-500 dark:bg-dark-100"> sdfdf </button>

可是如果使用 @apply 语法，如下

<template> <button class="fff"> sdfdf </button> </template> <style scoped> .fff { --at-apply: bg-light-blue-500 dark:bg-dark-100 } </style>

则，h5 和 app 正常，微信端编译出来的样式没有 dark:bg-dark-100 相关的代码导致暗黑模式匹配异常。

不确定是否是本插件的 bug，如不是麻烦关 issue
opened by jacksonyu 2
String in div or view tags generate unwanted styles
<div> py-4.5 </div>

generate

.py-4\\\\.5{ padding-top:1.125rem; padding-bottom:1.125rem; }

We don’t need the style of this selector, and change the name directly
opened by zguolee 0