fix(vitepress-twoslash): separate CSS deps, close #86

Author: antfu

docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 // https://vitepress.dev/guide/custom-theme
 import Theme from 'vitepress/theme'
 import TwoSlashFloatingVue from 'vitepress-plugin-twoslash/client'
+import 'vitepress-plugin-twoslash/style.css'
 import 'uno.css'
 import './style.css'
 import { createPinia } from 'pinia'

docs/packages/rehype.md

@@ -93,4 +93,3 @@ console.log('3') // highlighted
 console.log('4') // highlighted
 ```
 ````
-

docs/packages/vitepress.md

@@ -30,14 +30,14 @@ export default defineConfig({
 })
 ```
 
-And then in your [`.vitepress/theme/index.ts`](https://vitepress.dev/guide/custom-theme):
+And then in your [`.vitepress/theme/index.ts`](https://vitepress.dev/guide/custom-theme), install the Vue plugin and import the css with `vitepress-plugin-twoslash/styles.css`.
 
 ```ts twoslash
 // @noErrors: true
 // .vitepress/theme/index.ts
 import Theme from 'vitepress/theme'
 import TwoSlashFloatingVue from 'vitepress-plugin-twoslash/client' // [!code hl]
-import './custom-style.css'
+import 'vitepress-plugin-twoslash/style.css' // [!code hl]
 import type { EnhanceAppContext } from 'vitepress'
 
 export default {
@@ -48,6 +48,21 @@ export default {
 }
 ```
 
+::: details About style.css
+
+For easier setup, `vitepress-plugin-twoslash/styles.css` bundles the styles from `floating-vue` and `shikiji-twoslash/style-rich.css` so you only need a single entry. If you are using a custom `floating-vue` style or want to have more control of the styles, you can expand them as:
+
+```ts
+import 'vitepress-plugin-twoslash/style.css'
+
+// Equivalent to:
+import 'shikiji-twoslash/style-rich.css'
+import 'floating-vue/dist/style.css'
+import 'vitepress-plugin-twoslash/style-core.css'
+```
+
+:::
+
 That's it, you can now use `ts twoslash` in your markdown files to enable the beautiful type hover.
 
 ````md

packages/vitepress-plugin-twoslash/.gitignore

@@ -0,0 +1,3 @@
+/style.css
+/style-core.css
+

packages/vitepress-plugin-twoslash/build.config.ts

@@ -1,3 +1,4 @@
+import fs from 'node:fs/promises'
 import { defineBuildConfig } from 'unbuild'
 
 export default defineBuildConfig({
@@ -14,4 +15,27 @@ export default defineBuildConfig({
     'vitepress-plugin-twoslash',
     'vitepress-plugin-twoslash/style.css',
   ],
+  hooks: {
+    'rollup:done': async () => {
+      // eslint-disable-next-line no-console
+      console.log('Building style.css')
+      const floatingVue = await fs.readFile(new URL('./node_modules/floating-vue/dist/style.css', import.meta.url), 'utf-8')
+      const twoslash = await fs.readFile(new URL('./../shikiji-twoslash/style-rich.css', import.meta.url), 'utf-8')
+      const local = await fs.readFile(new URL('./src/style.css', import.meta.url), 'utf-8')
+
+      const all = [
+        '/* BUNDLED FROM floating-vue/dist/style.css */',
+        floatingVue,
+        '',
+        '/* BUNDLED FROM shikiji-twoslash/style-rich.css */',
+        twoslash,
+        '',
+        '/* BUNDLED FROM vitepress-plugin-twoslash/style-core.css */',
+        local,
+      ].join('\n')
+
+      await fs.writeFile(new URL('./style.css', import.meta.url), all)
+      await fs.writeFile(new URL('./style-core.css', import.meta.url), local)
+    },
+  },
 })

packages/vitepress-plugin-twoslash/package.json

@@ -27,7 +27,8 @@
       "types": "./dist/client.d.mts",
       "default": "./dist/client.mjs"
     },
-    "./style.css": "./style.css"
+    "./style.css": "./style.css",
+    "./style-core.css": "./style-core.css"
   },
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

packages/vitepress-plugin-twoslash/src/client.ts

@@ -1,7 +1,3 @@
-import 'shikiji-twoslash/style-rich.css'
-import 'floating-vue/dist/style.css'
-import 'vitepress-plugin-twoslash/style.css'
-
 import type { Plugin } from 'vue'
 import FloatingVue from 'floating-vue'