Vite: Add runtime evaluation of vanilla-extract files for SSR (#311)

Author: mattcompiles

.changeset/tidy-geckos-act.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+In SSR mode, move to runtime evaluation of vanilla-extract files
+
+This unlocks the potential for CSS extraction on the server.

packages/vite-plugin/src/index.ts

@@ -1,3 +1,4 @@
+import path from 'path';
 import type { Plugin, ResolvedConfig } from 'vite';
 import { normalizePath } from 'vite';
 import {
@@ -7,17 +8,21 @@ import {
   getSourceFromVirtualCssFile,
   compile,
   hash,
+  getPackageInfo,
 } from '@vanilla-extract/integration';
 
 export function vanillaExtractPlugin(): Plugin {
   let config: ResolvedConfig;
+  let packageInfo: ReturnType<typeof getPackageInfo>;
   const cssMap = new Map<string, string>();
 
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+
+      packageInfo = getPackageInfo(config.root);
     },
     resolveId(id) {
       if (virtualCssFileFilter.test(id)) {
@@ -44,25 +49,41 @@ export function vanillaExtractPlugin(): Plugin {
 
       return null;
     },
-    async transform(_code, id, ssr) {
-      if (cssFileFilter.test(id)) {
-        const { source, watchFiles } = await compile({
-          filePath: id,
-          cwd: config.root,
-        });
+    async transform(code, id, ssr) {
+      if (!cssFileFilter.test(id)) {
+        return null;
+      }
 
-        for (const file of watchFiles) {
-          this.addWatchFile(file);
-        }
+      if (ssr && code.indexOf('@vanilla-extract/css/fileScope') === -1) {
+        const filePath = normalizePath(path.relative(packageInfo.dirname, id));
 
-        return processVanillaFile({
-          source,
-          filePath: id,
-          outputCss: !ssr,
-        });
+        const packageName = packageInfo.name
+          ? `"${packageInfo.name}"`
+          : 'undefined';
+
+        return `
+          import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+          setFileScope("${filePath}", ${packageName});
+  
+          ${code}
+          endFileScope();
+        `;
       }
 
-      return null;
+      const { source, watchFiles } = await compile({
+        filePath: id,
+        cwd: config.root,
+      });
+
+      for (const file of watchFiles) {
+        this.addWatchFile(file);
+      }
+
+      return processVanillaFile({
+        source,
+        filePath: id,
+        outputCss: !ssr,
+      });
     },
   };
 }