search

sonofmagic / weapp-tailwindcss

bring tailwindcss to weapp ! 把 `tailwindcss` 原子化思想带入小程序开发吧 ! 原 `weapp-tailwindcss-webpack-plugin`
https://weapp-tw.icebreaker.top
MIT License
1.12k stars 82 forks source link

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

Open bazijun opened 3 months ago

bazijun commented 3 months ago

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

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'
              }
            ]
          }
        }
      })
    },
 }

运行环境

sonofmagic commented 3 months ago

其实从 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 commented 3 months ago

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

$ npx weapp-tw patch

$ pnpm run postinstall

> moto-insurance-user-taro@1.0.0 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 commented 3 months ago

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

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

bazijun commented 3 months ago

以下是我的依赖

  "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] 被编译成了 QQ20240407145007

我还可以提供的是我的 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 commented 2 months ago

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

sonofmagic commented 2 months ago

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

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

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

可以作为补充。