概述 Descriptions

详细内容见 Issue

• [BUG] ScriptCat 的 CSS 冲突了 monaco 的 CSS #1011

close #1011

转换方法

工具转换：

add-unocss-prefix.html

手工转换

1)className: "XXXX"
2) className={website ? "cursor-pointer" : "cursor-default"}
3)

              className={[
                "justify-self-center",
                mRecords.site.length === 0 && mRecords.other.length === 0 && mRecords.ignored.length === 0
                  ? "hidden"
                  : "",
              ]}

4. className={"w-full"}
5. grow-0 shrink-1 grow-1 shrink-0

检查方法

简单检查

(?<=["\s`])!?(dark:|hover:|dark:hover:|hover:dark:)?(?:text-gray-\d+|m-\d+|bg-fill-\d+|text-blue-\d+|visible|absolute|fixed|relative|static|bottom-0|right-1|top-1\/2|top-50px|grid|!\?m-0|m\[0\]|m\[1\]|m\[2\]|mb-\d+|ml-\d+|mr-\d+|mt|box-border|block|inline-block|contents|hidden|!\?h-6|h-\d+|h-auto|h-full|max-w-\[240px\]|max-w-\d+(?:\.\d+)?|max-w-100|min-h-\d+|min-w-\[100px\]|min-w-\d+|w-\d+|w-full|w1|w2|!flex|flex!|flex|inline-flex|flex-1|flex-shrink-0|flex-grow|grow|!\?flex-row|flex-row|!\?flex-col|flex-col|table|table!|-translate-y-1\/2|transform|cursor-default|cursor-pointer|select-none|items-start|items-center|justify-end|justify-center|justify-between|justify-self-center|gap-\d+|gap-x-1|space-y-\d+|overflow-auto|overflow-hidden|text-ellipsis|break-all|b|border|rounded|rounded-full|!p-\[10px\]|p-\d+|p1|p2|p3|p4|p8px|p\[\^abc\]|p\[k\]|!\?px-\d+|px-\d+|py-\d+|pb-\d+|text-center|text-left|text-right|text-end|indent-4|!text-lg|text-\[12px\]|text-2xl|text-base|text-sm|text-xl|text-xs|!text-size-sm|text-size-lg|darkdark:text-(?:blue-400|gray-100|gray-200|gray-300)|text-(?:blue-500|gray-(?:500|700|800|900))|color-gray-5|!hover:text-blue-600:hover|darkdark:hover:text-blue-400:hover|font-500|font-medium|underline|hover:underline:hover|underline-offset-2|hover:underline-offset-2:hover|opacity-0|group-hover:opacity-100|outline|filter|transition|transition-all|transition-opacity|duration-(?:200|300)|ease|ease-out|[hw]-screen|[hw]-full|gap-[xy]-\d+|[pm][rtlr]-\d+|grow-\d|shrink-\d|justify-start|truncate|flex-wrap|flex-nowrap|overflow-[xy]-auto|basis-\d+\/\d+|float-\w+|grow-\d+|shirnk-\d+)(?=["\s`])

打包差异对比：

css-compare.zip

变更内容 Changes

截图 Screenshots

加上前缀感觉不是很好，vscode插件不支持了，而且到处都变动了，也不符合平常的写法

加上前缀感觉不是很好，vscode插件不支持了，而且到处都变动了，也不符合平常的写法

加上前缀感觉不是很好。

1. UnoCSS 扫描乱扫。即使把UnoCSS换掉也不一定解决这个问题。
   2）使用了Monaco Editor。有CSS名字重叠。

vscode插件不支持了

你用哪个插件？ vscode 插件肯定是支持前缀。我估计是 UnoCSS 跟 插件有相容性问题

也不符合平常的写法

tw- 是平常的写法。我从uno- 转成 tw- 吧

加上前缀感觉不是很好，vscode插件不支持了，而且到处都变动了，也不符合平常的写法

加上前缀感觉不是很好。

1. UnoCSS 扫描乱扫。即使把UnoCSS换掉也不一定解决这个问题。
   2）使用了Monaco Editor。有CSS名字重叠。

vscode插件不支持了

你用哪个插件？ vscode 插件肯定是支持前缀。我估计是 UnoCSS 跟 插件有相容性问题

也不符合平常的写法

tw- 是平常的写法。我从uno- 转成 tw- 吧

不过改动太多了，我觉得有其他更好的方法

我使用的这个插件，也许这个插件支持前缀，但是我觉得还是不太好

加上前缀感觉不是很好，vscode插件不支持了，而且到处都变动了，也不符合平常的写法

加上前缀感觉不是很好。

1. UnoCSS 扫描乱扫。即使把UnoCSS换掉也不一定解决这个问题。
   2）使用了Monaco Editor。有CSS名字重叠。

vscode插件不支持了

你用哪个插件？ vscode 插件肯定是支持前缀。我估计是 UnoCSS 跟 插件有相容性问题

也不符合平常的写法

tw- 是平常的写法。我从uno- 转成 tw- 吧

不过改动太多了，我觉得有其他更好的方法

我使用的这个插件，也许这个插件支持前缀，但是我觉得还是不太好

刚下载了
可能是之前没写 extractors 导致吧
现在支持前缀

不过改动太多了，我觉得有其他更好的方法

这没办法。ScriptCat 一开始没有想过 CSS 会跟 Monaco 的冲突吧

我在 25f7b65 处理的，应该不用加 tw- 也能修正这单一问题

但是，这还是跟 monaco 的 css 可能有冲突。
考虑 monaco editor 本身也一直在更新
现在ScriptCat BETA加前缀 才是正确的处理
也减少了 UnoCSS 因为乱扫 CSS名字 而产生的异常代码

arco-design 还好，它本身有考虑和其他css 兼容，所以它的 class名 都有 arco-

taiwindcss 加 tw- 是他们团队较后期才理解到这个 prefix 的重要性
现在插件什么的都肯定有支持 prefix

我晚些看看加 tw- 我的插件能不能支持，这个也可以接受，你说得有道理，确实挺容易产生冲突的

我晚些看看加 tw- 我的插件能不能支持

我刚刚查了一下，也试了一下
Tailwind CSS IntelliSense 好像是不支持 UnoCSS 的。它只会读 tailwindcss.config.ts 而不会读 uno.config.ts

上面的截图是 UnoCSS

我估计你也有安装 UnoCSS
但可能是Bug 吧。改了 prefix 后，要反安装插件再关闭整个VS Code 再打开再安装
如果 prefix 改变了，需要重载 VSCode Window 和 UnoCSS

1. F1 > Developer: Reload Window
2. F1 > UnoCSS: Reload UnoCSS

我都试了几次，确认是要这样才有提示的

我晚些看看加 tw- 我的插件能不能支持

我刚刚查了一下，也试了一下 Tailwind CSS IntelliSense 好像是不支持 UnoCSS 的。它只会读 tailwindcss.config.ts 而不会读 uno.config.ts

上面的截图是 UnoCSS

我估计你也有安装 UnoCSS 但可能是Bug 吧。改了 prefix 后，要反安装插件再关闭整个VS Code 再打开再安装 如果 prefix 改变了，需要重载 VSCode Window 和 UnoCSS

1. F1 > Developer: Reload Window
2. F1 > UnoCSS: Reload UnoCSS

我都试了几次，确认是要这样才有提示的

看起来可以的，实际上我不太用 unocss 的插件，我只使用tailwindcss插件，我加上 prefix: "tw-", 配置就可以了