MellowCo/unocss-preset-weapp

在:class中写“bg-[--l-tab-bar-bg-color,theme(backgroundColor.container)]”，解析失效

Closed this issue · 13 comments

qinains commented

如图
image

如果写在class里边，css的var变量和theme写法解析成功。写在:class里边，则解析失效。
期待结果：写在:class里边，则解析成功。

npm安装

npm i @unocss/transformer-directives
npm i @unocss/transformer-variant-group

uno.config.js配置如下

import presetWeapp from 'unocss-preset-weapp'
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'
import { defineConfig, presetIcons } from 'unocss'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'

const { presetWeappAttributify, transformerAttributify } = extractorAttributify()

export default defineConfig({
    presets: [
        // https://github.com/MellowCo/unocss-preset-weapp
        presetWeapp({ dark: "media" }),
        // attributify autocomplete
        presetWeappAttributify(),
        presetIcons(),
    ],
    shortcuts: [{
        "hairline-base": "absolute box-border content-empty pointer-events-none"
    }],
    transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
        transformerAttributify(),
        // https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
        transformerClass({ exclude: ".git" }),
    ],
    theme: {
        colors: {
            "gray-color-3": "var(--l-gray-color-3, #e7e7e7)",
            "font-white-1": "var(--l-font-white-1, rgba(255, 255, 255, 1))",
        },
        backgroundColor: {
            "container": "var(--l-bg-color-container, var(--l-font-white-1, rgba(255, 255, 255, 1)))", // 色彩 - 容器
        },
        borderColor: "var(--l-border-color, var(--l-gray-color-3, #e7e7e7))", // 边框色
    },
})
qinains commented

测试代码在下面的test.zip文件中。用vue3，结合unocss如下图，是正确的。
（P.S.在https://unocss.dev/play/中，似乎解析是有问题的，playground中解析不了theme()方法，配置了“import { transformerDirectives, transformerVariantGroup } from 'unocss'”也不行。以test.zip的解析的结果为准）

image

test.zip

在"unocss-preset-weapp=0.58.1"版本中，h5解析是正常的，weixin小程序解析不了theme()方法。不知道新版本是否解决了？npmjs上最新版是0.58.1

qinains commented

@MellowCo 在h5中解析是正确的，在weixin中解析不了theme()方法，0.58.2版本也存在这个问题

MellowCo commented

看了下 unocss 确实没有提供转换 theme 的 rule

你这边转换了 theme 应该是触发了 @unocss/transformer-directives

@unocss/transformer-directives 把生成的unocss的代码 进行了2次转换 算是一次意外收获

image

uniapp 下

h5下对生成后的uno.css代码做了2次directives转换，等于是 css属性 -> uno.css -> directives 所以可以使用

小程序下没有触发2次directives转换，只有在初次会转换

image
image

应该是 uniapp 的编译问题

MellowCo commented

最新版 加了一个variable，在规则层面转换 theme()，准备给unocss也提交一个pr看看

qinains commented

在"unocss-preset-weapp": "^0.58.3"版本中，还有问题：
问题1：配置transformerClass()后，比如transformerClass({ exclude: ".git" })，theme()函数不全起作用，好像只成功解析vue的第一个theme()函数。
问题2：生成两份css，比如class="shadow-[--l-tab-bar-round-shadow,theme(boxShadow.3)]"会生成：

shadow-lfl--l-tab-bar-round-shadow_lco_theme_lbl_boxShadow_dl_3_lbr__lfr_ {
--un-shadow: var(--l-tab-bar-round-shadow,var(--l-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%)));
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}

.shadow-lfl--l-tab-bar-round-shadow_lco_theme_lbl_boxShadow_dl_3_lbr__lfr_ {
--un-shadow: var(--l-tab-bar-round-shadow,theme(boxShadow.3));
box-shadow: var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
}
对于问题2，也不是大问题。可能像你说的“uno.css代码做了2次directives转换”的问题

MellowCo commented

我加了这么多theme 没问题啊

image
image

MellowCo commented

生成两份css 我做了sort了 会以转换后的优先

感觉是 transform 和 variable 的bug，但又找不到原因

qinains commented

配置transformerClass()后，比如transformerClass({ exclude: ".git" })，theme()函数不全起作用，如下图生成的css是错误的：
image

MellowCo commented

多谢反馈 0.58.5解决这个和生成2次css的问题了

qinains commented

完美!辛苦啦 :-D