From bf0cdcd3f1b1d536f5c231b11b3d97f6290268f1 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Wed, 13 Apr 2022 13:39:20 +0530
Subject: [PATCH] Add explaining comment

---
 .../build-plugins/rollup-plugin-build-themes.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/scripts/build-plugins/rollup-plugin-build-themes.js b/scripts/build-plugins/rollup-plugin-build-themes.js
index ef1eb78b..e7a2bb2b 100644
--- a/scripts/build-plugins/rollup-plugin-build-themes.js
+++ b/scripts/build-plugins/rollup-plugin-build-themes.js
@@ -128,6 +128,11 @@ module.exports = function buildThemes(options) {
 
         async load(id) {
             if (isDevelopment) {
+                /**
+                 * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
+                 * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.
+                 * This virtual file import is removed when hydrogen is built (see transform hook).
+                 */
                 if (id.startsWith(resolvedVirtualModuleId)) {
                     let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
                     if (theme === "default") {
@@ -174,11 +179,17 @@ module.exports = function buildThemes(options) {
             if (isDevelopment) {
                 return;
             }
-            // Removes develop-only script tag; this cannot be done in transformIndexHtml hook.
-            const devScriptTag = /<script type="module"> import "@theme\/.+"; <\/script>/;
+            /**
+             * Removes develop-only script tag; this cannot be done in transformIndexHtml hook because
+             * by the time that hook runs, the import is added to the bundled js file which would
+             * result in a runtime error.
+             */
+
+            const devScriptTag =
+                /<script type="module"> import "@theme\/.+"; <\/script>/;
             if (id.endsWith("index.html")) {
                 const htmlWithoutDevScript = code.replace(devScriptTag, "");
-                return htmlWithoutDevScript
+                return htmlWithoutDevScript;
             }
         },