fix: JS and CSS build

vite.config.js

@@ -10,26 +10,35 @@ const source = process.env.VIZARR_DATA || "https://uk1s3.embassy.ebi.ac.uk/idr/z
  * Writes a new entry point that exports contents of an existing chunk.
  * @param {string} entryPointName - Name of the new entry point
  * @param {RegExp} chunkName - Name of the existing chunk
+ * @return {import("vite").Plugin}
  */
 function writeEntryPoint(entryPointName, chunkName) {
+  const jsFile = `${entryPointName}.js`;
+  const cssFile = `${entryPointName}.css`;
   return {
     name: "write-entry-point",
     async generateBundle(_, bundle) {
-      const chunk = Object.keys(bundle).find((key) => key.match(chunkName));
-      if (!chunk) {
+      const chunk = Object.values(bundle).find((key) => key.type === "chunk" && key.fileName.match(chunkName));
+      const styles = Object.values(bundle).find((key) => key.type === "asset" && key.fileName.match(chunkName));
+      if (!chunk || !styles) {
         throw new Error(`Could not find chunk matching ${chunkName}`);
       }
-      bundle[entryPointName] = {
-        fileName: entryPointName,
+      bundle[jsFile] = {
+        fileName: jsFile,
         type: "chunk",
-        code: `export * from './${chunk}';`,
+        code: `export * from './${chunk.fileName}';`,
+      };
+      bundle[cssFile] = {
+        fileName: cssFile,
+        type: "asset",
+        source: styles.source,
       };
     },
   };
 }
 
 export default defineConfig({
-  plugins: [react(), tailwindcss(), writeEntryPoint("index.js", /^vizarr-/)],
+  plugins: [react(), tailwindcss(), writeEntryPoint("index", /^vizarr-/)],
   base: process.env.VIZARR_PREFIX || "./",
   build: {
     assetsDir: "",