fix lightningcss issue

lumeland · Oct 13, 2023 · bdbc0f6 · bdbc0f6
1 parent a09d2fb
commit bdbc0f6
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 50 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ Any BREAKING CHANGE between minor versions will be documented here in upper case
 
 ### Fixed
 - Ignore error checking Lume version in offline environments [#496].
+- `lightningcss` plugin: after refreshing changes the imports of all files are mixed.
 - Updated dependencies: `deno_dom`, `katex`, `preact`, `sass`, `svg2png`, `terser`.
 
 ## [1.19.1] - 2023-09-29

diff --git a/plugins/lightningcss.ts b/plugins/lightningcss.ts
@@ -60,7 +60,7 @@ export default function (userOptions?: DeepPartial<Options>) {
 
     if (options.includes) {
       site.includes(options.extensions, options.includes);
-      site.process(options.extensions, lightningCSSBundler);
+      site.processAll(options.extensions, lightningCSSBundler);
     } else {
       site.process(options.extensions, lightningCSSTransformer);
     }
@@ -93,56 +93,63 @@ export default function (userOptions?: DeepPartial<Options>) {
       );
     }
 
-    async function lightningCSSBundler(file: Page) {
-      const { content, filename, sourceMap, enableSourceMap } = prepareAsset(
-        site,
-        file,
-      );
-
-      const { formats } = site;
-      const { includes } = site.options;
-
-      // Process the code with lightningCSS
-      const bundleOptions: BundleAsyncOptions<CustomAtRules> = {
-        filename,
-        sourceMap: enableSourceMap,
-        inputSourceMap: JSON.stringify(sourceMap),
-        ...options.options,
-        resolver: {
-          resolve(id: string, from: string) {
-            const format = formats.search(id);
-            const includesPath = format?.includesPath ?? includes;
-
-            return resolveInclude(id, includesPath, posix.dirname(from));
+    /**
+     * Bundles all CSS files into a single file
+     * This cannot be done in parallel because ligthningcss has a bug that mixes the imports of all files
+     * Seems like executing the bundler in sequence fixes the issue
+     */
+    async function lightningCSSBundler(files: Page[]) {
+      for (const file of files) {
+        const { content, filename, sourceMap, enableSourceMap } = prepareAsset(
+          site,
+          file,
+        );
+
+        const { formats } = site;
+        const { includes } = site.options;
+
+        // Process the code with lightningCSS
+        const bundleOptions: BundleAsyncOptions<CustomAtRules> = {
+          filename,
+          sourceMap: enableSourceMap,
+          inputSourceMap: JSON.stringify(sourceMap),
+          ...options.options,
+          resolver: {
+            resolve(id: string, from: string) {
+              const format = formats.search(id);
+              const includesPath = format?.includesPath ?? includes;
+
+              return resolveInclude(id, includesPath, posix.dirname(from));
+            },
+            async read(file: string) {
+              if (file === filename) {
+                return content;
+              }
+
+              if (file.startsWith("http")) {
+                return read(file, false, {
+                  headers: {
+                    "User-Agent":
+                      "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0",
+                  },
+                });
+              }
+
+              return await site.getContent(file, textLoader) as string;
+            },
           },
-          async read(file: string) {
-            if (file === filename) {
-              return content;
-            }
-
-            if (file.startsWith("http")) {
-              return read(file, false, {
-                headers: {
-                  "User-Agent":
-                    "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0",
-                },
-              });
-            }
-
-            return await site.getContent(file, textLoader) as string;
-          },
-        },
-      };
-
-      const result = await bundleAsync(bundleOptions);
-      const decoder = new TextDecoder();
-
-      saveAsset(
-        site,
-        file,
-        decoder.decode(result.code),
-        enableSourceMap ? decoder.decode(result.map!) : undefined,
-      );
+        };
+
+        const result = await bundleAsync(bundleOptions);
+        const decoder = new TextDecoder();
+
+        saveAsset(
+          site,
+          file,
+          decoder.decode(result.code),
+          enableSourceMap ? decoder.decode(result.map!) : undefined,
+        );
+      }
     }
   };
 }