fix: mark Vanilla Extract files as side effects

.changeset/healthy-beers-nail.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/dev": patch
+---
+
+Mark Vanilla Extract files as side effects to ensure that files only containing global styles aren't tree-shaken

integration/vanilla-extract-test.ts

@@ -49,6 +49,8 @@ test.describe("Vanilla Extract", () => {
         ...javaScriptFixture(),
         ...classCompositionFixture(),
         ...rootRelativeClassCompositionFixture(),
+        ...sideEffectImportsFixture(),
+        ...sideEffectImportsWithinChildCompilationFixture(),
         ...stableIdentifiersFixture(),
         ...imageUrlsViaCssUrlFixture(),
         ...imageUrlsViaRootRelativeCssUrlFixture(),
@@ -209,6 +211,71 @@ test.describe("Vanilla Extract", () => {
     expect(padding).toBe(TEST_PADDING_VALUE);
   });
 
+  let sideEffectImportsFixture = () => ({
+    "app/fixtures/side-effect-imports/styles.css.ts": js`
+      import { globalStyle } from "@vanilla-extract/css";
+
+      globalStyle(".side-effect-imports", {
+        padding: ${JSON.stringify(TEST_PADDING_VALUE)}
+      });
+    `,
+    "app/routes/side-effect-imports-test.jsx": js`
+      import "../fixtures/side-effect-imports/styles.css";
+
+      export default function() {
+        return (
+          <div data-testid="side-effect-imports" className="side-effect-imports">
+            Side-effect imports test
+          </div>
+        )
+      }
+    `,
+  });
+  test("side-effect imports", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/side-effect-imports-test");
+    let locator = await page.locator("[data-testid='side-effect-imports']");
+    let padding = await locator.evaluate(
+      (element) => window.getComputedStyle(element).padding
+    );
+    expect(padding).toBe(TEST_PADDING_VALUE);
+  });
+
+  let sideEffectImportsWithinChildCompilationFixture = () => ({
+    "app/fixtures/side-effect-imports-within-child-compilation/styles.css.ts": js`
+      import "./nested-side-effect.css";
+    `,
+    "app/fixtures/side-effect-imports-within-child-compilation/nested-side-effect.css.ts": js`
+      import { globalStyle } from "@vanilla-extract/css";
+
+      globalStyle(".side-effect-imports-within-child-compilation", {
+        padding: ${JSON.stringify(TEST_PADDING_VALUE)}
+      });
+    `,
+    "app/routes/side-effect-imports-within-child-compilation-test.jsx": js`
+      import "../fixtures/side-effect-imports-within-child-compilation/styles.css";
+
+      export default function() {
+        return (
+          <div data-testid="side-effect-imports-within-child-compilation" className="side-effect-imports-within-child-compilation">
+            Side-effect imports within child compilation test
+          </div>
+        )
+      }
+    `,
+  });
+  test("side-effect imports within child compilation", async ({ page }) => {
+    let app = new PlaywrightFixture(appFixture, page);
+    await app.goto("/side-effect-imports-within-child-compilation-test");
+    let locator = await page.locator(
+      "[data-testid='side-effect-imports-within-child-compilation']"
+    );
+    let padding = await locator.evaluate(
+      (element) => window.getComputedStyle(element).padding
+    );
+    expect(padding).toBe(TEST_PADDING_VALUE);
+  });
+
   let stableIdentifiersFixture = () => ({
     "app/fixtures/stable-identifiers/styles_a.css.ts": js`
       import { style } from "@vanilla-extract/css";

packages/remix-dev/compiler/plugins/cssSideEffectImportsPlugin.ts

@@ -84,9 +84,16 @@ export const cssSideEffectImportsPlugin = ({
             })
           ).path;
 
+          // If the resolved path isn't a CSS file then we don't want
+          // to handle it. In our case this is specifically done to
+          // avoid matching Vanilla Extract's .css.ts/.js files.
+          if (!resolvedPath.split("?")[0].endsWith(".css")) {
+            return null;
+          }
+
           return {
             path: path.relative(config.rootDirectory, resolvedPath),
-            namespace: resolvedPath.endsWith(".css") ? namespace : undefined,
+            namespace,
           };
         }
       );

packages/remix-dev/compiler/plugins/vanillaExtractPlugin.ts

@@ -38,13 +38,18 @@ export function vanillaExtractPlugin({
       });
       let { rootDirectory } = config;
 
+      // Resolve virtual CSS files first to avoid resolving the same
+      // file multiple times since this filter is more specific and
+      // doesn't require a file system lookup.
       build.onResolve({ filter: virtualCssFileFilter }, (args) => {
         return {
           path: args.path,
           namespace,
         };
       });
 
+      vanillaExtractSideEffectsPlugin.setup(build);
+
       build.onLoad(
         { filter: virtualCssFileFilter, namespace },
         async ({ path }) => {
@@ -81,6 +86,7 @@ export function vanillaExtractPlugin({
           platform: "node",
           write: false,
           plugins: [
+            vanillaExtractSideEffectsPlugin,
             vanillaExtractTransformPlugin({ rootDirectory, identOption }),
           ],
           loader: loaders,
@@ -173,3 +179,41 @@ function vanillaExtractTransformPlugin({
     },
   };
 }
+
+/**
+ * This plugin marks all .css.ts/js files as having side effects. This is
+ * to ensure that all usages of `globalStyle` are included in the CSS bundle,
+ * even if a .css.ts/js file has no exports or is otherwise tree-shaken.
+ */
+const vanillaExtractSideEffectsPlugin: esbuild.Plugin = {
+  name: "vanilla-extract-side-effects-plugin",
+  setup(build) {
+    let preventInfiniteLoop = {};
+
+    build.onResolve(
+      { filter: /\.css(\.(j|t)sx?)?(\?.*)?$/, namespace: "file" },
+      async (args) => {
+        if (args.pluginData === preventInfiniteLoop) {
+          return null;
+        }
+
+        let resolvedPath = (
+          await build.resolve(args.path, {
+            resolveDir: args.resolveDir,
+            kind: args.kind,
+            pluginData: preventInfiniteLoop,
+          })
+        ).path;
+
+        if (!cssFileFilter.test(resolvedPath)) {
+          return null;
+        }
+
+        return {
+          path: resolvedPath,
+          sideEffects: true,
+        };
+      }
+    );
+  },
+};