3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常 #287

bazijun · 2024-04-03T07:27:01Z

描述这个Bug
完全按照文档配置，但3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常

config > index.js

  mini: {
    webpackChain(chain, webpack) {
      //  失败
      //   chain.merge({
      //     plugin: {
      //       install: {
      //         plugin: UnifiedWebpackPluginV5,
      //         args: [
      //           {
      //             appType: 'taro',
      //           }
      //         ]
      //       }
      //     }
      //   });
      // },
      // 成功
      chain.merge({
        plugin: {
          install: {
            plugin: TaroWeappTailwindcssWebpackPluginV5,
            args: [
              {
                framework: 'react'
              }
            ]
          }
        }
      })
    },
 }

运行环境

OS: 微信小程序
Nodejs: 18.x
Framework: [email protected]

sonofmagic · 2024-04-03T08:59:49Z

其实从 v2 版本开始，我就更改了一下 v1 版本的 jsx? 转义的实现方式，现在添加了一个注入脚本:

 "scripts": {
+  "postinstall": "weapp-tw patch"
 }

这个脚本主要是用来暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件的

你在从 v1 迁移到 v3 的时候，记得添加并执行一下，然后更换一下插件，这样才能从 tailwindcss 的 postcss 插件里面，取出上下文去精确修改类似 text-[16px] 这种 jsx 里的变量。

相关的文档见： https://weapp-tw.icebreaker.top/docs/releases/v2

bazijun · 2024-04-03T09:27:25Z

谢谢您的回答，但我已经是添加过这个脚本了的，并且也单独执行过的，并且执行不止一次。

$ npx weapp-tw patch

$ pnpm run postinstall

> [email protected] postinstall D:\1workspace\project\base-taro-template
> weapp-tw patch

其实从 v2 版本开始，我就更改了一下 v1 版本的 jsx? 转义的实现方式，现在添加了一个注入脚本:
 "scripts": {
+  "postinstall": "weapp-tw patch"
 }
这个脚本主要是用来暴露 tailwindcss 运行上下文给 webpack/vite/glup 插件的

你在从 v1 迁移到 v3 的时候，记得添加并执行一下，然后更换一下插件，这样才能从 tailwindcss 的 postcss 插件里面，取出上下文去精确修改类似 text-[16px] 这种 jsx 里的变量。

相关的文档见： https://weapp-tw.icebreaker.top/docs/releases/v2

sonofmagic · 2024-04-03T10:20:37Z

tailwindcss也升级到3的最新版本了吗，发一下你的那些环境，以及依赖包的版本呢。

当然有最小化的复现案例那最好😁😁

bazijun · 2024-04-07T06:53:49Z

以下是我的依赖

  "dependencies": {
    "@antmjs/vantui": "^3.3.5",
    "@babel/runtime": "^7.7.7",
    "@fch/fch-tool": "^2.0.5",
    "@tanstack/react-query": "^4.20.4",
    "@tarojs/components": "3.6.14",
    "@tarojs/helper": "3.6.14",
    "@tarojs/plugin-framework-react": "3.6.14",
    "@tarojs/plugin-html": "3.5.10",
    "@tarojs/plugin-platform-alipay": "3.6.14",
    "@tarojs/plugin-platform-jd": "3.6.14",
    "@tarojs/plugin-platform-qq": "3.6.14",
    "@tarojs/plugin-platform-swan": "3.6.14",
    "@tarojs/plugin-platform-tt": "3.6.14",
    "@tarojs/plugin-platform-weapp": "3.6.14",
    "@tarojs/react": "3.6.14",
    "@tarojs/router": "3.6.14",
    "@tarojs/runtime": "3.6.14",
    "@tarojs/shared": "3.6.14",
    "@tarojs/taro": "3.6.14",
    "@tarojs/taro-h5": "3.6.14",
    "axios": "^0.26.0",
    "rc-field-form": "^1.27.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.11.0",
    "rxjs": "^7.5.6",
    "windicss": "^3.5.6",
    "zustand": "^4.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@dcasia/mini-program-tailwind-webpack-plugin": "^1.5.6",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
    "@tarojs/cli": "3.6.14",
    "@tarojs/webpack5-runner": "3.6.14",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-syntax-highlighter": "^13.5.2",
    "@types/react-test-renderer": "^18.0.0",
    "@types/react-transition-group": "^4.4.4",
    "@types/webpack-env": "^1.13.6",
    "@typescript-eslint/eslint-plugin": "^5.20.0",
    "@typescript-eslint/parser": "^5.20.0",
    "autoprefixer": "^10.4.13",
    "babel-plugin-import": "^1.13.5",
    "babel-preset-taro": "3.5.10",
    "eslint": "^8.12.0",
    "eslint-config-taro": "3.5.10",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-react": "^7.8.2",
    "eslint-plugin-react-hooks": "^4.2.0",
    "postcss": "^8.4.20",
    "postcss-rem-to-responsive-pixel": "^5.1.3",
    "style-loader": "1.3.0",
    "stylelint": "^14.4.0",
    "tailwindcss": "^3.2.4",
    "typescript": "^3.7.0",
    "weapp-tailwindcss": "^3.1.1",
    "weapp-tailwindcss-webpack-plugin": "^1.12.8",
    "webpack": "^5.74.0"
  }

以下是我 home 的代码

import { View } from '@tarojs/components';
import { FC } from 'react';

const HomePage: FC = () => {
  return <View className='text-[red]'>Taro! 启动</View>;
};

export default HomePage;

上面的 text-[red] 被编译成了

我还可以提供的是我的 config 配置与 tailwind配置：

const getAlias = require('./alias');
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// const { TaroWeappTailwindcssWebpackPluginV5 } = require('weapp-tailwindcss-webpack-plugin');

const config = {
  projectName: 'base-taro-template',
  date: '2022-12-13',
  designWidth: 750,
  alias: {
    ...getAlias()
  },
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
    375: 2 / 1
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: ['@tarojs/plugin-html'],
  defineConstants: {
  },
  copy: {
    patterns: [
    ],
    options: {
    }
  },
  framework: 'react',
  compiler: 'webpack5',
  cache: {
    enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  mini: {
    webpackChain(chain, webpack) {
        chain.merge({
          plugin: {
            install: {
              plugin: UnifiedWebpackPluginV5,
              args: [
                {
                  appType: 'taro',
                }
              ]
            }
          }
        });
    },
    postcss: {
      pxtransform: {
        enable: true,
        config: {
          selectorBlackList: ['nut-']
        }
      },
      url: {
        enable: true,
        config: {
          limit: 1024 // 设定转换尺寸上限
        }
      },
      cssModules: {
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  },
  h5: {
    publicPath: '/',
    esnextModules: [/@antmjs[\\/]vantui/],
    staticDirectory: 'static',
    postcss: {
      autoprefixer: {
        enable: true,
        config: {
        }
      },
      pxtransform: {
        enable: true,
        config: {},
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]'
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  } else if (process.env.MODE === 'devBuild') {
    return merge({}, config, require('./dev'));
  }
  return merge({}, config, require('./prod'))
}

tailwind.config.js

// 自定义项目主题色, vantui的主题色需在app.css中需单独配置
const PROJECT_THEME_COLOR = '#FF7043' 

const customColors = {/*  */
  'theme-color': PROJECT_THEME_COLOR,
  'icb-orange': '#FA5A4C',
  'icb-teal': '#13BFBA',
  'icb-blue': '#3751FF',
};

function withOpacityValue(variable) {
  return ({ opacityValue }) => {
    if (opacityValue === undefined) {
      return `rgb(var(${variable}))`;
    }
    return `rgb(var(${variable}) / ${opacityValue})`;
  };
}

function toRGB(colors) {
  const tempColors = Object.assign({}, colors);
  const rgbColors = Object.entries(tempColors);
  for (const [key, value] of rgbColors) {
    if (typeof value === "string") {
      if (value.replace("#", "").length == 6) {
        const aRgbHex = value.replace("#", "").match(/.{1,2}/g);
        tempColors[key] = `${parseInt(aRgbHex[0], 16)} ${parseInt(aRgbHex[1], 16)} ${parseInt(aRgbHex[2], 16)}`;
      }
    } else {
      tempColors[key] = toRGB(value);
    }
  }
  return tempColors;
}

/** @type {import('tailwindcss').Config} */
const Config = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      container: {
        center: true,
      },
      colors: {
        ...customColors,
        rgb: toRGB(customColors),
        primary: withOpacityValue("--tailwind-primary-color"),
      },
    },
  },
  plugins: ['@tailwindcss/forms'],
  corePlugins: {
    preflight: false,
  },
};
module.exports = Config

zhaoyunyes · 2024-04-24T09:37:12Z

如果长度被识别成颜色了，也可以这样处理：
text-[length:123rpx]

sonofmagic · 2024-04-24T09:44:07Z

如果长度被识别成颜色了，也可以这样处理： text-[length:123rpx]

是的，之前我文档上也提到过 length 和 color 相关的任意值写法

https://weapp-tw.icebreaker.top/docs/issues/rpx-ambiguities

可以作为补充。

bazijun added the bug Something isn't working label Apr 3, 2024

bazijun assigned sonofmagic Apr 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常 #287

3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常 #287

bazijun commented Apr 3, 2024

sonofmagic commented Apr 3, 2024

bazijun commented Apr 3, 2024

sonofmagic commented Apr 3, 2024

bazijun commented Apr 7, 2024

zhaoyunyes commented Apr 24, 2024

sonofmagic commented Apr 24, 2024

3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常 #287

3.1.1版本在taro下不能正常进行JIT编译，会将text-[16px]编译成 text -16xp。而使用[email protected] 却一切正常 #287

Comments

bazijun commented Apr 3, 2024

sonofmagic commented Apr 3, 2024

bazijun commented Apr 3, 2024

sonofmagic commented Apr 3, 2024

bazijun commented Apr 7, 2024

zhaoyunyes commented Apr 24, 2024

sonofmagic commented Apr 24, 2024