@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/commands/hydrogen/list.test.js

@@ -1,83 +1,86 @@
 import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
 import { getStorefrontsWithDeployment } from '../../lib/graphql/admin/list-storefronts.js';
-import { listStorefronts, formatDeployment } from './list.js';
+import { runList, formatDeployment } from './list.js';
+import { login } from '../../lib/auth.js';
 
-const SHOP_NAME = "my-shop";
-vi.mock("../../lib/graphql/admin/list-storefronts.js", async () => {
-  return { getStorefrontsWithDeployment: vi.fn() };
-});
-vi.mock("../../lib/shop.js", () => ({
-  getHydrogenShop: () => SHOP_NAME
-}));
+vi.mock("../../lib/auth.js");
+vi.mock("../../lib/graphql/admin/list-storefronts.js");
 describe("list", () => {
   const ADMIN_SESSION = {
     token: "abc123",
-    storeFqdn: SHOP_NAME
+    storeFqdn: "my-shop"
+  };
+  const SHOPIFY_CONFIG = {
+    shop: "my-shop.myshopify.com",
+    shopName: "My Shop",
+    email: "email",
+    storefront: {
+      id: "gid://shopify/HydrogenStorefront/1",
+      title: "Hydrogen"
+    }
   };
   beforeEach(async () => {
-    vi.mocked(getStorefrontsWithDeployment).mockResolvedValue({
-      adminSession: ADMIN_SESSION,
-      storefronts: []
+    vi.mocked(login).mockResolvedValue({
+      session: ADMIN_SESSION,
+      config: SHOPIFY_CONFIG
     });
+    vi.mocked(getStorefrontsWithDeployment).mockResolvedValue([]);
   });
   afterEach(() => {
     vi.resetAllMocks();
     mockAndCaptureOutput().clear();
   });
-  it("makes a GraphQL call to fetch the storefronts", async () => {
-    await listStorefronts({});
-    expect(getStorefrontsWithDeployment).toHaveBeenCalledWith(SHOP_NAME);
+  it("fetches the storefronts", async () => {
+    await runList({});
+    expect(getStorefrontsWithDeployment).toHaveBeenCalledWith(ADMIN_SESSION);
   });
   describe("and there are storefronts", () => {
     beforeEach(() => {
-      vi.mocked(getStorefrontsWithDeployment).mockResolvedValue({
-        adminSession: ADMIN_SESSION,
-        storefronts: [
-          {
-            id: "gid://shopify/HydrogenStorefront/1",
-            parsedId: "1",
-            title: "Hydrogen",
-            productionUrl: "https://example.com",
-            currentProductionDeployment: null
-          },
-          {
-            id: "gid://shopify/HydrogenStorefront/2",
-            parsedId: "2",
-            title: "Demo Store",
-            productionUrl: "https://demo.example.com",
-            currentProductionDeployment: {
-              id: "gid://shopify/HydrogenStorefrontDeployment/1",
-              createdAt: "2023-03-22T22:28:38Z",
-              commitMessage: "Update README.md"
-            }
+      vi.mocked(getStorefrontsWithDeployment).mockResolvedValue([
+        {
+          id: "gid://shopify/HydrogenStorefront/1",
+          parsedId: "1",
+          title: "Hydrogen",
+          productionUrl: "https://example.com",
+          currentProductionDeployment: null
+        },
+        {
+          id: "gid://shopify/HydrogenStorefront/2",
+          parsedId: "2",
+          title: "Demo Store",
+          productionUrl: "https://demo.example.com",
+          currentProductionDeployment: {
+            id: "gid://shopify/HydrogenStorefrontDeployment/1",
+            createdAt: "2023-03-22T22:28:38Z",
+            commitMessage: "Update README.md"
           }
-        ]
-      });
+        }
+      ]);
     });
     it("renders a list of storefronts", async () => {
       const outputMock = mockAndCaptureOutput();
-      await listStorefronts({});
+      await runList({});
       expect(outputMock.info()).toMatch(
-        /Showing 2 Hydrogen storefronts for the store my-shop/g
+        /Showing 2 Hydrogen storefronts for the store my-shop/i
       );
-      expect(outputMock.info()).toMatch(/Hydrogen \(id: 1\)/g);
-      expect(outputMock.info()).toMatch(/https:\/\/example.com/g);
-      expect(outputMock.info()).toMatch(/Demo Store \(id: 2\)/g);
-      expect(outputMock.info()).toMatch(/https:\/\/demo.example.com/g);
-      expect(outputMock.info()).toMatch(/3\/22\/2023, Update README.md/g);
+      expect(outputMock.info()).toMatch(/Hydrogen \(id: 1\)/);
+      expect(outputMock.info()).toMatch(/https:\/\/example.com/);
+      expect(outputMock.info()).toMatch(/Demo Store \(id: 2\)/);
+      expect(outputMock.info()).toMatch(/https:\/\/demo.example.com/);
+      expect(outputMock.info()).toMatch(/3\/22\/2023, Update README.md/);
     });
   });
   describe("and there are no storefronts", () => {
     it("prompts the user to create a storefront", async () => {
       const outputMock = mockAndCaptureOutput();
-      await listStorefronts({});
+      await runList({});
       expect(outputMock.info()).toMatch(
-        /There are no Hydrogen storefronts on your Shop\./g
+        /There are no Hydrogen storefronts on your Shop\./i
       );
-      expect(outputMock.info()).toMatch(/Create a new Hydrogen storefront/g);
+      expect(outputMock.info()).toMatch(/Create a new Hydrogen storefront/i);
       expect(outputMock.info()).toMatch(
-        /https:\/\/my\-shop\/admin\/custom_storefronts\/new/g
+        /https:\/\/my\-shop\/admin\/custom_storefronts\/new/
       );
     });
   });

package/dist/commands/hydrogen/login.js

@@ -0,0 +1,31 @@
+import { Flags } from '@oclif/core';
+import Command from '@shopify/cli-kit/node/base-command';
+import { normalizeStoreFqdn } from '@shopify/cli-kit/node/context/fqdn';
+import { commonFlags } from '../../lib/flags.js';
+import { login, renderLoginSuccess } from '../../lib/auth.js';
+
+class Login extends Command {
+  static description = "Login to your Shopify account.";
+  static flags = {
+    path: commonFlags.path,
+    shop: Flags.string({
+      char: "s",
+      description: "Shop URL. It can be the shop prefix (janes-apparel) or the full myshopify.com URL (janes-apparel.myshopify.com, https://janes-apparel.myshopify.com).",
+      env: "SHOPIFY_SHOP",
+      parse: async (input) => normalizeStoreFqdn(input)
+    })
+  };
+  async run() {
+    const { flags } = await this.parse(Login);
+    await runLogin(flags);
+  }
+}
+async function runLogin({
+  path: root = process.cwd(),
+  shop: shopFlag
+}) {
+  const { config } = await login(root, shopFlag ?? true);
+  renderLoginSuccess(config);
+}
+
+export { Login as default };

package/dist/commands/hydrogen/logout.js

@@ -0,0 +1,21 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderSuccess } from '@shopify/cli-kit/node/ui';
+import { commonFlags } from '../../lib/flags.js';
+import { logout } from '../../lib/auth.js';
+
+class Logout extends Command {
+  static description = "Logout of your local session.";
+  static flags = {
+    path: commonFlags.path
+  };
+  async run() {
+    const { flags } = await this.parse(Logout);
+    await runLogout(flags);
+  }
+}
+async function runLogout({ path: root = process.cwd() }) {
+  await logout(root);
+  renderSuccess({ body: "You are logged out from Shopify." });
+}
+
+export { Logout as default };

package/dist/commands/hydrogen/setup/css.js

@@ -0,0 +1,79 @@
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { commonFlags, overrideFlag, flagsToCamelObject } from '../../../lib/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { getPackageManager, installNodeModules } from '@shopify/cli-kit/node/node-package-manager';
+import { Args } from '@oclif/core';
+import { getRemixConfig } from '../../../lib/config.js';
+import { SETUP_CSS_STRATEGIES, renderCssPrompt, setupCssStrategy, CSS_STRATEGY_NAME_MAP } from '../../../lib/setups/css/index.js';
+
+class SetupCSS extends Command {
+  static description = "Setup CSS strategies for your project.";
+  static flags = {
+    path: commonFlags.path,
+    force: commonFlags.force,
+    "install-deps": overrideFlag(commonFlags.installDeps, { default: true })
+  };
+  static args = {
+    strategy: Args.string({
+      name: "strategy",
+      description: `The CSS strategy to setup. One of ${SETUP_CSS_STRATEGIES.join()}`,
+      options: SETUP_CSS_STRATEGIES
+    })
+  };
+  async run() {
+    const { flags, args } = await this.parse(SetupCSS);
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    await runSetupCSS({
+      ...flagsToCamelObject(flags),
+      strategy: args.strategy,
+      directory
+    });
+  }
+}
+async function runSetupCSS({
+  strategy: flagStrategy,
+  directory,
+  force = false,
+  installDeps = true
+}) {
+  const remixConfigPromise = getRemixConfig(directory);
+  const strategy = flagStrategy ? flagStrategy : await renderCssPrompt();
+  const remixConfig = await remixConfigPromise;
+  const setupOutput = await setupCssStrategy(strategy, remixConfig, force);
+  if (!setupOutput)
+    return;
+  const { workPromise, generatedAssets, helpUrl } = setupOutput;
+  const tasks = [
+    {
+      title: "Updating files",
+      task: async () => {
+        await workPromise;
+      }
+    }
+  ];
+  if (installDeps) {
+    const gettingPkgManagerPromise = getPackageManager(
+      remixConfig.rootDirectory
+    );
+    tasks.push({
+      title: "Installing new dependencies",
+      task: async () => {
+        const packageManager = await gettingPkgManagerPromise;
+        await installNodeModules({
+          directory: remixConfig.rootDirectory,
+          packageManager,
+          args: []
+        });
+      }
+    });
+  }
+  await renderTasks(tasks);
+  renderSuccess({
+    headline: `${CSS_STRATEGY_NAME_MAP[strategy]} setup complete.`,
+    body: (generatedAssets.length > 0 ? "You can now modify CSS configuration in the following files:\n" + generatedAssets.map((file) => `  - ${file}`).join("\n") + "\n" : "") + `
+For more information, visit ${helpUrl}.`
+  });
+}
+
+export { SetupCSS as default, runSetupCSS };

package/dist/commands/hydrogen/setup/markets.js

@@ -0,0 +1,53 @@
+import { resolvePath } from '@shopify/cli-kit/node/path';
+import { commonFlags, flagsToCamelObject } from '../../../lib/flags.js';
+import Command from '@shopify/cli-kit/node/base-command';
+import { renderTasks, renderSuccess } from '@shopify/cli-kit/node/ui';
+import { Args } from '@oclif/core';
+import { getRemixConfig } from '../../../lib/config.js';
+import { SETUP_I18N_STRATEGIES, renderI18nPrompt, setupI18nStrategy, I18N_STRATEGY_NAME_MAP } from '../../../lib/setups/i18n/index.js';
+
+class SetupMarkets extends Command {
+  static description = "Setup support for multiple markets in your project.";
+  static flags = {
+    path: commonFlags.path
+  };
+  static args = {
+    strategy: Args.string({
+      name: "strategy",
+      description: `The URL structure strategy to setup multiple markets. One of ${SETUP_I18N_STRATEGIES.join()}`,
+      options: SETUP_I18N_STRATEGIES
+    })
+  };
+  async run() {
+    const { flags, args } = await this.parse(SetupMarkets);
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    await runSetupI18n({
+      ...flagsToCamelObject(flags),
+      strategy: args.strategy,
+      directory
+    });
+  }
+}
+async function runSetupI18n({
+  strategy: flagStrategy,
+  directory
+}) {
+  const remixConfigPromise = getRemixConfig(directory);
+  const strategy = flagStrategy ? flagStrategy : await renderI18nPrompt();
+  const remixConfig = await remixConfigPromise;
+  await renderTasks([
+    {
+      title: "Updating files",
+      task: async () => {
+        await setupI18nStrategy(strategy, remixConfig);
+      }
+    }
+  ]);
+  renderSuccess({
+    headline: `Makerts support setup complete with strategy ${I18N_STRATEGY_NAME_MAP[strategy].toLocaleLowerCase()}.`,
+    body: `You can now modify the supported locales in ${remixConfig.serverEntryPoint ?? "your server entry file."}
+`
+  });
+}
+
+export { SetupMarkets as default, runSetupI18n };

package/dist/commands/hydrogen/setup.js

@@ -0,0 +1,133 @@
+import Command from '@shopify/cli-kit/node/base-command';
+import { AbortController } from '@shopify/cli-kit/node/abort';
+import { renderTasks } from '@shopify/cli-kit/node/ui';
+import { resolvePath, basename } from '@shopify/cli-kit/node/path';
+import { copyFile } from '@shopify/cli-kit/node/fs';
+import { commonFlags, overrideFlag, flagsToCamelObject } from '../../lib/flags.js';
+import { renderI18nPrompt, setupI18nStrategy } from '../../lib/setups/i18n/index.js';
+import { getRemixConfig } from '../../lib/config.js';
+import { handleRouteGeneration, generateProjectEntries, handleCliShortcut, renderProjectReady } from '../../lib/onboarding/common.js';
+import { getCliCommand } from '../../lib/shell.js';
+import { generateProjectFile } from '../../lib/setups/routes/generate.js';
+import { getTemplateAppFile } from '../../lib/build.js';
+
+class Setup extends Command {
+  static description = "Scaffold routes and core functionality.";
+  static flags = {
+    path: commonFlags.path,
+    force: commonFlags.force,
+    styling: commonFlags.styling,
+    markets: commonFlags.markets,
+    shortcut: commonFlags.shortcut,
+    "install-deps": overrideFlag(commonFlags.installDeps, { default: true })
+  };
+  async run() {
+    const { flags } = await this.parse(Setup);
+    const directory = flags.path ? resolvePath(flags.path) : process.cwd();
+    await runSetup({
+      ...flagsToCamelObject(flags),
+      directory
+    });
+  }
+}
+async function runSetup(options) {
+  const controller = new AbortController();
+  const remixConfig = await getRemixConfig(options.directory);
+  const location = basename(remixConfig.rootDirectory);
+  const cliCommandPromise = getCliCommand();
+  let backgroundWorkPromise = Promise.resolve();
+  const tasks = [
+    {
+      title: "Setting up project",
+      task: async () => {
+        await backgroundWorkPromise;
+      }
+    }
+  ];
+  const i18nStrategy = options.i18n ? options.i18n : await renderI18nPrompt({
+    abortSignal: controller.signal,
+    extraChoices: { none: "Set up later" }
+  });
+  const i18n = i18nStrategy === "none" ? void 0 : i18nStrategy;
+  const { needsRouteGeneration, setupRoutes } = await handleRouteGeneration(
+    controller
+  );
+  let routes;
+  if (needsRouteGeneration) {
+    const typescript = !!remixConfig.tsconfigPath;
+    backgroundWorkPromise = backgroundWorkPromise.then(
+      () => Promise.all([
+        generateProjectFile("../server.ts", { ...remixConfig, typescript }),
+        ...typescript ? [
+          copyFile(
+            getTemplateAppFile("../remix.env.d.ts"),
+            resolvePath(remixConfig.rootDirectory, "remix.env.d.ts")
+          ),
+          copyFile(
+            getTemplateAppFile("../storefrontapi.generated.d.ts"),
+            resolvePath(
+              remixConfig.rootDirectory,
+              "storefrontapi.generated.d.ts"
+            )
+          )
+        ] : [],
+        generateProjectEntries({
+          rootDirectory: remixConfig.rootDirectory,
+          appDirectory: remixConfig.appDirectory,
+          typescript,
+          v2Flags: {
+            isV2RouteConvention: remixConfig.future?.v2_routeConvention,
+            isV2ErrorBoundary: remixConfig.future?.v2_errorBoundary,
+            isV2Meta: remixConfig.future?.v2_meta
+          }
+        })
+      ])
+    ).then(async () => {
+      routes = await setupRoutes(
+        remixConfig.rootDirectory,
+        typescript ? "ts" : "js",
+        i18n
+      );
+    });
+  }
+  if (i18n) {
+    backgroundWorkPromise = backgroundWorkPromise.then(
+      () => setupI18nStrategy(i18n, remixConfig)
+    );
+  }
+  let hasCreatedShortcut = false;
+  const cliCommand = await cliCommandPromise;
+  const needsAlias = cliCommand !== "h2";
+  if (needsAlias) {
+    const { createShortcut, showShortcutBanner } = await handleCliShortcut(
+      controller,
+      await cliCommandPromise,
+      options.shortcut
+    );
+    if (createShortcut) {
+      backgroundWorkPromise = backgroundWorkPromise.then(async () => {
+        hasCreatedShortcut = await createShortcut();
+      });
+      showShortcutBanner();
+    }
+  }
+  if (!i18n && !needsRouteGeneration && !needsAlias)
+    return;
+  await renderTasks(tasks);
+  await renderProjectReady(
+    {
+      location,
+      name: location,
+      directory: remixConfig.rootDirectory
+    },
+    {
+      hasCreatedShortcut,
+      depsInstalled: true,
+      packageManager: "npm",
+      i18n,
+      routes
+    }
+  );
+}
+
+export { Setup as default };

package/dist/commands/hydrogen/shortcut.js

@@ -1,6 +1,6 @@
 import Command from '@shopify/cli-kit/node/base-command';
 import { renderSuccess, renderFatalError } from '@shopify/cli-kit/node/ui';
-import { ALIAS_NAME, isWindows, isGitBash, shellWriteAlias, shellRunScript } from '../../lib/shell.js';
+import { ALIAS_NAME, createPlatformShortcut } from '../../lib/shell.js';
 
 class Shortcut extends Command {
   static description = `Creates a global \`${ALIAS_NAME}\` shortcut for the Hydrogen CLI`;
@@ -9,7 +9,7 @@ class Shortcut extends Command {
   }
 }
 async function runCreateShortcut() {
-  const shortcuts = isWindows() && !isGitBash() ? await createShortcutsForWindows() : await createShortcutsForUnix();
+  const shortcuts = await createPlatformShortcut();
   if (shortcuts.length > 0) {
     renderSuccess({
       headline: `Shortcut ready for the following shells: ${shortcuts.join(
@@ -26,48 +26,5 @@ Restart your terminal session and run \`${ALIAS_NAME}\` from your local project.
     });
   }
 }
-const BASH_ZSH_COMMAND = `
-# Shopify Hydrogen alias to local projects
-alias ${ALIAS_NAME}='$(npm prefix -s)/node_modules/.bin/shopify hydrogen'`;
-const FISH_FUNCTION = `
-function ${ALIAS_NAME} --wraps='shopify hydrogen' --description 'Shortcut for the Hydrogen CLI'
-   set npmPrefix (npm prefix -s)
-   $npmPrefix/node_modules/.bin/shopify hydrogen $argv
-end
-`;
-async function createShortcutsForUnix() {
-  const shells = [];
-  if (await shellWriteAlias("zsh", ALIAS_NAME, BASH_ZSH_COMMAND)) {
-    shells.push("zsh");
-  }
-  if (await shellWriteAlias("bash", ALIAS_NAME, BASH_ZSH_COMMAND)) {
-    shells.push("bash");
-  }
-  if (await shellWriteAlias("fish", ALIAS_NAME, FISH_FUNCTION)) {
-    shells.push("fish");
-  }
-  return shells;
-}
-const PS_FUNCTION = `function Invoke-Local-H2 {$npmPrefix = npm prefix -s; Invoke-Expression "$npmPrefix\\node_modules\\.bin\\shopify.ps1 hydrogen $Args"}; Set-Alias -Name ${ALIAS_NAME} -Value Invoke-Local-H2`;
-const PS_APPEND_PROFILE_COMMAND = `
-if (!(Test-Path -Path $PROFILE)) {
-  New-Item -ItemType File -Path $PROFILE -Force
-}
-
-$profileContent = Get-Content -Path $PROFILE
-if (!$profileContent -or $profileContent -NotLike '*Invoke-Local-H2*') {
-  Add-Content -Path $PROFILE -Value '${PS_FUNCTION}'
-}
-`;
-async function createShortcutsForWindows() {
-  const shells = [];
-  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "powershell.exe")) {
-    shells.push("PowerShell");
-  }
-  if (await shellRunScript(PS_APPEND_PROFILE_COMMAND, "pwsh.exe")) {
-    shells.push("PowerShell 7+");
-  }
-  return shells;
-}
 
 export { Shortcut as default, runCreateShortcut };

package/dist/commands/hydrogen/shortcut.test.js

@@ -1,55 +1,28 @@
-import { describe, beforeEach, vi, afterEach, expect, it } from 'vitest';
+import { vi, describe, beforeEach, afterEach, it, expect } from 'vitest';
 import { runCreateShortcut } from './shortcut.js';
 import { mockAndCaptureOutput } from '@shopify/cli-kit/node/testing/output';
-import { shellWriteAlias, isWindows, isGitBash } from '../../lib/shell.js';
-import { execSync, exec } from 'child_process';
+import { createPlatformShortcut } from '../../lib/shell.js';
 
+vi.mock("../../lib/shell.js");
 describe("shortcut", () => {
   const outputMock = mockAndCaptureOutput();
   beforeEach(() => {
     vi.resetAllMocks();
-    vi.mock("child_process");
-    vi.mock("../../lib/shell.js", async () => {
-      const original = await vi.importActual("../../lib/shell.js");
-      return {
-        ...original,
-        isWindows: vi.fn(),
-        isGitBash: vi.fn(),
-        shellWriteAlias: vi.fn(),
-        shellRunScript: async () => true
-      };
-    });
-    vi.mocked(shellWriteAlias).mockImplementation(
-      async (shell) => !isWindows() || shell === "bash"
-    );
   });
   afterEach(() => {
     outputMock.clear();
-    expect(execSync).toHaveBeenCalledTimes(0);
-    expect(exec).toHaveBeenCalledTimes(0);
   });
-  it("creates aliases for Unix", async () => {
-    vi.mocked(isWindows).mockReturnValue(false);
+  it("shows created aliases", async () => {
+    vi.mocked(createPlatformShortcut).mockResolvedValue([
+      "zsh",
+      "bash",
+      "fish"
+    ]);
     await runCreateShortcut();
     expect(outputMock.info()).toMatch(`zsh, bash, fish`);
-    expect(outputMock.error()).toBeFalsy();
-  });
-  it("creates aliases for Windows", async () => {
-    vi.mocked(isWindows).mockReturnValue(true);
-    await runCreateShortcut();
-    expect(outputMock.info()).toMatch(`PowerShell, PowerShell 7+`);
-    expect(outputMock.error()).toBeFalsy();
-  });
-  it("creates aliases for Windows in Git Bash", async () => {
-    vi.mocked(isWindows).mockReturnValue(true);
-    vi.mocked(isGitBash).mockReturnValueOnce(true);
-    await runCreateShortcut();
-    expect(outputMock.info()).toMatch("bash");
-    expect(outputMock.error()).toBeFalsy();
   });
   it("warns when not finding shells", async () => {
-    vi.mocked(isWindows).mockReturnValue(false);
-    vi.mocked(shellWriteAlias).mockResolvedValue(false);
+    vi.mocked(createPlatformShortcut).mockResolvedValue([]);
     await runCreateShortcut();
     expect(outputMock.info()).toBeFalsy();
     expect(outputMock.error()).toBeTruthy();

package/dist/generator-templates/assets/css-modules/package.json

@@ -0,0 +1,6 @@
+{
+  "comment": "Remix version is automatically updated by the CLI",
+  "dependencies": {
+    "@remix-run/css-bundle": "^1"
+  }
+}

package/dist/generator-templates/assets/postcss/package.json

@@ -0,0 +1,10 @@
+{
+  "browserslist": [
+    "defaults"
+  ],
+  "devDependencies": {
+    "postcss": "^8.4.21",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "^8.2.0"
+  }
+}

package/dist/generator-templates/assets/postcss/postcss.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-preset-env': {
+      features: {'nesting-rules': false},
+    },
+  },
+};

package/dist/generator-templates/assets/tailwind/package.json

@@ -0,0 +1,13 @@
+{
+  "browserslist": [
+    "defaults"
+  ],
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "postcss": "^8.4.21",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "^8.2.0",
+    "tailwindcss": "^3.3.0"
+  }
+}

package/dist/generator-templates/assets/tailwind/postcss.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    'postcss-preset-env': {
+      features: {'nesting-rules': false},
+    },
+  },
+};

package/dist/generator-templates/assets/tailwind/tailwind.config.js

@@ -0,0 +1,8 @@
+import formsPlugin from '@tailwindcss/forms';
+import typographyPlugin from '@tailwindcss/typography';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./{src-dir}/**/*.{js,ts,jsx,tsx}'],
+  plugins: [formsPlugin, typographyPlugin],
+};

package/dist/generator-templates/assets/tailwind/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/generator-templates/assets/vanilla-extract/package.json

@@ -0,0 +1,9 @@
+{
+  "comment": "Remix version is automatically updated by the CLI",
+  "dependencies": {
+    "@remix-run/css-bundle": "^1"
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.11.0"
+  }
+}