MellowCo/unocss-preset-weapp

!，$，variant 能力无法在动态 class 生效

Closed this issue · 30 comments

yveeven commented 
<view :class="['text-red !text-blue']">index</view> ! 无效 显示红色
<view class="text-red text-blue">index</view> 正常 显示蓝色

<view :class="['text-$color-primary']">index</view> $ 无效
<view class="text-$color-primary">index</view> 正常

<view :class="['hover:text-red']">index</view> variant 无效
<view class="hover:text-red">index</view> 正常
<view :class="['active:text-red']">index</view> variant 无效
<view class="active:text-red">index</view> 正常

测试平台：微信小程序，h5都存在此情况
MellowCo commented

理解不了

yveeven commented

理解不了

抱歉，刚才编辑有误，更改了描述，麻烦查阅

MellowCo commented

#39 (comment)

这个其实是代码的格式规范问题 可以参考这个链接

yveeven commented

#39 (comment)

这个其实是代码的格式规范问题 可以参考这个链接

我明白您的意思，但 unocss 本身对此是支持的，我理解它的静态概念所指的是规则编写必须是完整静态字面量，而非变量拼接字符串达成的规则，像这样text-${color}，如下例子：

CleanShot 2023-11-03 at 20 38 21

上述最小实现：https://stackblitz.com/edit/nuxt-starter-w45nkb?file=app.vue

MellowCo commented

这个是小程序不支持class存在 $ ! 这些字符的原因。
我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

MellowCo commented 
<view :class="['text-red !text-blue']">index</view>

这种写法是可以通过lint来规范代码解决的，可以参考上面的链接，里面有原因

yveeven commented

#39 (comment)

这个其实是代码的格式规范问题 可以参考这个链接

另外我想请教下您，是否 uni 对 CSS 做了编译，其中存在特殊字符，原始 unocss 无法处理，因此不可用于 uni。所以此扩展做了转换，那这个出发点从何而来，我并没有找到相关说明

MellowCo commented

image

你在小程序里写这段代码，小程序开发工具就会报错，你就懂了

<view class="!text-blue">index</view>


<style>
.!text-blue {
	color: blue;
}
</style>
MellowCo commented

#39 (comment)
这个其实是代码的格式规范问题 可以参考这个链接

另外我想请教下您，是否 uni 对 CSS 做了编译，其中存在特殊字符，原始 unocss 无法处理，因此不可用于 uni。所以此扩展做了转换，那这个出发点从何而来，我并没有找到相关说明

这个不是unocss uni的问题，是小程序的问题，小程序不能使用 : [ $，所以像unocss，tailwindcss会生成 !text-blue 这些css代码，在小程序都会报错

yveeven commented

这个是小程序不支持class存在 $ ! 这些字符的原因。 我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

我理解您说的转换，但我不理解的是转换为什么会造成class动态不生效

MellowCo commented

这个是小程序不支持class存在 $ ! 这些字符的原因。 我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

我理解您说的转换，但我不理解的是转换为什么会造成class动态不生效

因为这个是代码规范的问题啊 对这个是没有对应的匹配规则的
https://eslint.vuejs.org/rules/prefer-separate-static-class.html
#39 (comment)

yveeven commented

#39 (comment)
这个其实是代码的格式规范问题 可以参考这个链接

另外我想请教下您，是否 uni 对 CSS 做了编译，其中存在特殊字符，原始 unocss 无法处理，因此不可用于 uni。所以此扩展做了转换，那这个出发点从何而来，我并没有找到相关说明

这个不是unocss uni的问题，是小程序的问题，小程序不能使用 : [ $，所以像unocss，tailwindcss会生成 !text-blue 这些css代码，在小程序都会报错

谢谢您的解释，理解了，那目前小程序不支持的特殊字符列表是否可以麻烦您给我一个捷径，它在哪个文件里可以看到

MellowCo commented

#39 (comment)
这个其实是代码的格式规范问题 可以参考这个链接

另外我想请教下您，是否 uni 对 CSS 做了编译，其中存在特殊字符，原始 unocss 无法处理，因此不可用于 uni。所以此扩展做了转换，那这个出发点从何而来，我并没有找到相关说明

这个不是unocss uni的问题，是小程序的问题，小程序不能使用 : [ $，所以像unocss，tailwindcss会生成 !text-blue 这些css代码，在小程序都会报错

谢谢您的解释，理解了，那目前小程序不支持的特殊字符列表是否可以麻烦您给我一个捷径，它在哪个文件里可以看到

不知道 遇到了解决就行了

yveeven commented

#39 (comment)
这个其实是代码的格式规范问题 可以参考这个链接

另外我想请教下您，是否 uni 对 CSS 做了编译，其中存在特殊字符，原始 unocss 无法处理，因此不可用于 uni。所以此扩展做了转换，那这个出发点从何而来，我并没有找到相关说明

这个不是unocss uni的问题，是小程序的问题，小程序不能使用 : [ $，所以像unocss，tailwindcss会生成 !text-blue 这些css代码，在小程序都会报错

谢谢您的解释，理解了，那目前小程序不支持的特殊字符列表是否可以麻烦您给我一个捷径，它在哪个文件里可以看到

不知道 遇到了解决就行了

👌 谢谢

MellowCo commented

我是有用eslint规范代码，不会出现这个动态规则的代码，所以没考虑过

yveeven commented

这个是小程序不支持class存在 $ ! 这些字符的原因。 我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

我理解您说的转换，但我不理解的是转换为什么会造成class动态不生效

因为这个是代码规范的问题啊 对这个是没有对应的匹配规则的 https://eslint.vuejs.org/rules/prefer-separate-static-class.html #39 (comment)

我明白从代码规范上 静态类就应该写在静态class中，但限制以js来组织class的好处，况且unocss对此并未限制，且此规则并不流行，如果看到了另一种好处，我相信这个规则会更少开启

yveeven commented

我是有用eslint规范代码，不会出现这个动态规则的代码，所以没考虑过

像这样

const style = {
  primary: 'text-red',
  priamry-active: 'active:text-blue'
}

如果以此方式来组织unocss原子类，那可以得到原子类复用性的好处，且由js控制是很常见的用法，并非只是我之前举例那样直接在行内将静态类写在动态class中

MellowCo commented

那你就要解决怎么动态转换js中的class字符了，以支持小程序了
怎么确定哪些部分的js代码是要用在class动态规则里，在对这部分中class代码转换

MellowCo commented

我是有用eslint规范代码，不会出现这个动态规则的代码，所以没考虑过

像这样

const style = {
  primary: 'text-red',
  priamry-active: 'active:text-blue'
}

如果以此方式来组织unocss原子类，那可以得到原子类复用性的好处，且由js控制是很常见的用法，并非只是我之前举例那样直接在行内将静态类写在动态class中

这个想法没有错，但是在小程序不好实现，这是小程序的局限性。如果小程序支持 ! [ , 那根本都不需要这个preset。完全可以直接使用 unocss tailwindcss 这些原子化css的。
这是小程序的问题啊！！！！！！！！

MellowCo commented

这是小程序的问题！！！！！！！！
不是unocss的问题！！！！！！！！！！

MellowCo commented

我是有用eslint规范代码，不会出现这个动态规则的代码，所以没考虑过

像这样

const style = {
  primary: 'text-red',
  priamry-active: 'active:text-blue'
}

如果以此方式来组织unocss原子类，那可以得到原子类复用性的好处，且由js控制是很常见的用法，并非只是我之前举例那样直接在行内将静态类写在动态class中

这些对于不包含 ！[ 这些基础的class都是支持的

MellowCo commented 
<view 
	class="text-red" 
	:class="{'!text-blue': active}">
index
</view>
MellowCo commented

这个是小程序不支持class存在 $ ! 这些字符的原因。 我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

我理解您说的转换，但我不理解的是转换为什么会造成class动态不生效

因为这个是代码规范的问题啊 对这个是没有对应的匹配规则的 eslint.vuejs.org/rules/prefer-separate-static-class.html #39 (comment)

我明白从代码规范上 静态类就应该写在静态class中，但限制以js来组织class的好处，况且unocss对此并未限制，且此规则并不流行，如果看到了另一种好处，我相信这个规则会更少开启

没有限制js来组织class哦，下面这些都是支持的

<view
  class="mb-3 text-xs"
  :class="{ 'bg-blue-600:80': flag, 'text-green-600/80': !flag }"
>
  obj class
</view>

<view
  class="mb-3 text-xs"
  :class="[
    flag ? 'bg-blue-600/80' : 'bg-red-600:80',
    !flag ? 'text-yellow-800/80' : 'text-green-800/80',
  ]"
>
 array class
</view>
yveeven commented

那你就要解决怎么动态转换js中的class字符了，以支持小程序了

怎么确定哪些部分的js代码是要用在class动态规则里，在对这部分中class代码转换

的确是的

yveeven commented

这是小程序的问题！！！！！！！！

不是unocss的问题！！！！！！！！！！

谢谢☺️

yveeven commented

这个是小程序不支持class存在 $ ! 这些字符的原因。 我这里是通过transform转换成普通字符，让小程序支持的 $ -> do_

我理解您说的转换，但我不理解的是转换为什么会造成class动态不生效

因为这个是代码规范的问题啊 对这个是没有对应的匹配规则的 eslint.vuejs.org/rules/prefer-separate-static-class.html #39 (comment)

我明白从代码规范上 静态类就应该写在静态class中，但限制以js来组织class的好处，况且unocss对此并未限制，且此规则并不流行，如果看到了另一种好处，我相信这个规则会更少开启

没有限制js来组织class哦，下面这些都是支持的

<view

  class="mb-3 text-xs"

  :class="{ 'bg-blue-600:80': flag, 'text-green-600/80': !flag }"

>

  obj class

</view>



<view

  class="mb-3 text-xs"

  :class="[

    flag ? 'bg-blue-600/80' : 'bg-red-600:80',

    !flag ? 'text-yellow-800/80' : 'text-green-800/80',

  ]"

>

 array class

</view>

对的 目前发现就是只有标题所列特殊字符以及变体不生效

yveeven commented 
<view 

	class="text-red" 

	:class="{'!text-blue': active}">

index

</view>

这个方式没有尝试过 它是可行的吗 但这样的用法太局限