chore(deps): replace @vanilla-extract/vite-plugin with @sanity/vanilla-extract-vite-plugin (#1590)

* chore(deps): replace @vanilla-extract/vite-plugin with @sanity/vanilla-extract-vite-plugin

Swap the vanilla-extract Vite plugin used by the test studio and
@sanity/google-maps-input's vitest config to @sanity/vanilla-extract-vite-plugin,
a Vite 8 rewrite with plugin hook filters and a caching compiler on Vite's
Environment API / ModuleRunner instead of the legacy vite-node. Bump tsdown to
^0.22.8 and @sanity/tsdown-config to ^0.17.0 alongside it.

google-maps-input's vitest.config.ts also needed a small stub plugin: its
dist/bundle.css.js Node/SSR shim matches the upstream cssFileFilter by
filename alone (*.css.js), which made the new plugin try to evaluate it as
real .css.ts source and throw ReferenceError: require is not defined via
ModuleRunner (vite-node tolerated this). The stub renames that module id away
from a .css.js shape before vanillaExtractPlugin() ever sees it.

Documented both the plugin swap and the shim workaround in the
sanity-plugin-best-practices skill and the new-plugin generator templates so
future vanilla-extract plugins get this for free.

* chore(deps): bump @sanity/tsdown-config to ^0.17.1, drop bundle.css.js shim workaround

@sanity/tsdown-config 0.17.1 (via @sanity/vanilla-extract-tsdown-plugin
0.2.1 / @sanity/vanilla-extract-rolldown-plugin 0.1.1) renames the
vanilla-extract Node/SSR compat shim from bundle.css.js to bundle-css.js so
it no longer matches vanillaExtractPlugin()'s cssFileFilter by filename
alone (sanity-io/pkg-utils#3043). That was the root cause of the
require-is-not-defined regression worked around in the previous commit, so
the stub-bundle-css-js-shim plugin is no longer needed.

Rebuilding @sanity/google-maps-input picked up the renamed dist/bundle-css.js
shim and auto-rewrote its package.json ./bundle.css export map (adding a
types condition too). Reverted the vitest.config.ts workaround and the
matching documentation/generator-template changes back to the plain
vanillaExtractPlugin() registration, now noted as a historical gotcha
instead of a live workaround.

* docs(test-studio): note that unstable_bundledDev breaks .css.ts HMR

Document the trade-off discovered while testing the vanilla-extract Vite
plugin swap: with unstable_bundledDev: true, editing a .css.ts file doesn't
hot-reload (a sanity dev restart is required), while plain .ts/.tsx HMR is
unaffected. Comment out the line for a session if fast CSS HMR is needed
(confirmed sub-10ms with it unset).

* docs(styling skill): trim verbose vanilla-extract setup section

The ./bundle.css export map (and its dist/bundle-css.js shim/types) is
generated and kept in sync automatically by @sanity/tsdown-config's
vanillaExtract option, so it doesn't need explaining or a JSON example to
copy. Simplify the vitest.config.ts guidance to why (@sanity/vanilla-extract-
vite-plugin is faster than upstream) without the ModuleRunner/hook-filter/
sanity-build internals. Drop the sanity.cli.ts snippet, since the test studio
already registers the plugin globally in this repo and doesn't need to be
touched per-plugin. Drop the bundle.css.js->bundle-css.js rename history
note, a one-off gotcha now fixed upstream rather than evergreen guidance.

* chore(deps): bump @sanity/tsdown-config to ^0.17.2, @sanity/vanilla-extract-vite-plugin to ^0.1.1

Both are latest-available patch releases (0.17.1 -> 0.17.2 pulls in
@sanity/vanilla-extract-tsdown-plugin 0.2.2 / @sanity/vanilla-extract-
rolldown-plugin 0.1.2; 0.1.0 -> 0.1.1 is the vite plugin's own patch).
tsdown stays at ^0.22.8, already the latest. Benchmarked in the next commit's
message to confirm this doesn't regress anything.

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

Author: 3 people

.agents/skills/sanity-plugin-best-practices/references/styling.md

@@ -178,40 +178,33 @@ export default defineConfig({
 }) satisfies Promise<UserConfig>
 ```
 
-**2. Add the `./bundle.css` export and build deps** in `package.json`. The built entry loads the
-stylesheet, so consumers need no changes; the `node` / `default` conditions point at a JS shim so
-SSR/Node imports don't choke on a `.css` file:
+This also wires up the `./bundle.css` export in `package.json` automatically, keeping it in sync on
+every build — nothing to hand-edit there.
+
+**2. Add the build deps** in `package.json`:
 
 ```json
 {
-  "exports": {
-    ".": "./src/index.ts",
-    "./bundle.css": {
-      "browser": "./dist/bundle.css",
-      "style": "./dist/bundle.css",
-      "node": "./dist/bundle.css.js",
-      "default": "./dist/bundle.css.js"
-    },
-    "./package.json": "./package.json"
-  },
   "devDependencies": {
-    "@vanilla-extract/css": "catalog:",
-    "@vanilla-extract/vite-plugin": "catalog:"
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
+    "@vanilla-extract/css": "catalog:"
   }
 }
 ```
 
-Add the matching `./bundle.css` entry under `publishConfig.exports` too. `@vanilla-extract/css` is
-**build-time only** — its `style()` / `createVar()` calls compile away — so it stays a
-`devDependency`, never a runtime `dependency`.
+`@vanilla-extract/css` is **build-time only** — its `style()` / `createVar()` calls compile away —
+so it stays a `devDependency`, never a runtime `dependency`.
 
-**3. Register the Vite plugin** wherever the plugin's source `.css.ts` is compiled live: the
-plugin's own `vitest.config.ts`, and the test studio (which consumes the plugin's `source` export in
-dev):
+**3. Register the Vite plugin in the plugin's own `vitest.config.ts`.** The package-exports test
+resolves this workspace package's own `exports` map — whose `.` entry points at `./src/index.ts` for
+monorepo-internal dev consumption, not `dist/index.js` — so it transitively imports real `.css.ts`
+source and needs the plugin to compile it. Use `@sanity/vanilla-extract-vite-plugin` instead of the
+upstream `@vanilla-extract/vite-plugin` — it's faster. The exported `vanillaExtractPlugin()` API is a
+drop-in match:
 
 ```ts
 // plugins/@sanity/google-maps-input/vitest.config.ts
-import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {defineConfig} from 'vitest/config'
 
 export default defineConfig({
@@ -220,26 +213,17 @@ export default defineConfig({
 })
 ```
 
-```ts
-// dev/test-studio/sanity.cli.ts — add vanillaExtractPlugin() to the studio's Vite plugins
-import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
-
-export default defineCliConfig({
-  // ...
-  vite: {
-    plugins: [vanillaExtractPlugin()],
-  },
-})
-```
+The test studio already registers this plugin globally in `sanity.cli.ts` — you don't need to touch
+that file for a new plugin.
 
 Finally, the catalog carries the build deps (add them if missing) and knip ignores the
 build-time-only css package:
 
 ```yaml
 # pnpm-workspace.yaml
 catalog:
+  '@sanity/vanilla-extract-vite-plugin': ^0.1.0
   '@vanilla-extract/css': ^1.20.1
-  '@vanilla-extract/vite-plugin': ^5.2.2
 ```
 
 ```jsonc

dev/test-studio/package.json

@@ -35,10 +35,10 @@
     "@sanity/studio-secrets": "workspace:*",
     "@sanity/table": "workspace:*",
     "@sanity/ui": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@sanity/vercel-protection-bypass": "workspace:*",
     "@sanity/vision": "catalog:",
     "@vanilla-extract/css": "catalog:",
-    "@vanilla-extract/vite-plugin": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
     "sanity": "catalog:",

dev/test-studio/sanity.cli.ts

@@ -1,4 +1,4 @@
-import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {DevTools} from '@vitejs/devtools'
 import {defineCliConfig} from 'sanity/cli'
 
@@ -17,6 +17,10 @@ export default defineCliConfig({
   reactCompiler: {},
   typegen: {formatGeneratedCode: false},
   // Bundle studio deps in `sanity dev` (required for Structure with client/eventsource alignment).
+  // Trade-off: with this on, editing a `.css.ts` (vanilla-extract) file does not hot-reload —
+  // the change only takes effect after restarting `sanity dev`. Plain `.ts`/`.tsx` HMR still
+  // works fine. If you're actively working on styles and need CSS HMR, comment out this line
+  // for that session (confirmed fast, sub-10ms HMR with it unset).
   unstable_bundledDev: true,
   vite: {
     plugins: [vanillaExtractPlugin(), ...(isViteDevToolsEnabled ? [DevTools()] : [])],

plugins/@sanity/google-maps-input/package.json

@@ -30,21 +30,23 @@
   "exports": {
     ".": "./src/index.ts",
     "./bundle.css": {
+      "types": "./dist/bundle-css.d.ts",
       "browser": "./dist/bundle.css",
       "style": "./dist/bundle.css",
-      "node": "./dist/bundle.css.js",
-      "default": "./dist/bundle.css.js"
+      "node": "./dist/bundle-css.js",
+      "default": "./dist/bundle-css.js"
     },
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "exports": {
       ".": "./dist/index.js",
       "./bundle.css": {
+        "types": "./dist/bundle-css.d.ts",
         "browser": "./dist/bundle.css",
         "style": "./dist/bundle.css",
-        "node": "./dist/bundle.css.js",
-        "default": "./dist/bundle.css.js"
+        "node": "./dist/bundle-css.js",
+        "default": "./dist/bundle-css.js"
       },
       "./package.json": "./package.json"
     }
@@ -61,11 +63,11 @@
   "devDependencies": {
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "catalog:",
+    "@sanity/vanilla-extract-vite-plugin": "catalog:",
     "@types/google.maps": "^3.65.2",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@vanilla-extract/css": "catalog:",
-    "@vanilla-extract/vite-plugin": "catalog:",
     "babel-plugin-react-compiler": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",

plugins/@sanity/google-maps-input/vitest.config.ts

@@ -1,4 +1,4 @@
-import {vanillaExtractPlugin} from '@vanilla-extract/vite-plugin'
+import {vanillaExtractPlugin} from '@sanity/vanilla-extract-vite-plugin'
 import {defineConfig} from 'vitest/config'
 
 export default defineConfig({