@shopify/hydrogen 1.1.0 → 1.2.0

package/dist/esnext/utilities/log/log-cache-header.d.ts

@@ -1,7 +1,7 @@
-import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
-import { HydrogenResponse } from '../../foundation/HydrogenResponse/HydrogenResponse.server';
-import { QueryKey } from '../../types';
-import type { RenderType } from './log';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server.js';
+import { HydrogenResponse } from '../../foundation/HydrogenResponse/HydrogenResponse.server.js';
+import { QueryKey } from '../../types.js';
+import { type RenderType } from './log.js';
 export declare type QueryCacheControlHeaders = {
     name: string;
     header: string | null;

package/dist/esnext/utilities/log/log-cache-header.js

@@ -1,7 +1,7 @@
-import { hashKey } from '../hash';
-import { findQueryName, parseUrl } from './utils';
+import { hashKey } from '../hash.js';
+import { findQueryName, parseUrl } from './utils.js';
 import { gray } from 'kolorist';
-import { getLoggerWithContext } from './log';
+import { getLoggerWithContext } from './log.js';
 const color = gray;
 export function collectQueryCacheControlHeaders(request, queryKey, cacheControlHeader) {
     request.ctx.queryCacheControl.push({

package/dist/esnext/utilities/log/log-query-timeline.d.ts

@@ -1,6 +1,6 @@
-import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
-import { QueryKey } from '../../types';
-import type { RenderType } from './log';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server.js';
+import { QueryKey } from '../../types.js';
+import { type RenderType } from './log.js';
 export declare type TimingType = 'requested' | 'resolved' | 'rendered' | 'preload';
 export declare type QueryTiming = {
     name: string;

package/dist/esnext/utilities/log/log-query-timeline.js

@@ -1,8 +1,8 @@
-import { hashKey } from '../hash';
-import { findQueryName, parseUrl } from './utils';
+import { hashKey } from '../hash.js';
+import { findQueryName, parseUrl } from './utils.js';
 import { gray, red, yellow, green } from 'kolorist';
-import { getLoggerWithContext } from './log';
-import { getTime } from '../timing';
+import { getLoggerWithContext } from './log.js';
+import { getTime } from '../timing.js';
 const color = gray;
 const TIMING_MAPPING = {
     requested: 'Requested',
@@ -11,12 +11,15 @@ const TIMING_MAPPING = {
     preload: 'Preload',
 };
 export function collectQueryTimings(request, queryKey, timingType, duration) {
-    request.ctx.queryTimings.push({
-        name: findQueryName(hashKey(queryKey)),
-        timingType,
-        timestamp: getTime(),
-        duration,
-    });
+    const hashedKey = hashKey(queryKey);
+    if (hashedKey !== 'hydrogen-shopify-config') {
+        request.ctx.queryTimings.push({
+            name: findQueryName(hashedKey),
+            timingType,
+            timestamp: getTime(),
+            duration,
+        });
+    }
 }
 export function logQueryTimings(type, request) {
     const log = getLoggerWithContext(request);

package/dist/esnext/utilities/log/log.d.ts

@@ -1,4 +1,4 @@
-import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server';
+import { HydrogenRequest } from '../../foundation/HydrogenRequest/HydrogenRequest.server.js';
 /** The `log` utility is a function that's used for logging debugging, warning, and error information about the application.
  * Use this utility by importing `log` from `@shopify/hydrogen`, or by using a `log` prop passed to each page
  * component. We recommend using the `log` prop passed to each page because it will associated your log to the

package/dist/esnext/utilities/log/log.js

@@ -1,6 +1,6 @@
 import { yellow, red, green, italic, lightBlue } from 'kolorist';
-import { getTime } from '../timing';
-import { parseUrl } from './utils';
+import { getTime } from '../timing.js';
+import { parseUrl } from './utils.js';
 const defaultLogger = {
     trace(context, ...args) {
         // Re-enable following line to show trace debugging information

package/dist/esnext/utilities/log/utils.d.ts

@@ -1,3 +1,3 @@
-import type { RenderType } from './log';
+import type { RenderType } from './log.js';
 export declare function findQueryName(key: string): string;
 export declare function parseUrl(type: RenderType, url: string): string;

package/dist/esnext/utilities/measurement.d.ts

@@ -1,3 +1,3 @@
-import { Measurement } from '../types';
+import { Measurement } from '../types.js';
 export declare function getMeasurementAsString(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): string;
 export declare function getMeasurementAsParts(measurement: Measurement, locale?: string, options?: Intl.NumberFormatOptions): Intl.NumberFormatPart[];

package/dist/esnext/utilities/parseMetafield/index.d.ts

@@ -1 +1 @@
-export { parseMetafield, parseMetafieldValue } from './parseMetafield';
+export { parseMetafield, parseMetafieldValue } from './parseMetafield.js';

package/dist/esnext/utilities/parseMetafield/index.js

@@ -1 +1 @@
-export { parseMetafield, parseMetafieldValue } from './parseMetafield';
+export { parseMetafield, parseMetafieldValue } from './parseMetafield.js';

package/dist/esnext/utilities/parseMetafield/parseMetafield.d.ts

@@ -1,5 +1,5 @@
-import type { Metafield } from '../../storefront-api-types';
-import type { ParsedMetafield } from '../../types';
+import type { Metafield } from '../../storefront-api-types.js';
+import type { ParsedMetafield } from '../../types.js';
 import type { PartialDeep } from 'type-fest';
 /**
  * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)

package/dist/esnext/utilities/parseMetafield/parseMetafield.js

@@ -1,4 +1,4 @@
-import { parseJSON } from '../parse';
+import { parseJSON } from '../parse.js';
 /**
  * The `parseMetafield` utility transforms a [Metafield](https://shopify.dev/api/storefront/reference/common-objects/Metafield)
  * into a new object whose `values` have been parsed according to the metafield `type`.

package/dist/esnext/utilities/storefrontApi.js

@@ -1,5 +1,5 @@
 /* global Oxygen */
-import { OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE, STOREFRONT_API_SECRET_TOKEN_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, STOREFRONT_API_BUYER_IP_HEADER, SHOPIFY_STOREFRONT_ID_VARIABLE, SHOPIFY_STOREFRONT_ID_HEADER, } from '../constants';
+import { OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE, STOREFRONT_API_SECRET_TOKEN_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, STOREFRONT_API_BUYER_IP_HEADER, SHOPIFY_STOREFRONT_ID_VARIABLE, SHOPIFY_STOREFRONT_ID_HEADER, } from '../constants.js';
 export function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
     const headers = {};
     const secretToken = getOxygenVariable(OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE);

package/dist/esnext/utilities/suspense.d.ts

@@ -1,4 +1,4 @@
-import { QueryKey } from '../types';
+import { QueryKey } from '../types.js';
 /**
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.

package/dist/esnext/utilities/suspense.js

@@ -1,4 +1,4 @@
-import { hashKey } from './hash';
+import { hashKey } from './hash.js';
 /**
  * Wrap the fetch promise in a way that React Suspense understands.
  * Essentially, keep throwing something until you have legit data.

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.0";
+export declare const LIB_VERSION = "1.2.0";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.1.0';
+export const LIB_VERSION = '1.2.0';

package/dist/node/foundation/session/session-types.d.ts

@@ -0,0 +1,13 @@
+export declare type SessionSyncApi = {
+    get: () => Record<string, string>;
+};
+export declare type SessionApi = {
+    get: () => Promise<Record<string, string>>;
+    set: (key: string, value: string) => Promise<void>;
+    destroy: () => Promise<void>;
+};
+export declare type SessionStorageAdapter = {
+    get: (request: Request) => Promise<Record<string, string>>;
+    set: (request: Request, value: Record<string, string>) => Promise<string>;
+    destroy: (request: Request) => Promise<string>;
+};

package/dist/node/foundation/session/session-types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/node/framework/load-config.js

@@ -2,10 +2,10 @@
 // Provide Hydrogen config loader to external tools like the CLI
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadConfig = void 0;
-const vite_plugin_hydrogen_virtual_files_1 = require("./plugins/vite-plugin-hydrogen-virtual-files");
-const viteception_1 = require("./viteception");
+const vite_plugin_hydrogen_virtual_files_js_1 = require("./plugins/vite-plugin-hydrogen-virtual-files.js");
+const viteception_js_1 = require("./viteception.js");
 async function loadConfig(options = { root: process.cwd() }) {
-    const { loaded } = await (0, viteception_1.viteception)([vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
+    const { loaded } = await (0, viteception_js_1.viteception)([vite_plugin_hydrogen_virtual_files_js_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID], options);
     return { configuration: loaded[0].default };
 }
 exports.loadConfig = loadConfig;

package/dist/node/framework/middleware.d.ts

@@ -1,4 +1,4 @@
-import type { ShopifyConfig } from '../shared-types';
+import type { ShopifyConfig } from '../shared-types.js';
 import type { IncomingMessage, NextFunction } from 'connect';
 import type { ServerResponse } from 'http';
 import type { ViteDevServer } from 'vite';

package/dist/node/framework/middleware.js

@@ -24,7 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hydrogenMiddleware = exports.graphiqlMiddleware = void 0;
-const graphiql_1 = require("./graphiql");
+const graphiql_js_1 = require("./graphiql.js");
 function graphiqlMiddleware({ getShopifyConfig, dev, }) {
     return async function (request, response, next) {
         if (dev && isGraphiqlRequest(request)) {
@@ -51,7 +51,7 @@ function hydrogenMiddleware({ dev, cache, indexTemplate, getServerEntrypoint, de
      * which is needed for proxy requests and server-side API requests.
      */
     const webPolyfills = !globalThis.fetch || !globalThis.ReadableStream
-        ? Promise.resolve().then(() => __importStar(require('../utilities/web-api-polyfill'))) : undefined;
+        ? Promise.resolve().then(() => __importStar(require('../utilities/web-api-polyfill.js'))) : undefined;
     return async function (request, response, next) {
         try {
             await webPolyfills;
@@ -120,5 +120,5 @@ async function respondWithGraphiql(response, shopifyConfig) {
     }
     const { storeDomain, storefrontToken, storefrontApiVersion } = shopifyConfig;
     response.setHeader('Content-Type', 'text/html');
-    response.end((0, graphiql_1.graphiqlHtml)(storeDomain?.replace(/^https?:\/\//, ''), storefrontToken, storefrontApiVersion));
+    response.end((0, graphiql_js_1.graphiqlHtml)(storeDomain?.replace(/^https?:\/\//, ''), storefrontToken, storefrontApiVersion));
 }

package/dist/node/framework/plugin.d.ts

@@ -1,4 +1,4 @@
-import type { HydrogenVitePluginOptions } from './types';
+import type { HydrogenVitePluginOptions } from './types.js';
 import type { Plugin } from 'vite';
 declare const hydrogenPlugin: (pluginOptions?: HydrogenVitePluginOptions) => Plugin[];
 export = hydrogenPlugin;

package/dist/node/framework/plugin.js

@@ -2,36 +2,37 @@
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-const vite_plugin_hydrogen_config_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-config"));
-const vite_plugin_hydrogen_middleware_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-middleware"));
-const vite_plugin_hydrogen_client_middleware_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-client-middleware"));
-const vite_plugin_hydrogen_virtual_files_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-virtual-files"));
-const vite_plugin_platform_entry_1 = __importDefault(require("./plugins/vite-plugin-platform-entry"));
-const vite_plugin_hydrogen_rsc_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-rsc"));
-const vite_plugin_ssr_interop_1 = __importDefault(require("./plugins/vite-plugin-ssr-interop"));
-const vite_plugin_purge_query_cache_1 = __importDefault(require("./plugins/vite-plugin-purge-query-cache"));
-const vite_plugin_hydration_auto_import_1 = __importDefault(require("./plugins/vite-plugin-hydration-auto-import"));
+const vite_plugin_hydrogen_config_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-config.js"));
+const vite_plugin_hydrogen_middleware_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-middleware.js"));
+const vite_plugin_hydrogen_client_middleware_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-client-middleware.js"));
+const vite_plugin_hydrogen_virtual_files_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-virtual-files.js"));
+const vite_plugin_platform_entry_js_1 = __importDefault(require("./plugins/vite-plugin-platform-entry.js"));
+const vite_plugin_hydrogen_rsc_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-rsc.js"));
+const vite_plugin_ssr_interop_js_1 = __importDefault(require("./plugins/vite-plugin-ssr-interop.js"));
+const vite_plugin_purge_query_cache_js_1 = __importDefault(require("./plugins/vite-plugin-purge-query-cache.js"));
+const vite_plugin_hydration_auto_import_js_1 = __importDefault(require("./plugins/vite-plugin-hydration-auto-import.js"));
 const vite_plugin_inspect_1 = __importDefault(require("vite-plugin-inspect"));
 const plugin_react_1 = __importDefault(require("@vitejs/plugin-react"));
-const vite_plugin_css_modules_rsc_1 = __importDefault(require("./plugins/vite-plugin-css-modules-rsc"));
-const vite_plugin_client_imports_1 = __importDefault(require("./plugins/vite-plugin-client-imports"));
-const vite_plugin_hydrogen_suppress_warnings_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-suppress-warnings"));
+const vite_plugin_css_rsc_js_1 = __importDefault(require("./plugins/vite-plugin-css-rsc.js"));
+const vite_plugin_css_modules_rsc_js_1 = __importDefault(require("./plugins/vite-plugin-css-modules-rsc.js"));
+const vite_plugin_client_imports_js_1 = __importDefault(require("./plugins/vite-plugin-client-imports.js"));
+const vite_plugin_hydrogen_suppress_warnings_js_1 = __importDefault(require("./plugins/vite-plugin-hydrogen-suppress-warnings.js"));
 const hydrogenPlugin = (pluginOptions = {}) => {
     return [
         process.env.VITE_INSPECT && (0, vite_plugin_inspect_1.default)(),
-        (0, vite_plugin_hydrogen_config_1.default)(),
-        (0, vite_plugin_hydrogen_client_middleware_1.default)(),
-        (0, vite_plugin_client_imports_1.default)(),
-        (0, vite_plugin_hydrogen_middleware_1.default)(pluginOptions),
-        (0, vite_plugin_hydrogen_virtual_files_1.default)(pluginOptions),
+        (0, vite_plugin_hydrogen_config_js_1.default)(),
+        (0, vite_plugin_hydrogen_client_middleware_js_1.default)(),
+        (0, vite_plugin_client_imports_js_1.default)(),
+        (0, vite_plugin_hydrogen_middleware_js_1.default)(pluginOptions),
+        (0, vite_plugin_hydrogen_virtual_files_js_1.default)(pluginOptions),
         (0, plugin_react_1.default)(),
-        (0, vite_plugin_hydration_auto_import_1.default)(),
-        (0, vite_plugin_ssr_interop_1.default)(),
-        (0, vite_plugin_css_modules_rsc_1.default)(),
-        (0, vite_plugin_hydrogen_rsc_1.default)(pluginOptions),
-        (0, vite_plugin_platform_entry_1.default)(),
-        (0, vite_plugin_hydrogen_suppress_warnings_1.default)(),
-        pluginOptions.purgeQueryCacheOnBuild && (0, vite_plugin_purge_query_cache_1.default)(),
+        (0, vite_plugin_hydration_auto_import_js_1.default)(),
+        (0, vite_plugin_ssr_interop_js_1.default)(),
+        pluginOptions.experimental?.css === 'global' ? (0, vite_plugin_css_rsc_js_1.default)() : (0, vite_plugin_css_modules_rsc_js_1.default)(),
+        (0, vite_plugin_hydrogen_rsc_js_1.default)(pluginOptions),
+        (0, vite_plugin_platform_entry_js_1.default)(),
+        (0, vite_plugin_hydrogen_suppress_warnings_js_1.default)(),
+        pluginOptions.purgeQueryCacheOnBuild && (0, vite_plugin_purge_query_cache_js_1.default)(),
     ];
 };
 exports.default = hydrogenPlugin; // For ESM

package/dist/node/framework/plugins/vite-plugin-css-modules-rsc.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const vite_plugin_hydrogen_middleware_js_1 = require("./vite-plugin-hydrogen-middleware.js");
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = __importDefault(require("path"));
 const cssModuleRE = /\.module\.(s?css|sass|less|stylus)/;
@@ -60,9 +60,9 @@ function autoStyleTagPlugin() {
         transform(code, id) {
             id = id.split('?')[0];
             if (/\.[jt]sx$/.test(id) &&
-                !id.endsWith(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY) &&
+                !id.endsWith(vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY) &&
                 !id.endsWith(path_1.default.format({
-                    name: vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+                    name: vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
                     ext: path_1.default.extname(id),
                 })) &&
                 cssModuleRE.test(code) &&

package/dist/node/framework/plugins/vite-plugin-css-rsc.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export default function cssRsc(): Plugin;

package/dist/node/framework/plugins/vite-plugin-css-rsc.js

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const magic_string_1 = __importDefault(require("magic-string"));
+const vite_1 = require("vite");
+const VITE_CSS_CHUNK_NAME = 'style.css';
+const INJECT_STYLES_COMMENT = '<!--__INJECT_STYLES__-->';
+// Keep this in the outer scope to share it
+// across client <> server builds.
+let clientBuildPath;
+function cssRsc() {
+    let config;
+    return {
+        name: 'hydrogen:css-rsc',
+        enforce: 'post',
+        config() {
+            // Disable CSS code split to avoid preloading styles
+            // that are already included in index.html
+            return { build: { cssCodeSplit: false } };
+        },
+        configResolved(_config) {
+            config = _config;
+        },
+        transform(code, id, options) {
+            if (options?.ssr && id.includes('index.html?raw')) {
+                // Mark the client build index.html to inject styles later
+                const s = new magic_string_1.default(code);
+                s.replace('</head>', INJECT_STYLES_COMMENT + '</head>');
+                return {
+                    code: s.toString(),
+                    map: s.generateMap({ file: id, source: id }),
+                };
+            }
+        },
+        transformIndexHtml(html, { server }) {
+            // Add discovered styles during dev
+            if (server) {
+                const tags = [];
+                const foundCssFiles = new Set();
+                const { browserHash = '' } = server._optimizedDeps?.metadata || {};
+                for (const [key, value] of server.moduleGraph.idToModuleMap.entries()) {
+                    if (
+                    // Note: Some CSS-in-JS libraries use `.css.js`
+                    // extension and we should match it here:
+                    /\.(css|sass|scss|stylus|less)(\.|\?|$)/.test((0, vite_1.normalizePath)(key).split('/').pop())) {
+                        let { url, file, lastHMRTimestamp, importers } = value;
+                        if (!foundCssFiles.has(file) &&
+                            !Array.from(importers).some((importer) => foundCssFiles.has(importer.file))) {
+                            foundCssFiles.add(file);
+                            // Vite is adding hash and timestamp to the CSS files downloaded
+                            // from client components. Adding the same query string params
+                            // here prevents this file from being downloaded twice.
+                            if (lastHMRTimestamp) {
+                                const timestampQuery = `?t=${lastHMRTimestamp}`;
+                                // The timestamp needs to be the first query string param.
+                                url = url.includes('?')
+                                    ? url.replace('?', timestampQuery + '&')
+                                    : url + timestampQuery;
+                            }
+                            if (browserHash && !url.includes('v=')) {
+                                // Append the hash at the end
+                                url += (url.includes('?') ? '&' : '?') + `v=${browserHash}`;
+                            }
+                            tags.push(value.type === 'css'
+                                ? { tag: 'link', attrs: { rel: 'stylesheet', href: url } }
+                                : { tag: 'script', attrs: { type: 'module', src: url } });
+                        }
+                    }
+                }
+                return tags;
+            }
+        },
+        generateBundle(options, bundle, isWrite) {
+            if (config.build?.ssr) {
+                // -- Server build
+                if (!clientBuildPath) {
+                    // Default value
+                    clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client'));
+                }
+                const relativeClientPath = (0, vite_1.normalizePath)(path_1.default.relative((0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir)), clientBuildPath));
+                let cssAssetFileName = '';
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                const outputChunk = Object.values(bundle).find((file) => file.type === 'chunk' && file.isEntry);
+                if (cssAsset) {
+                    cssAssetFileName = cssAsset.fileName;
+                    // Move the CSS file to the client build assets
+                    cssAsset.fileName = (0, vite_1.normalizePath)(path_1.default.join(relativeClientPath, cssAsset.fileName));
+                }
+                let assetPrefix = process.env.HYDROGEN_ASSET_BASE_URL || '/';
+                if (!assetPrefix.endsWith('/'))
+                    assetPrefix += '/';
+                // Add a reference to the CSS file in indexTemplate
+                outputChunk.code = outputChunk.code.replace(INJECT_STYLES_COMMENT, cssAssetFileName &&
+                    `<link rel="stylesheet" href="${assetPrefix + cssAssetFileName}">`);
+            }
+            else {
+                // -- Client build
+                // Save outDir from client build in the outer scope
+                // to read it during the server build. The CLI runs Vite in
+                // the same process so the scope is shared across builds.
+                clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir));
+                const indexHtml = bundle['index.html'];
+                const cssAsset = Object.values(bundle).find((file) => file.type === 'asset' && file.name === VITE_CSS_CHUNK_NAME);
+                if (cssAsset) {
+                    // The client build CSS is incomplete because it only includes
+                    // CSS imported in client components (server components are not
+                    // discovered in this build). Remove it from this build and
+                    // let it be added by the server build after this.
+                    delete bundle[cssAsset.fileName];
+                    indexHtml.source = indexHtml.source.replace(new RegExp(`\\s*<link[^<>]+${cssAsset.fileName.replace('.', '\\.')}.*?>`, ''), '');
+                }
+            }
+        },
+    };
+}
+exports.default = cssRsc;

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 declare const _default: (pluginOptions: HydrogenVitePluginOptions) => Plugin;
 export default _default;

package/dist/node/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -8,9 +8,9 @@ const vite_1 = require("vite");
 const body_parser_1 = __importDefault(require("body-parser"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
-const middleware_1 = require("../middleware");
-const in_memory_1 = require("../cache/in-memory");
-const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+const middleware_js_1 = require("../middleware.js");
+const in_memory_js_1 = require("../cache/in-memory.js");
+const vite_plugin_hydrogen_virtual_files_js_1 = require("./vite-plugin-hydrogen-virtual-files.js");
 exports.HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 exports.default = (pluginOptions) => {
     return {
@@ -30,10 +30,10 @@ exports.default = (pluginOptions) => {
             await polyfillOxygenEnv(server.config);
             // The default vite middleware rewrites the URL `/graphqil` to `/index.html`
             // By running this middleware first, we avoid that.
-            server.middlewares.use((0, middleware_1.graphiqlMiddleware)({
+            server.middlewares.use((0, middleware_js_1.graphiqlMiddleware)({
                 dev: true,
                 getShopifyConfig: async (incomingMessage) => {
-                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
+                    const { default: hydrogenConfig } = await server.ssrLoadModule(vite_plugin_hydrogen_virtual_files_js_1.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
                     // @ts-ignore
                     const { address = 'localhost', port = '3000' } = server.httpServer?.address() || {};
                     const url = new URL(`http://${address}:${port}${incomingMessage.url}`);
@@ -48,13 +48,13 @@ exports.default = (pluginOptions) => {
                 },
             }));
             server.middlewares.use(body_parser_1.default.raw({ type: '*/*' }));
-            return () => server.middlewares.use((0, middleware_1.hydrogenMiddleware)({
+            return () => server.middlewares.use((0, middleware_js_1.hydrogenMiddleware)({
                 dev: true,
                 indexTemplate: getIndexTemplate,
                 getServerEntrypoint: () => server.ssrLoadModule(exports.HYDROGEN_DEFAULT_SERVER_ENTRY),
                 devServer: server,
                 cache: pluginOptions?.devCache
-                    ? new in_memory_1.InMemoryCache()
+                    ? new in_memory_js_1.InMemoryCache()
                     : undefined,
             }));
         },

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.d.ts

@@ -1,2 +1,2 @@
-import { HydrogenVitePluginOptions } from '../types';
+import { HydrogenVitePluginOptions } from '../types.js';
 export default function (options?: HydrogenVitePluginOptions): any;

package/dist/node/framework/plugins/vite-plugin-hydrogen-rsc.js

@@ -5,19 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 // @ts-ignore
 const plugin_js_1 = __importDefault(require("@shopify/hydrogen/vendor/react-server-dom-vite/plugin.js"));
-const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
-const vite_plugin_hydrogen_virtual_files_1 = require("./vite-plugin-hydrogen-virtual-files");
+const vite_plugin_hydrogen_middleware_js_1 = require("./vite-plugin-hydrogen-middleware.js");
+const vite_plugin_hydrogen_virtual_files_js_1 = require("./vite-plugin-hydrogen-virtual-files.js");
 function default_1(options) {
     return (0, plugin_js_1.default)({
         serverBuildEntries: [
-            vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
-            vite_plugin_hydrogen_virtual_files_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
+            vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY,
+            vite_plugin_hydrogen_virtual_files_js_1.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
         ],
         isServerComponentImporterAllowed(importer, source) {
             return (
             // Always allow the entry server (e.g. App.server.jsx) to be imported
             // in other files such as worker.js or server.js.
-            source.includes(vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
+            source.includes(vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY) ||
                 /(index|entry-server|hydrogen\.config)\.[jt]s/.test(importer) ||
                 // Support importing server components for testing
                 // TODO: revisit this when RSC splits into two bundles

package/dist/node/framework/plugins/vite-plugin-hydrogen-virtual-files.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vite';
-import type { HydrogenVitePluginOptions } from '../types';
+import type { HydrogenVitePluginOptions } from '../types.js';
 export declare const HYDROGEN_DEFAULT_SERVER_ENTRY: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_CONFIG_ID: string;
 export declare const VIRTUAL_PROXY_HYDROGEN_ROUTES_ID: string;

package/dist/node/framework/plugins/vite-plugin-hydrogen-virtual-files.js

@@ -7,11 +7,13 @@ exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID = exports.VIRTUAL_PROXY_HYDROGEN_CONFIG
 const vite_1 = require("vite");
 const path_1 = __importDefault(require("path"));
 const fs_1 = require("fs");
-const viteception_1 = require("../viteception");
+const viteception_js_1 = require("../viteception.js");
 exports.HYDROGEN_DEFAULT_SERVER_ENTRY = process.env.HYDROGEN_SERVER_ENTRY || '/src/App.server';
 // The character ":" breaks Vite with Node >= 16.15. Use "_" instead
 const VIRTUAL_PREFIX = 'virtual__';
 const PROXY_PREFIX = 'proxy__';
+const ERROR_FILE = 'error.jsx';
+const VIRTUAL_ERROR_FILE = VIRTUAL_PREFIX + ERROR_FILE;
 const HYDROGEN_CONFIG_ID = 'hydrogen.config.ts';
 const VIRTUAL_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + HYDROGEN_CONFIG_ID;
 exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID = VIRTUAL_PREFIX + PROXY_PREFIX + HYDROGEN_CONFIG_ID;
@@ -40,6 +42,7 @@ exports.default = (pluginOptions) => {
                 exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID,
                 exports.VIRTUAL_PROXY_HYDROGEN_ROUTES_ID,
                 VIRTUAL_HYDROGEN_ROUTES_ID,
+                VIRTUAL_ERROR_FILE,
             ].includes(source)) {
                 // Virtual modules convention
                 // https://vitejs.dev/guide/api-plugin.html#virtual-modules-convention
@@ -77,6 +80,13 @@ exports.default = (pluginOptions) => {
                     return { code };
                 });
             }
+            if (id === '\0' + VIRTUAL_ERROR_FILE) {
+                return importHydrogenConfig().then((hc) => {
+                    const errorPath = hc.serverErrorPage ?? '/src/Error.{jsx,tsx}';
+                    const code = `const errorPage = import.meta.glob("${errorPath}");\n export default Object.values(errorPage)[0];`;
+                    return { code };
+                });
+            }
         },
     };
     async function importHydrogenConfig() {
@@ -84,7 +94,7 @@ exports.default = (pluginOptions) => {
             const loaded = await server.ssrLoadModule(exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID);
             return loaded.default;
         }
-        const { loaded } = await (0, viteception_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
+        const { loaded } = await (0, viteception_js_1.viteception)([exports.VIRTUAL_PROXY_HYDROGEN_CONFIG_ID]);
         return loaded[0].default;
     }
 };

package/dist/node/framework/plugins/vite-plugin-platform-entry.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const vite_1 = require("vite");
-const vite_plugin_hydrogen_middleware_1 = require("./vite-plugin-hydrogen-middleware");
+const vite_plugin_hydrogen_middleware_js_1 = require("./vite-plugin-hydrogen-middleware.js");
 const magic_string_1 = __importDefault(require("magic-string"));
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
@@ -43,7 +43,7 @@ exports.default = () => {
                 options?.ssr &&
                 /@shopify\/hydrogen\/.+platforms\/virtual\./.test((0, vite_1.normalizePath)(id))) {
                 const ms = new magic_string_1.default(code);
-                ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
+                ms.replace('__HYDROGEN_ENTRY__', vite_plugin_hydrogen_middleware_js_1.HYDROGEN_DEFAULT_SERVER_ENTRY);
                 if (!clientBuildPath) {
                     // Default value
                     clientBuildPath = (0, vite_1.normalizePath)(path_1.default.resolve(config.root, config.build.outDir, '..', 'client'));

package/dist/node/framework/types.d.ts

@@ -3,4 +3,17 @@ export interface HydrogenVitePluginOptions {
     purgeQueryCacheOnBuild?: boolean;
     configPath?: string;
     optimizeBoundaries?: boolean | 'build';
+    /**
+     * Experimental features
+     */
+    experimental?: {
+        /**
+         * CSS compatibility with React Server Components.
+         * - `global` inlines all the styles in the DOM and works for all types of CSS.
+         * - `modules-only` inlines the styles in RSC responses and only works for CSS Modules.
+         * @defaultValue `modules-only`
+         * @experimental
+         */
+        css: 'global' | 'modules-only';
+    };
 }