[Bug report] unocss使用@apply产生异常

[liziwork]

问题描述
请用简洁的语言描述你遇到的bug，至少包括以下部分，如提供截图请尽量完整：

1. 问题触发的条件
   在style标签里面使用@apply，编译后的wxss文件只会生成@apply最后一个样式。
2. 期望的表现
   比如@apply text-red-1 bg-white;
3. 实际的表现
   只会生成background-color: white;

环境信息描述
至少包含以下部分：

1. 系统类型(Mac或者Windows)
   windows和mac都一样
2. Mpx依赖版本(@mpxjs/core、@mpxjs/webpack-plugin和@mpxjs/api-proxy的具体版本，可以通过package-lock.json或者实际去node_modules当中查看)
   最新版本
3. 小程序开发者工具信息(小程序平台、开发者工具版本、基础库版本）
   微信、抖音

最简复现demo

<style lang="less"> .list { // --at-apply: bg-red-500; @apply text-gray-1 bg-red-500; // 这里只会生成最后一个css，比如leading-40px .item { @apply text-red-1 bg-white leading-40px; // 如果使用--at-apply，末行会多生成一个分号，导致微信开发工具报错 // --at-apply: text-red-1 bg-white leading-40px; /** [ WXSS 文件编译错误] ./components/list4cb8a88a/index.wxss(10:161): unexpected token `;`(env: Windows,mp,1.06.2505152; lib: 3.8.4) */ } /** ./components/list4cb8a88a/index.wxss(3:3): unexpected `@` at pos 44(env: Windows,mp,1.06.2505152; lib: 3.8.4) */ } </style>

仓库地址：https://github.com/liziwork/mpx-windows-easy-demo
请查看components/list组件style部分

[cwyyue]

less 语法和 @apply 语法冲突了，小程序环境还不支持识别 --at-apply，我们后续支持下。

[cwyyue]

--at-apply 生成多分号问题已在unocss v0.58.7版本修复。unocss/unocss#3657

[liziwork]

--at-apply 生成多分号问题已在unocss v0.58.7修复版本。unocss /unocss#3657

这个我怎么更新，目前我vscode版本的unocss是最新版本，问题依旧存在

[cwyyue]

--at-apply 生成多分号问题已在unocss v0.58.7修复版本。unocss /unocss#3657

这个我怎么更新，目前我vscode版本的unocss是最新版本，问题依旧存在

可以在项目中 pnpm i @unocss/transformer-directives@0.58.7 再试试

[liziwork]

--at-apply 生成多分号问题已在unocss v0.58.7修复版本。unocss /unocss#3657

这个我怎么更新，目前我vscode版本的unocss是最新版本，问题依旧存在

可以在项目中 pnpm i @unocss/transformer-directives@0.58.7 再试试

不行，还是有2个分号，@apply则不会。

[cwyyue]

--at-apply 生成多分号问题已在unocss v0.58.7修复版本。unocss /unocss#3657

这个我怎么更新，目前我vscode版本的unocss是最新版本，问题依旧存在

可以在项目中 pnpm i @unocss/transformer-directives@0.58.7 再试试

不行，还是有2个分号，@apply则不会。

--at-apply 多分号的问题 在 0.58.7 版本的unocss没有完全修复，需要 v0.60.2 以上版本才行。
建议目前先避免用less等可能和‘@’产生冲突的预处理器，等mpx unocss 升级后再试。