vite-plugin-react-shopify 1.0.1 → 2.0.0

package/dist/index.js

@@ -1,74 +1,116 @@
-// src/options.ts
+// src/plugin/options.ts
 import path from "path";
-var defaultImportMap = {
-  react: "https://esm.sh/react@19",
-  reactDomClient: "https://esm.sh/react-dom@19/client"
-};
 var defaultPrefix = {
   template: "page.react-",
   section: "react-",
-  block: "react-"
+  block: "react-",
+  snippet: "react-"
 };
+function assetRef(buildDir, filename) {
+  if (buildDir === "assets") return filename;
+  const sub = buildDir.startsWith("assets/") ? buildDir.slice(7) : buildDir;
+  return `${sub}/${filename}`;
+}
+function liquidAssetUrl(ref) {
+  return `{{ '${ref}' | asset_url }}`;
+}
 var resolveOptions = (options = {}) => {
   const themeRoot = options.themeRoot ?? "./";
   const sourceCodeDir = options.sourceCodeDir ?? "frontend";
   const snippetFile = options.snippetFile ?? "shopify-importmap.liquid";
   const buildDir = options.buildDir ?? "assets";
   const ssg = {
-    directories: options.ssg?.directories ?? ["sections", "blocks", "templates"],
+    directories: options.ssg?.directories ?? ["sections", "blocks", "templates", "snippets"],
     prefix: {
       template: options.ssg?.prefix?.template ?? defaultPrefix.template,
       section: options.ssg?.prefix?.section ?? defaultPrefix.section,
-      block: options.ssg?.prefix?.block ?? defaultPrefix.block
+      block: options.ssg?.prefix?.block ?? defaultPrefix.block,
+      snippet: options.ssg?.prefix?.snippet ?? defaultPrefix.snippet
     },
-    outputName: options.ssg?.outputName ?? ""
+    outputName: options.ssg?.outputName ?? "",
+    cssPrefix: options.ssg?.cssPrefix ?? "css"
   };
   const importMap = {
-    react: options.importMap?.react ?? defaultImportMap.react,
-    reactDomClient: options.importMap?.reactDomClient ?? defaultImportMap.reactDomClient
+    react: options.importMap?.react ?? liquidAssetUrl(assetRef(buildDir, "react.js")),
+    reactDomClient: options.importMap?.reactDomClient ?? liquidAssetUrl(assetRef(buildDir, "react-dom.js"))
   };
   return {
     themeRoot: path.resolve(themeRoot),
     sourceCodeDir,
     snippetFile,
     buildDir,
+    debug: options.debug ?? false,
     ssg,
     importMap
   };
 };
 
-// src/config.ts
-import path2 from "path";
+// src/plugin/logger.ts
 import createDebugger from "debug";
-var debug = createDebugger("vite-plugin-shopify:config");
+var NAMESPACE = "vite-plugin-shopify";
+var _debugEnabled = false;
+function enableDebug() {
+  if (_debugEnabled) return;
+  _debugEnabled = true;
+  const existing = process.env.DEBUG;
+  createDebugger.enable(existing ? `${existing},${NAMESPACE}:*` : `${NAMESPACE}:*`);
+}
+function logger(ns) {
+  const dbg = createDebugger(`${NAMESPACE}:${ns}`);
+  return {
+    debug: (formatter, ...args) => {
+      if (_debugEnabled) dbg(formatter, ...args);
+    },
+    info: (msg, ...args) => console.log(`[${NAMESPACE}] ${msg}`, ...args),
+    warn: (msg, ...args) => console.warn(`[${NAMESPACE}] ${msg}`, ...args),
+    error: (msg, ...args) => console.error(`[${NAMESPACE}] ${msg}`, ...args)
+  };
+}
+
+// src/plugin/config.ts
+import path2 from "path";
+var log = logger("config");
+function isWatchMode() {
+  return process.argv.includes("--watch") || process.env.SHOPIFY_DEV_WATCH === "1";
+}
 function shopifyConfig(options) {
-  const isDebug = process.env.VITE_SHOPIFY_DEBUG === "true";
   return {
     name: "vite-plugin-shopify:config",
     config(config) {
       const sourceDirAbs = path2.resolve(options.themeRoot, options.sourceCodeDir);
+      const watch = isWatchMode();
+      log.debug("watch=%s", watch);
       const generated = {
         base: config.base ?? "./",
         publicDir: config.publicDir ?? false,
         build: {
           outDir: config.build?.outDir ?? path2.join(options.themeRoot, options.buildDir),
           assetsDir: config.build?.assetsDir ?? "",
-          emptyOutDir: config.build?.emptyOutDir ?? false,
+          emptyOutDir: config.build?.emptyOutDir ?? true,
           manifest: config.build?.manifest ?? true,
-          minify: config.build?.minify ?? (isDebug ? false : void 0),
-          sourcemap: config.build?.sourcemap ?? (isDebug ? true : void 0),
-          rollupOptions: {
-            ...config.build?.rollupOptions,
-            external: [
-              ...Array.isArray(config.build?.rollupOptions?.external) ? config.build.rollupOptions.external : [],
-              "react",
-              "react-dom/client"
-            ],
+          minify: config.build?.minify ?? (watch || options.debug ? false : void 0),
+          sourcemap: config.build?.sourcemap ?? (watch || options.debug ? "inline" : void 0),
+          rolldownOptions: {
+            ...config.build?.rolldownOptions ?? config.build?.rollupOptions,
+            external: Array.isArray((config.build?.rolldownOptions ?? config.build?.rollupOptions)?.external) ? (config.build?.rolldownOptions ?? config.build?.rollupOptions).external : [],
             output: {
-              ...config.build?.rollupOptions?.output,
+              ...(config.build?.rolldownOptions ?? config.build?.rollupOptions)?.output,
               entryFileNames: "[name]-[hash].js",
-              chunkFileNames: "[name]-[hash].js",
-              assetFileNames: "[name]-[hash][extname]"
+              chunkFileNames(chunkInfo) {
+                if (["react", "react-dom"].includes(chunkInfo.name)) {
+                  return `${chunkInfo.name}.js`;
+                }
+                return "[name]-[hash].js";
+              },
+              assetFileNames: "[name]-[hash][extname]",
+              manualChunks(id) {
+                if (id.includes("/node_modules/react-dom/")) {
+                  return "react-dom";
+                }
+                if (id.includes("/node_modules/react/") || id.includes("/node_modules/scheduler/")) {
+                  return "react";
+                }
+              }
             }
           }
         },
@@ -98,24 +140,25 @@ function shopifyConfig(options) {
           modules: config.css?.modules
         }
       };
-      debug(generated);
+      log.debug("generated config: %O", generated);
       return generated;
     }
   };
 }
 
-// src/entries.ts
+// src/plugin/entries.ts
 import path4 from "path";
 import { normalizePath as normalizePath2 } from "vite";
 
-// src/ssg/scanner.ts
+// src/plugin/ssg/scanner.ts
 import path3 from "path";
 import glob from "fast-glob";
 import { normalizePath } from "vite";
 var TYPE_BY_DIR = {
   templates: "template",
   sections: "section",
-  blocks: "block"
+  blocks: "block",
+  snippets: "snippet"
 };
 function scanEntries(options) {
   const sourceDir = path3.resolve(options.themeRoot, options.sourceCodeDir);
@@ -144,13 +187,19 @@ function toKebabCase(str) {
   return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
 }
 
-// src/entries.ts
+// src/plugin/entries.ts
+var log2 = logger("entries");
 function shopifyEntries(options) {
   let entries = [];
   return {
     name: "vite-plugin-shopify:entries",
     config(config) {
       entries = scanEntries(options);
+      const byType = {};
+      for (const e of entries) {
+        byType[e.targetType] = (byType[e.targetType] || 0) + 1;
+      }
+      log2.debug("scanned %d entries: %s", entries.length, JSON.stringify(byType));
       if (entries.length === 0) return {};
       const input = {};
       for (const entry of entries) {
@@ -178,20 +227,22 @@ function shopifyEntries(options) {
         `import { createElement } from 'react'`,
         `import Component from '~/${componentRel}'`,
         `import { hydrateRoot } from 'react-dom/client'`,
-        `import { SettingsProvider } from 'vite-plugin-react-shopify/runtime/settings'`,
-        `import { ParamsProvider } from 'vite-plugin-react-shopify/runtime/settings'`,
+        `import { LiquidDataProvider } from 'vite-plugin-react-shopify/runtime'`,
         ``,
         `const SELECTOR = '[data-ssg-component="${kebabName}"]'`,
         `const roots = new Map()`,
         ``,
+        `function readLiquidData(el) {`,
+        `  const script = el.querySelector(':scope > script[data-ssg-liquid]')`,
+        `  if (!script) return {}`,
+        `  try { return JSON.parse(script.textContent || '{}') } catch { return {} }`,
+        `}`,
+        ``,
         `function hydrate(el) {`,
         `  const h = el.querySelector(':scope > [data-ssg-hydrate]') || (el.matches('[data-ssg-hydrate]') ? el : null)`,
         `  if (!h || roots.has(h)) return`,
-        `  const propsEl = el.querySelector(':scope > script[data-ssg-props]')`,
-        `  const props = propsEl ? JSON.parse(propsEl.textContent || '{}') : {}`,
-        `  const paramsEl = el.querySelector(':scope > script[data-ssg-params]')`,
-        `  const params = paramsEl ? JSON.parse(paramsEl.textContent || '{}') : {}`,
-        `  roots.set(h, hydrateRoot(h, createElement(SettingsProvider, { value: props }, createElement(ParamsProvider, { value: params }, createElement(Component)))))`,
+        `  const liquidData = readLiquidData(el)`,
+        `  roots.set(h, hydrateRoot(h, createElement(LiquidDataProvider, { value: liquidData }, createElement(Component))))`,
         `}`,
         ``,
         `function unmount(el) {`,
@@ -223,30 +274,45 @@ function shopifyEntries(options) {
   };
 }
 
-// src/ssg/index.ts
+// src/plugin/ssg/index.ts
 import fs2 from "fs";
 import path7 from "path";
 
-// src/ssg/compiler.ts
+// src/plugin/ssg/compiler.ts
 import fs from "fs";
 import path6 from "path";
 import { createRequire } from "module";
 
-// src/ssg/post-process.ts
-var REACT_LIQUID_REGEX = /<\/?react-liquid>/g;
-function stripReactLiquidTags(html) {
-  return html.replace(REACT_LIQUID_REGEX, "");
+// src/plugin/ssg/post-process.ts
+var VOID_ELEMENTS = /<(area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)([^>]*)\/>/g;
+function normalizeVoidElements(html) {
+  return html.replace(VOID_ELEMENTS, "<$1$2>");
+}
+function normalizeStyleAttributes(html) {
+  return html.replace(/ style="([^"]+)"/g, (_match, content) => {
+    const normalized = content.replace(/:(\S)/g, ": $1").replace(/;\s*$/, "");
+    return ` style="${normalized};"`;
+  });
 }
 function unwrapHtmlEntities(html) {
   return html.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#x27;/g, "'");
 }
 
-// src/ssg/schema-gen.ts
+// src/plugin/ssg/liquid.ts
+import path5 from "path";
+
+// src/plugin/ssg/schema-gen.ts
+var log3 = logger("schema-gen");
 function serializeSetting(setting) {
   const s = { type: setting.type };
   if ("id" in setting) s.id = setting.id;
   if ("label" in setting) s.label = setting.label;
   if ("default" in setting && setting.default !== void 0) {
+    if (setting.default === "") {
+      log3.warn(
+        `Setting "${"id" in setting ? setting.id : "(no id)"}" has empty string default. Use a non-empty string or remove the default.`
+      );
+    }
     s.default = setting.default;
   }
   if ("info" in setting && setting.info) s.info = setting.info;
@@ -309,10 +375,9 @@ ${json}
 `;
 }
 
-// src/ssg/liquid.ts
-import path5 from "path";
+// src/plugin/ssg/liquid.ts
 var DISCLAIMER = "{% comment %}\n  IMPORTANT: This file is automatically generated by vite-plugin-shopify.\n  Do not attempt to modify this file directly, as any changes will be overwritten by the next build.\n{% endcomment %}\n";
-function assembleLiquidFile(html, entry, scriptAsset, cssContents, options) {
+function assembleLiquidFile(html, entry, scriptAsset, cssContents, options, trackedExpressions = []) {
   const type = entry.meta.type ?? entry.targetType;
   const parts = [DISCLAIMER];
   switch (type) {
@@ -320,20 +385,26 @@ function assembleLiquidFile(html, entry, scriptAsset, cssContents, options) {
       parts.push(html);
       break;
     case "section":
-      parts.push(...buildSection(html, entry));
+      parts.push(...buildSection(html, entry, trackedExpressions));
       break;
     case "block":
-      parts.push(...buildBlock(html, entry));
+      parts.push(...buildBlock(html, entry, trackedExpressions));
+      break;
+    case "snippet":
+      parts.push(...buildSnippet(html, entry, trackedExpressions));
       break;
     default:
-      parts.push(...buildSection(html, entry));
+      parts.push(...buildSection(html, entry, trackedExpressions));
       break;
   }
-  if (cssContents.length > 0) {
+  for (const snippet of cssContents.snippets) {
+    parts.push("", `{% render '${snippet}' %}`);
+  }
+  if (cssContents.inline.length > 0) {
     parts.push(
       "",
       "{% stylesheet %}",
-      ...cssContents.map((c) => c.trim()),
+      ...cssContents.inline.map((c) => c.trim()),
       "{% endstylesheet %}"
     );
   }
@@ -344,21 +415,27 @@ function assembleLiquidFile(html, entry, scriptAsset, cssContents, options) {
       `<script type="module" src="{{ '${assetPath}' | asset_url }}"></script>`
     );
   }
-  parts.push(generateSchema(entry.meta));
+  if (type !== "snippet") {
+    parts.push(generateSchema(entry.meta));
+  }
   return parts.join("\n") + "\n";
 }
 var hasBlocks = (entry) => !!entry.meta.blocks && entry.meta.blocks.length > 0;
-var SETTINGS_SECTION = `  <script type="application/json" data-ssg-props>{{ section.settings | json }}</script>`;
-var SETTINGS_BLOCK = `  <script type="application/json" data-ssg-props>{{ block.settings | json }}</script>`;
-function buildParamsBridge(params) {
-  const entries = params.map((p) => `    "${p}": {{ ${p} | json }}`).join(",\n");
-  return `  <script type="application/json" data-ssg-params>
-  {
-${entries}
-  }
-  </script>`;
+function buildLiquidBridge(trackedExpressions) {
+  if (trackedExpressions.length === 0) return "";
+  const entries = trackedExpressions.map((expr, i) => {
+    const comma = i < trackedExpressions.length - 1 ? "," : "";
+    return `    "${expr}": {{ ${expr} | json }}${comma}`;
+  });
+  return [
+    '  <script type="application/json" data-ssg-liquid>',
+    "  {",
+    entries.join("\n"),
+    "  }",
+    "  </script>"
+  ].join("\n");
 }
-function buildSection(html, entry) {
+function buildSection(html, entry, trackedExpressions) {
   const tag = entry.meta.tag ?? "div";
   const cls = entry.meta.class ?? "";
   const lines = [
@@ -369,23 +446,17 @@ function buildSection(html, entry) {
     `  data-ssg-component="${entry.kebabName}"`
   ];
   if (cls) lines.push(`  class="${cls}"`);
+  lines.push(`>`);
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
   lines.push(
-    `>`,
-    SETTINGS_SECTION
-  );
-  if (entry.meta.params?.length) {
-    lines.push(buildParamsBridge(entry.meta.params));
-  }
-  lines.push(
-    `  <div data-ssg-hydrate>`,
-    `    ${html}`,
-    `  </div>`
+    `  <div data-ssg-hydrate>${html}</div>`
   );
   if (hasBlocks(entry)) lines.push(`  {% content_for 'blocks' %}`);
   lines.push(`</${tag}>`);
   return lines;
 }
-function buildBlock(html, entry) {
+function buildBlock(html, entry, trackedExpressions) {
   const tag = entry.meta.tag ?? "div";
   const cls = entry.meta.class ?? "";
   const lines = [
@@ -403,27 +474,43 @@ function buildBlock(html, entry) {
   if (cls) lines.push(`  class="${cls}"`);
   lines.push(
     `  {{ block.shopify_attributes }}`,
-    `>`,
-    SETTINGS_BLOCK
+    `>`
   );
-  if (entry.meta.params?.length) {
-    lines.push(buildParamsBridge(entry.meta.params));
-  }
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
   lines.push(
-    `  <div data-ssg-hydrate>`,
-    `    ${html}`,
-    `  </div>`
+    `  <div data-ssg-hydrate>${html}</div>`
   );
   if (hasBlocks(entry)) lines.push(`  {% content_for 'blocks' %}`);
   lines.push(`</${tag}>`);
   return lines;
 }
+function buildSnippet(html, entry, trackedExpressions) {
+  const lines = [
+    "",
+    `<div data-ssg-component="${entry.kebabName}">`
+  ];
+  const liquidBridge = buildLiquidBridge(trackedExpressions);
+  if (liquidBridge) lines.push(liquidBridge);
+  lines.push(
+    `  <div data-ssg-hydrate>`,
+    `    ${html}`,
+    `  </div>`,
+    `</div>`
+  );
+  return lines;
+}
 function getOutputPath(entry, options) {
   const type = entry.meta.type ?? entry.targetType;
-  const dirName = type === "block" ? "blocks" : `${type}s`;
+  const dirName = typeToDir(type);
   const fileName = resolveFileName(entry, type, options);
   return path5.join(options.themeRoot, dirName, fileName);
 }
+function typeToDir(type) {
+  if (type === "snippet") return "snippets";
+  if (type === "block") return "blocks";
+  return `${type}s`;
+}
 function getAssetRelativePath(buildDir, filename) {
   if (!buildDir.startsWith("assets/")) return filename;
   const prefix = buildDir.slice("assets/".length);
@@ -437,22 +524,118 @@ function resolveFileName(entry, type, options) {
   return `${prefix}${entry.kebabName}.liquid`;
 }
 
-// src/ssg/compiler.ts
+// src/plugin/ssg/hydration-fix.ts
+var log4 = logger("hydration-fix");
+function autoFixAdjacentText(source, filePath) {
+  let fixCount = 0;
+  const lines = source.split("\n");
+  const fixed = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const replaced = line.replace(
+      /<(\w+)([^>]*?)>([^<]*?\{[^}]*\}[^<]*?)<\/\1>/g,
+      (match, tagName, attrs, content) => {
+        const trimmed = content.trim();
+        if (!needsFix(trimmed)) return match;
+        fixCount++;
+        const tpl = trimmed.replace(/\{([^}]+)\}/g, "${$1}");
+        return `<${tagName}${attrs}>{\`${tpl}\`}</${tagName}>`;
+      }
+    );
+    fixed.push(replaced);
+  }
+  if (fixCount > 0) {
+    log4.warn(
+      `auto-fixed ${fixCount} adjacent text+expression issue(s) in ${filePath}`
+    );
+  }
+  return { result: fixed.join("\n"), fixCount };
+}
+function needsFix(content) {
+  const trimmed = content.trim();
+  if (!trimmed) return false;
+  if (trimmed.startsWith("{") && trimmed.endsWith("}")) {
+    const inner = trimmed.slice(1, -1).trim();
+    if (inner.startsWith("`") && inner.endsWith("`")) return false;
+    if (inner.length > 0 && !/<[a-zA-Z]/.test(inner)) return false;
+  }
+  if (!/\{/.test(trimmed)) return false;
+  if (/<[a-zA-Z]/.test(trimmed)) return false;
+  return true;
+}
+
+// src/plugin/ssg/compiler.ts
+var log5 = logger("ssg:compiler");
 async function compileAllEntries(options, manifest) {
   const entries = scanEntries(options);
   if (entries.length === 0) return;
+  log5.debug("found %d entries to compile", entries.length);
   const projectRoot = path6.resolve(options.themeRoot);
   const sourceDir = path6.resolve(options.themeRoot, options.sourceCodeDir);
+  const entryCssFiles = /* @__PURE__ */ new Map();
+  const cssRefCount = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const manifestKey = `shopify:entry:${entry.kebabName}`;
+    const files = collectCssFiles(manifestKey, manifest);
+    entryCssFiles.set(entry.kebabName, files);
+    for (const f of files) {
+      cssRefCount.set(f, (cssRefCount.get(f) || 0) + 1);
+    }
+    log5.debug("entry %s has %d CSS files", entry.kebabName, files.length);
+  }
+  const cssSnippetMap = /* @__PURE__ */ new Map();
+  for (const [cssFile, count] of cssRefCount) {
+    if (count > 1) {
+      const snippetName = `${options.ssg.cssPrefix}-${getCssBaseName(cssFile)}`;
+      cssSnippetMap.set(cssFile, snippetName);
+      const snippetPath = path6.join(
+        path6.resolve(options.themeRoot),
+        "snippets",
+        `${snippetName}.liquid`
+      );
+      const cssPath = path6.join(
+        path6.resolve(options.themeRoot, options.buildDir),
+        cssFile
+      );
+      try {
+        const cssContent = fs.readFileSync(cssPath, "utf-8");
+        fs.mkdirSync(path6.dirname(snippetPath), { recursive: true });
+        fs.writeFileSync(snippetPath, `{% stylesheet %}
+${cssContent.trim()}
+{% endstylesheet %}
+`);
+        log5.debug("generated shared CSS snippet %s (used by %d entries)", snippetName, count);
+      } catch {
+        log5.warn("failed to write CSS snippet for %s", cssFile);
+      }
+    }
+  }
   for (const entry of entries) {
     try {
-      await compileEntry(entry, options, manifest, projectRoot, sourceDir);
+      const cssFiles = entryCssFiles.get(entry.kebabName) || [];
+      const cssSnippets = cssFiles.filter((f) => cssSnippetMap.has(f)).map((f) => cssSnippetMap.get(f));
+      const cssInlineFiles = cssFiles.filter((f) => !cssSnippetMap.has(f));
+      const cssInline = readCssFileContents(cssInlineFiles, options.buildDir, options.themeRoot);
+      log5.debug(
+        "compiling %s (type=%s, css inline=%d, css snippets=%d)",
+        entry.kebabName,
+        entry.targetType,
+        cssInline.length,
+        cssSnippets.length
+      );
+      await compileEntry(entry, options, manifest, projectRoot, sourceDir, cssInline, cssSnippets);
     } catch (err) {
-      console.error(`[vite-plugin-shopify] Failed to compile ${entry.filePath}:`, err);
+      log5.error("Failed to compile %s:", entry.filePath, err);
     }
   }
-  console.log(`[vite-plugin-shopify] Compiled ${entries.length} entries`);
+  log5.info("Compiled %d entries", entries.length);
+  const tmpDir = path6.join(sourceDir, ".ssg-tmp");
+  try {
+    fs.rmSync(tmpDir, { recursive: true, force: true });
+  } catch {
+  }
 }
-async function compileEntry(entry, options, manifest, projectRoot, sourceDir) {
+async function compileEntry(entry, options, manifest, projectRoot, sourceDir, cssInline, cssSnippets) {
   const projectRequire = createRequire(path6.join(projectRoot, "package.json"));
   let createElement;
   let renderToStaticMarkup;
@@ -460,58 +643,112 @@ async function compileEntry(entry, options, manifest, projectRoot, sourceDir) {
     createElement = projectRequire("react").createElement;
     renderToStaticMarkup = projectRequire("react-dom/server").renderToStaticMarkup;
   } catch {
-    console.warn(`[vite-plugin-shopify] react/react-dom not found, skipping SSR`);
+    log5.warn("react/react-dom not found, skipping SSR for %s", entry.kebabName);
     return;
   }
   const sourceCode = fs.readFileSync(entry.filePath, "utf-8");
-  const ssgSource = sourceCode.replace(
-    /import\s+(\w+)\s+from\s+["'][^"']*\.module\.css["'];?\s*/g,
-    (_, name) => `const ${name} = new Proxy({},{get:(_,k)=>k});`
-  ).replace(
-    /import\s+["'][^"']*\.css["'];?\s*/g,
-    ""
-  );
+  const { result: fixedSource, fixCount } = autoFixAdjacentText(sourceCode, entry.filePath);
+  const finalSource = fixCount > 0 ? fixedSource : sourceCode;
   let esbuild;
   try {
     esbuild = projectRequire("esbuild");
   } catch {
-    console.warn(`[vite-plugin-shopify] esbuild not found, skipping SSR`);
+    log5.warn("esbuild not found, skipping SSR for %s", entry.kebabName);
     return;
   }
-  const result = await esbuild.transform(ssgSource, {
-    loader: path6.extname(entry.filePath).slice(1),
+  const ts = Date.now();
+  const tmpDir = path6.join(sourceDir, ".ssg-tmp");
+  fs.mkdirSync(tmpDir, { recursive: true });
+  const tmpFile = path6.join(tmpDir, `.ssg-entry-${ts}.mjs`);
+  log5.debug("bundling %s via esbuild", entry.kebabName);
+  const startBundled = Date.now();
+  await esbuild.build({
+    stdin: {
+      contents: finalSource,
+      resolveDir: path6.dirname(entry.filePath),
+      loader: path6.extname(entry.filePath).slice(1)
+    },
+    outfile: tmpFile,
+    bundle: true,
     format: "esm",
     jsx: "automatic",
-    sourcefile: entry.filePath
+    platform: "node",
+    external: [
+      "react",
+      "react-dom",
+      "react-dom/*",
+      "vite-plugin-react-shopify",
+      "vite-plugin-react-shopify/*"
+    ],
+    write: true,
+    allowOverwrite: true,
+    plugins: [
+      {
+        name: "ssg-hydration-fix",
+        setup(build) {
+          build.onLoad({ filter: /\.(tsx|jsx)$/ }, (args) => {
+            try {
+              const source = fs.readFileSync(args.path, "utf-8");
+              const { result, fixCount: fixCount2 } = autoFixAdjacentText(source, args.path);
+              if (fixCount2 > 0) {
+                return { contents: result, loader: args.path.endsWith(".tsx") ? "tsx" : "jsx" };
+              }
+            } catch {
+            }
+            return void 0;
+          });
+        }
+      },
+      {
+        name: "ssg-strip-css",
+        setup(build) {
+          build.onResolve({ filter: /\.module\.css$/ }, (args) => ({
+            namespace: "ssg-css-module",
+            path: args.path
+          }));
+          build.onResolve({ filter: /\.css$/ }, (args) => ({
+            namespace: "ssg-css-plain",
+            path: args.path
+          }));
+          build.onLoad({ filter: /.*/, namespace: "ssg-css-module" }, () => ({
+            contents: "export default new Proxy({},{get:(_,k)=>k});",
+            loader: "js"
+          }));
+          build.onLoad({ filter: /.*/, namespace: "ssg-css-plain" }, () => ({
+            contents: "",
+            loader: "js"
+          }));
+        }
+      }
+    ]
   });
-  const ts = Date.now();
-  const tmpFile = path6.join(sourceDir, ".ssg-tmp-" + ts + ".mjs");
-  fs.writeFileSync(tmpFile, result.code);
+  log5.debug("esbuild bundle took %dms", Date.now() - startBundled);
   try {
     const mod = await import(pathToFileURL(tmpFile));
     const Component = mod.default;
     const shopifyMeta = mod.shopifyMeta;
     if (!Component) {
-      console.warn(
-        `[vite-plugin-shopify] No default export found in ${entry.filePath}, skipping`
-      );
+      log5.warn("No default export found in %s, skipping", entry.filePath);
       return;
     }
     if (shopifyMeta) {
       entry.meta = { ...entry.meta, ...shopifyMeta };
     }
     globalThis.__shopify_ssg_target = entry.targetType;
+    const trackedExpressions = /* @__PURE__ */ new Set();
+    globalThis.__shopify_ssg_liquid_track = trackedExpressions;
     const element = createElement(Component);
     let html = renderToStaticMarkup(element);
-    html = stripReactLiquidTags(html);
+    delete globalThis.__shopify_ssg_liquid_track;
+    html = normalizeVoidElements(html);
+    html = normalizeStyleAttributes(html);
     html = unwrapHtmlEntities(html);
     const scriptAsset = resolveScriptAsset(entry.kebabName, manifest);
-    const cssContents = readCssAssets(entry.kebabName, manifest, options.buildDir, options.themeRoot);
-    const liquidContent = assembleLiquidFile(html, entry, scriptAsset, cssContents, {
+    const liquidContent = assembleLiquidFile(html, entry, scriptAsset, { inline: cssInline, snippets: cssSnippets }, {
       prefix: options.ssg.prefix,
       outputName: options.ssg.outputName || void 0,
       buildDir: options.buildDir
-    });
+    }, [...trackedExpressions]);
     const outputPath = getOutputPath(entry, {
       prefix: options.ssg.prefix,
       outputName: options.ssg.outputName || void 0,
@@ -537,22 +774,49 @@ function resolveScriptAsset(kebabName, manifest) {
   if (!file) return null;
   return path6.basename(file);
 }
-function readCssAssets(kebabName, manifest, buildDir, themeRoot) {
-  const manifestKey = `shopify:entry:${kebabName}`;
-  const entryChunk = manifest[manifestKey];
-  if (!entryChunk) return [];
-  const css = entryChunk.css;
-  if (!css || !Array.isArray(css)) return [];
+function collectCssFiles(manifestKey, manifest) {
+  const collected = /* @__PURE__ */ new Set();
+  const visited = /* @__PURE__ */ new Set();
+  collectCssFilesRecursive(manifestKey, manifest, collected, visited);
+  return [...collected];
+}
+function collectCssFilesRecursive(chunkKey, manifest, collected, visited) {
+  if (visited.has(chunkKey)) return;
+  visited.add(chunkKey);
+  const chunk = manifest[chunkKey];
+  if (!chunk) return;
+  if (chunk.css && Array.isArray(chunk.css)) {
+    for (const cssFile of chunk.css) {
+      collected.add(cssFile);
+    }
+  }
+  if (chunk.imports && Array.isArray(chunk.imports)) {
+    for (const imported of chunk.imports) {
+      collectCssFilesRecursive(imported, manifest, collected, visited);
+    }
+  }
+}
+function readCssFileContents(cssFiles, buildDir, themeRoot) {
   const assetsDir = path6.resolve(themeRoot, buildDir);
-  return css.map((file) => {
-    const cssPath = path6.join(assetsDir, file);
+  return cssFiles.map((file) => {
     try {
-      return fs.readFileSync(cssPath, "utf-8");
+      return fs.readFileSync(path6.join(assetsDir, file), "utf-8");
     } catch {
       return "";
     }
   }).filter(Boolean);
 }
+function getCssBaseName(cssFile) {
+  const name = cssFile.replace(/\.css$/, "");
+  const lastHyphen = name.lastIndexOf("-");
+  if (lastHyphen > 0) {
+    const possibleHash = name.slice(lastHyphen + 1);
+    if (/^[A-Za-z0-9_-]{8,}$/.test(possibleHash)) {
+      return name.slice(0, lastHyphen);
+    }
+  }
+  return name;
+}
 function pathToFileURL(filePath) {
   const absPath = path6.resolve(filePath);
   if (process.platform === "win32") {
@@ -561,7 +825,8 @@ function pathToFileURL(filePath) {
   return "file://" + absPath;
 }
 
-// src/ssg/index.ts
+// src/plugin/ssg/index.ts
+var log6 = logger("ssg");
 function shopifySSG(options) {
   return {
     name: "vite-plugin-shopify:ssg",
@@ -577,14 +842,16 @@ function shopifySSG(options) {
         "manifest.json"
       );
       if (!fs2.existsSync(manifestPath)) {
-        console.warn("[vite-plugin-shopify] No manifest.json found, skipping SSG");
+        log6.warn("No manifest.json found, skipping SSG");
         return;
       }
+      log6.debug("reading manifest from %s", manifestPath);
       const manifest = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
-      console.log("[vite-plugin-shopify] Starting SSG compilation...");
+      log6.info("Starting SSG compilation...");
       await compileAllEntries(options, manifest);
-      console.log("[vite-plugin-shopify] SSG compilation complete");
+      log6.info("SSG compilation complete");
       writeImportMapSnippet(options);
+      log6.debug("wrote import map snippet");
     },
     resolveId(id) {
       if (id === "vite-plugin-shopify/runtime") {
@@ -593,7 +860,11 @@ function shopifySSG(options) {
     },
     load(id) {
       if (id === "\0vite-plugin-shopify:runtime") {
-        return `export { Liquid } from 'vite-plugin-shopify/runtime/Liquid'`;
+        const exports = [
+          `export { LiquidDataProvider, LiquidDataContext } from 'vite-plugin-shopify/runtime'`,
+          `export { useLiquid, useLiquidValues, useSectionSettings, useBlockSettings, useSnippetParams, useBlockParams } from 'vite-plugin-shopify/runtime'`
+        ];
+        return exports.join("\n");
       }
     }
   };
@@ -626,6 +897,9 @@ function writeImportMapSnippet(options) {
 // src/index.ts
 var vitePluginShopify = (options = {}) => {
   const resolvedOptions = resolveOptions(options);
+  if (resolvedOptions.debug || process.env.DEBUG?.includes("vite-plugin-shopify")) {
+    enableDebug();
+  }
   return [
     shopifyConfig(resolvedOptions),
     shopifyEntries(resolvedOptions),