feat(playground): add custom css panel (#2239)

packages/inspector/client/components/TitleBar.vue

@@ -22,7 +22,7 @@ const emit = defineEmits<{
   >
     <div flex @click="e => emit('titleClick', e)">
       <slot name="before" />
-      <div mr-2 op-60>
+      <div mr-2 op-60 shrink-0>
         {{ title }}
       </div>
     </div>

playground/src/auto-imports.d.ts

@@ -25,11 +25,14 @@ declare global {
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const cssFormatted: typeof import('./composables/prettier')['cssFormatted']
+  const customCSS: typeof import('./composables/url')['customCSS']
+  const customCSSLayerName: typeof import('./composables/constants')['customCSSLayerName']
   const customConfigError: typeof import('./composables/uno')['customConfigError']
   const customConfigRaw: typeof import('./composables/url')['customConfigRaw']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defaultCSS: typeof import('./composables/constants')['defaultCSS']
   const defaultConfig: typeof import('./composables/config')['defaultConfig']
   const defaultConfigRaw: typeof import('./composables/constants')['defaultConfigRaw']
   const defaultHTML: typeof import('./composables/constants')['defaultHTML']
@@ -39,6 +42,7 @@ declare global {
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const formatCSS: typeof import('./composables/prettier')['formatCSS']
   const formatConfig: typeof import('./composables/prettier')['formatConfig']
   const formatHTML: typeof import('./composables/prettier')['formatHTML']
   const generate: typeof import('./composables/uno')['generate']
@@ -139,6 +143,7 @@ declare global {
   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
@@ -345,11 +350,14 @@ declare module 'vue' {
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly cssFormatted: UnwrapRef<typeof import('./composables/prettier')['cssFormatted']>
+    readonly customCSS: UnwrapRef<typeof import('./composables/url')['customCSS']>
+    readonly customCSSLayerName: UnwrapRef<typeof import('./composables/constants')['customCSSLayerName']>
     readonly customConfigError: UnwrapRef<typeof import('./composables/uno')['customConfigError']>
     readonly customConfigRaw: UnwrapRef<typeof import('./composables/url')['customConfigRaw']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defaultCSS: UnwrapRef<typeof import('./composables/constants')['defaultCSS']>
     readonly defaultConfig: UnwrapRef<typeof import('./composables/config')['defaultConfig']>
     readonly defaultConfigRaw: UnwrapRef<typeof import('./composables/constants')['defaultConfigRaw']>
     readonly defaultHTML: UnwrapRef<typeof import('./composables/constants')['defaultHTML']>
@@ -359,6 +367,7 @@ declare module 'vue' {
     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly formatCSS: UnwrapRef<typeof import('./composables/prettier')['formatCSS']>
     readonly formatConfig: UnwrapRef<typeof import('./composables/prettier')['formatConfig']>
     readonly formatHTML: UnwrapRef<typeof import('./composables/prettier')['formatHTML']>
     readonly generate: UnwrapRef<typeof import('./composables/uno')['generate']>
@@ -459,6 +468,7 @@ declare module 'vue' {
     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
     readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
     readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
     readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>

playground/src/components.d.ts

@@ -19,6 +19,7 @@ declare module '@vue/runtime-core' {
     NarBar: typeof import('./../../packages/inspector/client/components/NarBar.vue')['default']
     Overview: typeof import('./../../packages/inspector/client/components/Overview.vue')['default']
     PanelConfig: typeof import('./components/panel/PanelConfig.vue')['default']
+    PanelCustomCss: typeof import('./components/panel/PanelCustomCss.vue')['default']
     PanelHtml: typeof import('./components/panel/PanelHtml.vue')['default']
     PanelOutputCss: typeof import('./components/panel/PanelOutputCss.vue')['default']
     Playground: typeof import('./components/Playground.vue')['default']

playground/src/components/Editor.vue

@@ -14,12 +14,20 @@ onMounted(() => {
     loading.value = false
   }, 200)
 })
+
+const _panelEl = ref(panelEl)
 </script>
 
 <template>
-  <Splitpanes ref="panelEl" :class="{ loading }" horizontal @resize="handleResize">
-    <PanelHtml />
-    <PanelConfig />
-    <PanelOutputCss />
-  </Splitpanes>
+  <div flex="~ col" h-full>
+    <HeaderBar flex="[0_0_36px]" />
+    <div flex-1 of-hidden>
+      <Splitpanes ref="_panelEl" :class="{ loading }" horizontal @resize="handleResize">
+        <PanelHtml :index="0" />
+        <PanelConfig :index="1" />
+        <PanelCustomCss :index="2" />
+        <PanelOutputCss :index="3" />
+      </Splitpanes>
+    </div>
+  </div>
 </template>

playground/src/components/HeaderBar.vue

@@ -23,7 +23,7 @@ function handleReset() {
 <template>
   <div
     class="flex items-center px-2 op-60 bg-gray/10"
-    border="l t gray-400/20" h-36px w-full
+    border="l t gray-400/20" w-full
   >
     <div flex items-center gap-2>
       <img src="/icon-gray.svg" w-4 h-4alt="">

playground/src/components/panel/PanelConfig.vue

@@ -3,33 +3,35 @@
 import { Pane } from 'splitpanes'
 import { customConfigRaw } from '../../composables/url'
 
+defineProps<{ index: number }>()
+
 if (!customConfigRaw.value)
   customConfigRaw.value = defaultConfigRaw
 </script>
 
 <template>
-  <Pane :min-size="titleHeightPercent" :size="panelSizes[1]" flex flex-col min-h-28px relative>
+  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col relative>
     <TitleBar
       title="Config"
-      @title-click="togglePanel(1)"
+      @title-click="togglePanel(index)"
     >
       <template #before>
         <div
           class="flex-shrink-0 i-ri-arrow-right-s-line mr-1 transition-transform transform"
-          :class="isCollapsed(1) ? '' : 'rotate-90'"
+          :class="isCollapsed(index) ? '' : 'rotate-90'"
         />
       </template>
       <div
         flex flex-1 justify-end items-center w-full gap2
         transition duration-400
-        :class="isCollapsed(1) ? 'op0' : ''"
+        :class="isCollapsed(index) ? 'op0' : ''"
         un-children="inline-flex items-center cursor-pointer gap1"
       >
         <div w-1px h-28px my--1 bg-gray:20 />
         <button
           i-ri-mist-line icon-btn
           title="Format"
-          @click="formatConfig"
+          @click="formatConfig()"
         />
       </div>
     </TitleBar>

playground/src/components/panel/PanelCustomCss.vue

@@ -0,0 +1,39 @@
+<script lang='ts' setup>
+// @ts-expect-error missing types
+import { Pane } from 'splitpanes'
+import { customCSS } from '../../composables/url'
+
+defineProps<{ index: number }>()
+</script>
+
+<template>
+  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col>
+    <div class="flex flex-wrap bg-$cm-background">
+      <TitleBar
+        title="Cutsom CSS" w-full relative
+        @title-click="togglePanel(index)"
+      >
+        <template #before>
+          <div
+            class="flex-shrink-0 i-ri-arrow-right-s-line mr-1 transition-transform transform"
+            :class="isCollapsed(index) ? '' : 'rotate-90'"
+          />
+        </template>
+        <div
+          flex justify-end items-center w-full gap2
+          transition duration-400
+          :class="isCollapsed(index) ? 'op0' : ''"
+          un-children="inline-flex items-center cursor-pointer gap-1"
+        >
+          <div w-1px h-28px my--1 bg-gray:20 />
+          <button
+            i-ri-mist-line icon-btn
+            title="Format"
+            @click="formatCSS()"
+          />
+        </div>
+      </TitleBar>
+    </div>
+    <CodeMirror v-model="customCSS" flex-auto mode="css" border="l gray-400/20" class="scrolls" />
+  </Pane>
+</template>

playground/src/components/panel/PanelHtml.vue

@@ -2,6 +2,8 @@
 // @ts-expect-error missing types
 import { Pane } from 'splitpanes'
 
+defineProps<{ index: number }>()
+
 if (!inputHTML.value)
   inputHTML.value = defaultHTML
 
@@ -14,23 +16,23 @@ const computedInputHTML = computed({
 </script>
 
 <template>
-  <Pane :min-size="titleHeightPercent * 2" :size="panelSizes[0]" flex flex-col min-h-65px>
+  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col>
     <div class="flex flex-wrap bg-$cm-background">
-      <HeaderBar />
+      <!--  <HeaderBar /> -->
       <TitleBar
         title="HTML" w-full relative
-        @title-click="togglePanel(0)"
+        @title-click="togglePanel(index)"
       >
         <template #before>
           <div
             class="flex-shrink-0 i-ri-arrow-right-s-line mr-1 transition-transform transform"
-            :class="isCollapsed(0) ? '' : 'rotate-90'"
+            :class="isCollapsed(index) ? '' : 'rotate-90'"
           />
         </template>
         <div
           flex justify-end items-center w-full gap2
           transition duration-400
-          :class="isCollapsed(0) ? 'op0' : ''"
+          :class="isCollapsed(index) ? 'op0' : ''"
           un-children="inline-flex items-center cursor-pointer gap-1"
         >
           <label>
@@ -41,7 +43,7 @@ const computedInputHTML = computed({
           <button
             i-ri-mist-line icon-btn
             title="Format"
-            @click="formatHTML"
+            @click="formatHTML()"
           />
         </div>
       </TitleBar>

playground/src/components/panel/PanelOutputCss.vue

@@ -2,24 +2,21 @@
 // @ts-expect-error missing types
 import { Pane } from 'splitpanes'
 import { isCSSPrettify, showPreflights } from '../../composables/prettier'
+
+defineProps<{ index: number }>()
 </script>
 
 <template>
-  <Pane :min-size="titleHeightPercent" :size="panelSizes[2]" flex flex-col min-h-28px>
-    <TitleBar
-      title="Output CSS"
-      @title-click="togglePanel(2)"
-    >
+  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col min-h-30px>
+    <TitleBar title="Output CSS" @title-click="togglePanel(index)">
       <template #before>
         <div
           class="flex-shrink-0 i-ri-arrow-right-s-line mr-1 transition-transform transform"
-          :class="isCollapsed(2) ? '' : 'rotate-90'"
+          :class="isCollapsed(index) ? '' : 'rotate-90'"
         />
       </template>
       <div
-        flex justify-end items-center w-full gap2
-        transition duration-400
-        :class="isCollapsed(2) ? 'op0' : ''"
+        flex justify-end items-center w-full gap2 transition duration-400 :class="isCollapsed(index) ? 'op0' : ''"
         un-children="inline-flex items-center cursor-pointer gap1"
       >
         <label>
@@ -33,11 +30,7 @@ import { isCSSPrettify, showPreflights } from '../../composables/prettier'
       </div>
     </TitleBar>
     <CodeMirror
-      :model-value="cssFormatted"
-      flex-auto
-      mode="css"
-      border="l gray-400/20"
-      class="scrolls"
+      :model-value="cssFormatted" flex-auto mode="css" border="l gray-400/20" class="scrolls"
       :read-only="true"
     />
   </Pane>

playground/src/composables/constants.ts

@@ -27,6 +27,9 @@ export const defaultHTML = `
 
 export { defaultConfigRaw, version }
 
+export const defaultCSS = ''
+export const customCSSLayerName = 'playground'
+
 export const defaultOptions = '{}'
 
 export const STORAGE_KEY = 'last-search'

playground/src/composables/panel.ts

@@ -1,5 +1,5 @@
 export const panelEl = ref()
-const TITLE_HEIGHT = 30
+const TITLE_HEIGHT = 29
 const { height: vh } = useElementSize(panelEl)
 
 export const titleHeightPercent = computed(() => {
@@ -16,14 +16,15 @@ export const panelSizes = useLocalStorage<number[]>(
 
 export function getInitialPanelSizes(percent: number): number[] {
   return [
-    100 - percent * 2,
+    percent,
+    percent,
     percent,
     percent,
   ]
 }
 
 export function isCollapsed(index: number) {
-  return panelSizes.value[index] <= titleHeightPercent.value + 3
+  return panelSizes.value[index] <= titleHeightPercent.value + 0.1
 }
 
 export function togglePanel(index: number) {

playground/src/composables/prettier.ts

@@ -8,6 +8,10 @@ export function formatConfig() {
   customConfigRaw.value = useJSPrettify(customConfigRaw).value
 }
 
+export function formatCSS() {
+  customCSS.value = useCSSPrettify(customCSS).value
+}
+
 export const showPreflights = ref(false)
 export const isCSSPrettify = ref(false)
 export const cssFormatted = useCSSPrettify(

playground/src/composables/uno.ts

@@ -50,12 +50,19 @@ export async function getHint(context: CompletionContext): Promise<CompletionRes
 }
 
 debouncedWatch(
-  customConfigRaw,
+  [customConfigRaw, customCSS],
   async () => {
     customConfigError.value = undefined
     try {
       const result = await evaluateUserConfig(customConfigRaw.value)
       if (result) {
+        const preflights = (result.preflights ?? []).filter(p => p.layer !== customCSSLayerName)
+        preflights.push({
+          layer: customCSSLayerName,
+          getCSS: () => customCSS.value,
+        })
+
+        result.preflights = preflights
         customConfig = result
         reGenerate()
         if (initial) {

playground/src/composables/url.ts

@@ -12,13 +12,15 @@ interface Options {
 export const customConfigRaw = ref(decode(params.get('config') || '') || defaultConfigRaw)
 export const inputHTML = ref(decode(params.get('html') || '') || defaultHTML)
 export const options = ref<Options>(JSON.parse(decode(params.get('options') || '') || defaultOptions))
+export const customCSS = ref(decode(params.get('css') || '') || defaultCSS)
 
 throttledWatch(
-  [customConfigRaw, inputHTML, options],
+  [customConfigRaw, inputHTML, customCSS, options],
   () => {
     const url = new URL('/play/', window.location.origin)
     url.searchParams.set('html', encode(inputHTML.value))
     url.searchParams.set('config', encode(customConfigRaw.value))
+    url.searchParams.set('css', encode(customCSS.value))
     url.searchParams.set('options', encode(JSON.stringify(options.value)))
     localStorage.setItem(STORAGE_KEY, url.search)
     window.history.replaceState('', '', `${url.pathname}${url.search}`)