fix(next): resolve HMR flashing by using stable cache files

Replace the `data:text/css;base64` injection with a file-system-based caching mechanism. By generating physical CSS files in `node_modules/.rawstyle/<hash>.css`, the CSS import paths remain stable during development, which significantly improves Turbopack HMR performance without flashing.

Author: kh4f

README.md

@@ -59,7 +59,7 @@ export default {
 	turbopack: { rules: { ...rawstyleTurboRule } },
 } satisfies NextConfig
 ```
-> The loader extracts CSS and injects it as a base64 CSS import.
+> The loader extracts CSS into locally cached files and injects them as relative imports.
 
 #### Vite
 

packages/next/src/index.ts

@@ -1,3 +1,6 @@
+import { mkdirSync, writeFileSync } from 'node:fs'
+import { join, resolve, relative, dirname } from 'node:path'
+import { createHash } from 'node:crypto'
 import { TRANSFORMABLE_EXT } from 'rawstyle'
 import { transform } from 'rawstyle/transformer'
 import type { NextConfig } from 'next'
@@ -12,6 +15,16 @@ export const rawstyleTurboRule: Required<Required<NextConfig>['turbopack']>['rul
 export default function (this: { resourcePath: string }, source: string): string {
 	const { transformed, css } = transform(this.resourcePath, source)
 	if (!css) return transformed
-	const base64Css = Buffer.from(css, 'utf8').toString('base64')
-	return transformed.replace(/^\w/m, `import 'data:text/css;base64,${base64Css}';$&`)
+
+	const fileHash = createHash('md5').update(this.resourcePath).digest('hex')
+	const cacheDir = resolve('node_modules', '.rawstyle')
+	const cssFilePath = join(cacheDir, `${fileHash}.css`)
+
+	mkdirSync(cacheDir, { recursive: true })
+	writeFileSync(cssFilePath, css, 'utf8')
+
+	let importPath = relative(dirname(this.resourcePath), cssFilePath).replace(/\\/g, '/')
+	if (!importPath.startsWith('.')) importPath = `./${importPath}`
+
+	return transformed.replace(/^\w/m, `import '${importPath}';\n$&`)
 }