From 20c76941b2841f4f4d04cbcd52cd55c55316d88f Mon Sep 17 00:00:00 2001
From: Chris <1633711653@qq.com>
Date: Tue, 7 Jun 2022 20:55:11 +0800
Subject: [PATCH] feat(inspector): complete css prettify (#1073)
---
packages/inspector/README.md | 2 +-
packages/inspector/client/App.vue | 6 +-
packages/inspector/client/auto-imports.d.ts | 5 ++
.../client/components/ModuleInfo.vue | 57 ++++++++++++-------
.../inspector/client/components/Overview.vue | 12 +++-
.../client/composables/cssPrettify.ts | 21 +++++++
playground/src/auto-imports.d.ts | 5 ++
playground/src/components/Editor.vue | 2 +-
8 files changed, 85 insertions(+), 25 deletions(-)
create mode 100644 packages/inspector/client/composables/cssPrettify.ts
diff --git a/packages/inspector/README.md b/packages/inspector/README.md
index d7cb77ef74..7ab70ce099 100644
--- a/packages/inspector/README.md
+++ b/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!
diff --git a/packages/inspector/client/App.vue b/packages/inspector/client/App.vue
index 3c71db3a57..2866a90ecd 100644
--- a/packages/inspector/client/App.vue
+++ b/packages/inspector/client/App.vue
@@ -4,16 +4,16 @@ import { Pane, Splitpanes } from 'splitpanes'
-
+
diff --git a/packages/inspector/client/auto-imports.d.ts b/packages/inspector/client/auto-imports.d.ts
index 94d684b58d..bc5d936579 100644
--- a/packages/inspector/client/auto-imports.d.ts
+++ b/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']
diff --git a/packages/inspector/client/components/ModuleInfo.vue b/packages/inspector/client/components/ModuleInfo.vue
index b24c17cb1d..10400fd51f 100644
--- a/packages/inspector/client/components/ModuleInfo.vue
+++ b/packages/inspector/client/components/ModuleInfo.vue
@@ -1,7 +1,9 @@
@@ -62,25 +67,39 @@ const unmatchedClasses = asyncComputed(async () => {
-
diff --git a/packages/inspector/client/components/Overview.vue b/packages/inspector/client/components/Overview.vue
index 1766ae56fa..df9ea71344 100644
--- a/packages/inspector/client/components/Overview.vue
+++ b/packages/inspector/client/components/Overview.vue
@@ -1,11 +1,15 @@
@@ -82,9 +86,15 @@ overviewFetch.execute()
+
+
+
, toggle: MaybeRef) {
+ 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 || ''}`
+ }
+ })
+}
diff --git a/playground/src/auto-imports.d.ts b/playground/src/auto-imports.d.ts
index 11ac8f4b87..c27b868e9d 100644
--- a/playground/src/auto-imports.d.ts
+++ b/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']
diff --git a/playground/src/components/Editor.vue b/playground/src/components/Editor.vue
index 53eebcd077..7ac7512330 100644
--- a/playground/src/components/Editor.vue
+++ b/playground/src/components/Editor.vue
@@ -120,7 +120,7 @@ onMounted(() => {
@click="togglePanel(0)"
/>
-