vite: Disable the compiler's file watcher during builds (#1592)

Author: askoufis

.changeset/kind-chicken-battle.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Disable the compiler's file watcher during builds

.changeset/wet-swans-rush.md

@@ -0,0 +1,17 @@
+---
+'@vanilla-extract/compiler': minor
+---
+
+`createCompiler`: Add `enableFileWatcher` option
+
+By default, the compiler sets up its own file watcher.
+This option allows you to disable it if necessary, such as during a production build.
+
+**EXAMPLE USAGE**:
+
+```ts
+const compiler = createCompiler({
+  root: process.cwd(),
+  enableFileWatcher: false
+});
+```

packages/compiler/src/compiler.ts

@@ -93,9 +93,11 @@ const createViteServer = async ({
   root,
   identifiers,
   viteConfig,
+  enableFileWatcher = true,
 }: Required<
   Pick<CreateCompilerOptions, 'root' | 'identifiers' | 'viteConfig'>
->) => {
+> &
+  Pick<CreateCompilerOptions, 'enableFileWatcher'>) => {
   const pkg = getPackageInfo(root);
   const vite = await import('vite');
 
@@ -108,6 +110,7 @@ const createViteServer = async ({
     root,
     server: {
       hmr: false,
+      watch: enableFileWatcher ? undefined : null,
     },
     logLevel: 'silent',
     optimizeDeps: {
@@ -194,9 +197,11 @@ const createViteServer = async ({
     },
   });
 
-  server.watcher.on('change', (filePath) => {
-    runner.moduleCache.invalidateDepTree([filePath]);
-  });
+  if (enableFileWatcher) {
+    server.watcher.on('change', (filePath) => {
+      runner.moduleCache.invalidateDepTree([filePath]);
+    });
+  }
 
   return {
     server,
@@ -244,6 +249,13 @@ interface ProcessedVanillaFile {
 
 export interface CreateCompilerOptions {
   root: string;
+  /**
+   * By default, the compiler sets up its own file watcher. This option allows you to disable it if
+   * necessary, such as during a production build.
+   *
+   * @default true
+   */
+  enableFileWatcher?: boolean;
   cssImportSpecifier?: (filePath: string) => string;
   identifiers?: IdentifierOption;
   viteConfig?: ViteUserConfig;
@@ -257,6 +269,7 @@ export const createCompiler = ({
   identifiers = 'debug',
   cssImportSpecifier = (filePath) => filePath + '.vanilla.css',
   viteConfig,
+  enableFileWatcher,
   viteResolve,
   vitePlugins,
 }: CreateCompilerOptions): Compiler => {
@@ -272,6 +285,7 @@ export const createCompiler = ({
       resolve: viteResolve,
       plugins: vitePlugins,
     },
+    enableFileWatcher,
   });
 
   const processVanillaFileCache = new Map<
@@ -388,8 +402,8 @@ export const createCompiler = ({
             throw new Error(`Can't find ModuleNode for ${filePath}`);
           }
 
-          const cssImports = [];
-          const orderedComposedClassLists = [];
+          const cssImports: string[] = [];
+          const orderedComposedClassLists: Composition[] = [];
 
           const scanModule = createModuleScanner();
           const { cssDeps, watchFiles } = scanModule(moduleNode);

packages/vite-plugin/src/index.ts

@@ -60,13 +60,14 @@ const withUserPluginFilter =
 export function vanillaExtractPlugin({
   identifiers,
   unstable_pluginFilter: pluginFilter = defaultPluginFilter,
-  unstable_mode: mode = 'emitCss',
+  unstable_mode = 'emitCss',
 }: Options = {}): Plugin {
   let config: ResolvedConfig;
   let configEnv: ConfigEnv;
   let server: ViteDevServer;
   let packageName: string;
   let compiler: Compiler | undefined;
+  let isBuild: boolean;
   const vitePromise = import('vite');
 
   const getIdentOption = () =>
@@ -127,11 +128,12 @@ export function vanillaExtractPlugin({
     },
     async configResolved(_resolvedConfig) {
       config = _resolvedConfig;
+      isBuild = config.command === 'build' && !config.build.watch;
       packageName = getPackageInfo(config.root).name;
     },
     async buildStart() {
       // Ensure we re-use the compiler instance between builds, e.g. in watch mode
-      if (mode !== 'transform' && !compiler) {
+      if (unstable_mode !== 'transform' && !compiler) {
         const { loadConfigFromFile } = await vitePromise;
 
         let configForViteCompiler: UserConfig | undefined;
@@ -167,6 +169,7 @@ export function vanillaExtractPlugin({
           identifiers: getIdentOption(),
           cssImportSpecifier: fileIdToVirtualId,
           viteConfig,
+          enableFileWatcher: !isBuild,
         });
       }
     },
@@ -189,7 +192,7 @@ export function vanillaExtractPlugin({
 
       const identOption = getIdentOption();
 
-      if (mode === 'transform') {
+      if (unstable_mode === 'transform') {
         return transform({
           source: code,
           filePath: normalizePath(validId),
@@ -212,7 +215,7 @@ export function vanillaExtractPlugin({
         };
 
         // We don't need to watch files in build mode
-        if (config.command === 'build' && !config.build.watch) {
+        if (isBuild) {
           return result;
         }
 

test-helpers/src/startFixture/esbuild.ts

@@ -12,6 +12,7 @@ export interface EsbuildFixtureOptions {
   mode?: 'development' | 'production';
   port: number;
 }
+
 export const startEsbuildFixture = async (
   fixtureName: string,
   { type, mode = 'development', port = 3000 }: EsbuildFixtureOptions,
@@ -48,8 +49,17 @@ export const startEsbuildFixture = async (
     outdir,
   });
 
+  await ctx.watch();
+
   const server = await ctx.serve({ servedir: outdir, port });
 
+  const esbuildLiveReloadScript = `
+    <script type="module">
+      new EventSource('/esbuild').addEventListener('change', () =>
+      location.reload(),
+      );
+    </script>`;
+
   await fs.writeFile(
     path.join(outdir, 'index.html'),
     `<!DOCTYPE html>
@@ -58,6 +68,7 @@ export const startEsbuildFixture = async (
       <meta charset="utf-8">
       <title>esbuild - ${fixtureName}</title>
       <link rel="stylesheet" type="text/css" href="index.css" />
+      ${mode !== 'production' ? esbuildLiveReloadScript : ''}
       </head>
     <body>
       <script src="index.js"></script>