Mirror -index.css generation with their import location in -index.js/ts files

core/views/widgets/markdown.py

@@ -10,6 +10,6 @@ class MarkdownInput(Textarea):
 
         context["statics"] = {
             "js": staticfiles_storage.url("bundled/core/components/easymde-index.ts"),
-            "css": staticfiles_storage.url("bundled/easymde-index.css"),
+            "css": staticfiles_storage.url("bundled/core/components/easymde-index.css"),
         }
         return context

core/views/widgets/select.py

@@ -22,7 +22,7 @@ class AutoCompleteSelectMixin:
         "bundled/core/components/ajax-select-index.ts",
     ]
     css = [
-        "bundled/ajax-select-index.css",
+        "bundled/core/components/ajax-select-index.css",
         "core/components/ajax-select.scss",
     ]
 

sas/templates/sas/picture.jinja

@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 
 {%- block additional_css -%}
-  <link defer rel="stylesheet" href="{{ static('bundled/ajax-select-index.css') }}">
+  <link defer rel="stylesheet" href="{{ static('bundled/core/components/ajax-select-index.css') }}">
   <link defer rel="stylesheet" href="{{ static('core/components/ajax-select.scss') }}">
   <link defer rel="stylesheet" href="{{ static('sas/css/picture.scss') }}">
 {%- endblock -%}

vite.config.mts

@@ -3,13 +3,20 @@ import { parse, resolve } from "node:path";
 import inject from "@rollup/plugin-inject";
 import { glob } from "glob";
 import type { AliasOptions, UserConfig } from "vite";
+import type { Rollup } from "vite";
 import { viteStaticCopy } from "vite-plugin-static-copy";
 import tsconfig from "./tsconfig.json";
 
 const outDir = resolve(__dirname, "./staticfiles/generated/bundled");
 const vendored = resolve(outDir, "vendored");
 const nodeModules = resolve(__dirname, "node_modules");
+const collectedFiles = glob.sync(
+  "./!(static)/static/bundled/**/*?(-)index.?(m)[j|t]s?(x)",
+);
 
+/**
+ * Grabs import aliases from tsconfig for #module: imports
+ **/
 function getAliases(): AliasOptions {
   const aliases: AliasOptions = {};
   for (const [key, value] of Object.entries(tsconfig.compilerOptions.paths)) {
@@ -18,7 +25,23 @@ function getAliases(): AliasOptions {
   return aliases;
 }
 
-type IndexPath = { [find: string]: string };
+/**
+ * Helper function that finds the relative path of an index.js/ts file in django static folders
+ **/
+function getRelativeAssetPath(path: string): string {
+  let relativePath: string[] = [];
+  const fullPath = parse(path);
+  for (const dir of fullPath.dir.split("/").reverse()) {
+    if (dir === "bundled") {
+      break;
+    }
+    relativePath.push(dir);
+  }
+  // We collected folders in reverse order, we put them back in the original order
+  relativePath = relativePath.reverse();
+  relativePath.push(fullPath.name);
+  return relativePath.join("/");
+}
 
 // biome-ignore lint/style/noDefaultExport: this is recommended by documentation
 export default {
@@ -29,27 +52,28 @@ export default {
     modulePreload: false, // would require `import 'vite/modulepreload-polyfill'` to always be injected
     emptyOutDir: true,
     rollupOptions: {
-      input: glob
-        .sync("./!(static)/static/bundled/**/*?(-)index.?(m)[j|t]s?(x)")
-        .reduce((obj: IndexPath, el) => {
-          // We include the path inside the bundled folder in the name
-          let relativePath: string[] = [];
-          const fullPath = parse(el);
-          for (const dir of fullPath.dir.split("/").reverse()) {
-            if (dir === "bundled") {
-              break;
-            }
-            relativePath.push(dir);
-          }
-          // We collected folders in reverse order, we put them back in the original order
-          relativePath = relativePath.reverse();
-          relativePath.push(fullPath.name);
-          obj[relativePath.join("/")] = `./${el}`;
-          return obj;
-        }, {}),
+      input: collectedFiles,
       output: {
-        entryFileNames: "[name].js",
-        assetFileNames: "[name].[ext]",
+        // Mirror architecture of static folders in generated .js and .css
+        entryFileNames: (chunkInfo: Rollup.PreRenderedChunk) => {
+          if (chunkInfo.facadeModuleId !== null) {
+            return `${getRelativeAssetPath(chunkInfo.facadeModuleId)}.js`;
+          }
+          return "[name].js";
+        },
+        assetFileNames: (chunkInfo: Rollup.PreRenderedAsset) => {
+          if (
+            chunkInfo.names?.length === 1 &&
+            chunkInfo.originalFileNames?.length === 1 &&
+            collectedFiles.includes(chunkInfo.originalFileNames[0])
+          ) {
+            return (
+              getRelativeAssetPath(chunkInfo.originalFileNames[0]) +
+              parse(chunkInfo.names[0]).ext
+            );
+          }
+          return "[name].[ext]";
+        },
       },
     },
   },