Locations must be relative to manifest

scripts/build-plugins/rollup-plugin-build-themes.js

@@ -251,6 +251,8 @@ module.exports = function buildThemes(options) {
             // types of AssetInfo and ChunkInfo can be found at https://rollupjs.org/guide/en/#generatebundle
             const { assetMap, chunkMap, runtimeThemeChunkMap } = parseBundle(bundle);
             const manifestLocations = [];
+            // Location of the directory containing manifest relative to the root of the build output
+            const manifestLocation = "assets";
             for (const [location, chunkArray] of chunkMap) {
                 const manifest = require(`${location}/manifest.json`);
                 const compiledVariables = options.compiledVariables.get(location);
@@ -261,17 +263,20 @@ module.exports = function buildThemes(options) {
                 for (const chunk of chunkArray) {
                     const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
                     themeKey = name;
-                    builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName;
+                    const locationRelativeToBuildRoot = assetMap.get(chunk.fileName).fileName;
+                    const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
+                    builtAssets[`${name}-${variant}`] = locationRelativeToManifest;
                 }
                 const runtimeThemeChunk = runtimeThemeChunkMap.get(location);
+                const runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName); 
                 manifest.source = {
                     "built-assets": builtAssets,
-                    "runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
+                    "runtime-asset": runtimeAssetLocation,
                     "derived-variables": derivedVariables,
                     "icon": icon
                 };
                 const name = `theme-${themeKey}.json`;
-                manifestLocations.push(`assets/${name}`);
+                manifestLocations.push(`${manifestLocation}/${name}`);
                 this.emitFile({
                     type: "asset",
                     name,

src/platform/web/Platform.js

@@ -338,7 +338,7 @@ export class Platform {
         document.querySelectorAll(".theme").forEach(e => e.remove());
         // add new theme
         const styleTag = document.createElement("link");
-        styleTag.href = `./${newPath}`;
+        styleTag.href = newPath;
         styleTag.rel = "stylesheet";
         styleTag.type = "text/css";
         styleTag.className = "theme";

src/platform/web/ThemeLoader.ts

@@ -61,11 +61,11 @@ export class ThemeLoader {
             const results = await Promise.all(
                 manifestLocations.map( location => this._platform.request(location, { method: "GET", format: "json", cache: true, }).response())
             );
-            results.forEach(({ body }) => this._populateThemeMap(body, log));
+            results.forEach(({ body }, i) => this._populateThemeMap(body, manifestLocations[i], log));
         });
     }
 
-    private _populateThemeMap(manifest, log: ILogItem) {
+    private _populateThemeMap(manifest, manifestLocation: string, log: ILogItem) {
         log.wrap("populateThemeMap", (l) => {
             /*
             After build has finished, the source section of each theme manifest
@@ -75,7 +75,12 @@ export class ThemeLoader {
             const builtAssets: Record<string, string> = manifest.source?.["built-assets"];
             const themeName = manifest.name;
             let defaultDarkVariant: any = {}, defaultLightVariant: any = {};
-            for (const [themeId, cssLocation] of Object.entries(builtAssets)) {
+            for (let [themeId, cssLocation] of Object.entries(builtAssets)) {
+                /**
+                 * This cssLocation is relative to the location of the manifest file.
+                 * So we first need to resolve it relative to the root of this hydrogen instance.
+                 */
+                cssLocation = new URL(cssLocation, new URL(manifestLocation, window.location.origin)).href;
                 const variant = themeId.match(/.+-(.+)/)?.[1];
                 const { name: variantName, default: isDefault, dark } = manifest.values.variants[variant!];
                 const themeDisplayName = `${themeName} ${variantName}`;