Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

简单看了下源码,貌似暂不支持js/ts中定义的externalClasses? #44

Closed
dhlolo opened this issue Jul 25, 2022 · 2 comments
Closed

Comments

@dhlolo
Copy link

dhlolo commented Jul 25, 2022

externalClasses

@ItsRyanWu
Copy link
Member

ItsRyanWu commented Jul 25, 2022

对于自定义名称的 externalClasses 的兼容需要从 Tailwind/Windi CSS 解析器的层面去解决,这个不属于本插件的解决范围。
但感谢你的提醒,粗略估计即使很少有人会将本插件与原生小程序进行集成,我也会在文档中补充相关注意事项。

如果真的遇到在将本插件与原生小程序进行集成时需要用到 externalClasses 的场景,有一个巧妙的方法是将该 externalClasses 名称声明为 'class'

// custom-component.js
Component({
  externalClasses: [ 'class' ]
})

以这种方式是可以保证在组件被使用时正常使用原子化 css 的 class name 的:

<custom-component class="w-115px h-15px filter invert"/>

这种方式已正常使用在线上原生小程序产品中:
image

@dhlolo
Copy link
Author

dhlolo commented Jul 26, 2022

  • Tailwind理论上上不会支持这种国产非标情景
  • 既然叫mini-program-tailwind,理论上就是桥接Tailwind方案到小程序的case
  • 上述的解决方式也可以用在你们的仓库中,解析observerClasses后替换成class以兼容Tailwind,同时辅以类似styleIsolation: apply-shared的约定

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants