Fix CSS @import order (#439)

zuplo · Dec 17, 2024 · 50b2c43 · 50b2c43
1 parent c9885f4
commit 50b2c43
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/packages/zudoku/src/vite/plugin-theme-css.ts b/packages/zudoku/src/vite/plugin-theme-css.ts
@@ -53,21 +53,23 @@ export const viteThemeCss = (getConfig: () => ZudokuPluginOptions): Plugin => {
       const config = getConfig();
 
       const cssParts = [];
-      if (config.theme?.light) {
-        cssParts.push(`:root:root { ${generateCss(config.theme.light)} }`);
-      }
-      if (config.theme?.dark) {
-        cssParts.push(`.dark.dark { ${generateCss(config.theme.dark)} }`);
-      }
 
+      // It's important that @import statements come first:
+      // > "@import must precede all other statements (besides @charset or empty @layer)"
       if (config.theme?.fonts?.sans) {
         cssParts.push(`@import url('${config.theme.fonts.sans.url}');`);
       }
-
       if (config.theme?.fonts?.mono) {
         cssParts.push(`@import url('${config.theme.fonts.mono.url}');`);
       }
 
+      if (config.theme?.light) {
+        cssParts.push(`:root:root { ${generateCss(config.theme.light)} }`);
+      }
+      if (config.theme?.dark) {
+        cssParts.push(`.dark.dark { ${generateCss(config.theme.dark)} }`);
+      }
+
       return cssParts.join("\n");
     },
   };