test: vite-css-build-test

remix-run · Nov 14, 2023 · 1d63d4a · 1d63d4a
1 parent 628963b
commit 1d63d4a
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 5 deletions.
diff --git a/integration/vite-css-build-test.ts b/integration/vite-css-build-test.ts
@@ -1,4 +1,7 @@
 import { test, expect } from "@playwright/test";
+import fs from "node:fs/promises";
+import path from "node:path";
+import url from "node:url";
 
 import {
   createAppFixture,
@@ -9,26 +12,44 @@ import {
 import type { Fixture, AppFixture } from "./helpers/create-fixture.js";
 import { PlaywrightFixture } from "./helpers/playwright-fixture.js";
 
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
 const TEST_PADDING_VALUE = "20px";
 
 test.describe("Vite CSS build", () => {
   let fixture: Fixture;
   let appFixture: AppFixture;
 
   test.beforeAll(async () => {
+    // set sideEffects for global vanilla extract css
+    let packageJson = JSON.parse(
+      await fs.readFile(
+        path.resolve(__dirname, "helpers", "node-template", "package.json"),
+        "utf-8"
+      )
+    );
+    packageJson.sideEffects = ["*.css.ts"];
+
     fixture = await createFixture({
       compiler: "vite",
       files: {
+        "package.json": JSON.stringify(packageJson, null, 2),
         "remix.config.js": js`
           throw new Error("Remix should not access remix.config.js when using Vite");
           export default {};
         `,
         "vite.config.ts": js`
           import { defineConfig } from "vite";
           import { unstable_vitePlugin as remix } from "@remix-run/dev";
+          import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
           export default defineConfig({
-            plugins: [remix()],
+            plugins: [
+              vanillaExtractPlugin({
+                emitCssInSsr: true,
+              }),
+              remix(),
+            ],
           });
         `,
         "app/root.tsx": js`
@@ -69,10 +90,28 @@ test.describe("Vite CSS build", () => {
             padding: ${TEST_PADDING_VALUE};
           }
         `,
+        "app/routes/_index/styles-vanilla-global.css.ts": js`
+          import { globalStyle } from "@vanilla-extract/css";
+
+          globalStyle(".index_vanilla_global", {
+            background: "lightgreen",
+            padding: "${TEST_PADDING_VALUE}",
+          });
+        `,
+        "app/routes/_index/styles-vanilla-local.css.ts": js`
+          import { style } from "@vanilla-extract/css";
+
+          export const index = style({
+            background: "lightblue",
+            padding: "${TEST_PADDING_VALUE}",
+          });
+        `,
         "app/routes/_index/route.tsx": js`
           import "./styles-bundled.css";
           import linkedStyles from "./styles-linked.css?url";
           import cssModulesStyles from "./styles.module.css";
+          import "./styles-vanilla-global.css";
+          import * as stylesVanillaLocal from "./styles-vanilla-local.css";
 
           export function links() {
             return [{ rel: "stylesheet", href: linkedStyles }];
@@ -84,7 +123,11 @@ test.describe("Vite CSS build", () => {
                 <div data-css-modules className={cssModulesStyles.index}>
                   <div data-css-linked className="index_linked">
                     <div data-css-bundled className="index_bundled">
-                      <h2>CSS test</h2>
+                      <div data-css-vanilla-global className="index_vanilla_global">
+                        <div data-css-vanilla-local className={stylesVanillaLocal.index}>
+                          <h2>CSS test</h2>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -117,5 +160,13 @@ test.describe("Vite CSS build", () => {
       "padding",
       TEST_PADDING_VALUE
     );
+    await expect(page.locator("#index [data-css-vanilla-global]")).toHaveCSS(
+      "padding",
+      TEST_PADDING_VALUE
+    );
+    await expect(page.locator("#index [data-css-vanilla-local]")).toHaveCSS(
+      "padding",
+      TEST_PADDING_VALUE
+    );
   });
 });
diff --git a/integration/vite-css-dev-test.ts b/integration/vite-css-dev-test.ts
@@ -272,11 +272,11 @@ test.describe("Vite CSS dev", () => {
         "utf8"
       );
 
-      await edit(
+      await editFile(
         path.join(projectDir, "app/styles-vanilla-global.css.ts"),
         (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
       );
-      await edit(
+      await editFile(
         path.join(projectDir, "app/styles-vanilla-local.css.ts"),
         (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
       );
@@ -315,7 +315,7 @@ let bufferize = (stream: Readable): (() => string) => {
   return () => buffer;
 };
 
-async function edit(filepath: string, edit: (content: string) => string) {
+async function editFile(filepath: string, edit: (content: string) => string) {
   let content = await fs.readFile(filepath, "utf-8");
   await fs.writeFile(filepath, edit(content));
 }