[BUG] ScriptCat 的 CSS 冲突了 monaco 的 CSS

Problem Description

option.css 把这些删掉就正常了

不正常：

正常：

衝突部份

Reproduction Steps

ScriptCat Version

Operating System and Browser Information

Additional Information (Optional)

No response

以下的 CSS classname 都会加入 prefix

 
.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.relative {
  position: relative;
}

.static {
  position: static;
}

.bottom-0 {
  bottom: 0;
}

.right-1 {
  right: .25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-50px {
  top: 50px;
}

.grid {
  display: grid;
}

.\!m-0 {
  margin: 0!important;
}

.m\[0\] {
  margin: 0;
}

.m\[1\] {
  margin: 1px;
}

.m\[2\] {
  margin: 2px;
}

.mb-1 {
  margin-bottom: .25rem;
}

.mb-2 {
  margin-bottom: .5rem;
}

.mb-3 {
  margin-bottom: .75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.ml-1 {
  margin-left: .25rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mr-1 {
  margin-right: .25rem;
}

.ms {
  margin-inline-start: 1rem;
}

.mt {
  margin-top: 1rem;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.\!h-6 {
  height: 1.5rem!important;
}

.h-3 {
  height: .75rem;
}

.h-6 {
  height: 1.5rem;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-w-\[240px\] {
  max-width: 240px;
}

.max-w-100 {
  max-width: 25rem;
}

.max-w-30 {
  max-width: 7.5rem;
}

.max-w-45 {
  max-width: 11.25rem;
}

.max-w-50 {
  max-width: 12.5rem;
}

.max-w-60 {
  max-width: 15rem;
}

.max-w-62\.5 {
  max-width: 15.625rem;
}

.max-w-75 {
  max-width: 18.75rem;
}

.max-w-80 {
  max-width: 20rem;
}

.min-h-10 {
  min-height: 2.5rem;
}

.min-h-9 {
  min-height: 2.25rem;
}

.min-w-\[100px\] {
  min-width: 100px;
}

.min-w-0 {
  min-width: 0;
}

.min-w-20 {
  min-width: 5rem;
}

.w-25 {
  width: 6.25rem;
}

.w-3 {
  width: .75rem;
}

.w-35 {
  width: 8.75rem;
}

.w-40 {
  width: 10rem;
}

.w-50 {
  width: 12.5rem;
}

.w-64 {
  width: 16rem;
}

.w-full {
  width: 100%;
}

.w1 {
  width: .25rem;
}

.w2 {
  width: .5rem;
}

.\!flex,.flex\! {
  display: flex!important;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-grow,.grow {
  flex-grow: 1;
}

.\!flex-row {
  flex-direction: row!important;
}

.flex-row {
  flex-direction: row;
}

.\!flex-col {
  flex-direction: column!important;
}

.flex-col {
  flex-direction: column;
}

.table {
  display: table;
}

.table\! {
  display: table!important;
}

.-translate-y-1\/2 {
  --un-translate-y: -50%;
  transform: translateX(var(--un-translate-x))translateY(var(--un-translate-y))translateZ(var(--un-translate-z))rotate(var(--un-rotate))rotateX(var(--un-rotate-x))rotateY(var(--un-rotate-y))rotateZ(var(--un-rotate-z))skewX(var(--un-skew-x))skewY(var(--un-skew-y))scaleX(var(--un-scale-x))scaleY(var(--un-scale-y))scaleZ(var(--un-scale-z));
}

.transform {
  transform: translateX(var(--un-translate-x))translateY(var(--un-translate-y))translateZ(var(--un-translate-z))rotate(var(--un-rotate))rotateX(var(--un-rotate-x))rotateY(var(--un-rotate-y))rotateZ(var(--un-rotate-z))skewX(var(--un-skew-x))skewY(var(--un-skew-y))scaleX(var(--un-scale-x))scaleY(var(--un-scale-y))scaleZ(var(--un-scale-z));
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
  user-select: none;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-self-center {
  justify-self: center;
}

.gap-1 {
  gap: .25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: .5rem;
}

.gap-3 {
  gap: .75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-x-1 {
  -moz-column-gap: .25rem;
  column-gap: .25rem;
}

.space-y-1>:not([hidden])~:not([hidden]) {
  --un-space-y-reverse: 0;
  margin-top: calc(.25rem*calc(1 - var(--un-space-y-reverse)));
  margin-bottom: calc(.25rem*var(--un-space-y-reverse));
}

.space-y-4>:not([hidden])~:not([hidden]) {
  --un-space-y-reverse: 0;
  margin-top: calc(1rem*calc(1 - var(--un-space-y-reverse)));
  margin-bottom: calc(1rem*var(--un-space-y-reverse));
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

.break-all {
  word-break: break-all;
}

.b,.border {
  border-width: 1px;
}

.rounded {
  border-radius: .25rem;
}

.rounded-full {
  border-radius: 9999px;
}

.\!p-\[10px\] {
  padding: 10px!important;
}

.p-1,.p1 {
  padding: .25rem;
}

.p-2,.p2 {
  padding: .5rem;
}

.p-8px {
  padding: 8px;
}

.p\[\^abc\] {
  padding: ^abc;
}

.p\[k\] {
  padding: k;
}

.p3 {
  padding: .75rem;
}

.p4 {
  padding: 1rem;
}

.\!px-4 {
  padding-left: 1rem!important;
  padding-right: 1rem!important;
}

.px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.pb-2 {
  padding-bottom: .5rem;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-end {
  text-align: end;
}

.indent-4 {
  text-indent: 1rem;
}

.\!text-lg {
  font-size: 1.125rem!important;
  line-height: 1.75rem!important;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.\!text-size-sm {
  font-size: .875rem!important;
}

.text-size-lg {
  font-size: 1.125rem;
}

.dark .dark\:text-blue-400 {
  --un-text-opacity: 1;
  color: rgb(96 165 250/var(--un-text-opacity));
}

.dark .dark\:text-gray-100 {
  --un-text-opacity: 1;
  color: rgb(243 244 246/var(--un-text-opacity));
}

.dark .dark\:text-gray-200 {
  --un-text-opacity: 1;
  color: rgb(229 231 235/var(--un-text-opacity));
}

.dark .dark\:text-gray-300 {
  --un-text-opacity: 1;
  color: rgb(209 213 219/var(--un-text-opacity));
}

.text-blue-500 {
  --un-text-opacity: 1;
  color: rgb(59 130 246/var(--un-text-opacity));
}

.color-gray-5,.text-gray-500 {
  --un-text-opacity: 1;
  color: rgb(107 114 128/var(--un-text-opacity));
}

.text-gray-700 {
  --un-text-opacity: 1;
  color: rgb(55 65 81/var(--un-text-opacity));
}

.text-gray-800 {
  --un-text-opacity: 1;
  color: rgb(31 41 55/var(--un-text-opacity));
}

.text-gray-900 {
  --un-text-opacity: 1;
  color: rgb(17 24 39/var(--un-text-opacity));
}

.\!hover\:text-blue-600:hover {
  --un-text-opacity: 1!important;
  color: rgb(37 99 235/var(--un-text-opacity))!important;
}

.dark .dark\:hover\:text-blue-400:hover {
  --un-text-opacity: 1;
  color: rgb(96 165 250/var(--un-text-opacity));
}

.font-500,.font-medium {
  font-weight: 500;
}

.underline,.hover\:underline:hover {
  text-decoration-line: underline;
}

.underline-offset-2,.hover\:underline-offset-2:hover {
  text-underline-offset: 2px;
}

.\!tab {
  -moz-tab-size: 4!important;
  tab-size: 4!important;
}

.tab {
  -moz-tab-size: 4;
  tab-size: 4;
}

.opacity-0 {
  opacity: 0;
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.outline {
  outline-style: solid;
}

.filter {
  filter: var(--un-blur)var(--un-brightness)var(--un-contrast)var(--un-drop-shadow)var(--un-grayscale)var(--un-hue-rotate)var(--un-invert)var(--un-saturate)var(--un-sepia);
}

.transition {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter,backdrop-filter;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.transition-opacity {
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.duration-200 {
  transition-duration: .2s;
}

.duration-300 {
  transition-duration: .3s;
}

.ease {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0,0,.2,1);
}

简单检查

(?<=["\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`])

工具转换：

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"
                  : "",
              ]}

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

这两个奇怪class一直在存于 UnoCSS 的打包结果。原因不明

加 prefix 后，就不见了
推测是 UnoCSS 因为没 prefix 乱扫一通，扫描错误

例子：UnoCSS 把 "tab", "transition" 等名字扫出来，可是实际没用到 "tab" ,"transition" 这些 css classname.

当然UnoCSS本身也有些不可避免的无谓CSS
例如我没有写过 uno-group
但因为有 group-hover:uno-opacity-100 所以它还是会生成一些多余的CSS

做个记录。有需要可以查看前后打包差异：

css-compare.zip