[v3] update vite to v6

.changeset/late-trains-train.md

@@ -0,0 +1,8 @@
+---
+'@graphiql/plugin-code-exporter': minor
+'@graphiql/plugin-explorer': minor
+'@graphiql/react': minor
+'graphiql': minor
+---
+
+update `vite` and related dependencies

packages/graphiql-plugin-code-exporter/package.json

@@ -40,12 +40,11 @@
   },
   "devDependencies": {
     "@graphiql/react": "^0.29.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
-    "postcss-nesting": "^10.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.4.18"
+    "vite": "^6.3.3"
   }
 }

packages/graphiql-plugin-code-exporter/vite.config.mts

@@ -6,6 +6,9 @@ const IS_UMD = process.env.UMD === 'true';
 
 export default defineConfig({
   plugins: [react({ jsxRuntime: 'classic' })],
+  css: {
+    transformer: 'lightningcss',
+  },
   build: {
     minify: IS_UMD ? 'esbuild' : false,
     // avoid clean cjs/es builds
@@ -15,6 +18,7 @@ export default defineConfig({
       fileName: 'index',
       name: 'GraphiQLPluginCodeExporter',
       formats: IS_UMD ? ['umd'] : ['cjs', 'es'],
+      cssFileName: 'style',
     },
     rollupOptions: {
       external: [

packages/graphiql-plugin-explorer/package.json

@@ -39,12 +39,12 @@
   },
   "devDependencies": {
     "@graphiql/react": "^0.29.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.4.18",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite": "^6.3.3",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

packages/graphiql-plugin-explorer/vite.config.mts

@@ -15,6 +15,9 @@ export default defineConfig({
       },
     }),
   ],
+  css: {
+    transformer: 'lightningcss',
+  },
   build: {
     minify: IS_UMD ? 'esbuild' : false,
     // avoid clean cjs/es builds
@@ -24,6 +27,7 @@ export default defineConfig({
       fileName: 'index',
       name: 'GraphiQLPluginExplorer',
       formats: IS_UMD ? ['umd'] : ['cjs', 'es'],
+      cssFileName: 'style',
     },
     rollupOptions: {
       external: [

packages/graphiql-react/package.json

@@ -16,9 +16,9 @@
   "exports": {
     "./package.json": "./package.json",
     ".": {
+      "types": "./types/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./types/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./font/roboto.css": "./font/roboto.css",
     "./font/fira-code.css": "./font/fira-code.css",
@@ -76,13 +76,12 @@
     "@types/markdown-it": "^14.1.2",
     "@types/get-value": "^3.0.5",
     "@types/set-value": "^4.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.4.1",
     "graphql": "^16.9.0",
-    "postcss-nesting": "^10.1.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
-    "vite": "^5.4.18",
-    "vite-plugin-svgr": "^4.2.0"
+    "vite": "^6.3.3",
+    "vite-plugin-svgr": "^4.3.0"
   }
 }

packages/graphiql-react/vite.config.mts

@@ -2,7 +2,6 @@
 import { defineConfig, PluginOption } from 'vite';
 import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
-import postCssNestingPlugin from 'postcss-nesting';
 import type { PluginOptions as ReactCompilerConfig } from 'babel-plugin-react-compiler';
 import packageJSON from './package.json';
 
@@ -58,9 +57,7 @@ export const plugins: PluginOption[] = [
 export default defineConfig({
   plugins,
   css: {
-    postcss: {
-      plugins: [postCssNestingPlugin()],
-    },
+    transformer: 'lightningcss',
   },
   build: {
     minify: false,
@@ -69,6 +66,7 @@ export default defineConfig({
       entry: 'src/index.ts',
       fileName: 'index',
       formats: ['cjs', 'es'],
+      cssFileName: 'style',
     },
     rollupOptions: {
       external: [

packages/graphiql/package.json

@@ -33,9 +33,9 @@
     "./style.css": "./dist/style.css",
     "./graphiql.css": "./dist/style.css",
     ".": {
+      "types": "./dist/index.d.ts",
       "require": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "types": "./dist/index.d.ts"
+      "import": "./dist/index.mjs"
     }
   },
   "scripts": {
@@ -59,11 +59,11 @@
     "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
+    "lightningcss": "^1.29.3",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
-    "vite-plugin-dts": "^4.3.0",
-    "vite": "^5.3.6",
-    "postcss-lightningcss": "^1.0.1",
-    "@vitejs/plugin-react": "^4.3.1",
+    "vite-plugin-dts": "^4.5.3",
+    "vite": "^6.3.3",
+    "@vitejs/plugin-react": "^4.4.1",
     "@graphiql/toolkit": "^0.11.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -73,8 +73,6 @@
     "graphql": "^16.9.0",
     "graphql-http": "^1.22.1",
     "graphql-subscriptions": "^2.0.0",
-    "postcss": "8.4.31",
-    "postcss-import": "15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "start-server-and-test": "^1.10.11",

packages/graphiql/vite.config.mts

@@ -36,6 +36,9 @@ const umdConfig = defineConfig({
     'process.env.NODE_ENV': '"production"',
   },
   plugins,
+  css: {
+    transformer: 'lightningcss',
+  },
   build: {
     minify: 'terser', // produce less bundle size
     sourcemap: true,
@@ -46,6 +49,7 @@ const umdConfig = defineConfig({
       name: 'GraphiQL',
       fileName: 'index',
       formats: ['umd'],
+      cssFileName: 'style',
     },
     rollupOptions: {
       external: ['react', 'react-dom'],