Update Babel config to target modern browsers/Node.js (#1262)

.changeset/brown-timers-hang.md

@@ -0,0 +1,14 @@
+---
+'@vanilla-extract/babel-plugin-debug-ids': patch
+'@vanilla-extract/esbuild-plugin-next': patch
+'@vanilla-extract/esbuild-plugin': patch
+'@vanilla-extract/integration': patch
+'@vanilla-extract/jest-transform': patch
+'@vanilla-extract/next-plugin': patch
+'@vanilla-extract/parcel-transformer': patch
+'@vanilla-extract/rollup-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+'@vanilla-extract/webpack-plugin': patch
+---
+
+Update Babel config to target Node.js 14

.changeset/spotty-suits-hide.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/integration': patch
+---
+
+Upgrade Vite and vite-node

.changeset/tricky-games-lick.md

@@ -0,0 +1,5 @@
+---
+'@vanilla-extract/vite-plugin': patch
+---
+
+Lazy load Vite to avoid the CJS warning

babel.config.js

@@ -1,10 +1,8 @@
 module.exports = {
   presets: [
-    ['@babel/preset-env', { targets: { node: 12 } }],
+    ['@babel/preset-env', { targets: { node: '14.21' } }],
     '@babel/preset-typescript',
-    '@babel/preset-react',
   ],
-
   overrides: [
     {
       include: [

package.json

@@ -33,7 +33,7 @@
     "@changesets/cli": "^2.26.2",
     "@manypkg/cli": "^0.19.1",
     "@playwright/test": "^1.40.1",
-    "@preconstruct/cli": "^2.0.1",
+    "@preconstruct/cli": "^2.8.2",
     "@swc/core": "^1.2.112",
     "@testing-library/jest-dom": "^5.11.9",
     "@types/jest": "^29.2.5",
@@ -50,9 +50,12 @@
     "rollup-plugin-node-externals": "^5.0.0",
     "ts-node": "^10.0.0",
     "typescript": "^4.9.4",
-    "vitest": "^0.28.5"
+    "vitest": "^1.1.0"
   },
   "preconstruct": {
+    "___experimentalFlags_WILL_CHANGE_IN_PATCH": {
+      "keepDynamicImportAsDynamicImportInCommonJS": true
+    },
     "packages": [
       "packages/*"
     ]

packages/integration/package.json

@@ -25,8 +25,8 @@
     "lodash": "^4.17.21",
     "mlly": "^1.1.0",
     "outdent": "^0.8.0",
-    "vite": "^4.1.4",
-    "vite-node": "^0.28.5"
+    "vite": "^5.0.10",
+    "vite-node": "^1.1.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.1.20",

packages/vite-plugin/src/index.ts

@@ -1,7 +1,6 @@
 import path from 'path';
 
 import type { Plugin, ResolvedConfig, ViteDevServer } from 'vite';
-import { normalizePath } from 'vite';
 import outdent from 'outdent';
 import {
   cssFileFilter,
@@ -33,6 +32,8 @@ export function vanillaExtractPlugin({
   let config: ResolvedConfig;
   let server: ViteDevServer;
   let postCssConfig: PostCSSConfigResult | null;
+  // We lazily load this utility from Vite
+  let normalizePath: (fsPath: string) => string;
   const cssMap = new Map<string, string>();
 
   const hasEmitCssOverride = typeof emitCssInSsr === 'boolean';
@@ -68,6 +69,7 @@ export function vanillaExtractPlugin({
     async configResolved(resolvedConfig) {
       config = resolvedConfig;
       packageName = getPackageInfo(config.root).name;
+      normalizePath = (await import('vite')).normalizePath;
 
       if (config.command === 'serve') {
         postCssConfig = await resolvePostcssConfig(config);