fix(vite): route css import (#3438)

Fixes #3426

Author: marvinhagemeister

packages/plugin-vite/demo/routes/tests/css.tsx

@@ -0,0 +1,12 @@
+// @ts-ignore upstream issue https://github.com/denoland/deno/issues/30560
+import "./css_styles.css";
+
+export default function Page() {
+  return (
+    <div>
+      <div class="route">
+        <h1>red text</h1>
+      </div>
+    </div>
+  );
+}

packages/plugin-vite/demo/routes/tests/css_styles.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

packages/plugin-vite/src/plugins/dev_server.ts

@@ -81,7 +81,7 @@ export function devServer(): Plugin[] {
               url.pathname !== "/__inspect" &&
               res.headers.get("Content-Type")?.includes("text/html")
             ) {
-              const collected = await collectCss2(
+              const collected = await collectCss(
                 "fresh:client-entry",
                 server.environments.client,
               );
@@ -132,7 +132,7 @@ export function devServer(): Plugin[] {
   ];
 }
 
-async function collectCss2(
+async function collectCss(
   id: string,
   env: DevEnvironment,
 ) {

packages/plugin-vite/src/plugins/server_snapshot.ts

@@ -351,7 +351,7 @@ export function serverSnapshot(options: ResolvedFreshViteConfig): Plugin[] {
       },
       transform: {
         filter: {
-          id: /\.module\.(css|less|sass)(\?.*)?$/,
+          id: /\.(css|less|sass|scss)(\?.*)?$/,
         },
         handler(_code, id, _options) {
           if (server) {

packages/plugin-vite/tests/build_test.ts

@@ -1,5 +1,9 @@
 import { expect } from "@std/expect";
-import { waitForText, withBrowser } from "../../fresh/tests/test_utils.tsx";
+import {
+  waitFor,
+  waitForText,
+  withBrowser,
+} from "../../fresh/tests/test_utils.tsx";
 import {
   buildVite,
   DEMO_DIR,
@@ -383,6 +387,33 @@ Deno.test({
   sanitizeResources: false,
 });
 
+Deno.test({
+  name: "vite build - route css import",
+  fn: async () => {
+    await launchProd(
+      { cwd: viteResult.tmp },
+      async (address) => {
+        await withBrowser(async (page) => {
+          await page.goto(`${address}/tests/css`, {
+            waitUntil: "networkidle2",
+          });
+
+          await waitFor(async () => {
+            const color = await page
+              .locator("h1")
+              // deno-lint-ignore no-explicit-any
+              .evaluate((el) => window.getComputedStyle(el as any).color);
+            expect(color).toEqual("rgb(255, 0, 0)");
+            return true;
+          });
+        });
+      },
+    );
+  },
+  sanitizeOps: false,
+  sanitizeResources: false,
+});
+
 Deno.test({
   name: "vite build - remote island",
   fn: async () => {

packages/plugin-vite/tests/dev_server_test.ts

@@ -306,6 +306,28 @@ Deno.test({
   sanitizeOps: false,
 });
 
+Deno.test({
+  name: "vite dev - route css import",
+  fn: async () => {
+    await withBrowser(async (page) => {
+      await page.goto(`${demoServer.address()}/tests/css`, {
+        waitUntil: "networkidle2",
+      });
+
+      await waitFor(async () => {
+        const color = await page
+          .locator("h1")
+          // deno-lint-ignore no-explicit-any
+          .evaluate((el) => window.getComputedStyle(el as any).color);
+        expect(color).toEqual("rgb(255, 0, 0)");
+        return true;
+      });
+    });
+  },
+  sanitizeResources: false,
+  sanitizeOps: false,
+});
+
 Deno.test({
   name: "vite dev - remote island",
   fn: async () => {