Improve ESM package entrypoints (#1597)

drwpow · web-flow · commit a7fccf8a2626 · 2025-06-07T22:39:30.000+10:00
diff --git a/.changeset/heavy-flies-design.md b/.changeset/heavy-flies-design.md
@@ -0,0 +1,19 @@
+---
+'@vanilla-extract/babel-plugin-debug-ids': patch
+'@vanilla-extract/parcel-transformer': patch
+'@vanilla-extract/esbuild-plugin': patch
+'@vanilla-extract/jest-transform': patch
+'@vanilla-extract/webpack-plugin': patch
+'@vanilla-extract/rollup-plugin': patch
+'@vanilla-extract/next-plugin': patch
+'@vanilla-extract/vite-plugin': patch
+'@vanilla-extract/sprinkles': patch
+'@vanilla-extract/compiler': patch
+'@vanilla-extract/dynamic': patch
+'@vanilla-extract/private': patch
+'@vanilla-extract/recipes': patch
+'@vanilla-extract/css-utils': patch
+'@vanilla-extract/css': patch
+---
+
+Fix ESM import path
diff --git a/packages/babel-plugin-debug-ids/package.json b/packages/babel-plugin-debug-ids/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-babel-plugin-debug-ids.cjs.js",
   "module": "dist/vanilla-extract-babel-plugin-debug-ids.esm.js",
   "types": "dist/vanilla-extract-babel-plugin-debug-ids.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-babel-plugin-debug-ids.cjs.d.ts",
+      "import": "./dist/vanilla-extract-babel-plugin-debug-ids.esm.js",
+      "default": "./dist/vanilla-extract-babel-plugin-debug-ids.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts"
diff --git a/packages/compiler/package.json b/packages/compiler/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-compiler.cjs.js",
   "module": "dist/vanilla-extract-compiler.esm.js",
   "types": "dist/vanilla-extract-compiler.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-compiler.cjs.d.ts",
+      "import": "./dist/vanilla-extract-compiler.esm.js",
+      "default": "./dist/vanilla-extract-compiler.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "/dist"
   ],
diff --git a/packages/css/adapter/package.json b/packages/css/adapter/package.json
@@ -10,9 +10,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-adapter.browser.esm.js",
         "module": "./dist/vanilla-extract-css-adapter.browser.esm.js",
         "default": "./dist/vanilla-extract-css-adapter.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-adapter.esm.js",
       "module": "./dist/vanilla-extract-css-adapter.esm.js",
       "default": "./dist/vanilla-extract-css-adapter.cjs.js"
     }
diff --git a/packages/css/disableRuntimeStyles/package.json b/packages/css/disableRuntimeStyles/package.json
@@ -9,9 +9,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
         "module": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
         "default": "./dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
       "module": "./dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
       "default": "./dist/vanilla-extract-css-disableRuntimeStyles.cjs.js"
     }
diff --git a/packages/css/fileScope/package.json b/packages/css/fileScope/package.json
@@ -10,9 +10,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-fileScope.browser.esm.js",
         "module": "./dist/vanilla-extract-css-fileScope.browser.esm.js",
         "default": "./dist/vanilla-extract-css-fileScope.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-fileScope.esm.js",
       "module": "./dist/vanilla-extract-css-fileScope.esm.js",
       "default": "./dist/vanilla-extract-css-fileScope.cjs.js"
     }
diff --git a/packages/css/functionSerializer/package.json b/packages/css/functionSerializer/package.json
@@ -9,9 +9,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-functionSerializer.browser.esm.js",
         "module": "./dist/vanilla-extract-css-functionSerializer.browser.esm.js",
         "default": "./dist/vanilla-extract-css-functionSerializer.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-functionSerializer.esm.js",
       "module": "./dist/vanilla-extract-css-functionSerializer.esm.js",
       "default": "./dist/vanilla-extract-css-functionSerializer.cjs.js"
     }
diff --git a/packages/css/injectStyles/package.json b/packages/css/injectStyles/package.json
@@ -9,9 +9,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-injectStyles.browser.esm.js",
         "module": "./dist/vanilla-extract-css-injectStyles.browser.esm.js",
         "default": "./dist/vanilla-extract-css-injectStyles.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-injectStyles.esm.js",
       "module": "./dist/vanilla-extract-css-injectStyles.esm.js",
       "default": "./dist/vanilla-extract-css-injectStyles.cjs.js"
     }
diff --git a/packages/css/package.json b/packages/css/package.json
@@ -15,73 +15,89 @@
     ".": {
       "types": "./dist/vanilla-extract-css.cjs.d.ts",
       "browser": {
+        "import": "./dist/vanilla-extract-css.browser.esm.js",
         "module": "./dist/vanilla-extract-css.browser.esm.js",
         "default": "./dist/vanilla-extract-css.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css.esm.js",
       "module": "./dist/vanilla-extract-css.esm.js",
       "default": "./dist/vanilla-extract-css.cjs.js"
     },
     "./recipe": {
       "types": "./recipe/dist/vanilla-extract-css-recipe.cjs.d.ts",
       "browser": {
+        "import": "./recipe/dist/vanilla-extract-css-recipe.browser.esm.js",
         "module": "./recipe/dist/vanilla-extract-css-recipe.browser.esm.js",
         "default": "./recipe/dist/vanilla-extract-css-recipe.browser.cjs.js"
       },
+      "import": "./recipe/dist/vanilla-extract-css-recipe.esm.js",
       "module": "./recipe/dist/vanilla-extract-css-recipe.esm.js",
       "default": "./recipe/dist/vanilla-extract-css-recipe.cjs.js"
     },
     "./functionSerializer": {
       "types": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.d.ts",
       "browser": {
+        "import": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.esm.js",
         "module": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.esm.js",
         "default": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.browser.cjs.js"
       },
+      "import": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.esm.js",
       "module": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.esm.js",
       "default": "./functionSerializer/dist/vanilla-extract-css-functionSerializer.cjs.js"
     },
     "./adapter": {
       "types": "./adapter/dist/vanilla-extract-css-adapter.cjs.d.ts",
       "browser": {
+        "import": "./adapter/dist/vanilla-extract-css-adapter.browser.esm.js",
         "module": "./adapter/dist/vanilla-extract-css-adapter.browser.esm.js",
         "default": "./adapter/dist/vanilla-extract-css-adapter.browser.cjs.js"
       },
+      "import": "./adapter/dist/vanilla-extract-css-adapter.esm.js",
       "module": "./adapter/dist/vanilla-extract-css-adapter.esm.js",
       "default": "./adapter/dist/vanilla-extract-css-adapter.cjs.js"
     },
     "./transformCss": {
       "types": "./transformCss/dist/vanilla-extract-css-transformCss.cjs.d.ts",
       "browser": {
+        "import": "./transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js",
         "module": "./transformCss/dist/vanilla-extract-css-transformCss.browser.esm.js",
         "default": "./transformCss/dist/vanilla-extract-css-transformCss.browser.cjs.js"
       },
+      "import": "./transformCss/dist/vanilla-extract-css-transformCss.esm.js",
       "module": "./transformCss/dist/vanilla-extract-css-transformCss.esm.js",
       "default": "./transformCss/dist/vanilla-extract-css-transformCss.cjs.js"
     },
     "./fileScope": {
       "types": "./fileScope/dist/vanilla-extract-css-fileScope.cjs.d.ts",
       "browser": {
+        "import": "./fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js",
         "module": "./fileScope/dist/vanilla-extract-css-fileScope.browser.esm.js",
         "default": "./fileScope/dist/vanilla-extract-css-fileScope.browser.cjs.js"
       },
+      "import": "./fileScope/dist/vanilla-extract-css-fileScope.esm.js",
       "module": "./fileScope/dist/vanilla-extract-css-fileScope.esm.js",
       "default": "./fileScope/dist/vanilla-extract-css-fileScope.cjs.js"
     },
     "./fileScope/package.json": "./fileScope/package.json",
     "./injectStyles": {
       "types": "./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.d.ts",
       "browser": {
+        "import": "./injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js",
         "module": "./injectStyles/dist/vanilla-extract-css-injectStyles.browser.esm.js",
         "default": "./injectStyles/dist/vanilla-extract-css-injectStyles.browser.cjs.js"
       },
+      "import": "./injectStyles/dist/vanilla-extract-css-injectStyles.esm.js",
       "module": "./injectStyles/dist/vanilla-extract-css-injectStyles.esm.js",
       "default": "./injectStyles/dist/vanilla-extract-css-injectStyles.cjs.js"
     },
     "./disableRuntimeStyles": {
       "types": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.d.ts",
       "browser": {
+        "import": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
         "module": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.esm.js",
         "default": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.browser.cjs.js"
       },
+      "import": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
       "module": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.esm.js",
       "default": "./disableRuntimeStyles/dist/vanilla-extract-css-disableRuntimeStyles.cjs.js"
     }
diff --git a/packages/css/recipe/package.json b/packages/css/recipe/package.json
@@ -9,9 +9,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-recipe.browser.esm.js",
         "module": "./dist/vanilla-extract-css-recipe.browser.esm.js",
         "default": "./dist/vanilla-extract-css-recipe.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-recipe.esm.js",
       "module": "./dist/vanilla-extract-css-recipe.esm.js",
       "default": "./dist/vanilla-extract-css-recipe.cjs.js"
     }
diff --git a/packages/css/transformCss/package.json b/packages/css/transformCss/package.json
@@ -10,9 +10,11 @@
     "./package.json": "./package.json",
     ".": {
       "browser": {
+        "import": "./dist/vanilla-extract-css-transformCss.browser.esm.js",
         "module": "./dist/vanilla-extract-css-transformCss.browser.esm.js",
         "default": "./dist/vanilla-extract-css-transformCss.browser.cjs.js"
       },
+      "import": "./dist/vanilla-extract-css-transformCss.esm.js",
       "module": "./dist/vanilla-extract-css-transformCss.esm.js",
       "default": "./dist/vanilla-extract-css-transformCss.cjs.js"
     }
diff --git a/packages/dynamic/package.json b/packages/dynamic/package.json
@@ -10,6 +10,7 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/vanilla-extract-dynamic.cjs.d.ts",
+      "import": "./dist/vanilla-extract-dynamic.esm.js",
       "module": "./dist/vanilla-extract-dynamic.esm.js",
       "default": "./dist/vanilla-extract-dynamic.cjs.js"
     }
diff --git a/packages/esbuild-plugin-next/package.json b/packages/esbuild-plugin-next/package.json
@@ -6,6 +6,14 @@
   "main": "dist/vanilla-extract-esbuild-plugin-next.cjs.js",
   "module": "dist/vanilla-extract-esbuild-plugin-next.esm.js",
   "types": "dist/vanilla-extract-esbuild-plugin-next.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-esbuild-plugin-next.cjs.d.ts",
+      "import": "./dist/vanilla-extract-esbuild-plugin-next.esm.js",
+      "default": "./dist/vanilla-extract-esbuild-plugin-next.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "/dist"
   ],
diff --git a/packages/esbuild-plugin/package.json b/packages/esbuild-plugin/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-esbuild-plugin.cjs.js",
   "module": "dist/vanilla-extract-esbuild-plugin.esm.js",
   "types": "dist/vanilla-extract-esbuild-plugin.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-esbuild-plugin.cjs.d.ts",
+      "import": "./dist/vanilla-extract-esbuild-plugin.esm.js",
+      "default": "./dist/vanilla-extract-esbuild-plugin.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "/dist"
   ],
diff --git a/packages/jest-transform/package.json b/packages/jest-transform/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-jest-transform.cjs.js",
   "module": "dist/vanilla-extract-jest-transform.esm.js",
   "types": "dist/vanilla-extract-jest-transform.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-jest-transform.cjs.d.ts",
+      "import": "./dist/vanilla-extract-jest-transform.esm.js",
+      "default": "./dist/vanilla-extract-jest-transform.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts"
diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-next-plugin.cjs.js",
   "module": "dist/vanilla-extract-next-plugin.esm.js",
   "types": "dist/vanilla-extract-next-plugin.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-next-plugin.cjs.d.ts",
+      "import": "./dist/vanilla-extract-next-plugin.esm.js",
+      "default": "./dist/vanilla-extract-next-plugin.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts"
diff --git a/packages/parcel-transformer/package.json b/packages/parcel-transformer/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-parcel-transformer.cjs.js",
   "module": "dist/vanilla-extract-parcel-transformer.esm.js",
   "types": "dist/vanilla-extract-parcel-transformer.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-parcel-transformer.cjs.d.ts",
+      "import": "./dist/vanilla-extract-parcel-transformer.esm.js",
+      "default": "./dist/vanilla-extract-parcel-transformer.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "/dist"
   ],
diff --git a/packages/private/package.json b/packages/private/package.json
@@ -6,6 +6,14 @@
   "main": "dist/vanilla-extract-private.cjs.js",
   "module": "dist/vanilla-extract-private.esm.js",
   "types": "dist/vanilla-extract-private.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-private.cjs.d.ts",
+      "import": "./dist/vanilla-extract-private.esm.js",
+      "default": "./dist/vanilla-extract-private.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "preconstruct": {
     "entrypoints": [
       "index.ts"
diff --git a/packages/recipes/createRuntimeFn/package.json b/packages/recipes/createRuntimeFn/package.json
@@ -1,4 +1,11 @@
 {
   "main": "dist/vanilla-extract-recipes-createRuntimeFn.cjs.js",
-  "module": "dist/vanilla-extract-recipes-createRuntimeFn.esm.js"
+  "module": "dist/vanilla-extract-recipes-createRuntimeFn.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vanilla-extract-recipes-createRuntimeFn.esm.js",
+      "default": "./dist/vanilla-extract-recipes-createRuntimeFn.cjs.js"
+    },
+    "./package.json": "./package.json"
+  }
 }
diff --git a/packages/rollup-plugin/package.json b/packages/rollup-plugin/package.json
@@ -5,6 +5,14 @@
   "main": "dist/vanilla-extract-rollup-plugin.cjs.js",
   "module": "dist/vanilla-extract-rollup-plugin.esm.js",
   "types": "dist/vanilla-extract-rollup-plugin.cjs.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/vanilla-extract-rollup-plugin.cjs.d.ts",
+      "import": "./dist/vanilla-extract-rollup-plugin.esm.js",
+      "default": "./dist/vanilla-extract-rollup-plugin.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "/dist"
   ],
diff --git a/packages/sprinkles/createRuntimeSprinkles/package.json b/packages/sprinkles/createRuntimeSprinkles/package.json
@@ -1,4 +1,11 @@
 {
   "main": "dist/vanilla-extract-sprinkles-createRuntimeSprinkles.cjs.js",
-  "module": "dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js"
+  "module": "dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js",
+      "default": "./dist/vanilla-extract-sprinkles-createRuntimeSprinkles.cjs.js"
+    },
+    "./package.json": "./package.json"
+  }
 }
diff --git a/packages/sprinkles/createUtils/package.json b/packages/sprinkles/createUtils/package.json
@@ -1,4 +1,11 @@
 {
   "main": "dist/vanilla-extract-sprinkles-createUtils.cjs.js",
-  "module": "dist/vanilla-extract-sprinkles-createUtils.esm.js"
+  "module": "dist/vanilla-extract-sprinkles-createUtils.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/vanilla-extract-sprinkles-createUtils.esm.js",
+      "default": "./dist/vanilla-extract-sprinkles-createUtils.cjs.js"
+    },
+    "./package.json": "./package.json"
+  }
 }
diff --git a/packages/sprinkles/package.json b/packages/sprinkles/package.json
@@ -10,16 +10,19 @@
     "./package.json": "./package.json",
     ".": {
       "types": "./dist/vanilla-extract-sprinkles.cjs.d.ts",
+      "import": "./dist/vanilla-extract-sprinkles.esm.js",
       "module": "./dist/vanilla-extract-sprinkles.esm.js",
       "default": "./dist/vanilla-extract-sprinkles.cjs.js"
     },
     "./createRuntimeSprinkles": {
       "types": "./createRuntimeSprinkles/dist/vanilla-extract-sprinkles.cjs.d.ts",
+      "import": "./createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js",
       "module": "./createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.esm.js",
       "default": "./createRuntimeSprinkles/dist/vanilla-extract-sprinkles-createRuntimeSprinkles.cjs.js"
     },
     "./createUtils": {
       "types": "./createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.d.ts",
+      "import": "./createUtils/dist/vanilla-extract-sprinkles-createUtils.esm.js",
       "module": "./createUtils/dist/vanilla-extract-sprinkles-createUtils.esm.js",
       "default": "./createUtils/dist/vanilla-extract-sprinkles-createUtils.cjs.js"
     }
diff --git a/packages/utils/package.json b/packages/utils/package.json
diff --git a/packages/vite-plugin/package.json b/packages/vite-plugin/package.json
diff --git a/packages/webpack-plugin/loader/package.json b/packages/webpack-plugin/loader/package.json
diff --git a/packages/webpack-plugin/next/package.json b/packages/webpack-plugin/next/package.json
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
diff --git a/packages/webpack-plugin/virtualFileLoader/package.json b/packages/webpack-plugin/virtualFileLoader/package.json
diff --git a/packages/webpack-plugin/virtualNextFileLoader/package.json b/packages/webpack-plugin/virtualNextFileLoader/package.json
