Add devStyleRuntime option

.changeset/fluffy-kings-watch.md

@@ -0,0 +1,7 @@
+---
+'@vanilla-extract/vite-plugin': minor
+---
+
+Add `devStyleRuntime` option to allow switching between dev style runtimes
+
+The built-in Vite dev style runtime (what adds styles to the page when running `vite serve`) doesn't seem to clean up old styles as expected. Passing `devStyleRuntime: 'vanilla-extract'` will instead use vanilla-extract's browser runtime. This pushes all style creation in development to the browser, but may give a better HMR experience. 

packages/vite-plugin/src/index.ts

@@ -15,17 +15,29 @@ import {
 
 interface Options {
   identifiers?: IdentifierOption;
+
+  /**
+   * Which CSS runtime to use when running `vite serve`.
+   * @default 'vite'
+   */
+  devStyleRuntime?: 'vite' | 'vanilla-extract';
 }
-export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
+export function vanillaExtractPlugin({
+  identifiers,
+  devStyleRuntime = 'vite',
+}: Options = {}): Plugin {
   let config: ResolvedConfig;
   let packageInfo: ReturnType<typeof getPackageInfo>;
+  let useRuntime = false;
   const cssMap = new Map<string, string>();
 
   return {
     name: 'vanilla-extract',
     enforce: 'pre',
     configResolved(resolvedConfig) {
       config = resolvedConfig;
+      useRuntime =
+        devStyleRuntime === 'vanilla-extract' && config.command === 'serve';
 
       packageInfo = getPackageInfo(config.root);
     },
@@ -59,7 +71,7 @@ export function vanillaExtractPlugin({ identifiers }: Options = {}): Plugin {
         return null;
       }
 
-      if (ssr) {
+      if (ssr || useRuntime) {
         return addFileScope({
           source: code,
           filePath: normalizePath(path.relative(packageInfo.dirname, id)),

test-helpers/src/startFixture/vite.ts

@@ -42,7 +42,7 @@ export const startViteFixture = async (
     configFile: false,
     root,
     logLevel: 'error',
-    plugins: [vanillaExtractPlugin()],
+    plugins: [vanillaExtractPlugin({ devStyleRuntime: 'vanilla-extract' })],
     server: {
       port,
     },