打包后app.wxss生成了 .-a-zA-Z__-{a-z-a--z:} 错误样式

seepine commented 3 months ago

描述问题

.-a-zA-Z__-{a-z-a--z:}

原始截图

格式化后截图

复现

目前无法定位具体哪里的问题，怀疑来自tailwind，因为错误css上下文大概处于源码这个位置。

项目用法和demo类似

postcss.config.ts

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import tailwindcssConfig from './tailwind.config'
import nested from 'tailwindcss/nesting'

const plugins = [
  nested(),
  tailwindcss({
    config: tailwindcssConfig
  }),
  autoprefixer()
]
export default plugins

tailwind.config.ts

import type { Config } from 'tailwindcss'
import { basePreset, elementPlusPreset, miniprogramBasePreset } from 'tailwind-extensions'
import { isMp, isQuickapp } from '@uni-helper/uni-env'

const presets: Config['presets'] = [basePreset]
if (isMp || isQuickapp) {
  presets.push(
    elementPlusPreset({
      baseSelectors: [':root', 'page']
    }),
    miniprogramBasePreset
  )
} else {
  presets.push(elementPlusPreset())
}

const config: Config = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [],
  presets
}
export default config

vite.config.ts

defineConfig({
    plugins: [
      uni(),
      uniTailwind(),
    ],
    css: {
      postcss: {
        plugins: postcssPlugins
      }
    },
})

系统信息

基础环境信息:

os: macOS 13.4
node: 20.10.0
vscode: 1.85.1
volar: 2.0.8

基础依赖信息:

vue: 3.3.11
vite: 4.3.5
@dcloudio/uni-app: 3.0.0-4000720240327002
"tailwind-extensions": "^0.22.1",
"tailwindcss": "~3.3.5",
"@uni-helper/vite-plugin-uni-tailwind": "~0.14.1",

使用的包管理器

pnpm

核对

[X] 遵循我们的行为准则
[X] 检查是否已经有一个报告相同错误的问题，以避免重复创建。
[X] 这是一个具体的错误。请开启 GitHub 讨论你的疑问。
[X] 所提供的复现是这个问题的最小复现。

seepine commented 3 months ago

去除了utilities，则没有生成错误样式

@tailwind base;
@tailwind components;
/* @tailwind utilities; */

ModyQyW commented 3 months ago

不用这个插件，对应位置会生成什么？

seepine commented 3 months ago

去掉 uniTailwind()

.\[a-zA-Z\:_\] {
  a-z-a--z:
}

ModyQyW commented 3 months ago

这本来生成的也不对劲吧，怎么会生成这玩意😂

seepine commented 3 months ago

是啊之前也是没遇过，但的确验证了，如果去掉 @tailwind utilities; 就不会生成

seepine commented 3 months ago

或者能否在插件里面处理下，tailwindcss应该是能遍历所有class吧，这个应该是样式有key没有value，如果没有value的就去掉或补上none之类的？

ModyQyW commented 3 months ago

有 key 而且 key 不是 -- 开头 + 没有 value 应该是不合法的，可以考虑加一下

ModyQyW commented 3 months ago

这个应该是 tailwindcss 本身的问题吧，你试下重装依赖、刷新缓存之类的操作之后再打包正常吗？

seepine commented 3 months ago

这个应该是 tailwindcss 本身的问题吧，你试下重装依赖、刷新缓存之类的操作之后再打包正常吗？

我尝试了固定版本，仍然有这个，很奇怪

    "tailwindcss": "3.3.5",

ModyQyW commented 3 months ago

尝试升级吧

seepine commented 3 months ago

最新版tailwindcss也是有，这个不知道哪里来的灵异碰撞，而且我其他项目也是这个版本的tailwindcss，生成就没有 - -

ModyQyW commented 3 months ago

过于抽象了，想不通= =

ModyQyW commented 3 months ago

但可以确认的是，去掉这个插件还是会生成，不是这个插件的问题，只是需要增加一点支持

seepine commented 3 months ago

但可以确认的是，去掉这个插件还是会生成，不是这个插件的问题，只是需要增加一点支持

是的，因为已经使用了插件，如果能解决这个问题就更好了

seepine commented 3 months ago

找到原因了，引用了 marked.js

/**
 * marked v4.3.0 - a markdown parser
 * Copyright (c) 2011-2023, Christopher Jeffrey. (MIT Licensed)
 * https://github.com/markedjs/marked
 */

其中有代码

  .replace('attribute', / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/)

而tailwindcss会扫这个js生成class，就算这行注释掉也会生成，得完全删除才不会 : (

ModyQyW commented 3 months ago

可以尝试配置tailwindcss content时exclude掉相应的文件

uni-helper / vite-plugin-uni-tailwind