feat: add CSS order fixer script for development mode

Author: Yukaii

app.js

@@ -242,6 +242,7 @@ async function initializeApp () {
   }
   app.locals.viteAssets = viteHelpers.getViteAssets
   app.locals.generateTags = viteHelpers.generateTags
+  app.locals.generateCssOrderFixer = viteHelpers.generateCssOrderFixer
   app.locals.enableDropBoxSave = config.isDropboxEnable
   app.locals.enableGitHubGist = config.isGitHubEnable
   app.locals.enableGitlabSnippets = config.isGitlabSnippetsEnable

lib/vite-helpers.js

@@ -96,7 +96,66 @@ function generateTags (assets) {
   return { cssTags, jsTags }
 }
 
+/**
+ * Generate a script tag to fix CSS ordering issues in development mode
+ * @param {Array<string>} selectors - CSS selectors for elements that should come after Vite's CSS
+ * @param {string} nonce - CSP nonce to allow script execution
+ * @returns {string} - Script tag for reordering CSS
+ */
+function generateCssOrderFixer (selectors, nonce = '') {
+  if (process.env.NODE_ENV === 'production') {
+    return '' // No need for this in production
+  }
+
+  const selectorsJson = JSON.stringify(selectors)
+  const nonceAttr = nonce ? ` nonce="${nonce}"` : ''
+
+  return `<script${nonceAttr}>
+  // Function to run the fix
+  function attemptFixCssOrder() {
+    const head = document.head;
+    const cssSelectors = ${selectorsJson};
+    
+    // Find all target elements
+    const targetElements = cssSelectors
+      .map(selector => head.querySelector(selector))
+      .filter(el => el !== null);
+    
+    if (targetElements.length) {
+      // Find all vite-injected styles
+      const viteStyles = Array.from(head.querySelectorAll('style'))
+        .filter(style => style.dataset.viteDevId);
+      
+      // Find the first target element to place vite styles before
+      const firstTarget = targetElements[0];
+      
+      // Move all vite styles before the first target element
+      if (viteStyles.length > 0) {
+        viteStyles.forEach(style => {
+          head.insertBefore(style, firstTarget);
+        });
+      }
+    }
+  }
+
+  // Run immediately when DOM content is loaded
+  document.addEventListener("DOMContentLoaded", attemptFixCssOrder);
+  
+  // Also run after a delay to catch any styles injected after DOMContentLoaded
+  setTimeout(attemptFixCssOrder, 500);
+  
+  // Run again after 2 seconds to catch any delayed style injections
+  setTimeout(attemptFixCssOrder, 2000);
+  
+  // Monitor for Vite HMR updates and reapply when they happen
+  window.addEventListener('vite:beforeUpdate', () => {
+    setTimeout(attemptFixCssOrder, 100);
+  });
+</script>`
+}
+
 module.exports = {
   getViteAssets,
-  generateTags
+  generateTags,
+  generateCssOrderFixer
 }

public/views/index/head.ejs

@@ -22,5 +22,9 @@
   <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
 <%# Old webpack includes removed %>
 <% } %>
+
+<%# Add CSS order fixer script (only active in development mode) %>
+<%- generateCssOrderFixer(['link[href*="fork-awesome.min.css"]'], cspNonce) %>
+
 <%# Inject Vite CSS assets for the 'cover' entry point %>
 <%- generateTags(viteAssets('cover')).cssTags %>

public/views/pretty.ejs

@@ -34,6 +34,10 @@
     <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
     <%# Old webpack includes removed %>
   <% } %>
+  
+  <%# Add CSS order fixer script (only active in development mode) %>
+  <%- generateCssOrderFixer(['link[href*="fork-awesome.min.css"]'], cspNonce) %>
+  
   <%# Inject Vite CSS assets for the 'pretty' entry point %>
   <%- generateTags(viteAssets('pretty')).cssTags %>
 </head>

public/views/slide.ejs

@@ -30,7 +30,10 @@
         <link rel="stylesheet" href='<%- serverURL %>/build/fork-awesome/css/fork-awesome.min.css'>
         <%# Old webpack includes removed %>
         <% } %>
-        <%# Inject Vite CSS assets for the 'slide' entry point %>
+        
+        <%# Add CSS order fixer script (only active in development mode) %>
+        <%- generateCssOrderFixer(['link#theme', 'link[href*="zenburn.css"]', 'link[href*="slide.css"]'], cspNonce) %>
+        
         <%- generateTags(viteAssets('slide')).cssTags %>
 
         <!-- For reveal.js theme -->