fix: workaround assets ordering by providing a manully ordering array

Author: Yukaii

lib/vite-helpers.js

@@ -3,6 +3,23 @@ const path = require('path')
 
 let manifest = null
 
+// Configuration for manual CSS ordering
+const CSS_ORDER_CONFIG = {
+  cover: [
+    'bootstrap',
+    'site',
+    'cover'
+  ],
+  // Add other entry points and their CSS orders as needed
+  index: [
+    'bootstrap',
+    'slide-preview',
+    'extra',
+    'site',
+    'index'
+  ]
+};
+
 // Read manifest in production
 // In development, Vite handles asset injection via its dev server middleware
 function readManifest () {
@@ -47,6 +64,26 @@ function getViteAssets(entryName) {
     assets.js.push(`/.vite/public/js/${entryName}.js`);
   }
 
+  // Apply manual CSS ordering if configured
+  if (CSS_ORDER_CONFIG[entryName]) {
+    const orderedCss = [];
+    CSS_ORDER_CONFIG[entryName].forEach(cssChunkName => {
+      const matchingCss = assets.css.find(css => css.includes(cssChunkName));
+      if (matchingCss) {
+        orderedCss.push(matchingCss);
+      } else {
+        console.warn(`Configured CSS chunk not found: ${cssChunkName} for entry: ${entryName}`);
+      }
+    });
+    // Add any remaining CSS assets not specified in the config
+    assets.css.forEach(css => {
+      if (!orderedCss.includes(css)) {
+        orderedCss.push(css);
+      }
+    });
+    assets.css = orderedCss;
+  }
+
   return assets;
 }
 

public/js/cover.js

@@ -3,6 +3,14 @@
 
 import 'bootstrap'
 
+import 'fork-awesome/css/fork-awesome.min.css'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import 'select2/select2.css'
+import 'select2/select2-bootstrap.css'
+
+import '@css/cover.css'
+import '@css/site.css'
+
 import {
   checkIfAuth,
   clearLoginState,
@@ -30,16 +38,8 @@ import List from 'list.js'
 import { unescape as unescapeHTML } from 'lodash'
 import 'select2/select2.js'
 
-import 'fork-awesome/css/fork-awesome.min.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import 'select2/select2.css'
-import 'select2/select2-bootstrap.css'
-
 import './locale'
 
-import '@css/cover.css'
-import '@css/site.css'
-
 const options = {
   valueNames: ['id', 'text', 'timestamp', 'fromNow', 'time', 'tags', 'pinned'],
   item: `<li class="col-xs-12 col-sm-6 col-md-6 col-lg-4">

vite.config.mjs

@@ -140,7 +140,7 @@ export default defineConfig({
         pretty: path.resolve(__dirname, 'public/js/pretty.js'),
         slide: path.resolve(__dirname, 'public/js/slide.js')
       },
-      external: [/\.html$/]
+      external: [/\.html$/],
     }
   },
   // Define global constants like webpack DefinePlugin (if needed)