vite: Add inlineCssInDev option to fix FOUC in SSR dev (#1614)

Author: askoufis

.changeset/cyan-bikes-relax.md

@@ -0,0 +1,23 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+Add new `getAllCss` API
+
+The `Compiler` class now provides a `getAllCss` method that returns all the CSS currently stored by the compiler.
+
+**EXAMPLE USAGE**:
+
+```ts
+import { createCompiler } from '@vanilla-extract/compiler';
+
+const compiler = createCompiler({
+  root: process.cwd(),
+});
+
+await compiler.processVanillaFile('foo.css.ts');
+await compiler.processVanillaFile('bar.css.ts');
+
+// Contains all CSS created by `foo.css.ts` and `bar.css.ts`
+const allCss = compiler.getAllCss();
+```

.changeset/shiny-emus-guess.md

@@ -0,0 +1,26 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+Add new `inlineCssInDev` option to `unstable_mode` configuration property
+
+Setting `unstableMode: 'inlineCssInDev'` will result in all CSS generated by Vanilla Extract being inlined into a `style` element at the top of the document `head`. This feature is useful for preventing [FOUC] (Flash of Unstyled Content) when server-rendering your initial HTML. Without this, calling `ssrLoadModule` on your server entrypoint will not include the CSS in the HTML, leading to a FOUC when the client-side JavaScript takes over.
+
+Note that CSS will only be inlined in development mode. Production builds are unaffected by this setting.
+
+**EXAMPLE USAGE**:
+
+```ts
+// vite.config.ts
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+
+export default {
+  plugins: [
+    vanillaExtractPlugin({
+      unstable_mode: 'inlineCssInDev',
+    }),
+  ],
+}
+```
+
+[FOUC]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content

packages/compiler/src/compiler.ts

@@ -240,6 +240,7 @@ export interface Compiler {
   ): Promise<{ source: string; watchFiles: Set<string> }>;
   getCssForFile(virtualCssFilePath: string): { filePath: string; css: string };
   close(): Promise<void>;
+  getAllCss(): string;
 }
 
 interface ProcessedVanillaFile {
@@ -499,5 +500,16 @@ export const createCompiler = ({
 
       await server.close();
     },
+    getAllCss() {
+      let allCss = '';
+
+      for (const { css } of cssCache.values()) {
+        if (css) {
+          allCss += css + '\n';
+        }
+      }
+
+      return allCss;
+    },
   };
 };