chore: cleanup

src/client/components/ModuleId.vue

@@ -141,8 +141,8 @@ const containerClass = computed(() => {
 
     <Badge
       v-if="isVirtual"
-      class="ml1 badge-virtual"
-      v-text="'virtual'"
+      class="ml1"
+      text="virtual"
     />
   </div>
 </template>

src/client/components/NavBar.vue

@@ -7,7 +7,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
     <slot />
     <slot name="actions">
       <button v-if="!isStaticMode" class="text-lg icon-btn" title="Refetch" @click="refetch()">
-        <span i-carbon-renew block />
+        <span i-carbon-renew />
       </button>
       <div h-full w-1 border="r main" />
       <a
@@ -18,7 +18,7 @@ import { isStaticMode, refetch, toggleDark } from '../logic'
         <div i-carbon-logo-github />
       </a>
       <button class="text-lg icon-btn" title="Toggle Dark Mode" @click="toggleDark()">
-        <span i-carbon-sun dark:i-carbon-moon block />
+        <span i-carbon-sun dark:i-carbon-moon />
       </button>
     </slot>
   </nav>

src/client/pages/index.vue

@@ -23,27 +23,27 @@ onMounted(() => {
         @click="toggleSort()"
       >
         <template v-if="searchText">
-          <span i-carbon-search block />
-          <span i-carbon-arrow-down block text-sm op70 />
+          <span i-carbon-search />
+          <span i-carbon-arrow-down text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-asc'">
-          <span i-carbon-time block />
-          <span i-carbon-arrow-down block text-sm op70 />
+          <span i-carbon-time />
+          <span i-carbon-arrow-down text-sm op70 />
         </template>
         <template v-else-if="sortMode === 'time-desc'">
-          <span i-carbon-time block />
-          <span i-carbon-arrow-up block text-sm op70 />
+          <span i-carbon-time />
+          <span i-carbon-arrow-up text-sm op70 />
         </template>
         <template v-else>
-          <span i-carbon-menu block />
-          <span i-carbon-chevron-sort block text-sm op70 />
+          <span i-carbon-menu />
+          <span i-carbon-chevron-sort text-sm op70 />
         </template>
       </button>
     </template>
     <button text-lg icon-btn title="View Mode" @click="toggleMode()">
-      <span v-if="listMode === 'detailed'" i-carbon-list-boxes block />
-      <span v-else-if="listMode === 'list'" i-carbon-list block />
-      <span v-else i-carbon-network-4 block />
+      <span v-if="listMode === 'detailed'" i-carbon-list-boxes />
+      <span v-else-if="listMode === 'list'" i-carbon-list />
+      <span v-else i-carbon-network-4 />
     </button>
     <div h-full w-1 border="r main" />
     <RouterLink text-lg icon-btn to="/metric" title="Metrics">

src/client/pages/index/metric.vue

@@ -72,7 +72,7 @@ getHot().then((hot) => {
 <template>
   <NavBar>
     <RouterLink class="my-auto icon-btn !outline-none" to="/">
-      <div i-carbon-arrow-left />
+      <span i-carbon-arrow-left />
     </RouterLink>
     <div my-auto text-sm font-mono>
       Metrics
@@ -118,7 +118,7 @@ getHot().then((hot) => {
           <Badge
             v-if="enforce"
             class="m-auto text-xs"
-            :class="[enforce === 'post' ? 'badge-post' : 'badge-green']"
+            :text="enforce"
           >
             {{ enforce }}
           </Badge>

src/client/pages/index/module.vue

@@ -94,27 +94,25 @@ getHot().then((hot) => {
     <ModuleId v-if="id" :id="id" module />
     <Badge
       v-if="inspectSSR"
-      class="badge-green"
-    >
-      SSR
-    </Badge>
+      text="SSR"
+    />
     <div flex-auto />
 
     <button text-lg icon-btn title="Inspect SSR" @click="inspectSSR = !inspectSSR">
-      <span i-carbon-cloud-services block :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-cloud-services :class="inspectSSR ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn :title="sourcemaps ? 'Inspect sourcemaps' : 'Sourcemap is not available'" :disabled="!sourcemaps" @click="inspectSourcemaps({ code: to, sourcemaps })">
-      <span i-carbon-choropleth-map block :class="sourcemaps ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-choropleth-map :class="sourcemaps ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn title="Line Wrapping" @click="lineWrapping = !lineWrapping">
-      <span i-carbon-text-wrap block :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-text-wrap :class="lineWrapping ? 'opacity-100' : 'opacity-25'" />
     </button>
     <button text-lg icon-btn title="Toggle one column" @click="showOneColumn = !showOneColumn">
-      <span v-if="showOneColumn" i-carbon-side-panel-open block />
-      <span v-else i-carbon-side-panel-close block />
+      <span v-if="showOneColumn" i-carbon-side-panel-open />
+      <span v-else i-carbon-side-panel-close />
     </button>
     <button class="text-lg icon-btn" title="Toggle Diff" @click="enableDiff = !enableDiff">
-      <span i-carbon-compare block :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
+      <span i-carbon-compare :class="enableDiff ? 'opacity-100' : 'opacity-25'" />
     </button>
   </NavBar>
   <Container
@@ -130,7 +128,7 @@ getHot().then((hot) => {
         <div flex="~ gap2 items-center" p2 tracking-widest class="op75 dark:op50">
           <span flex-auto text-center text-sm>{{ inspectSSR ? 'SSR ' : '' }}TRANSFORM STACK</span>
           <button class="icon-btn" title="Toggle bailout plugins" @click="showBailout = !showBailout">
-            <span block :class="showBailout ? 'opacity-100 i-carbon-view' : 'opacity-50 i-carbon-view-off'" />
+            <span :class="showBailout ? 'opacity-100 i-carbon-view' : 'opacity-50 i-carbon-view-off'" />
           </button>
         </div>
         <div border="b main" />
@@ -153,29 +151,24 @@ getHot().then((hot) => {
             </span>
             <Badge
               v-if="!tr.result"
-              class="badge-gray"
-              v-text="'bailout'"
+              text="bailout"
             />
             <Badge
               v-else-if="tr.noChange"
-              class="badge-orange"
-              v-text="'no change'"
+              text="no change"
             />
             <Badge
               v-if="tr.load"
-              class="badge-load"
-              v-text="'load'"
+              text="load"
             />
             <Badge
               v-if="tr.order && tr.order !== 'normal'"
-              class="badge-order"
               :title="tr.order.includes('-') ? `Using object hooks ${tr.order}` : tr.order"
-              v-text="tr.order"
+              :text="tr.order"
             />
             <Badge
               v-if="tr.error"
-              class="badge-error"
-              v-text="'error'"
+              text="error"
             />
             <span flex-auto />
             <DurationDisplay :duration="tr.end - tr.start" />

uno.config.ts

@@ -14,10 +14,13 @@ export default defineConfig({
     'bg-main': 'bg-white dark:bg-[#121212]',
     'text-main': 'text-[#121212] dark:text-white',
     'bg-active': 'bg-gray-400/10',
-    'icon-btn': 'inline-block cursor-pointer select-none !outline-none '
-    + 'opacity-75 transition duration-200 ease-in-out '
-    + 'hover:opacity-100 hover:text-teal-600 '
-    + 'text-0.9em h-1.2em',
+    'icon-btn': [
+      'inline-block cursor-pointer select-none !outline-none',
+      'opacity-75 transition duration-200 ease-in-out',
+      'hover:opacity-100 hover:text-teal-600',
+      'text-0.9em h-1.2em',
+    ].join(' '),
+
     'badge-virtual': 'bg-teal-400:10 text-green-700 dark:text-teal-400',
     'badge-gray': 'bg-gray-400:10 text-gray-700 dark:text-gray-400',
     'badge-green': 'bg-teal-400:10 text-green-700 dark:text-[#34E676]',
@@ -36,6 +39,9 @@ export default defineConfig({
     presetAttributify(),
     presetIcons({
       scale: 1.2,
+      extraProperties: {
+        display: 'block',
+      },
     }),
   ],
   transformers: [