Transpile packages that contain browser code (#520)

Author: mattcompiles

.changeset/old-phones-kneel.md

@@ -0,0 +1,12 @@
+---
+'@vanilla-extract/css': patch
+'@vanilla-extract/dynamic': patch
+'@vanilla-extract/private': patch
+'@vanilla-extract/recipes': patch
+'@vanilla-extract/sprinkles': patch
+'@vanilla-extract/css-utils': patch
+---
+
+Transpile code to meet [esmodules target](https://babeljs.io/docs/en/babel-preset-env#targetsesmodules)
+
+This should allow code that runs in the browser to conform to most browser policies. If you need to support browsers prior to the esmodules target (e.g. IE 11) then you'll need to configure custom transpilation in your projects.

babel-jest.config.js

@@ -1,9 +1,5 @@
-const baseConfig = require('./babel.config');
-
 module.exports = {
-  ...baseConfig,
-  plugins: [
-    ...(baseConfig.plugins ?? []),
-    require.resolve('@vanilla-extract/babel-plugin'),
-  ],
+  extends: './babel.config',
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+  plugins: [require.resolve('@vanilla-extract/babel-plugin')],
 };

babel.config.js

@@ -1,7 +1,17 @@
 module.exports = {
-  presets: [
-    '@babel/preset-typescript',
-    '@babel/preset-react',
-    ['@babel/preset-env', { targets: { node: 12 } }],
+  presets: ['@babel/preset-typescript', '@babel/preset-react'],
+
+  overrides: [
+    {
+      include: [
+        './packages/css',
+        './packages/dynamic',
+        './packages/private',
+        './packages/recipes',
+        './packages/sprinkles',
+        './packages/utils',
+      ],
+      presets: [['@babel/preset-env', { targets: { esmodules: true } }]],
+    },
   ],
 };