@shopify/cli-hydrogen 8.1.0 → 8.2.0

package/dist/lib/file.js

@@ -6,8 +6,7 @@ import { formatCode } from './format-code.js';
 
 async function replaceFileContent(filepath, formatConfig, replacer) {
   let content = await replacer(await readFile(filepath));
-  if (typeof content !== "string")
-    return;
+  if (typeof content !== "string") return;
   if (formatConfig) {
     content = await formatCode(content, formatConfig, filepath);
   }
@@ -62,8 +61,7 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     (key) => !MANAGED_PACKAGE_JSON_KEYS.includes(key)
   );
   for (const key of unmanagedKeys) {
-    if (ignoredKeys.has(key))
-      continue;
+    if (ignoredKeys.has(key)) continue;
     const sourceValue = sourcePkgJson[key];
     const targetValue = targetPkgJson[key];
     const newValue = Array.isArray(sourceValue) && Array.isArray(targetValue) ? [...targetValue, ...sourceValue] : typeof sourceValue === "object" && typeof targetValue === "object" ? { ...targetValue, ...sourceValue } : sourceValue;
@@ -73,8 +71,7 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     ([dep]) => dep.startsWith("@remix-run/")
   )?.[1];
   for (const key of MANAGED_PACKAGE_JSON_KEYS) {
-    if (ignoredKeys.has(key))
-      continue;
+    if (ignoredKeys.has(key)) continue;
     if (sourcePkgJson[key]) {
       targetPkgJson[key] = [
         .../* @__PURE__ */ new Set([
@@ -96,5 +93,16 @@ async function mergePackageJson(sourceDir, targetDir, options) {
     options?.onResult?.(targetPkgJson) ?? targetPkgJson
   );
 }
+async function mergeTsConfig(sourceDir, targetDir) {
+  const sourceTsConfig = await readFile(joinPath(sourceDir, "tsconfig.json"));
+  const sourceTsTypes = sourceTsConfig.match(/"types": \[(.*?)\]/)?.[1];
+  if (sourceTsTypes) {
+    replaceFileContent(
+      joinPath(targetDir, "tsconfig.json"),
+      false,
+      (content) => content.replace(/"types":\s*\[[^\]]*\]/, `"types": [${sourceTsTypes}]`)
+    );
+  }
+}
 
-export { findFileWithExtension, mergePackageJson, replaceFileContent };
+export { findFileWithExtension, mergePackageJson, mergeTsConfig, replaceFileContent };

package/dist/lib/flags.js

@@ -3,6 +3,7 @@ import { camelize } from '@shopify/cli-kit/common/string';
 import { renderInfo } from '@shopify/cli-kit/node/ui';
 import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
 import colors from '@shopify/cli-kit/node/colors';
+import { STYLING_CHOICES } from './setups/css/index.js';
 import { I18N_CHOICES } from './setups/i18n/index.js';
 
 const DEFAULT_APP_PORT = 3e3;
@@ -86,6 +87,15 @@ const commonFlags = {
       dependsOn: ["codegen"]
     })
   },
+  styling: {
+    styling: Flags.string({
+      description: `Sets the styling strategy to use. One of ${STYLING_CHOICES.map(
+        (item) => `\`${item}\``
+      ).join(", ")}.`,
+      choices: STYLING_CHOICES,
+      env: "SHOPIFY_HYDROGEN_FLAG_STYLING"
+    })
+  },
   markets: {
     markets: Flags.string({
       description: `Sets the URL structure to support multiple markets. Must be one of: ${I18N_CHOICES.map(

package/dist/lib/get-oxygen-deployment-data.js

@@ -18,8 +18,7 @@ async function getOxygenDeploymentData({
     config,
     cliCommand
   });
-  if (!linkedStorefront)
-    return;
+  if (!linkedStorefront) return;
   config.storefront = linkedStorefront;
   const { storefront } = await getOxygenData(session, config.storefront.id);
   if (!storefront) {

package/dist/lib/graphiql-url.js

@@ -5,8 +5,7 @@ function getGraphiQLUrl({
   let url = `${host.endsWith("/") ? host.slice(0, -1) : host}/graphiql`;
   if (graphql) {
     let { query, variables } = graphql;
-    if (typeof variables !== "string")
-      variables = JSON.stringify(variables);
+    if (typeof variables !== "string") variables = JSON.stringify(variables);
     url += `?query=${encodeURIComponent(query)}${variables ? `&variables=${encodeURIComponent(variables)}` : ""}`;
     if (graphql.schema) {
       url += `&schema=${graphql.schema}`;

package/dist/lib/import-utils.js

@@ -1,4 +1,5 @@
 import { createRequire } from 'node:module';
+import { pathToFileURL } from 'node:url';
 import { findUpAndReadPackageJson } from '@shopify/cli-kit/node/node-package-manager';
 import { joinPath, dirname } from '@shopify/cli-kit/node/path';
 
@@ -11,11 +12,11 @@ async function importVite(root) {
     dirname(vitePackageJson.path),
     viteNodeIndexFile
   );
-  return import(viteNodePath);
+  return import(pathToFileURL(viteNodePath).href);
 }
 function importLocal(packageName, path) {
   const realPath = require2.resolve(packageName, { paths: [path] });
-  return import(realPath);
+  return import(pathToFileURL(realPath).href);
 }
 
 export { importLocal, importVite };

package/dist/lib/log.js

@@ -25,8 +25,7 @@ function debounceMessage(args, debounceFor) {
     const message = item?.message ?? item;
     return typeof message === "string" ? message : "";
   }).filter(Boolean).join("");
-  if (printedMessages.has(key))
-    return true;
+  if (printedMessages.has(key)) return true;
   printedMessages.add(key);
   if (debounceFor !== true) {
     setTimeout(() => printedMessages.delete(key), debounceFor ?? 1e3);
@@ -47,18 +46,15 @@ function injectLogReplacer(method, debouncer) {
         return;
       }
       const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher(args, acc.length))
-          acc.push(replacer);
+        if (matcher(args, acc.length)) acc.push(replacer);
         return acc;
       }, []);
-      if (replacers.length === 0)
-        return originalConsole[method](...args);
+      if (replacers.length === 0) return originalConsole[method](...args);
       const result = replacers.reduce(
         (resultArgs, replacer) => resultArgs && replacer(resultArgs),
         args
       );
-      if (result)
-        return originalConsole[method](...result);
+      if (result) return originalConsole[method](...result);
     };
   }
 }
@@ -200,21 +196,17 @@ function muteAuthLogs({
   if (process.stdout.write === originalWrite) {
     const write = originalWrite.bind(process.stdout);
     process.stdout.write = (item, cb) => {
-      if (typeof item !== "string")
-        return write(item, cb);
+      if (typeof item !== "string") return write(item, cb);
       const replacers = messageReplacers.reduce((acc, [matcher, replacer]) => {
-        if (matcher([item], acc.length))
-          acc.push(replacer);
+        if (matcher([item], acc.length)) acc.push(replacer);
         return acc;
       }, []);
-      if (replacers.length === 0)
-        return write(item, cb);
+      if (replacers.length === 0) return write(item, cb);
       const result = replacers.reduce(
         (resultArgs, replacer) => resultArgs && replacer(resultArgs),
         [item]
       );
-      if (result)
-        return write(result[0], cb);
+      if (result) return write(result[0], cb);
     };
   }
   addMessageReplacers(
@@ -225,8 +217,7 @@ function muteAuthLogs({
         const content = first.replace(" to Shopify Partners", "");
         const link = content.match(/(https?:\/\/.*)Log in/)?.[1];
         onKeyTimeout(link);
-        if (link)
-          return;
+        if (link) return;
         return [content];
       }
     ],
@@ -266,8 +257,7 @@ function enhanceH2Logs(options) {
         stringArg += "\nRun `h2 link` to link your store.";
       }
       const [, type, scope, message] = stringArg.match(/\[h2:([^:]+):([^\]]+)\]\s+(.*)$/ims) || [];
-      if (!type || !scope || !message)
-        return args;
+      if (!type || !scope || !message) return args;
       const headline = `In Hydrogen's \`${scope.trim()}\`:
 
 `;
@@ -281,8 +271,7 @@ function enhanceH2Logs(options) {
           colors.magentaBright(`\`${options.cliCommand ?? "$1"} $2\``)
         );
       }
-      if (hasLinks || hasCommands)
-        lines.pop();
+      if (hasLinks || hasCommands) lines.pop();
       if (type === "error" || errorObject) {
         let tryMessage = hasLinks || hasCommands ? lastLine : void 0;
         let stack = errorObject?.stack;

package/dist/lib/mini-oxygen/common.js

@@ -18,8 +18,7 @@ function logRequestLine({
 }) {
   try {
     const url = new URL(request.url);
-    if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico")
-      return;
+    if (DEV_ROUTES.has(url.pathname) || url.pathname === "/favicon.ico") return;
     const isDataRequest = url.searchParams.has("_data");
     let route = request.url.replace(url.origin, "");
     let info = "";

package/dist/lib/mini-oxygen/node.js

@@ -42,8 +42,7 @@ async function startNodeServer({
     }
   };
   if (debug) {
-    if (!inspectorPort)
-      inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
+    if (!inspectorPort) inspectorPort = await findPort(DEFAULT_INSPECTOR_PORT);
     (await import('node:inspector')).open(inspectorPort);
   }
   const readWorkerFile = () => readFile(buildPathWorkerFile).catch((error) => {

package/dist/lib/missing-routes.js

@@ -51,8 +51,7 @@ function findMissingRoutes(config, requiredRoutes = REQUIRED_ROUTES) {
           const parentRoute = userRoutes.find(
             (r) => r.id === currentRoute.parentId
           );
-          if (!parentRoute)
-            break;
+          if (!parentRoute) break;
           currentRoute.path = `${parentRoute.path}/${currentRoute.path}`;
           currentRoute.parentId = parentRoute.parentId;
         }

package/dist/lib/onboarding/common.js

@@ -1,22 +1,24 @@
-import { readdir } from 'node:fs/promises';
+import { symlink, readdir } from 'node:fs/promises';
 import { packageManagerFromUserAgent, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
 import { renderConfirmationPrompt, renderInfo, renderTextPrompt, renderSelectPrompt, renderFatalError, renderWarning, renderSuccess } from '@shopify/cli-kit/node/ui';
 import { hyphenate, capitalize } from '@shopify/cli-kit/common/string';
 import { joinPath, resolvePath, basename } from '@shopify/cli-kit/node/path';
 import { initializeGitRepository, addAllToGitFromDirectory, createGitCommit } from '@shopify/cli-kit/node/git';
 import { AbortError } from '@shopify/cli-kit/node/error';
-import { rmdir, writeFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
+import { rmdir, copyFile, writeFile, fileExists, isDirectory } from '@shopify/cli-kit/node/fs';
 import { outputDebug, formatPackageManagerCommand } from '@shopify/cli-kit/node/output';
+import { currentProcessIsGlobal } from '@shopify/cli-kit/node/is-global';
 import colors from '@shopify/cli-kit/node/colors';
 import { login, renderLoginSuccess } from '../auth.js';
 import { renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../setups/i18n/index.js';
 import { titleize } from '../string.js';
 import { ALIAS_NAME, createPlatformShortcut } from '../shell.js';
 import { transpileProject } from '../transpile/index.js';
-import { CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
+import { renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../setups/css/index.js';
 import { renderRoutePrompt, generateRoutes, generateProjectFile } from '../setups/routes/generate.js';
 import { execAsync } from '../process.js';
 import { getStorefronts } from '../graphql/admin/link-storefront.js';
+import { isHydrogenMonorepo, getSkeletonSourceDir, getRepoNodeModules } from '../build.js';
 
 const LANGUAGES = {
   js: "JavaScript",
@@ -46,7 +48,7 @@ async function handleRouteGeneration(controller, flagRoutes) {
   const needsRouteGeneration = routesToScaffold === "all" || routesToScaffold.length > 0;
   return {
     needsRouteGeneration,
-    setupRoutes: async (directory, language, i18nStrategy) => {
+    setupRoutes: async (directory, language, options) => {
       if (needsRouteGeneration) {
         const result = await generateRoutes(
           {
@@ -54,8 +56,9 @@ async function handleRouteGeneration(controller, flagRoutes) {
             directory,
             force: true,
             typescript: language === "ts",
-            localePrefix: i18nStrategy === "subfolders" ? "locale" : false,
-            signal: controller.signal
+            localePrefix: options?.i18nStrategy === "subfolders" ? "locale" : false,
+            signal: controller.signal,
+            ...options
           },
           {
             rootDirectory: directory,
@@ -75,8 +78,7 @@ function generateProjectEntries(options) {
   );
 }
 async function handleCliShortcut(controller, cliCommand, flagShortcut) {
-  if (cliCommand === ALIAS_NAME)
-    return {};
+  if (cliCommand === ALIAS_NAME) return {};
   const shouldCreateShortcut = flagShortcut ?? await renderConfirmationPrompt({
     confirmationMessage: "Yes",
     cancellationMessage: "No",
@@ -89,8 +91,7 @@ async function handleCliShortcut(controller, cliCommand, flagShortcut) {
     ],
     abortSignal: controller.signal
   });
-  if (!shouldCreateShortcut)
-    return {};
+  if (!shouldCreateShortcut) return {};
   return {
     createShortcut: async () => {
       try {
@@ -223,7 +224,33 @@ async function handleLanguage(projectDir, controller, flagLanguage) {
   };
 }
 async function handleCssStrategy(projectDir, controller, flagStyling) {
-  return {};
+  const selection = flagStyling ?? await renderCssPrompt({
+    abortSignal: controller.signal,
+    extraChoices: { none: "Skip and set up later" }
+  });
+  const cssStrategy = selection === "none" ? void 0 : selection;
+  return {
+    cssStrategy,
+    async setupCss() {
+      if (cssStrategy) {
+        if (cssStrategy === "postcss" || cssStrategy === "css-modules") {
+          return;
+        }
+        const result = await setupCssStrategy(
+          cssStrategy,
+          {
+            rootDirectory: projectDir,
+            appDirectory: joinPath(projectDir, "app")
+            // Default value in new projects
+          },
+          true
+        );
+        if (result) {
+          await result.workPromise;
+        }
+      }
+    }
+  };
 }
 async function handleDependencies(projectDir, controller, packageManagerFromFlag, shouldInstallDeps) {
   const detectedPackageManager = packageManagerFromFlag ?? packageManagerFromUserAgent();
@@ -257,6 +284,20 @@ async function handleDependencies(projectDir, controller, packageManagerFromFlag
       });
     }
   }
+  if (isHydrogenMonorepo) {
+    await copyFile(
+      joinPath(getSkeletonSourceDir(), ".npmrc"),
+      joinPath(projectDir, ".npmrc")
+    ).catch(() => {
+    });
+    if (!shouldInstallDeps) {
+      await symlink(
+        await getRepoNodeModules(),
+        joinPath(projectDir, "node_modules")
+      ).catch(() => {
+      });
+    }
+  }
   return {
     packageManager: actualPackageManager,
     shouldInstallDeps,
@@ -292,7 +333,7 @@ async function createInitialCommit(directory) {
     return commitAll(directory, "Scaffold Storefront");
   } catch (error) {
     outputDebug(
-      "Failed to initialize Git.\n" + error?.stack
+      "Failed to initialize Git.\n" + (error?.stack ?? error?.message ?? error)
     );
   }
 }
@@ -302,7 +343,7 @@ async function commitAll(directory, message) {
     await createGitCommit(message, { directory });
   } catch (error) {
     outputDebug(
-      "Failed to commit code.\n" + error?.stack
+      "Failed to commit code.\n" + (error?.stack ?? error?.message ?? error)
     );
   }
 }
@@ -395,7 +436,7 @@ async function renderProjectReady(project, {
                     command: [
                       project.directory === process.cwd() ? void 0 : `cd ${project.location.replace(/^\.\//, "")}`,
                       depsInstalled ? void 0 : `${packageManager} install`,
-                      formatPackageManagerCommand(packageManager, "dev")
+                      currentProcessIsGlobal() ? "npm run dev" : formatPackageManagerCommand(packageManager, "dev")
                     ].filter(Boolean).join(" && ")
                   }
                 ]
@@ -417,10 +458,14 @@ function createAbortHandler(controller, project) {
     }
     renderFatalError(
       new AbortError(
-        "Failed to initialize project: " + error?.message,
+        "Failed to initialize project: " + (error?.message ?? ""),
         error?.tryMessage ?? error?.stack
       )
     );
+    if (process.env.SHOPIFY_UNIT_TEST && process.exit.name !== "spy") {
+      console.error("Error during test before process.exit:", error);
+      throw error;
+    }
     process.exit(1);
   };
 }

package/dist/lib/onboarding/local.js

@@ -1,4 +1,4 @@
-import { copy } from 'fs-extra/esm';
+import { cp } from 'node:fs/promises';
 import { writeFile } from '@shopify/cli-kit/node/fs';
 import { relativePath, joinPath } from '@shopify/cli-kit/node/path';
 import { hyphenate } from '@shopify/cli-kit/common/string';
@@ -32,22 +32,21 @@ async function setupLocalStarterTemplate(options, controller) {
     storefrontInfo,
     controller
   });
-  if (!project)
-    return;
-  if (templateAction === "mock")
-    project.storefrontTitle = "Mock.shop";
+  if (!project) return;
+  if (templateAction === "mock") project.storefrontTitle = "Mock.shop";
   const abort = createAbortHandler(controller, project);
   const createStorefrontPromise = storefrontInfo && !storefrontInfo.id && createStorefront(storefrontInfo.session, storefrontInfo.title).then(async ({ storefront, jobId }) => {
-    if (jobId)
-      await waitForJob(storefrontInfo.session, jobId);
+    if (jobId) await waitForJob(storefrontInfo.session, jobId);
     return storefront;
   }).catch(abort);
   const templateDir = await getStarterDir();
-  let backgroundWorkPromise = copy(
+  let backgroundWorkPromise = cp(
     templateDir,
     project.directory,
     // Filter out the `app` directory and server.ts, which will be generated later
     {
+      force: true,
+      recursive: true,
       filter: (filepath) => !/^(app\/|dist\/|node_modules\/|server\.ts)/i.test(
         relativePath(templateDir, filepath)
       )
@@ -120,10 +119,7 @@ async function setupLocalStarterTemplate(options, controller) {
         // Set required env vars
         writeFile(
           joinPath(project.directory, ".env"),
-          envLeadingComment + "\n" + [
-            ["SESSION_SECRET", "foobar"],
-            ["PUBLIC_STORE_DOMAIN", "mock.shop"]
-          ].map(([key, value]) => `${key}="${value}"`).join("\n") + "\n"
+          envLeadingComment + "\n" + [["SESSION_SECRET", "foobar"]].map(([key, value]) => `${key}="${value}"`).join("\n") + "\n"
         )
       );
     }
@@ -236,7 +232,12 @@ async function setupLocalStarterTemplate(options, controller) {
       ).catch((error) => {
         setupSummary.i18nError = error;
       });
-      await setupRoutes(project.directory, language, i18nStrategy).then((routes) => {
+      await setupRoutes(project.directory, language, {
+        i18nStrategy,
+        // The init process might have added and modified files. Do not overwrite them.
+        // E.g. CSS imports might have been added to the root.
+        overwriteFileDeps: false
+      }).then((routes) => {
         setupSummary.routes = routes;
         if (options.git && routes) {
           return commitAll(

package/dist/lib/onboarding/remote.js

@@ -7,6 +7,7 @@ import { renderTasks, renderInfo } from '@shopify/cli-kit/node/ui';
 import { downloadExternalRepo, downloadMonorepoTemplates } from '../template-downloader.js';
 import { applyTemplateDiff } from '../template-diff.js';
 import { getCliCommand } from '../shell.js';
+import { replaceFileContent } from '../file.js';
 import { createAbortHandler, handleProjectLocation, handleLanguage, createInitialCommit, handleDependencies, commitAll, renderProjectReady } from './common.js';
 
 const DEMO_STORE_REPO = "shopify/hydrogen-demo-store";
@@ -15,15 +16,12 @@ async function setupRemoteTemplate(options, controller) {
   let abort = createAbortHandler(controller);
   const backgroundDownloadPromise = appTemplate.includes("/") ? getExternalTemplate(appTemplate, controller.signal).catch(abort) : getMonorepoTemplate(appTemplate, controller.signal).catch(abort);
   const project = await handleProjectLocation({ ...options, controller });
-  if (!project)
-    return;
+  if (!project) return;
   abort = createAbortHandler(controller, project);
   const downloaded = await backgroundDownloadPromise;
-  if (controller.signal.aborted)
-    return;
+  if (controller.signal.aborted) return;
   let backgroundWorkPromise = Promise.resolve().then(async () => {
-    if (controller.signal.aborted)
-      return;
+    if (controller.signal.aborted) return;
     const { sourcePath, skeletonPath } = downloaded;
     const pkgJson = await readAndParsePackageJson(
       joinPath(sourcePath, "package.json")
@@ -31,7 +29,17 @@ async function setupRemoteTemplate(options, controller) {
     if (pkgJson.scripts?.dev?.includes("--diff")) {
       return applyTemplateDiff(project.directory, sourcePath, skeletonPath);
     }
-    return copyFile(sourcePath, project.directory);
+    await copyFile(sourcePath, project.directory);
+    await replaceFileContent(
+      joinPath(project.directory, "package.json"),
+      false,
+      (content) => (
+        // Remove the cli plugin dependency from the package.json because it's
+        // only used for monorepo development. This line is present in non-diff
+        // examples like `express` when scaffolding a new project:
+        content.replace(/^\s*"@shopify\/cli-hydrogen": "[^"]+",?\n/m, "")
+      )
+    );
   }).catch(abort);
   const supportsTranspilation = await fileExists(
     joinPath(downloaded.sourcePath, "tsconfig.json")
@@ -79,8 +87,7 @@ async function setupRemoteTemplate(options, controller) {
       }
     });
   }
-  if (controller.signal.aborted)
-    return;
+  if (controller.signal.aborted) return;
   await renderTasks(tasks);
   if (options.git) {
     await commitAll(project.directory, "Lockfile");

package/dist/lib/onboarding/setup-template.mocks.js

@@ -1,5 +1,5 @@
+import { rm, symlink } from 'node:fs/promises';
 import { vi } from 'vitest';
-import { remove, createSymlink } from 'fs-extra/esm';
 import { writeFile } from '@shopify/cli-kit/node/fs';
 import { dirname, joinPath } from '@shopify/cli-kit/node/path';
 import { getSkeletonSourceDir, getRepoNodeModules } from '../build.js';
@@ -43,9 +43,12 @@ vi.mock(
         renderTasksHook.mockImplementationOnce(async () => {
           await writeFile(`${directory}/package-lock.json`, "{}");
         });
-        await remove(joinPath(directory, "node_modules")).catch(() => {
+        await rm(joinPath(directory, "node_modules"), {
+          force: true,
+          recursive: true
+        }).catch(() => {
         });
-        await createSymlink(
+        await symlink(
           await getRepoNodeModules(),
           joinPath(directory, "node_modules")
         );

package/dist/lib/remix-config.js

@@ -42,8 +42,7 @@ function handleRemixImportFail() {
 }
 function getRawRemixConfig(root) {
   return findFileWithExtension(root, "remix.config").then(({ filepath }) => {
-    if (!filepath)
-      throw new AbortError("No remix.config.js file found.");
+    if (!filepath) throw new AbortError("No remix.config.js file found.");
     return createRequire(import.meta.url)(filepath);
   });
 }
@@ -152,8 +151,7 @@ async function assertEntryFileExists(root, fileRelative) {
         const { name, ext } = path.parse(file);
         return name === path.basename(fileAbsolute) && /^\.[jt]s$/.test(ext);
       });
-      if (exists2)
-        return;
+      if (exists2) return;
     }
     throw new AbortError(
       `Entry file "${fileRelative}" not found.`,

package/dist/lib/remix-version-check.js

@@ -17,8 +17,7 @@ function checkRemixVersions(projectPath, requiredVersionInHydrogen = REQUIRED_RE
   const outOfSyncPkgs = pkgs.filter(
     (pkg) => pkg.version && !satisfiesSemver(pkg.version, requiredVersionInHydrogen)
   );
-  if (outOfSyncPkgs.length === 0)
-    return;
+  if (outOfSyncPkgs.length === 0) return;
   const items = outOfSyncPkgs.reduce((acc, item) => {
     if (item.version) {
       acc.push(`${item.name}@${item.version}`);

package/dist/lib/request-events.js

@@ -95,8 +95,7 @@ function createLogRequestEvent(options) {
       })
     };
     eventHistory.push(event);
-    if (eventHistory.length > 100)
-      eventHistory.shift();
+    if (eventHistory.length > 100) eventHistory.shift();
     eventEmitter.emit("request", event);
     return createResponse();
   };
@@ -116,16 +115,14 @@ function streamRequestEvents(request) {
       eventEmitter.addListener("request", enqueueEvent);
       let closed = false;
       function close() {
-        if (closed)
-          return;
+        if (closed) return;
         closed = true;
         request.signal.removeEventListener("abort", close);
         eventEmitter.removeListener("request", enqueueEvent);
         controller.close();
       }
       request.signal.addEventListener("abort", close);
-      if (request.signal.aborted)
-        return close();
+      if (request.signal.aborted) return close();
     }
   });
   return createResponse(stream, {

package/dist/lib/setups/css/assets.js

@@ -5,8 +5,8 @@ import { getAssetsDir } from '../../build.js';
 
 const SETUP_CSS_STRATEGIES = [
   "tailwind",
-  "css-modules",
   "vanilla-extract",
+  "css-modules",
   "postcss"
 ];
 async function copyAssets(feature, assets, rootDirectory, replacer = (content, filename) => content) {

package/dist/lib/setups/css/index.js

@@ -2,27 +2,34 @@ import { renderSelectPrompt } from '@shopify/cli-kit/node/ui';
 import { SETUP_CSS_STRATEGIES } from './assets.js';
 export { SETUP_CSS_STRATEGIES } from './assets.js';
 import { setupTailwind } from './tailwind.js';
-import { setupPostCss } from './postcss.js';
-import { setupCssModules } from './css-modules.js';
 import { setupVanillaExtract } from './vanilla-extract.js';
 
 const STYLING_CHOICES = [...SETUP_CSS_STRATEGIES, "none"];
 const CSS_STRATEGY_NAME_MAP = {
-  tailwind: "Tailwind",
-  "css-modules": "CSS Modules",
+  tailwind: "Tailwind (v4 alpha)",
   "vanilla-extract": "Vanilla Extract",
-  postcss: "CSS"
+  "css-modules": "CSS Modules",
+  postcss: "PostCSS"
+};
+const CSS_STRATEGY_HELP_URL_MAP = {
+  postcss: "https://vitejs.dev/guide/features.html#postcss",
+  "css-modules": "https://vitejs.dev/guide/features.html#css-modules",
+  "vanilla-extract": "https://vanilla-extract.style/documentation/styling/",
+  tailwind: "https://tailwindcss.com/docs/configuration"
 };
 function setupCssStrategy(strategy, options, force) {
   switch (strategy) {
     case "tailwind":
       return setupTailwind(options, force);
-    case "postcss":
-      return setupPostCss(options, force);
-    case "css-modules":
-      return setupCssModules(options);
     case "vanilla-extract":
       return setupVanillaExtract(options);
+    case "postcss":
+    case "css-modules":
+      return {
+        workPromise: Promise.resolve(),
+        generatedAssets: [],
+        needsInstallDeps: false
+      };
     default:
       throw new Error("Unknown strategy");
   }
@@ -43,4 +50,4 @@ async function renderCssPrompt(options) {
   });
 }
 
-export { CSS_STRATEGY_NAME_MAP, STYLING_CHOICES, renderCssPrompt, setupCssStrategy };
+export { CSS_STRATEGY_HELP_URL_MAP, CSS_STRATEGY_NAME_MAP, STYLING_CHOICES, renderCssPrompt, setupCssStrategy };