fix: apply reset css only for playground

Author: HerringtonDarkholme

website/src/App.vue

@@ -4,14 +4,28 @@ import Toast from './components/utils/Toast.vue'
 import { shallowRef, onMounted, onUnmounted } from 'vue'
 // vitepress SSR does not support Monaco, lazy load on client side
 let playground = shallowRef<unknown>(null)
+
+// setup global style
+import styles from './style.css?inline'
+const styleId = 'playground-style'
+function insertStyle() {
+  const style = document.createElement('style')
+  style.id = styleId
+  style.textContent = styles
+  document.head.appendChild(style)
+}
+
 onMounted(async () => {
   // apply playground style override, see style.css
+  insertStyle()
   document.body.classList.add('playground')
   playground.value = (await import('./components/Playground.vue')).default
 })
 onUnmounted(() => {
-  // apply playground style override, see style.css
+  // remove playground style override
   document.body.classList.remove('playground')
+  const style = document.getElementById(styleId)
+  style?.remove()
 })
 </script>
 
@@ -35,8 +49,6 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style src="./style.css"/>
-
 <style scoped>
 .logo {
   height: 9em;

website/src/components/Playground.vue

@@ -9,9 +9,6 @@ import Toolbars from './Toolbars.vue'
 import EnvDisplay from './EnvDisplay.vue'
 import { initializeParser, useAstGrep, Mode as ModeImport } from './astGrep'
 
-// setup global style
-import '../style.css'
-
 // important initialization
 await initializeParser()