fix: properly handle sass in dev styles

e2e/react-start/css-modules/package.json

@@ -40,6 +40,7 @@
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
     "nitro": "npm:nitro-nightly@latest",
+    "sass": "^1.97.2",
     "srvx": "^0.10.0",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",

e2e/react-start/css-modules/src/routes/__root.tsx

@@ -48,6 +48,13 @@ function RootComponent() {
           >
             CSS Modules
           </Link>
+          <Link
+            to="/sass-mixin"
+            style={{ color: '#0284c7', textDecoration: 'none' }}
+            data-testid="nav-sass-mixin"
+          >
+            Sass Mixin
+          </Link>
         </nav>
 
         <main style={{ padding: '20px' }}>

e2e/react-start/css-modules/src/routes/sass-mixin.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute } from '@tanstack/react-router'
+import '~/styles/app.scss'
+
+export const Route = createFileRoute('/sass-mixin')({
+  component: SassMixin,
+})
+
+function SassMixin() {
+  return (
+    <div>
+      <h1>CSS Collection Test - Sass Mixin</h1>
+      <p>
+        This page tests that Sass mixins imported in a parent file are available
+        to subsequent imports during dev mode SSR.
+      </p>
+
+      <div className="mixin-container" data-testid="mixin-styled">
+        <span data-testid="mixin-content">
+          Sass Mixin Applied - Should be centered with purple background
+        </span>
+      </div>
+    </div>
+  )
+}

e2e/react-start/css-modules/src/styles/app.scss

@@ -0,0 +1,4 @@
+// Import the mixin, which should make them available to future imports
+@import './center-mixin.scss';
+
+@import './mixin-consumer.scss';

e2e/react-start/css-modules/src/styles/center-mixin.scss

@@ -0,0 +1,5 @@
+@mixin center-mixin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

e2e/react-start/css-modules/src/styles/mixin-consumer.scss

@@ -0,0 +1,10 @@
+.mixin-container {
+  // Use the center mixin, which is included in app.scss
+  // This works for the client build, but not for the dev server styles.css build
+  @include center-mixin;
+  background-color: #a855f7; /* purple-500 */
+  padding: 24px;
+  border-radius: 12px;
+  color: white;
+  min-height: 100px;
+}

e2e/react-start/css-modules/tests/css.spec.ts

@@ -113,6 +113,44 @@ test.describe('CSS styles in SSR (dev mode)', () => {
       const className = await element.getAttribute('class')
       expect(className).toBe('global-container')
     })
+
+    test('Sass mixin styles are applied on initial page load', async ({
+      page,
+      baseURL,
+    }) => {
+      await page.goto(buildUrl(baseURL!, '/sass-mixin'))
+
+      const element = page.getByTestId('mixin-styled')
+      await expect(element).toBeVisible()
+
+      // Verify the mixin is applied (display: flex from center-mixin)
+      const display = await element.evaluate(
+        (el) => getComputedStyle(el).display,
+      )
+      expect(display).toBe('flex')
+
+      const justifyContent = await element.evaluate(
+        (el) => getComputedStyle(el).justifyContent,
+      )
+      expect(justifyContent).toBe('center')
+
+      const alignItems = await element.evaluate(
+        (el) => getComputedStyle(el).alignItems,
+      )
+      expect(alignItems).toBe('center')
+
+      // Verify other styles from mixin-consumer.scss
+      // #a855f7 (purple-500) in RGB is rgb(168, 85, 247)
+      const backgroundColor = await element.evaluate(
+        (el) => getComputedStyle(el).backgroundColor,
+      )
+      expect(backgroundColor).toBe('rgb(168, 85, 247)')
+
+      const padding = await element.evaluate(
+        (el) => getComputedStyle(el).padding,
+      )
+      expect(padding).toBe('24px')
+    })
   })
 
   test('styles persist after hydration', async ({ page, baseURL }) => {

e2e/react-start/css-modules/vite.config.ts

@@ -22,9 +22,11 @@ export default defineConfig(async () => {
       tsConfigPaths({
         projects: ['./tsconfig.json'],
       }),
+      // Nitro is placed BEFORE tanstackStart to test that our CSS middleware
+      // works regardless of plugin order (nitro has a catch-all middleware)
+      ...nitroPlugin,
       tanstackStart(),
       viteReact(),
-      ...nitroPlugin,
     ],
   }
 })

e2e/solid-start/css-modules/package.json

@@ -22,6 +22,7 @@
     "@playwright/test": "^1.50.1",
     "@tanstack/router-e2e-utils": "workspace:*",
     "@types/node": "^22.10.2",
+    "sass": "^1.97.2",
     "srvx": "^0.10.0",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",

e2e/solid-start/css-modules/src/routes/__root.tsx

@@ -50,6 +50,13 @@ function RootComponent() {
           >
             CSS Modules
           </Link>
+          <Link
+            to="/sass-mixin"
+            style={{ color: '#0284c7', 'text-decoration': 'none' }}
+            data-testid="nav-sass-mixin"
+          >
+            Sass Mixin
+          </Link>
         </nav>
 
         <main style={{ padding: '20px' }}>

e2e/solid-start/css-modules/src/routes/sass-mixin.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute } from '@tanstack/solid-router'
+import '~/styles/app.scss'
+
+export const Route = createFileRoute('/sass-mixin')({
+  component: SassMixin,
+})
+
+function SassMixin() {
+  return (
+    <div>
+      <h1>CSS Collection Test - Sass Mixin</h1>
+      <p>
+        This page tests that Sass mixins imported in a parent file are available
+        to subsequent imports during dev mode SSR.
+      </p>
+
+      <div class="mixin-container" data-testid="mixin-styled">
+        <span data-testid="mixin-content">
+          Sass Mixin Applied - Should be centered with purple background
+        </span>
+      </div>
+    </div>
+  )
+}

e2e/solid-start/css-modules/src/styles/app.scss

@@ -0,0 +1,4 @@
+// Import the mixin, which should make them available to future imports
+@import './center-mixin.scss';
+
+@import './mixin-consumer.scss';

e2e/solid-start/css-modules/src/styles/center-mixin.scss

@@ -0,0 +1,5 @@
+@mixin center-mixin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

e2e/solid-start/css-modules/src/styles/mixin-consumer.scss

@@ -0,0 +1,10 @@
+.mixin-container {
+  // Use the center mixin, which is included in app.scss
+  // This works for the client build, but not for the dev server styles.css build
+  @include center-mixin;
+  background-color: #a855f7; /* purple-500 */
+  padding: 24px;
+  border-radius: 12px;
+  color: white;
+  min-height: 100px;
+}

e2e/solid-start/css-modules/tests/css.spec.ts

@@ -113,6 +113,44 @@ test.describe('CSS styles in SSR (dev mode)', () => {
       const className = await element.getAttribute('class')
       expect(className).toBe('global-container')
     })
+
+    test('Sass mixin styles are applied on initial page load', async ({
+      page,
+      baseURL,
+    }) => {
+      await page.goto(buildUrl(baseURL!, '/sass-mixin'))
+
+      const element = page.getByTestId('mixin-styled')
+      await expect(element).toBeVisible()
+
+      // Verify the mixin is applied (display: flex from center-mixin)
+      const display = await element.evaluate(
+        (el) => getComputedStyle(el).display,
+      )
+      expect(display).toBe('flex')
+
+      const justifyContent = await element.evaluate(
+        (el) => getComputedStyle(el).justifyContent,
+      )
+      expect(justifyContent).toBe('center')
+
+      const alignItems = await element.evaluate(
+        (el) => getComputedStyle(el).alignItems,
+      )
+      expect(alignItems).toBe('center')
+
+      // Verify other styles from mixin-consumer.scss
+      // #a855f7 (purple-500) in RGB is rgb(168, 85, 247)
+      const backgroundColor = await element.evaluate(
+        (el) => getComputedStyle(el).backgroundColor,
+      )
+      expect(backgroundColor).toBe('rgb(168, 85, 247)')
+
+      const padding = await element.evaluate(
+        (el) => getComputedStyle(el).padding,
+      )
+      expect(padding).toBe('24px')
+    })
   })
 
   test('styles persist after hydration', async ({ page, baseURL }) => {

e2e/vue-start/css-modules/package.json

@@ -23,6 +23,7 @@
     "@tanstack/router-e2e-utils": "workspace:*",
     "@types/node": "^22.10.2",
     "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "sass": "^1.97.2",
     "srvx": "^0.10.0",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",

e2e/vue-start/css-modules/src/routes/__root.tsx

@@ -50,6 +50,13 @@ function RootComponent() {
           >
             CSS Modules
           </Link>
+          <Link
+            to="/sass-mixin"
+            style={{ color: '#0284c7', textDecoration: 'none' }}
+            data-testid="nav-sass-mixin"
+          >
+            Sass Mixin
+          </Link>
         </nav>
 
         <main style={{ padding: '20px' }}>

e2e/vue-start/css-modules/src/routes/sass-mixin.tsx

@@ -0,0 +1,24 @@
+import { createFileRoute } from '@tanstack/vue-router'
+import '~/styles/app.scss'
+
+export const Route = createFileRoute('/sass-mixin')({
+  component: SassMixin,
+})
+
+function SassMixin() {
+  return (
+    <div>
+      <h1>CSS Collection Test - Sass Mixin</h1>
+      <p>
+        This page tests that Sass mixins imported in a parent file are available
+        to subsequent imports during dev mode SSR.
+      </p>
+
+      <div class="mixin-container" data-testid="mixin-styled">
+        <span data-testid="mixin-content">
+          Sass Mixin Applied - Should be centered with purple background
+        </span>
+      </div>
+    </div>
+  )
+}

e2e/vue-start/css-modules/src/styles/app.scss

@@ -0,0 +1,4 @@
+// Import the mixin, which should make them available to future imports
+@import './center-mixin.scss';
+
+@import './mixin-consumer.scss';

e2e/vue-start/css-modules/src/styles/center-mixin.scss

@@ -0,0 +1,5 @@
+@mixin center-mixin {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

e2e/vue-start/css-modules/src/styles/mixin-consumer.scss

@@ -0,0 +1,10 @@
+.mixin-container {
+  // Use the center mixin, which is included in app.scss
+  // This works for the client build, but not for the dev server styles.css build
+  @include center-mixin;
+  background-color: #a855f7; /* purple-500 */
+  padding: 24px;
+  border-radius: 12px;
+  color: white;
+  min-height: 100px;
+}

e2e/vue-start/css-modules/tests/css.spec.ts

@@ -115,6 +115,44 @@ test.describe('CSS styles in SSR (dev mode)', () => {
       const className = await element.getAttribute('class')
       expect(className).toBe('global-container')
     })
+
+    test('Sass mixin styles are applied on initial page load', async ({
+      page,
+      baseURL,
+    }) => {
+      await page.goto(buildUrl(baseURL!, '/sass-mixin'))
+
+      const element = page.getByTestId('mixin-styled')
+      await expect(element).toBeVisible()
+
+      // Verify the mixin is applied (display: flex from center-mixin)
+      const display = await element.evaluate(
+        (el) => getComputedStyle(el).display,
+      )
+      expect(display).toBe('flex')
+
+      const justifyContent = await element.evaluate(
+        (el) => getComputedStyle(el).justifyContent,
+      )
+      expect(justifyContent).toBe('center')
+
+      const alignItems = await element.evaluate(
+        (el) => getComputedStyle(el).alignItems,
+      )
+      expect(alignItems).toBe('center')
+
+      // Verify other styles from mixin-consumer.scss
+      // #a855f7 (purple-500) in RGB is rgb(168, 85, 247)
+      const backgroundColor = await element.evaluate(
+        (el) => getComputedStyle(el).backgroundColor,
+      )
+      expect(backgroundColor).toBe('rgb(168, 85, 247)')
+
+      const padding = await element.evaluate(
+        (el) => getComputedStyle(el).padding,
+      )
+      expect(padding).toBe('24px')
+    })
   })
 
   test('styles persist after hydration', async ({ page, baseURL }) => {