feat(remix-dev): add opt-in Vanilla Extract cache (#5735)

.changeset/vanilla-extract-cache.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": minor
+---
+
+Add experimental support for Vanilla Extract caching which can be enabled by setting `future.unstable_vanillaExtract: { cache: true }` in `remix.config`. This is considered experimental due to the use of a brand new Vanilla Extract compiler under the hood. Note that in order to use this feature, you must be using at least `v1.10.0` of `@vanilla-extract/css`.

integration/deterministic-build-output-test.ts

@@ -3,6 +3,7 @@ import globby from "globby";
 import fs from "fs";
 import path from "path";
 
+import type { FixtureInit } from "./helpers/create-fixture";
 import { createFixtureProject, js, css } from "./helpers/create-fixture";
 
 test("builds deterministically under different paths", async () => {
@@ -24,7 +25,7 @@ test("builds deterministically under different paths", async () => {
   //  * serverEntryModulePlugin (implicitly tested by build)
   //  * serverRouteModulesPlugin (implicitly tested by build)
   //  * vanillaExtractPlugin (via app/routes/foo.tsx' .css.ts file import)
-  let init = {
+  let init: FixtureInit = {
     future: {
       unstable_cssModules: true,
       unstable_cssSideEffectImports: true,
@@ -64,7 +65,7 @@ test("builds deterministically under different paths", async () => {
           <circle cx="50" cy="50" r="50" fill="coral" />
         </svg>
       `,
-      "app/styles/vanilla.css.ts": css`
+      "app/styles/vanilla.css.ts": js`
         import { style } from "@vanilla-extract/css";
         import { chocolate } from "./chocolate.css";
         import imageUrl from "~/images/foo.svg";
@@ -79,7 +80,7 @@ test("builds deterministically under different paths", async () => {
           }
         ]);
       `,
-      "app/styles/chocolate.css.ts": css`
+      "app/styles/chocolate.css.ts": js`
         import { style } from "@vanilla-extract/css";
 
         export const chocolate = style({
@@ -115,3 +116,66 @@ test("builds deterministically under different paths", async () => {
     );
   });
 });
+
+test("builds Vanilla Extract files deterministically under different paths with Vanilla Extract cache enabled", async () => {
+  let init: FixtureInit = {
+    future: {
+      unstable_vanillaExtract: { cache: true },
+      v2_routeConvention: true,
+    },
+    files: {
+      "app/routes/foo.tsx": js`
+        import { vanilla } from "~/styles/vanilla.css";
+        export default () => <div className={vanilla}>YAY</div>;
+      `,
+      "app/images/foo.svg": `
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="50" cy="50" r="50" fill="coral" />
+        </svg>
+      `,
+      "app/styles/vanilla.css.ts": js`
+        import { style } from "@vanilla-extract/css";
+        import { chocolate } from "./chocolate.css";
+        import imageUrl from "~/images/foo.svg";
+
+        export const vanilla = style([
+          chocolate,
+          {
+            backgroundImage: [
+              "url(" + imageUrl + ")",
+              "url(~/images/foo.svg)",
+            ],
+          }
+        ]);
+      `,
+      "app/styles/chocolate.css.ts": js`
+        import { style } from "@vanilla-extract/css";
+
+        export const chocolate = style({
+          color: "chocolate",
+        });
+      `,
+    },
+  };
+  let dir1 = await createFixtureProject(init);
+  let dir2 = await createFixtureProject(init);
+
+  expect(dir1).not.toEqual(dir2);
+
+  let files1 = await globby(["build/index.js", "public/build/**/*.{js,css}"], {
+    cwd: dir1,
+  });
+  files1 = files1.sort();
+  let files2 = await globby(["build/index.js", "public/build/**/*.{js,css}"], {
+    cwd: dir2,
+  });
+  files2 = files2.sort();
+
+  expect(files1.length).toBeGreaterThan(0);
+  expect(files1).toEqual(files2);
+  files1.forEach((file, i) => {
+    expect(fs.readFileSync(path.join(dir1, file))).toEqual(
+      fs.readFileSync(path.join(dir2, files2[i]))
+    );
+  });
+});

integration/helpers/create-fixture.ts

@@ -15,7 +15,7 @@ import { createRequestHandler as createExpressHandler } from "../../build/node_m
 
 const TMP_DIR = path.join(process.cwd(), ".tmp", "integration");
 
-interface FixtureInit {
+export interface FixtureInit {
   buildStdio?: Writable;
   sourcemap?: boolean;
   files?: { [filename: string]: string };