Repository: remix-run/react-router
File: integration/vite-css-test.ts (TypeScript)

Code before:
    });

    let input = page.locator("input");
    await expect(input).toBeVisible();
    await input.type("stateful");
    await expect(input).toHaveValue("stateful");

    let edit = createEditor(cwd);
    let modifyCss = (contents: string) =>
      contents
        .replace(PADDING, NEW_PADDING)
        .replace(
          "PADDING_INJECTED_VIA_POSTCSS",
          "NEW_PADDING_INJECTED_VIA_POSTCSS",
        );

    await Promise.all([
      edit(`app/routes/${routeBase}/styles-bundled.css`, modifyCss),
      edit(`app/routes/${routeBase}/styles.module.css`, modifyCss),
      edit(`app/routes/${routeBase}/styles-vanilla-global.css.ts`, modifyCss),
      edit(`app/routes/${routeBase}/styles-vanilla-local.css.ts`, modifyCss),
      edit(`app/routes/${routeBase}/styles-postcss-linked.css`, modifyCss),
    ]);

    await Promise.all(
      [
        "#css-bundled",
        "#css-postcss-linked",
        "#css-modules",
        "#css-vanilla-global",
        "#css-vanilla-local",
      ].map(
        async (selector) =>
          await expect(page.locator(selector)).toHaveCSS(
            "padding",
            NEW_PADDING,
          ),
      ),
    );

    // Ensure CSS updates were handled by HMR
    await expect(input).toHaveValue("stateful");

    if (routeBase === "css") {
      // The following change triggers a full page reload, so we check it after all the checks for HMR state preservation
      await edit("app/entry.client.css", modifyCss);
      await expect(page.locator("#entry-client")).toHaveCSS(
        "padding",
        NEW_PADDING,
      );
    }

Review comment (refactor):
For vanilla extract, we found a user land workaround https://github.com/pawelblaszczyk5/vite-rsc-experiments/blob/643649f2e6562c859d9612126bfc3a183e03c7b5/apps/vanilla-extract/vite.config.ts

I'm not sure yet whether rsc plugin should handle this in some general way or vanilla extract plugin should adjust it somehow.

Code after:
    page.on("pageerror", (error) => pageErrors.push(error));

    await page.goto(`http://localhost:${port}${base ?? "/"}${routeBase}`, {
      waitUntil: "networkidle",
    });

    let input = page.locator("input");
    await expect(input).toBeVisible();

    let edit = createEditor(cwd);
    let modifyCss = (contents: string) =>
      contents
        .replace(PADDING, NEW_PADDING)
        .replace(
          "PADDING_INJECTED_VIA_POSTCSS",
          "NEW_PADDING_INJECTED_VIA_POSTCSS",
        );

    const testCases = [
      { file: "styles-bundled.css", selector: "#css-bundled" },
      // TODO: Fix HMR for CSS Modules in server-first routes in RSC Framework mode
      ...(routeBase === "rsc-server-first-route"
        ? []
        : [{ file: "styles.module.css", selector: "#css-modules" }]),
      // TODO: Fix HMR for `?url` CSS imports in RSC Framework mode: https://github.com/vitejs/vite-plugin-react/issues/772
      // Once fixed, check if this also fixes HMR for Vanilla Extract
      ...(templateName.includes("rsc")
        ? []
        : [
            {
              file: "styles-postcss-linked.css",
              selector: "#css-postcss-linked",
            },
            {
              file: "styles-vanilla-global.css.ts",
              selector: "#css-vanilla-global",
            },
            {
              file: "styles-vanilla-local.css.ts",
              selector: "#css-vanilla-local",
            },
          ]),
    ] as const satisfies Array<{
      file: string;
      selector: string;
    }>;

    for (const { file, selector } of testCases) {
      const routeFile = `app/routes/${routeBase}/${file}`;
      await input.fill(routeFile);
      await edit(routeFile, modifyCss);