[zero] Fix wrong CSS order by moving import to last (#41002)

mui · Feb 13, 2024 · 36db6ed · 36db6ed
1 parent 10c4db9
commit 36db6ed
Showing 1 changed file with 3 additions and 2 deletions.
diff --git a/packages/zero-unplugin/src/index.ts b/packages/zero-unplugin/src/index.ts
@@ -225,15 +225,16 @@ export const plugin = createUnplugin<PluginOptions, true>((options) => {
             }),
           )}`;
           return {
-            code: `import ${JSON.stringify(data)};\n${result.code}`,
+            // CSS import should be the last so that nested components produce correct CSS order injection.
+            code: `${result.code}\nimport ${JSON.stringify(data)};`,
             map: result.sourceMap,
           };
         }
         const cssId = `./${cssFilename}`;
         cssFileLookup.set(cssId, cssFilename);
         cssLookup.set(cssFilename, cssText);
         return {
-          code: `import ${JSON.stringify(`./${cssFilename}`)};\n${result.code}`,
+          code: `${result.code}\nimport ${JSON.stringify(`./${cssFilename}`)};`,
           map: result.sourceMap,
         };
       } catch (e) {