@vanilla-extract/vite-plugin 5.2.5 → 5.2.6

package/dist/vanilla-extract-vite-plugin.cjs.dev.js

@@ -163,6 +163,39 @@ function vanillaExtractPlugin({
     compilerReady ?? (compilerReady = initializeCompiler());
     return compilerReady;
   };
+
+  /**
+   * Virtual `*.vanilla.css` modules are only populated after the parent
+   * `.css.ts` has been `processVanillaFile`'d. That normally happens in
+   * `transform`, but Vite can serve the parent without re-running `transform`
+   * (notably 304 Not Modified after a server restart with a warm browser
+   * cache), leaving the compiler CSS cache empty when the virtual module is
+   * requested. On miss, process the parent so virtual CSS is self-sufficient.
+   *
+   * A future (likely breaking) refactor should consider a soft-read/ensure API
+   * in the compiler so plugins don't have to catch thrown cache misses or call
+   * `processVanillaFile` themselves.
+   */
+  const ensureCssForVirtualId = async absoluteVirtualId => {
+    await ensureCompiler();
+    if (!compiler$1) {
+      return null;
+    }
+    const fileId = virtualIdToFileId(absoluteVirtualId);
+    try {
+      return compiler$1.getCssForFile(fileId).css;
+    } catch {
+      // Not in cache yet for this compiler lifetime
+    }
+    await compiler$1.processVanillaFile(fileId, {
+      outputCss: true
+    });
+    try {
+      return compiler$1.getCssForFile(fileId).css;
+    } catch {
+      return null;
+    }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -298,36 +331,27 @@ function vanillaExtractPlugin({
         timestamp
       });
     },
-    resolveId(source) {
+    async resolveId(source) {
       const [validId, query] = source.split('?');
       if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      if (!compiler$1) return;
-
-      // The only valid scenario for a missing CSS entry is if someone had
-      // written a file in their app using the .vanilla.js/.vanilla.css
-      // extension, or the file produced no CSS output.
-      const {
-        css
-      } = compiler$1.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         // Keep the original query string for HMR.
         return absoluteId + (query ? `?${query}` : '');
       }
     },
-    load(id) {
+    async load(id) {
       const [validId] = id.split('?');
-      if (!isVirtualId(validId) || !compiler$1) return;
+      if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      const {
-        css
-      } = compiler$1.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         return css;
       }

package/dist/vanilla-extract-vite-plugin.cjs.prod.js

@@ -163,6 +163,39 @@ function vanillaExtractPlugin({
     compilerReady ?? (compilerReady = initializeCompiler());
     return compilerReady;
   };
+
+  /**
+   * Virtual `*.vanilla.css` modules are only populated after the parent
+   * `.css.ts` has been `processVanillaFile`'d. That normally happens in
+   * `transform`, but Vite can serve the parent without re-running `transform`
+   * (notably 304 Not Modified after a server restart with a warm browser
+   * cache), leaving the compiler CSS cache empty when the virtual module is
+   * requested. On miss, process the parent so virtual CSS is self-sufficient.
+   *
+   * A future (likely breaking) refactor should consider a soft-read/ensure API
+   * in the compiler so plugins don't have to catch thrown cache misses or call
+   * `processVanillaFile` themselves.
+   */
+  const ensureCssForVirtualId = async absoluteVirtualId => {
+    await ensureCompiler();
+    if (!compiler$1) {
+      return null;
+    }
+    const fileId = virtualIdToFileId(absoluteVirtualId);
+    try {
+      return compiler$1.getCssForFile(fileId).css;
+    } catch {
+      // Not in cache yet for this compiler lifetime
+    }
+    await compiler$1.processVanillaFile(fileId, {
+      outputCss: true
+    });
+    try {
+      return compiler$1.getCssForFile(fileId).css;
+    } catch {
+      return null;
+    }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -298,36 +331,27 @@ function vanillaExtractPlugin({
         timestamp
       });
     },
-    resolveId(source) {
+    async resolveId(source) {
       const [validId, query] = source.split('?');
       if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      if (!compiler$1) return;
-
-      // The only valid scenario for a missing CSS entry is if someone had
-      // written a file in their app using the .vanilla.js/.vanilla.css
-      // extension, or the file produced no CSS output.
-      const {
-        css
-      } = compiler$1.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         // Keep the original query string for HMR.
         return absoluteId + (query ? `?${query}` : '');
       }
     },
-    load(id) {
+    async load(id) {
       const [validId] = id.split('?');
-      if (!isVirtualId(validId) || !compiler$1) return;
+      if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      const {
-        css
-      } = compiler$1.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         return css;
       }

package/dist/vanilla-extract-vite-plugin.esm.js

@@ -159,6 +159,39 @@ function vanillaExtractPlugin({
     compilerReady ?? (compilerReady = initializeCompiler());
     return compilerReady;
   };
+
+  /**
+   * Virtual `*.vanilla.css` modules are only populated after the parent
+   * `.css.ts` has been `processVanillaFile`'d. That normally happens in
+   * `transform`, but Vite can serve the parent without re-running `transform`
+   * (notably 304 Not Modified after a server restart with a warm browser
+   * cache), leaving the compiler CSS cache empty when the virtual module is
+   * requested. On miss, process the parent so virtual CSS is self-sufficient.
+   *
+   * A future (likely breaking) refactor should consider a soft-read/ensure API
+   * in the compiler so plugins don't have to catch thrown cache misses or call
+   * `processVanillaFile` themselves.
+   */
+  const ensureCssForVirtualId = async absoluteVirtualId => {
+    await ensureCompiler();
+    if (!compiler) {
+      return null;
+    }
+    const fileId = virtualIdToFileId(absoluteVirtualId);
+    try {
+      return compiler.getCssForFile(fileId).css;
+    } catch {
+      // Not in cache yet for this compiler lifetime
+    }
+    await compiler.processVanillaFile(fileId, {
+      outputCss: true
+    });
+    try {
+      return compiler.getCssForFile(fileId).css;
+    } catch {
+      return null;
+    }
+  };
   return [{
     name: `${PLUGIN_NAMESPACE}-inline-dev-css`,
     apply: (_, {
@@ -294,36 +327,27 @@ function vanillaExtractPlugin({
         timestamp
       });
     },
-    resolveId(source) {
+    async resolveId(source) {
       const [validId, query] = source.split('?');
       if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      if (!compiler) return;
-
-      // The only valid scenario for a missing CSS entry is if someone had
-      // written a file in their app using the .vanilla.js/.vanilla.css
-      // extension, or the file produced no CSS output.
-      const {
-        css
-      } = compiler.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         // Keep the original query string for HMR.
         return absoluteId + (query ? `?${query}` : '');
       }
     },
-    load(id) {
+    async load(id) {
       const [validId] = id.split('?');
-      if (!isVirtualId(validId) || !compiler) return;
+      if (!isVirtualId(validId)) return;
       const absoluteId = getAbsoluteId({
         filePath: validId,
         root: config.root
       });
-      const {
-        css
-      } = compiler.getCssForFile(virtualIdToFileId(absoluteId));
+      const css = await ensureCssForVirtualId(absoluteId);
       if (css) {
         return css;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/vite-plugin",
-  "version": "5.2.5",
+  "version": "5.2.6",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "main": "dist/vanilla-extract-vite-plugin.cjs.js",
   "module": "dist/vanilla-extract-vite-plugin.esm.js",