tailwindcss v2 版本下开启 TAILWIND_MODE=watch 的环境变量会导致高版本 hbuilderx 重复差量编译

cgy859854649 commented 8 months ago

描述这个Bug 今天升级了hbuilderx到3.98，结果项目一运行就一直重复编译，排查了一下午怀疑是 tailwindcss的问题。于是我使用新建了一个uniapp项目并安装配置了tailwindcss，结果不出所料，模板中每有一条tailwindcss类名就会差量编译一次

屏幕截图(可选)

运行环境

OS: [e.g. iOS]
Nodejs: 16x
Framework: uni-app/taro/remax/rax

Additional context Add any other context about the problem here.

sonofmagic commented 8 months ago

嗯，好的我排查一下，低hbuilderx版本不会出现这个问题是吧？另外你使用的 weapp tailwindcss 版本是多少？还有是uni app vue3 vite 嘛？

sonofmagic commented 8 months ago

项目: https://github.com/sonofmagic/uni-app-vue3-tailwind-hbuilder-template ，依赖项: "tailwindcss": "^3.3.5", "weapp-tailwindcss": "^3.0.0" 我的系统是: MacOS 14.2 经过测试， hbuilderx 3.96 是ok的，没有这个问题升级到 hbuilderx 3.98 ，更改类名后保存也是ok的:

可以看到图上，只差量编译编译了一次

我需要更多更加详细的信息补充，以复现你这个问题

或者你可以提供可以复现的demo link

cgy859854649 commented 8 months ago

依赖项 "devDependencies": { "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "postcss-rem-to-responsive-pixel": "^5.1.3", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17", "weapp-tailwindcss-webpack-plugin": "^1.12.8", "webpack": "npm:webpack@^4.46.0" } 之前在3.7版本是好好的，3.96以上的版本就会重复编译

sonofmagic commented 8 months ago

这次我用了这个模板 https://github.com/sonofmagic/uni-app-vue2-tailwind-hbuilder-template 依赖项和你应该是一样的也去使用了macos 的 hbuilderx 3.98 版本运行，修改之后结果如下

差量编译也只出现了一次，没有复现这个问题，你可以试试用你的 hbuilderx 跑一下这个模板试试

cgy859854649 commented 8 months ago

我运行了一遍你这个还是重复编译很多次 03A4DD7A

cgy859854649 commented 8 months ago

win10 hbuilderx3.98

sonofmagic commented 8 months ago

复现过程

我找了个 windows 机器，下载了 hbuilderx3.98 复现了这个问题，排查下来和插件无关，和 tailwindcss v2 的 TAILWIND_MODE 环境变量有关，我把 :

process.env.TAILWIND_MODE = "watch"

这个去掉，差量编译重复的问题就好了，但是这个 TAILWIND_MODE 环境变量是 tailwindcss v2 热更新的开关，假如关了它，你在代码里写 w-[111px] 这样的类名是不会实时生效的，必须要重新编译才会生成。

这个问题只在 windows 上 hbuilderx 出现, macos hbuilderx 没有这样的问题，同时 tailwindcss v3 没有这样的问题。

解决方案

所以解决方案为:

要不你把项目转化成 cli 版本，cli 版本的 vue2 直接使用的 webpack5，postcss8 可以直接使用最新版本的 tailwindcss 和我这个插件。(也有一种 hack hbuilderx,强行让它执行 webpack5,postcss8 的方案，详见这个链接)
或者找个办法，在注入 TAILWIND_MODE 环境变量的同时，hbuilderx 还不会重新差量编译。
或者这个问题反馈给 hbuilderx 官方，看看他们有没有什么方式解决。

另外

我还试了在 package.json 里这样写脚本，结果是无效的:

    "uni-app": {
        "scripts": {
            "dev": {
                "title": "开发微信小程序",
                "browser": "",
                "env": {
                    "UNI_PLATFORM": "mp-weixin",
                    "TAILWIND_MODE": "watch"
                },
                "define": {}
            }
        }
    }

然后在 vue.config.js 里打印 console.log(process.env.TAILWIND_MODE) 结果也是空的，hbuilderx 环境变量比较封闭，不知道咋搞进去。

cgy859854649 commented 8 months ago

好的，太感谢作者了

sonofmagic / weapp-tailwindcss

tailwindcss v2 版本下开启 TAILWIND_MODE=watch 的环境变量会导致高版本 hbuilderx 重复差量编译 #264

复现过程

解决方案

另外