weapp-tailwindcss icon indicating copy to clipboard operation
weapp-tailwindcss copied to clipboard

Published 20 hours ago • verified publisher icon sonofmagic

[Bug]: terser-webpack-plugin 使用后打包的wxss不支持原始tailwindcss变量

Open yoke0104x opened this issue 5 months ago • 6 comments

weapp-tailwindcss 版本

4.1.8

tailwindcss 版本

4.1.8

框架 & 小程序平台

taro 编译 微信小程序 出现错误

最小复现bug的代码仓库链接

https://github.com/yoke0104x/taro-tailwindcss-bug-demo

复现bug的步骤

chain.merge({
	plugin: {
		install: {
			plugin: require("terser-webpack-plugin"),
			args: [
				{
					terserOptions: {
						compress: true, // 默认使用terser压缩
						// mangle: false,
						keep_classnames: true, // 不改变class名称
						keep_fnames: true // 不改变函数名称
					}
				}
			]
		}
	}
});

使用这个配置后打包的app-origin.wxss 会有原始tailwindcss

@layer properties;

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {}
}

.text-\[\#bcbcbc\] {
  color: #bcbcbc;
}

.container {
  width: 100%;
  @media (width >= 40rem) {
    max-width: 40rem;
  }
  @media (width >= 48rem) {
    max-width: 48rem;
  }
  @media (width >= 64rem) {
    max-width: 64rem;
  }
  @media (width >= 80rem) {
    max-width: 80rem;
  }
  @media (width >= 96rem) {
    max-width: 96rem;
  }
}

这些好像都不支持

就会导致

Image

预期是什么？

分包加载 小程序包体积过大无法进行预览上传 这个配置和tailwindcss可以运行正常

实际发生了什么？

Image

运行环境

System:
    OS: macOS 15.4.1
    CPU: (10) arm64 Apple M4
    Memory: 154.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.4 - ~/.nvm/versions/node/v18.20.4/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v18.20.4/bin/npm
    pnpm: 8.15.9 - ~/Library/pnpm/pnpm
    bun: 1.1.33 - /opt/homebrew/bin/bun
  npmPackages:
    @babel/core: ^7.8.0 => 7.27.4 
    @babel/plugin-proposal-class-properties: 7.14.5 => 7.14.5 
    @babel/preset-react: ^7.24.1 => 7.27.1 
    @babel/runtime: ^7.21.5 => 7.27.4 
    @nutui/icons-react-taro: ^3.0.1 => 3.0.1 
    @nutui/nutui-react-taro: ^2.6.14 => 2.7.14 
    @pmmmwh/react-refresh-webpack-plugin: ^0.5.5 => 0.5.16 
    @tailwindcss/postcss: ^4.1.8 => 4.1.8 
    @tanstack/react-query: ^4.29.3 => 4.29.3 
    @tarojs/cli: 4.1.1 => 4.1.1 
    @tarojs/components: 4.1.1 => 4.1.1 
    @tarojs/helper: 4.1.1 => 4.1.1 
    @tarojs/plugin-framework-react: 4.1.1 => 4.1.1 
    @tarojs/plugin-html: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-alipay: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-h5: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-jd: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-qq: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-swan: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-tt: 4.1.1 => 4.1.1 
    @tarojs/plugin-platform-weapp: 4.1.1 => 4.1.1 
    @tarojs/react: 4.1.1 => 4.1.1 
    @tarojs/runtime: 4.1.1 => 4.1.1 
    @tarojs/shared: 4.1.1 => 4.1.1 
    @tarojs/taro: 4.1.1 => 4.1.1 
    @tarojs/taro-loader: 4.1.1 => 4.1.1 
    @tarojs/webpack5-runner: 4.1.1 => 4.1.1 
    @types/node: ^18.15.11 => 18.19.110 
    @types/react: ^18.0.0 => 18.3.23 
    @types/webpack-env: ^1.18.8 => 1.18.8 
    @typescript-eslint/eslint-plugin: ^7.18.0 => 7.18.0 
    @typescript-eslint/parser: ^7.18.0 => 7.18.0 
    autoprefixer: ^10.4.21 => 10.4.21 
    babel-plugin-import: ^1.13.8 => 1.13.8 
    babel-preset-taro: 4.1.1 => 4.1.1 
    classnames: ^2.5.1 => 2.5.1 
    eslint: ^8.57.1 => 8.57.1 
    eslint-config-airbnb: ^19.0.4 => 19.0.4 
    eslint-config-airbnb-typescript: ^18.0.0 => 18.0.0 
    eslint-config-prettier: ^10.1.5 => 10.1.5 
    eslint-config-taro: 4.1.1 => 4.1.1 
    eslint-import-resolver-typescript: ^4.4.2 => 4.4.2 
    eslint-plugin-import: ^2.31.0 => 2.31.0 
    eslint-plugin-jsx-a11y: ^6.10.2 => 6.10.2 
    eslint-plugin-prettier: ^5.4.1 => 5.4.1 
    eslint-plugin-react: ^7.37.5 => 7.37.5 
    eslint-plugin-react-hooks: ^4.6.2 => 4.6.2 
    expo: ~50.0.2 => 50.0.21 
    immer: ^10.1.1 => 10.1.1 
    lodash: ^4.17.21 => 4.17.21 
    lodash-es: ^4.17.21 => 4.17.21 
    postcss: ^8.5.4 => 8.5.4 
    prettier: ^3.5.3 => 3.5.3 
    prettier-plugin-organize-imports: ^4.1.0 => 4.1.0 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    react-native: ^0.73.1 => 0.73.11 
    react-refresh: ^0.11.0 => 0.11.0 
    sass: ^1.50.0 => 1.89.1 
    stylelint: ^14.4.0 => 14.16.1 
    tailwindcss: ^4.1.8 => 4.1.8 
    terser: ^5.16.8 => 5.40.0 
    terser-webpack-plugin: ^5.3.14 => 5.3.14 
    ts-node: ^10.9.1 => 10.9.2 
    tsconfig-paths-webpack-plugin: ^4.0.1 => 4.2.0 
    typescript: ~5.1.0 => 5.1.6 
    weapp-tailwindcss: ^4.1.8 => 4.1.8 
    webpack: ^5.78.0 => 5.99.9 
    zustand: ^5.0.5 => 5.0.5

其他附加信息

webpack配置

webpackChain(chain, webpack) {
	chain.resolve.plugin("tsconfig-paths").use(TsconfigPathsPlugin);
	// 复制这块区域到你的配置代码中 region start
	chain.merge({
		plugin: {
			install: {
				plugin: UnifiedWebpackPluginV5,
				args: [
					{
						// 这里可以传参数
						rem2rpx: true,
						injectAdditionalCssVarScope: true,
						appType: "taro"
					}
				]
			}
		}
	});
	chain.merge({
		plugin: {
			install: {
				plugin: require("terser-webpack-plugin"),
				args: [
					{
						terserOptions: {
							compress: true, // 默认使用terser压缩
							// mangle: false,
							keep_classnames: true, // 不改变class名称
							keep_fnames: true // 不改变函数名称
						}
					}
				]
			}
		}
	});
}

yoke0104x avatar Jun 10 '25 09:06 yoke0104x

我记得之前tailwindcss@3的时候也出现过

当时好像是这样解决的

https://tw.icebreaker.top/docs/issues#taro-webpack5-%E7%8E%AF%E5%A2%83%E4%B8%8B%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%92%8C%E5%A4%96%E7%BD%AE%E9%A2%9D%E5%A4%96%E5%AE%89%E8%A3%85%E7%9A%84-terser-webpack-plugin-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8%E4%BC%9A%E5%AF%BC%E8%87%B4%E6%8F%92%E4%BB%B6%E8%BD%AC%E4%B9%89%E5%8A%9F%E8%83%BD%E5%A4%B1%E6%95%88

sonofmagic avatar Jun 10 '25 10:06 sonofmagic

试试 https://tw.icebreaker.top/docs/issues/taro-terser

@yoke0104x 直接使用 https://docs.taro.zone/docs/config-detail#terser 配置呢?

sonofmagic avatar Jun 12 '25 08:06 sonofmagic

都不得行

---- 回复的原邮件 ---- | 发件人 | ice @.> | | 日期 | 2025年06月12日 16:14 | | 收件人 | @.> | | 抄送至 | @.>@.> | | 主题 | Re: [sonofmagic/weapp-tailwindcss] [Bug]: terser-webpack-plugin 使用后打包的wxss不支持原始tailwindcss变量 (Issue #650) | sonofmagic left a comment (sonofmagic/weapp-tailwindcss#650)

试试 https://tw.icebreaker.top/docs/issues/taro-terser

@yoke0104x 直接使用 https://docs.taro.zone/docs/config-detail#terser 配置呢?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

yoke0104x avatar Jun 12 '25 14:06 yoke0104x

@yoke0104x 那你提供一个复现案例给我看看吧，我怀疑是编译配置的问题

你可以创建一个私有仓库，然后邀请我进去排查一下。

sonofmagic avatar Jun 13 '25 02:06 sonofmagic

好的，收到你的 https://github.com/yoke0104x/taro-tailwindcss-bug-demo 仓库，我排查一下

sonofmagic avatar Jun 17 '25 12:06 sonofmagic

@yoke0104x 我试了一下，按照我那样配置是可以的呢，所以我改了代码之后，给你提了一个 pr 你可以参照我的代码试试，这样开发时候就能够压缩代码了 https://github.com/yoke0104x/taro-tailwindcss-bug-demo/pull/1

实际上就是按照我文档 https://tw.icebreaker.top/docs/issues/taro-terser 上写的去操作的

sonofmagic avatar Jun 19 '25 04:06 sonofmagic