use a rollup plugin to add style import to output bundles

packages/theme-doc/package.json

@@ -26,7 +26,7 @@
     "build": "npm run clean && concurrently \"npm:build-*\"",
     "build-dts": "tsc",
     "build-copy-files": "node ./scripts/copy.mjs",
-    "build-rollup": "rollup -c && node scripts/add-css-import.js",
+    "build-rollup": "rollup -c",
     "dev": "npm run clean && concurrently \"npm:dev-*\"",
     "dev-dts": "tsc --watch",
     "dev-rollup": "rollup -wc",
@@ -50,6 +50,7 @@
     "github-slugger": "^2.0.0",
     "globby": "^13.1.2",
     "less": "^4.1.3",
+    "magic-string": "^0.27.0",
     "postcss": "^8.4.19",
     "prism-react-renderer": "^1.3.5",
     "rc-footer": "^0.6.6",

packages/theme-doc/rollup.config.mjs

@@ -2,6 +2,7 @@ import postcss from 'rollup-plugin-postcss'
 import babel from '@rollup/plugin-babel'
 import commonjs from '@rollup/plugin-commonjs'
 import resolve from '@rollup/plugin-node-resolve'
+import MagicString from 'magic-string'
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
@@ -64,5 +65,29 @@ export default {
       },
       extract: 'index.css',
     }),
+    {
+      name: 'add-css-import',
+      async renderChunk(code, chunk, options, meta) {
+        debugger
+        if (chunk.fileName === 'index.js' && chunk.isEntry) {
+          chunk.imports.push('./index.css')
+          chunk.importedBindings['./index.css'] = []
+          const s = new MagicString(code)
+          if (options.format === 'cjs') {
+            if (code.startsWith(`'use strict';`)) {
+              s.remove(0, `'use strict';`.length)
+            }
+            s.prepend(`'use strict';\nrequire('./index.css');\n`)
+          } else {
+            s.prepend(`import './index.css';\n`)
+          }
+          const map = s.generateMap({ hires: true })
+          return {
+            code: s.toString(),
+            map,
+          }
+        }
+      },
+    },
   ],
 }