docs(playground): do not show preflights by default

unocss · Jul 2, 2022 · c0dad5a · c0dad5a
1 parent 5c05c4e
commit c0dad5a
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/playground/src/components/Editor.vue b/playground/src/components/Editor.vue
@@ -2,7 +2,7 @@
 // @ts-expect-error missing types
 import { Pane, Splitpanes } from 'splitpanes'
 import { isDark } from '../logics/dark'
-import { customConfigError, customConfigRaw, getHint, inputHTML, output, transformedHTML } from '../logics/uno'
+import { customConfigError, customConfigRaw, getHint, inputHTML, output, showPreflights, transformedHTML } from '../logics/uno'
 import { defaultConfigRaw, defaultHTML } from '../defaults'
 import { options } from '../logics/url'
 import { version } from '../../../package.json'
@@ -78,7 +78,14 @@ const formatConfig = () => {
   customConfigRaw.value = useJSPrettify(customConfigRaw).value
 }
 const isCSSPrettify = ref(false)
-const cssFormatted = useCSSPrettify(computed(() => output.value?.css), isCSSPrettify)
+const cssFormatted = useCSSPrettify(
+  computed(() => output.value?.getLayers(undefined,
+    showPreflights.value
+      ? undefined
+      : ['preflights'],
+  )),
+  isCSSPrettify,
+)
 
 watch(
   titleHeightPercent,
@@ -243,6 +250,10 @@ onMounted(() => {
           :class="isCollapsed(2) ? 'op0' : ''"
           un-children="inline-flex items-center cursor-pointer gap1"
         >
+          <label>
+            <input v-model="showPreflights" type="checkbox">
+            <span text-sm>Preflights</span>
+          </label>
           <label>
             <input v-model="isCSSPrettify" type="checkbox">
             <span text-sm>Prettify</span>

diff --git a/playground/src/logics/uno.ts b/playground/src/logics/uno.ts
@@ -16,6 +16,7 @@ export const customConfigError = ref<Error>()
 
 export const uno = createGenerator({}, defaultConfig.value)
 export const output = shallowRef<GenerateResult>()
+export const showPreflights = ref(false)
 
 let customConfig: UserConfig = {}
 let autocomplete = createAutocomplete(uno)