MellowCo / unplugin-attributify-to-class

css attributify mode to class, support use in vite, rollup, webpack
https://www.npmjs.com/package/unplugin-attributify-to-class
MIT License
20 stars 3 forks source link

chore: Add the defaultAttributes field #7

Closed Ares-Chang closed 1 year ago

Ares-Chang commented 1 year ago

fix: 82 issues 补全部分 defaultAttributes 字段参数,但依旧不完整。

MellowCo commented 1 year ago

这些都只有单个属性啊

color-red w-size h-size rd-size

image

MellowCo commented 1 year ago

<view color-red rd-1 w-full h-3 />

<view color="red" rd="1" w="full" h="3"/>
<view bg="cover red" p="x4 y5"/>
Ares-Chang commented 1 year ago

w="30%"w-full 等,部分 百分比是常用功能,但是并不能直接写到属性里

Ares-Chang commented 1 year ago

起初我想的是直接支持 hover="color-pink w-20" 等待,这种写法,但是我并没有改成功。包含常用的 hover dark 等等方法,这种写法应该比分开来写常用的多。

MellowCo commented 1 year ago

我觉得如果只有单属性 没必要加入defaultAttributes中

<view color-red rd-1 w-full h-3 />
<view bg="cover red" p="x4 y5"/>
<view color="red" rd="1" w="full" h="3"/>
MellowCo commented 1 year ago

因为小程序不支持 attributify css, transformer 后对源代码的影响还是有的, 有时会出现副作用

例如

<my-componet fix="top" />

<my-componet fix="top" class="fix-top"/>
Ares-Chang commented 1 year ago

好,如果你觉得不需要我尊重你的选择。我再描述一下我的问题,我一开始是想这样写:

<template>
  <main
    px-4 py-10
    font-sans text="center"
    color="pink-700 dark:yellow-200"
  >
    <div mx-auto mt-4 text-center text-sm opacity-50>
      [Home Layout]
    </div>
  </main>
</template>

但是这样写后, color 并不能正确生效,所以我修改了包的源码,但是我没有成功解决问题。

Ares-Chang commented 1 year ago

我对兼容了解不多,可能考虑不周