feat!: auto import css + split editor css from main component

This avoids including Monaco Editor css when using CodeMirror, and
vice-versa. In addition, CSS will be auto imported when the relevant
JS entries are imported.

This is breaking because it makes the dist files require a build system
that can handle CSS imports from JS.

Author: yyx990803

README.md

@@ -14,7 +14,8 @@ Basic editing experience with no intellisense. Lighter weight, fewer network req
 <script setup>
 import { Repl } from '@vue/repl'
 import CodeMirror from '@vue/repl/codemirror-editor'
-import '@vue/repl/style.css'
+// import '@vue/repl/style.css'
+// ^ no longer needed after 3.0
 </script>
 
 <template>
@@ -30,7 +31,8 @@ With Volar support, autocomplete, type inference, and semantic highlighting. Hea
 <script setup>
 import { Repl } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import '@vue/repl/style.css'
+// import '@vue/repl/style.css'
+// ^ no longer needed after 3.0
 </script>
 
 <template>

package.json

@@ -26,8 +26,8 @@
       "import": "./dist/codemirror-editor.js",
       "require": null
     },
-    "./style.css": "./dist/style.css",
-    "./dist/style.css": "./dist/style.css"
+    "./style.css": "./dist/vue-repl.css",
+    "./dist/style.css": "./dist/vue-repl.css"
   },
   "typesVersions": {
     "*": {

vite.config.ts

@@ -1,6 +1,8 @@
 import { Plugin, mergeConfig } from 'vite'
 import dts from 'vite-plugin-dts'
 import base from './vite.preview.config'
+import fs from 'node:fs'
+import path from 'node:path'
 
 const genStub: Plugin = {
   name: 'gen-stub',
@@ -14,12 +16,37 @@ const genStub: Plugin = {
   },
 }
 
+/**
+ * Patch generated entries and import their corresponding CSS files.
+ * Also normalize MonacoEditor.css
+ */
+const patchCssFiles: Plugin = {
+  name: 'patch-css',
+  apply: 'build',
+  writeBundle() {
+    // 1. MonacoEditor.css -> monaco-editor.css
+    const outDir = path.resolve('dist')
+    fs.renameSync(
+      path.resolve(outDir, 'MonacoEditor.css'),
+      path.resolve(outDir, 'monaco-editor.css')
+    )
+
+    // 2. inject css imports to the files
+    ;['vue-repl', 'monaco-editor', 'codemirror-editor'].forEach((file) => {
+      const filePath = path.resolve(outDir, file + '.js')
+      const content = fs.readFileSync(filePath, 'utf-8')
+      fs.writeFileSync(filePath, `import './${file}.css'\n${content}`)
+    })
+  },
+}
+
 export default mergeConfig(base, {
   plugins: [
     dts({
       rollupTypes: true,
     }),
     genStub,
+    patchCssFiles,
   ],
   optimizeDeps: {
     // avoid late discovered deps
@@ -43,6 +70,7 @@ export default mergeConfig(base, {
       formats: ['es'],
       fileName: () => '[name].js',
     },
+    cssCodeSplit: true,
     rollupOptions: {
       output: {
         chunkFileNames: 'chunks/[name]-[hash].js',