From 0473682950b2cc9daa9e5df91cb8a15e1a5ed4e3 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 16:48:57 +0900
Subject: [PATCH 1/7] test(remix-dev/vite): test vanilla extract

---
 integration/package.json         |   3 +-
 integration/vite-css-dev-test.ts |  80 +++++++++++++-
 yarn.lock                        | 175 +++++++++++++++++++++++--------
 3 files changed, 210 insertions(+), 48 deletions(-)

diff --git a/integration/package.json b/integration/package.json
index c1083a8f9ac..30f1dab20ae 100644
--- a/integration/package.json
+++ b/integration/package.json
@@ -9,7 +9,8 @@
     "@cloudflare/kv-asset-handler": "^0.3.0",
     "@cloudflare/workers-types": "^4.20230518.0",
     "@playwright/test": "^1.33.0",
-    "@vanilla-extract/css": "^1.10.0",
+    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/vite-plugin": "^3.9.0",
     "cheerio": "^1.0.0-rc.12",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
diff --git a/integration/vite-css-dev-test.ts b/integration/vite-css-dev-test.ts
index 55404b5d2d5..2f32d38c80a 100644
--- a/integration/vite-css-dev-test.ts
+++ b/integration/vite-css-dev-test.ts
@@ -30,13 +30,19 @@ test.describe("Vite CSS dev", () => {
         "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({
             server: {
               port: ${devPort},
               strictPort: true,
             },
-            plugins: [remix()],
+            plugins: [
+              vanillaExtractPlugin({
+                emitCssInSsr: true,
+              }),
+              remix(),
+            ],
           });
         `,
         "app/root.tsx": js`
@@ -78,10 +84,28 @@ test.describe("Vite CSS dev", () => {
             padding: ${TEST_PADDING_VALUE};
           }
         `,
+        "app/styles-vanilla-global.css.ts": js`
+          import { createVar, globalStyle } from "@vanilla-extract/css";
+
+          globalStyle(".index_vanilla_global", {
+            background: "lightgreen",
+            padding: "${TEST_PADDING_VALUE}",
+          });
+        `,
+        "app/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.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 }];
@@ -90,10 +114,15 @@ test.describe("Vite CSS dev", () => {
           export default function IndexRoute() {
             return (
               <div id="index">
+                <input />
                 <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>
@@ -154,6 +183,14 @@ test.describe("Vite CSS dev", () => {
         "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
+      );
     });
   });
 
@@ -182,6 +219,19 @@ test.describe("Vite CSS dev", () => {
         "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
+      );
+
+      let input = page.locator("#index input");
+      await expect(input).toBeVisible();
+      await input.type("stateful");
+      await expect(input).toHaveValue("stateful");
 
       let bundledCssContents = await fs.readFile(
         path.join(projectDir, "app/styles-bundled.css"),
@@ -222,6 +272,15 @@ test.describe("Vite CSS dev", () => {
         "utf8"
       );
 
+      await editFile(
+        path.join(projectDir, "app/styles-vanilla-global.css.ts"),
+        (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
+      );
+      await editFile(
+        path.join(projectDir, "app/styles-vanilla-local.css.ts"),
+        (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
+      );
+
       await expect(page.locator("#index [data-css-modules]")).toHaveCSS(
         "padding",
         UPDATED_TEST_PADDING_VALUE
@@ -234,6 +293,18 @@ test.describe("Vite CSS dev", () => {
         "padding",
         UPDATED_TEST_PADDING_VALUE
       );
+      await expect(page.locator("#index [data-css-vanilla-global]")).toHaveCSS(
+        "padding",
+        UPDATED_TEST_PADDING_VALUE
+      );
+      await expect(page.locator("#index [data-css-vanilla-local]")).toHaveCSS(
+        "padding",
+        UPDATED_TEST_PADDING_VALUE
+      );
+
+      await expect(input).toHaveValue("stateful");
+
+      expect(pageErrors).toEqual([]);
     });
   });
 });
@@ -243,3 +314,8 @@ let bufferize = (stream: Readable): (() => string) => {
   stream.on("data", (data) => (buffer += data.toString()));
   return () => buffer;
 };
+
+async function editFile(filepath: string, edit: (content: string) => string) {
+  let content = await fs.readFile(filepath, "utf-8");
+  await fs.writeFile(filepath, edit(content));
+}
diff --git a/yarn.lock b/yarn.lock
index 54ce28dcc5c..18ed3642604 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3347,6 +3347,42 @@
     media-query-parser "^2.0.2"
     outdent "^0.8.0"
 
+"@vanilla-extract/css@^1.14.0":
+  version "1.14.0"
+  resolved "https://registry.npmjs.org/@vanilla-extract/css/-/css-1.14.0.tgz#45fab9c04d893e3e363cf2cde7559d21233b7f63"
+  integrity sha512-rYfm7JciWZ8PFzBM/HDiE2GLnKI3xJ6/vdmVJ5BSgcCZ5CxRlM9Cjqclni9lGzF3eMOijnUhCd/KV8TOzyzbMA==
+  dependencies:
+    "@emotion/hash" "^0.9.0"
+    "@vanilla-extract/private" "^1.0.3"
+    chalk "^4.1.1"
+    css-what "^6.1.0"
+    cssesc "^3.0.0"
+    csstype "^3.0.7"
+    deep-object-diff "^1.1.9"
+    deepmerge "^4.2.2"
+    media-query-parser "^2.0.2"
+    modern-ahocorasick "^1.0.0"
+    outdent "^0.8.0"
+
+"@vanilla-extract/integration@^6.0.2":
+  version "6.2.3"
+  resolved "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-6.2.3.tgz#fd6d4dcca4a52db9c1b2de26f7e524f8155f9b3a"
+  integrity sha512-Ix7xCClFlERl3ZwPuqHCOTyat8Wq5LQVRaGI+1i0HUagu+vtUvrDXUPLF0gCtdBGvnypD3QuYx6lLz3sV2H/ZA==
+  dependencies:
+    "@babel/core" "^7.20.7"
+    "@babel/plugin-syntax-typescript" "^7.20.0"
+    "@vanilla-extract/babel-plugin-debug-ids" "^1.0.2"
+    "@vanilla-extract/css" "^1.14.0"
+    esbuild "0.17.6"
+    eval "0.1.8"
+    find-up "^5.0.0"
+    javascript-stringify "^2.0.1"
+    lodash "^4.17.21"
+    mlly "^1.1.0"
+    outdent "^0.8.0"
+    vite "^4.1.4"
+    vite-node "^0.28.5"
+
 "@vanilla-extract/integration@^6.2.0":
   version "6.2.0"
   resolved "https://registry.npmjs.org/@vanilla-extract/integration/-/integration-6.2.0.tgz#b45927c5e9efb78a8c3c66ccc2aacdfb996a6b9e"
@@ -3371,6 +3407,16 @@
   resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz"
   integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
 
+"@vanilla-extract/vite-plugin@^3.9.0":
+  version "3.9.0"
+  resolved "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.9.0.tgz#40bbb39df09865b4ffe1c5e6db10d85c73e71d2a"
+  integrity sha512-Q2HYAyEJ93Uy7GHQPPiP8SXwPMHGpd4d0YnrIQqB0YZccYbGJR/WFIln9Dmbzx2pdngQUoOfhwEg6kJF8sQrog==
+  dependencies:
+    "@vanilla-extract/integration" "^6.0.2"
+    outdent "^0.8.0"
+    postcss "^8.3.6"
+    postcss-load-config "^3.1.0"
+
 "@web3-storage/multipart-parser@^1.0.0":
   version "1.0.0"
   resolved "https://registry.npmjs.org/@web3-storage/multipart-parser/-/multipart-parser-1.0.0.tgz"
@@ -3411,16 +3457,34 @@ accepts@^1.3.7, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
+acorn-globals@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
+  integrity sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==
+  dependencies:
+    acorn "^8.1.0"
+    acorn-walk "^8.0.2"
+
 acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+acorn-walk@^8.0.2:
+  version "8.3.0"
+  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz#2097665af50fd0cf7a2dfccd2b9368964e66540f"
+  integrity sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==
+
 acorn@^8.0.0, acorn@^8.8.0, acorn@^8.8.1:
   version "8.11.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.0.tgz#04306e13732231c995ac4363f331ee09db278d82"
   integrity sha512-hNiSyky+cuYVALBrsjB7f9gMN9P4u09JyAiMNMLaVfsmkDJuH84M1T/0pfDX/OJfGWcobd2A7ecXYzygn8wibA==
 
+acorn@^8.1.0:
+  version "8.11.2"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
+  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -4839,12 +4903,22 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssstyle@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
-  integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==
+cssom@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
+  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
+
+cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
+
+cssstyle@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
+  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
   dependencies:
-    rrweb-cssom "^0.6.0"
+    cssom "~0.3.6"
 
 csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.1"
@@ -4946,14 +5020,14 @@ data-uri-to-buffer@^5.0.1:
   resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-5.0.1.tgz#db89a9e279c2ffe74f50637a59a32fb23b3e4d7c"
   integrity sha512-a9l6T1qqDogvvnw0nKlfZzqsyikEBZBClF39V3TFoKhDtGBqHu2HkuomJc02j5zft8zrUaXEuoicLeW54RkzPg==
 
-data-urls@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
-  integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==
+data-urls@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
+  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
   dependencies:
     abab "^2.0.6"
     whatwg-mimetype "^3.0.0"
-    whatwg-url "^12.0.0"
+    whatwg-url "^11.0.0"
 
 dataloader@^1.4.0:
   version "1.4.0"
@@ -5004,7 +5078,7 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decimal.js@^10.4.3:
+decimal.js@^10.4.2:
   version "10.4.3"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
@@ -5578,7 +5652,7 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-escodegen@^2.1.0:
+escodegen@^2.0.0, escodegen@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
   integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
@@ -5987,6 +6061,14 @@ eval@0.1.6:
   dependencies:
     require-like ">= 0.1.1"
 
+eval@0.1.8:
+  version "0.1.8"
+  resolved "https://registry.npmjs.org/eval/-/eval-0.1.8.tgz#2b903473b8cc1d1989b83a1e7923f883eb357f85"
+  integrity sha512-EzV94NYKoO09GLXGjXj9JIlXijVck4ONSr5wiCWDvhsvj5jxSrzTmRU/9C1DyB6uToszLs8aifA6NQ7lEQdvFw==
+  dependencies:
+    "@types/node" "*"
+    require-like ">= 0.1.1"
+
 event-target-shim@^5.0.0:
   version "5.0.1"
   resolved "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz"
@@ -8119,24 +8201,27 @@ jsbn@~0.1.0:
   resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^20.0.0, jsdom@^22.0.0:
-  version "22.1.0"
-  resolved "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8"
-  integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==
+jsdom@^20.0.0:
+  version "20.0.3"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
+  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
   dependencies:
     abab "^2.0.6"
-    cssstyle "^3.0.0"
-    data-urls "^4.0.0"
-    decimal.js "^10.4.3"
+    acorn "^8.8.1"
+    acorn-globals "^7.0.0"
+    cssom "^0.5.0"
+    cssstyle "^2.3.0"
+    data-urls "^3.0.2"
+    decimal.js "^10.4.2"
     domexception "^4.0.0"
+    escodegen "^2.0.0"
     form-data "^4.0.0"
     html-encoding-sniffer "^3.0.0"
     http-proxy-agent "^5.0.0"
     https-proxy-agent "^5.0.1"
     is-potential-custom-element-name "^1.0.1"
-    nwsapi "^2.2.4"
-    parse5 "^7.1.2"
-    rrweb-cssom "^0.6.0"
+    nwsapi "^2.2.2"
+    parse5 "^7.1.1"
     saxes "^6.0.0"
     symbol-tree "^3.2.4"
     tough-cookie "^4.1.2"
@@ -8144,8 +8229,8 @@ jsdom@^20.0.0, jsdom@^22.0.0:
     webidl-conversions "^7.0.0"
     whatwg-encoding "^2.0.0"
     whatwg-mimetype "^3.0.0"
-    whatwg-url "^12.0.1"
-    ws "^8.13.0"
+    whatwg-url "^11.0.0"
+    ws "^8.11.0"
     xml-name-validator "^4.0.0"
 
 jsesc@3.0.2:
@@ -9804,6 +9889,11 @@ mlly@^1.0.0, mlly@^1.1.0:
     pkg-types "^1.0.1"
     ufo "^1.0.1"
 
+modern-ahocorasick@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/modern-ahocorasick/-/modern-ahocorasick-1.0.1.tgz#dec373444f51b5458ac05216a8ec376e126dd283"
+  integrity sha512-yoe+JbhTClckZ67b2itRtistFKf8yPYelHLc7e5xAwtNAXxM6wJTUx2C7QeVSJFDzKT7bCIFyBVybPMKvmB9AA==
+
 morgan@^1.10.0:
   version "1.10.0"
   resolved "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz"
@@ -10038,7 +10128,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.4:
+nwsapi@^2.2.2:
   version "2.2.7"
   resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
@@ -10388,7 +10478,7 @@ parse5-htmlparser2-tree-adapter@^7.0.0:
     domhandler "^5.0.2"
     parse5 "^7.0.0"
 
-parse5@^7.0.0, parse5@^7.1.2:
+parse5@^7.0.0, parse5@^7.1.1:
   version "7.1.2"
   resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
   integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
@@ -10603,7 +10693,7 @@ postcss-js@^4.0.0:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.4:
+postcss-load-config@^3.1.0, postcss-load-config@^3.1.4:
   version "3.1.4"
   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
@@ -10681,7 +10771,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.0.9, postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.31:
+postcss@^8.0.9, postcss@^8.3.6, postcss@^8.4.19, postcss@^8.4.27, postcss@^8.4.31:
   version "8.4.31"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d"
   integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
@@ -10917,7 +11007,7 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.3.0"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
@@ -11513,11 +11603,6 @@ rollup@^4.2.0:
     "@rollup/rollup-win32-x64-msvc" "4.4.0"
     fsevents "~2.3.2"
 
-rrweb-cssom@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
-  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
-
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
@@ -12520,12 +12605,12 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tr46@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469"
-  integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==
+tr46@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
+  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
   dependencies:
-    punycode "^2.3.0"
+    punycode "^2.1.1"
 
 tr46@~0.0.3:
   version "0.0.3"
@@ -13228,12 +13313,12 @@ whatwg-mimetype@^3.0.0:
   resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
   integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
 
-whatwg-url@^12.0.0, whatwg-url@^12.0.1:
-  version "12.0.1"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c"
-  integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==
+whatwg-url@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
+  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
   dependencies:
-    tr46 "^4.1.1"
+    tr46 "^3.0.0"
     webidl-conversions "^7.0.0"
 
 whatwg-url@^5.0.0:
@@ -13378,7 +13463,7 @@ ws@^7.4.5:
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
-ws@^8.13.0:
+ws@^8.11.0:
   version "8.14.2"
   resolved "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
   integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==

From 628963b074efffc50833f6c430fe067d4c12878c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 17:19:31 +0900
Subject: [PATCH 2/7] test: vite-css-dev-express-test

---
 integration/vite-css-dev-express-test.ts | 72 +++++++++++++++++++++++-
 integration/vite-css-dev-test.ts         |  6 +-
 2 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/integration/vite-css-dev-express-test.ts b/integration/vite-css-dev-express-test.ts
index c1a2886ceff..2c5cc330d17 100644
--- a/integration/vite-css-dev-express-test.ts
+++ b/integration/vite-css-dev-express-test.ts
@@ -26,6 +26,7 @@ test.describe("Vite CSS dev (Express server)", () => {
         "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({
             server: {
@@ -33,7 +34,12 @@ test.describe("Vite CSS dev (Express server)", () => {
                 port: ${hmrPort}
               }
             },
-            plugins: [remix()],
+            plugins: [
+              vanillaExtractPlugin({
+                emitCssInSsr: true,
+              }),
+              remix(),
+            ],
           });
         `,
         "server.mjs": js`
@@ -115,10 +121,28 @@ test.describe("Vite CSS dev (Express server)", () => {
             padding: ${TEST_PADDING_VALUE};
           }
         `,
+        "app/styles-vanilla-global.css.ts": js`
+          import { createVar, globalStyle } from "@vanilla-extract/css";
+
+          globalStyle(".index_vanilla_global", {
+            background: "lightgreen",
+            padding: "${TEST_PADDING_VALUE}",
+          });
+        `,
+        "app/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.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 }];
@@ -127,10 +151,15 @@ test.describe("Vite CSS dev (Express server)", () => {
           export default function IndexRoute() {
             return (
               <div id="index">
+                <input />
                 <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>
@@ -166,6 +195,14 @@ test.describe("Vite CSS dev (Express server)", () => {
         "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
+      );
     });
   });
 
@@ -195,6 +232,11 @@ test.describe("Vite CSS dev (Express server)", () => {
         TEST_PADDING_VALUE
       );
 
+      let input = page.locator("#index input");
+      await expect(input).toBeVisible();
+      await input.type("stateful");
+      await expect(input).toHaveValue("stateful");
+
       let bundledCssContents = await fs.readFile(
         path.join(projectDir, "app/styles-bundled.css"),
         "utf8"
@@ -234,6 +276,15 @@ test.describe("Vite CSS dev (Express server)", () => {
         "utf8"
       );
 
+      await editFile(
+        path.join(projectDir, "app/styles-vanilla-global.css.ts"),
+        (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
+      );
+      await editFile(
+        path.join(projectDir, "app/styles-vanilla-local.css.ts"),
+        (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
+      );
+
       await expect(page.locator("#index [data-css-modules]")).toHaveCSS(
         "padding",
         UPDATED_TEST_PADDING_VALUE
@@ -246,6 +297,23 @@ test.describe("Vite CSS dev (Express server)", () => {
         "padding",
         UPDATED_TEST_PADDING_VALUE
       );
+      await expect(page.locator("#index [data-css-vanilla-global]")).toHaveCSS(
+        "padding",
+        UPDATED_TEST_PADDING_VALUE
+      );
+      await expect(page.locator("#index [data-css-vanilla-local]")).toHaveCSS(
+        "padding",
+        UPDATED_TEST_PADDING_VALUE
+      );
+
+      await expect(input).toHaveValue("stateful");
+
+      expect(pageErrors).toEqual([]);
     });
   });
 });
+
+async function editFile(filepath: string, edit: (content: string) => string) {
+  let content = await fs.readFile(filepath, "utf-8");
+  await fs.writeFile(filepath, edit(content));
+}
diff --git a/integration/vite-css-dev-test.ts b/integration/vite-css-dev-test.ts
index 2f32d38c80a..a3b3c36a310 100644
--- 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 editFile(
+      await edit(
         path.join(projectDir, "app/styles-vanilla-global.css.ts"),
         (data) => data.replace(TEST_PADDING_VALUE, UPDATED_TEST_PADDING_VALUE)
       );
-      await editFile(
+      await edit(
         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 editFile(filepath: string, edit: (content: string) => string) {
+async function edit(filepath: string, edit: (content: string) => string) {
   let content = await fs.readFile(filepath, "utf-8");
   await fs.writeFile(filepath, edit(content));
 }

From 1d63d4ad46431058bd2de4b19ed70ddd17139cc0 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 17:42:49 +0900
Subject: [PATCH 3/7] test: vite-css-build-test

---
 integration/vite-css-build-test.ts | 55 ++++++++++++++++++++++++++++--
 integration/vite-css-dev-test.ts   |  6 ++--
 2 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/integration/vite-css-build-test.ts b/integration/vite-css-build-test.ts
index 4aa0aeb331e..5b54b7491fa 100644
--- 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,6 +12,8 @@ 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", () => {
@@ -16,9 +21,19 @@ test.describe("Vite CSS build", () => {
   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 {};
@@ -26,9 +41,15 @@ test.describe("Vite CSS build", () => {
         "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
index a3b3c36a310..2f32d38c80a 100644
--- 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));
 }

From ce55c6fc570beed564b09a75eb5186b081c9105c Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 17:55:04 +0900
Subject: [PATCH 4/7] chore: keep "@vanilla-extract/css" version

---
 integration/package.json |   2 +-
 yarn.lock                | 112 +++++++++++++++------------------------
 2 files changed, 44 insertions(+), 70 deletions(-)

diff --git a/integration/package.json b/integration/package.json
index 30f1dab20ae..7239a47d72f 100644
--- a/integration/package.json
+++ b/integration/package.json
@@ -9,7 +9,7 @@
     "@cloudflare/kv-asset-handler": "^0.3.0",
     "@cloudflare/workers-types": "^4.20230518.0",
     "@playwright/test": "^1.33.0",
-    "@vanilla-extract/css": "^1.14.0",
+    "@vanilla-extract/css": "^1.10.0",
     "@vanilla-extract/vite-plugin": "^3.9.0",
     "cheerio": "^1.0.0-rc.12",
     "cross-env": "^7.0.3",
diff --git a/yarn.lock b/yarn.lock
index 18ed3642604..5cefca57fa4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3457,34 +3457,16 @@ accepts@^1.3.7, accepts@~1.3.5, accepts@~1.3.8:
     mime-types "~2.1.34"
     negotiator "0.6.3"
 
-acorn-globals@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.npmjs.org/acorn-globals/-/acorn-globals-7.0.1.tgz#0dbf05c44fa7c94332914c02066d5beff62c40c3"
-  integrity sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==
-  dependencies:
-    acorn "^8.1.0"
-    acorn-walk "^8.0.2"
-
 acorn-jsx@^5.0.0, acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn-walk@^8.0.2:
-  version "8.3.0"
-  resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.0.tgz#2097665af50fd0cf7a2dfccd2b9368964e66540f"
-  integrity sha512-FS7hV565M5l1R08MXqo8odwMTB02C2UqzB17RVgu9EyuYFBqJZ3/ZY97sQD5FewVu1UyDFc1yztUDrAwT0EypA==
-
 acorn@^8.0.0, acorn@^8.8.0, acorn@^8.8.1:
   version "8.11.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.0.tgz#04306e13732231c995ac4363f331ee09db278d82"
   integrity sha512-hNiSyky+cuYVALBrsjB7f9gMN9P4u09JyAiMNMLaVfsmkDJuH84M1T/0pfDX/OJfGWcobd2A7ecXYzygn8wibA==
 
-acorn@^8.1.0:
-  version "8.11.2"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
-  integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
-
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz"
@@ -4903,22 +4885,12 @@ cssesc@^3.0.0:
   resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssom@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
-  integrity sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==
-
-cssom@~0.3.6:
-  version "0.3.8"
-  resolved "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
-  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
-
-cssstyle@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-2.3.0.tgz#ff665a0ddbdc31864b09647f34163443d90b0852"
-  integrity sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+cssstyle@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssstyle/-/cssstyle-3.0.0.tgz#17ca9c87d26eac764bb8cfd00583cff21ce0277a"
+  integrity sha512-N4u2ABATi3Qplzf0hWbVCdjenim8F3ojEXpBDF5hBpjzW182MjNGLqfmQ0SkSPeQ+V86ZXgeH8aXj6kayd4jgg==
   dependencies:
-    cssom "~0.3.6"
+    rrweb-cssom "^0.6.0"
 
 csstype@^3.0.2, csstype@^3.0.7:
   version "3.1.1"
@@ -5020,14 +4992,14 @@ data-uri-to-buffer@^5.0.1:
   resolved "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-5.0.1.tgz#db89a9e279c2ffe74f50637a59a32fb23b3e4d7c"
   integrity sha512-a9l6T1qqDogvvnw0nKlfZzqsyikEBZBClF39V3TFoKhDtGBqHu2HkuomJc02j5zft8zrUaXEuoicLeW54RkzPg==
 
-data-urls@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/data-urls/-/data-urls-3.0.2.tgz#9cf24a477ae22bcef5cd5f6f0bfbc1d2d3be9143"
-  integrity sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==
+data-urls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
+  integrity sha512-/mMTei/JXPqvFqQtfyTowxmJVwr2PVAeCcDxyFf6LhoOu/09TX2OX3kb2wzi4DMXcfj4OItwDOnhl5oziPnT6g==
   dependencies:
     abab "^2.0.6"
     whatwg-mimetype "^3.0.0"
-    whatwg-url "^11.0.0"
+    whatwg-url "^12.0.0"
 
 dataloader@^1.4.0:
   version "1.4.0"
@@ -5078,7 +5050,7 @@ decamelize@^1.1.0, decamelize@^1.2.0:
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
   integrity sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
 
-decimal.js@^10.4.2:
+decimal.js@^10.4.3:
   version "10.4.3"
   resolved "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
   integrity sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==
@@ -5652,7 +5624,7 @@ escape-string-regexp@^5.0.0:
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz"
   integrity sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==
 
-escodegen@^2.0.0, escodegen@^2.1.0:
+escodegen@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz#ba93bbb7a43986d29d6041f99f5262da773e2e17"
   integrity sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==
@@ -8201,27 +8173,24 @@ jsbn@~0.1.0:
   resolved "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^20.0.0:
-  version "20.0.3"
-  resolved "https://registry.npmjs.org/jsdom/-/jsdom-20.0.3.tgz#886a41ba1d4726f67a8858028c99489fed6ad4db"
-  integrity sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==
+jsdom@^20.0.0, jsdom@^22.0.0:
+  version "22.1.0"
+  resolved "https://registry.npmjs.org/jsdom/-/jsdom-22.1.0.tgz#0fca6d1a37fbeb7f4aac93d1090d782c56b611c8"
+  integrity sha512-/9AVW7xNbsBv6GfWho4TTNjEo9fe6Zhf9O7s0Fhhr3u+awPwAJMKwAMXnkk5vBxflqLW9hTHX/0cs+P3gW+cQw==
   dependencies:
     abab "^2.0.6"
-    acorn "^8.8.1"
-    acorn-globals "^7.0.0"
-    cssom "^0.5.0"
-    cssstyle "^2.3.0"
-    data-urls "^3.0.2"
-    decimal.js "^10.4.2"
+    cssstyle "^3.0.0"
+    data-urls "^4.0.0"
+    decimal.js "^10.4.3"
     domexception "^4.0.0"
-    escodegen "^2.0.0"
     form-data "^4.0.0"
     html-encoding-sniffer "^3.0.0"
     http-proxy-agent "^5.0.0"
     https-proxy-agent "^5.0.1"
     is-potential-custom-element-name "^1.0.1"
-    nwsapi "^2.2.2"
-    parse5 "^7.1.1"
+    nwsapi "^2.2.4"
+    parse5 "^7.1.2"
+    rrweb-cssom "^0.6.0"
     saxes "^6.0.0"
     symbol-tree "^3.2.4"
     tough-cookie "^4.1.2"
@@ -8229,8 +8198,8 @@ jsdom@^20.0.0:
     webidl-conversions "^7.0.0"
     whatwg-encoding "^2.0.0"
     whatwg-mimetype "^3.0.0"
-    whatwg-url "^11.0.0"
-    ws "^8.11.0"
+    whatwg-url "^12.0.1"
+    ws "^8.13.0"
     xml-name-validator "^4.0.0"
 
 jsesc@3.0.2:
@@ -10128,7 +10097,7 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nwsapi@^2.2.2:
+nwsapi@^2.2.4:
   version "2.2.7"
   resolved "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz#738e0707d3128cb750dddcfe90e4610482df0f30"
   integrity sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==
@@ -10478,7 +10447,7 @@ parse5-htmlparser2-tree-adapter@^7.0.0:
     domhandler "^5.0.2"
     parse5 "^7.0.0"
 
-parse5@^7.0.0, parse5@^7.1.1:
+parse5@^7.0.0, parse5@^7.1.2:
   version "7.1.2"
   resolved "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz#0736bebbfd77793823240a23b7fc5e010b7f8e32"
   integrity sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==
@@ -11007,7 +10976,7 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
@@ -11603,6 +11572,11 @@ rollup@^4.2.0:
     "@rollup/rollup-win32-x64-msvc" "4.4.0"
     fsevents "~2.3.2"
 
+rrweb-cssom@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz#ed298055b97cbddcdeb278f904857629dec5e0e1"
+  integrity sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz"
@@ -12605,12 +12579,12 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tr46@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/tr46/-/tr46-3.0.0.tgz#555c4e297a950617e8eeddef633c87d4d9d6cbf9"
-  integrity sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==
+tr46@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469"
+  integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==
   dependencies:
-    punycode "^2.1.1"
+    punycode "^2.3.0"
 
 tr46@~0.0.3:
   version "0.0.3"
@@ -13313,12 +13287,12 @@ whatwg-mimetype@^3.0.0:
   resolved "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-3.0.0.tgz#5fa1a7623867ff1af6ca3dc72ad6b8a4208beba7"
   integrity sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==
 
-whatwg-url@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-11.0.0.tgz#0a849eebb5faf2119b901bb76fd795c2848d4018"
-  integrity sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==
+whatwg-url@^12.0.0, whatwg-url@^12.0.1:
+  version "12.0.1"
+  resolved "https://registry.npmjs.org/whatwg-url/-/whatwg-url-12.0.1.tgz#fd7bcc71192e7c3a2a97b9a8d6b094853ed8773c"
+  integrity sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==
   dependencies:
-    tr46 "^3.0.0"
+    tr46 "^4.1.1"
     webidl-conversions "^7.0.0"
 
 whatwg-url@^5.0.0:
@@ -13463,7 +13437,7 @@ ws@^7.4.5:
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz"
   integrity sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==
 
-ws@^8.11.0:
+ws@^8.13.0:
   version "8.14.2"
   resolved "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
   integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==

From b116d6fe3bc8eaaeff83e32187b4f123cdb35222 Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 20:18:46 +0900
Subject: [PATCH 5/7] test: workaround deterministic-build-output-test by
 postcss.config.mjs?

---
 integration/deterministic-build-output-test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/integration/deterministic-build-output-test.ts b/integration/deterministic-build-output-test.ts
index efb7b4d83d9..3c68275b3ff 100644
--- a/integration/deterministic-build-output-test.ts
+++ b/integration/deterministic-build-output-test.ts
@@ -60,7 +60,7 @@ test("builds deterministically under different paths", async () => {
         },
       }),
 
-      "postcss.config.js": js`
+      "postcss.config.mjs": js`
         export default {
           plugins: {
             "postcss-import": {},

From 4222ed94392a4de5d03d234e3157816e155c234b Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Tue, 14 Nov 2023 20:42:41 +0900
Subject: [PATCH 6/7] chore: move around postcss-load-config ...

---
 integration/deterministic-build-output-test.ts | 2 +-
 package.json                                   | 3 ++-
 yarn.lock                                      | 9 +++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/integration/deterministic-build-output-test.ts b/integration/deterministic-build-output-test.ts
index 3c68275b3ff..efb7b4d83d9 100644
--- a/integration/deterministic-build-output-test.ts
+++ b/integration/deterministic-build-output-test.ts
@@ -60,7 +60,7 @@ test("builds deterministically under different paths", async () => {
         },
       }),
 
-      "postcss.config.mjs": js`
+      "postcss.config.js": js`
         export default {
           plugins: {
             "postcss-import": {},
diff --git a/package.json b/package.json
index 8553764b3af..730d247000e 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "patch-package": "^6.5.0",
+    "postcss-load-config": "^4.0.1",
     "prettier": "^2.7.1",
     "prompt-confirm": "^2.0.4",
     "react": "^18.2.0",
@@ -118,13 +119,13 @@
     "remark-gfm": "3.0.1",
     "remark-parse": "^10.0.1",
     "remark-stringify": "^10.0.2",
+    "resolve-bin": "^1.0.1",
     "rollup": "^2.36.1",
     "rollup-plugin-copy": "^3.3.0",
     "semver": "^7.3.7",
     "simple-git": "^3.16.0",
     "to-vfile": "7.2.3",
     "typescript": "^5.1.0",
-    "resolve-bin": "^1.0.1",
     "unified": "^10.1.2",
     "unist-util-remove": "^3.1.0",
     "unist-util-visit": "^4.1.1",
diff --git a/yarn.lock b/yarn.lock
index 5cefca57fa4..ddcbb188ac6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10672,7 +10672,7 @@ postcss-load-config@^3.1.0, postcss-load-config@^3.1.4:
 
 postcss-load-config@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
   integrity sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==
   dependencies:
     lilconfig "^2.0.5"
@@ -10976,11 +10976,16 @@ pumpify@^1.3.3:
     inherits "^2.0.3"
     pump "^2.0.0"
 
-punycode@^2.1.0, punycode@^2.1.1, punycode@^2.3.0:
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.3.0"
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
+punycode@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
 pure-rand@^6.0.0:
   version "6.0.2"
   resolved "https://registry.npmjs.org/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"

From 08bb2ed218d8622cd62864643847b3134ec0426f Mon Sep 17 00:00:00 2001
From: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>
Date: Wed, 15 Nov 2023 13:03:18 +0900
Subject: [PATCH 7/7] chore(deps): update @vanilla-extract/vite-plugin

https://github.com/vanilla-extract-css/vanilla-extract/pull/1231
---
 integration/package.json |  2 +-
 package.json             |  3 +--
 yarn.lock                | 12 ++++++------
 3 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/integration/package.json b/integration/package.json
index 7239a47d72f..1915d384361 100644
--- a/integration/package.json
+++ b/integration/package.json
@@ -10,7 +10,7 @@
     "@cloudflare/workers-types": "^4.20230518.0",
     "@playwright/test": "^1.33.0",
     "@vanilla-extract/css": "^1.10.0",
-    "@vanilla-extract/vite-plugin": "^3.9.0",
+    "@vanilla-extract/vite-plugin": "^3.9.1",
     "cheerio": "^1.0.0-rc.12",
     "cross-env": "^7.0.3",
     "cross-spawn": "^7.0.3",
diff --git a/package.json b/package.json
index 730d247000e..8553764b3af 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,6 @@
     "lodash": "^4.17.21",
     "mime": "^3.0.0",
     "patch-package": "^6.5.0",
-    "postcss-load-config": "^4.0.1",
     "prettier": "^2.7.1",
     "prompt-confirm": "^2.0.4",
     "react": "^18.2.0",
@@ -119,13 +118,13 @@
     "remark-gfm": "3.0.1",
     "remark-parse": "^10.0.1",
     "remark-stringify": "^10.0.2",
-    "resolve-bin": "^1.0.1",
     "rollup": "^2.36.1",
     "rollup-plugin-copy": "^3.3.0",
     "semver": "^7.3.7",
     "simple-git": "^3.16.0",
     "to-vfile": "7.2.3",
     "typescript": "^5.1.0",
+    "resolve-bin": "^1.0.1",
     "unified": "^10.1.2",
     "unist-util-remove": "^3.1.0",
     "unist-util-visit": "^4.1.1",
diff --git a/yarn.lock b/yarn.lock
index ddcbb188ac6..4993278f0d2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3407,15 +3407,15 @@
   resolved "https://registry.npmjs.org/@vanilla-extract/private/-/private-1.0.3.tgz"
   integrity sha512-17kVyLq3ePTKOkveHxXuIJZtGYs+cSoev7BlP+Lf4916qfDhk/HBjvlYDe8egrea7LNPHKwSZJK/bzZC+Q6AwQ==
 
-"@vanilla-extract/vite-plugin@^3.9.0":
-  version "3.9.0"
-  resolved "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.9.0.tgz#40bbb39df09865b4ffe1c5e6db10d85c73e71d2a"
-  integrity sha512-Q2HYAyEJ93Uy7GHQPPiP8SXwPMHGpd4d0YnrIQqB0YZccYbGJR/WFIln9Dmbzx2pdngQUoOfhwEg6kJF8sQrog==
+"@vanilla-extract/vite-plugin@^3.9.1":
+  version "3.9.1"
+  resolved "https://registry.npmjs.org/@vanilla-extract/vite-plugin/-/vite-plugin-3.9.1.tgz#28da454974d4dbc45871d715202dac8332d2d6ae"
+  integrity sha512-FI0Tzga+iuqPqFGms9qjeeb+PbdJdIGuG1Yc8gnzHSsRVy61u05wmfSbN9AN+FKzcvV/O1zAvRrusXCXi1oHYA==
   dependencies:
     "@vanilla-extract/integration" "^6.0.2"
     outdent "^0.8.0"
     postcss "^8.3.6"
-    postcss-load-config "^3.1.0"
+    postcss-load-config "^4.0.1"
 
 "@web3-storage/multipart-parser@^1.0.0":
   version "1.0.0"
@@ -10662,7 +10662,7 @@ postcss-js@^4.0.0:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-load-config@^3.1.0, postcss-load-config@^3.1.4:
+postcss-load-config@^3.1.4:
   version "3.1.4"
   resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==