feat(inspector): complete css prettify

packages/inspector/README.md

@@ -18,7 +18,7 @@ Visit `http://localhost:3000/__unocss` in your Vite dev server to see the inspec
 - [x] Auto reload on file changes (reuse Vite's hmr if possible)
 - [ ] Config view
 - [ ] Edit files directly
-- [ ] CSS Prettify
+- [x] CSS Prettify
 
 > 🙌 Contribution welcome!
 

packages/inspector/client/App.vue

@@ -4,16 +4,16 @@ import { Pane, Splitpanes } from 'splitpanes'
 </script>
 
 <template>
-  <div h-screen w-screen overflow="hidden">
+  <div h-screen w-screen of-hidden>
     <Splitpanes>
       <Pane size="20" :push-other-panes="false">
         <Sidebar />
-      </pane>
+      </Pane>
       <Pane size="80">
         <div h-full of-hidden>
           <RouterView />
         </div>
-      </pane>
+      </Pane>
     </Splitpanes>
   </div>
 </template>

packages/inspector/client/auto-imports.d.ts

@@ -32,6 +32,8 @@ declare global {
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const logicAnd: typeof import('@vueuse/core')['logicAnd']
@@ -126,6 +128,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -229,6 +232,8 @@ declare global {
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']

packages/inspector/client/components/ModuleInfo.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import attributifyPreset from '@unocss/preset-attributify'
+import { Pane, Splitpanes } from 'splitpanes'
 import { fetchModule } from '../composables/fetch'
 import { useScrollStyle } from '../composables/useScrollStyle'
+import { useCSSPrettify } from '../composables/cssPrettify'
 
 const props = defineProps<{ id: string }>()
 const { data: mod } = fetchModule(toRef(props, 'id'))
@@ -27,6 +29,9 @@ const unmatchedClasses = asyncComputed(async () => {
     .filter(i => !i.startsWith('['))
     .filter(i => !mod.value?.matched.includes(i))
 })
+
+const isPrettify = ref(false)
+const formatted = useCSSPrettify(mod, isPrettify)
 </script>
 
 <template>
@@ -62,25 +67,39 @@ const unmatchedClasses = asyncComputed(async () => {
         </code>
       </div>
     </StatusBar>
-    <div h-full of-hidden grid grid-cols-2>
-      <CodeMirror
-        h-full
-        :model-value="mod.code"
-        :read-only="true"
-        :mode="mode"
-        :matched="mod.matched"
-        class="scrolls module-scrolls"
-        :style="style"
-      />
-      <CodeMirror
-        h-full
-        b="l main"
-        :model-value="mod.css"
-        :read-only="true"
-        mode="css"
-        class="scrolls module-scrolls"
-        :style="style"
-      />
+    <div h-full of-hidden>
+      <Splitpanes>
+        <Pane size="50">
+          <CodeMirror
+            h-full
+            :model-value="mod.code"
+            :read-only="true"
+            :mode="mode"
+            :matched="mod.matched"
+            class="scrolls module-scrolls"
+            :style="style"
+          />
+        </Pane>
+        <Pane size="50">
+          <div>
+            <TitleBar border="l b gray-400/20" title="Output CSS">
+              <label>
+                <input v-model="isPrettify" type="checkbox">
+                Prettify
+              </label>
+            </TitleBar>
+            <CodeMirror
+              h-full
+              b="l main"
+              :model-value="formatted"
+              :read-only="true"
+              mode="css"
+              class="scrolls module-scrolls"
+              :style="style"
+            />
+          </div>
+        </Pane>
+      </Splitpanes>
     </div>
   </div>
 </template>

packages/inspector/client/components/Overview.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
 import { info, overview, overviewFetch } from '../composables/fetch'
 import { useScrollStyle } from '../composables/useScrollStyle'
+import { useCSSPrettify } from '../composables/cssPrettify'
 
 const status = ref(null)
 const style = useScrollStyle(status, 'overview-scrolls')
 
 overviewFetch.execute()
+
+const isPrettify = ref(false)
+const formatted = useCSSPrettify(overview, isPrettify)
 </script>
 
 <template>
@@ -82,9 +86,15 @@ overviewFetch.execute()
           </div>
         </div>
       </div>
+      <TitleBar border="t gray-400/20" title="Output CSS">
+        <label>
+          <input v-model="isPrettify" type="checkbox">
+          Prettify
+        </label>
+      </TitleBar>
     </StatusBar>
     <CodeMirror
-      :model-value="overview?.css || '/* empty */'"
+      :model-value="formatted"
       :read-only="true"
       mode="css"
       class="scrolls overview-scrolls"

packages/inspector/client/composables/cssPrettify.ts

@@ -0,0 +1,21 @@
+import prettier from 'prettier/standalone'
+import parserCSS from 'prettier/parser-postcss'
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
+
+export function useCSSPrettify(mod: MaybeRef<any>, toggle: MaybeRef<boolean>) {
+  return computed(() => {
+    if (!unref(toggle))
+      return unref(mod)?.css || '/* empty */'
+    try {
+      return prettier.format(unref(mod)?.css || '', {
+        parser: 'css',
+        plugins: [parserCSS],
+      })
+    }
+    catch (e: any) {
+      console.error(e)
+      return `/* Error on prettifying: ${e.message} */\n${unref(mod)?.css || ''}`
+    }
+  })
+}

playground/src/auto-imports.d.ts

@@ -32,6 +32,8 @@ declare global {
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
   const isReadonly: typeof import('vue')['isReadonly']
   const isRef: typeof import('vue')['isRef']
   const logicAnd: typeof import('@vueuse/core')['logicAnd']
@@ -126,6 +128,7 @@ declare global {
   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
   const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
   const useElementHover: typeof import('@vueuse/core')['useElementHover']
@@ -227,6 +230,8 @@ declare global {
   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
   const watchOnce: typeof import('@vueuse/core')['watchOnce']
   const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
   const whenever: typeof import('@vueuse/core')['whenever']

playground/src/components/Editor.vue

@@ -120,7 +120,7 @@ onMounted(() => {
               @click="togglePanel(0)"
             />
           </template>
-          <div class="flex flex-row w-full space-x-1">
+          <div class="flex flex-row w-full space-x-2">
             <div flex-auto />
             <div text-sm op50>
               v{{ version }}