fix: add caller settings to loadBabelOptions() (#1356)

.changeset/pretty-mugs-try.md

@@ -0,0 +1,7 @@
+---
+"@linaria/testkit": patch
+"@linaria/utils": patch
+"webpack5-example": patch
+---
+
+fix: add caller settings to loadBabelOptions()

examples/webpack4/package.json

@@ -4,11 +4,11 @@
   "version": "0.0.0",
   "license": "MIT",
   "dependencies": {
-    "linaria-website": "workspace:^4.1.8"
+    "linaria-website": "workspace:^"
   },
   "devDependencies": {
     "@babel/core": "^7.18.6",
-    "@linaria/webpack4-loader": "workspace:^4.1.8",
+    "@linaria/webpack4-loader": "workspace:^",
     "babel-loader": "^8.2.5",
     "cross-env": "^7.0.3",
     "css-hot-loader": "^1.4.4",

examples/webpack5/package.json

@@ -5,11 +5,11 @@
   "license": "MIT",
   "main": "index.js",
   "dependencies": {
-    "linaria-website": "workspace:^4.1.8"
+    "linaria-website": "workspace:^"
   },
   "devDependencies": {
     "@babel/core": "^7.22.15",
-    "@linaria/webpack5-loader": "workspace:^4.1.8",
+    "@linaria/webpack5-loader": "workspace:^",
     "babel-loader": "^9.1.0",
     "cross-env": "^7.0.3",
     "css-hot-loader": "^1.4.4",

packages/testkit/src/__snapshots__/prepareCode.test.ts.snap

@@ -3,7 +3,9 @@
 exports[`prepareCode Testing transformation for dynamic-import: code 1`] = `
 ""use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.foo = foo;
 function foo(onImport) {
   __linaria_dynamic_import("./foo").then(onImport);
@@ -17,7 +19,9 @@ exports[`prepareCode Testing transformation for dynamic-import: metadata 1`] = `
 exports[`prepareCode Testing transformation for dynamic-import-param: code 1`] = `
 ""use strict";
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.foo = foo;
 function foo(locale, onImport) {
   __linaria_dynamic_import("./foo/" + locale).then(onImport);

packages/testkit/tsconfig.json

@@ -3,12 +3,17 @@
   "exclude": [
     // Contains broken code that should not be type-checked
     "src/__fixtures__/prepare-code-test-cases/dynamic-import/input.ts",
+    "src/__fixtures__/prepare-code-test-cases/dynamic-import-param/input.ts",
     "src/__fixtures__/prepare-code-test-cases/for-debug/input.ts",
     "src/__fixtures__/linaria-ui-library/types.ts",
 
     "node_modules"
   ],
-  "compilerOptions": { "paths": {}, "rootDir": "src/", "types": ["jest", "node"] },
+  "compilerOptions": {
+    "paths": {},
+    "rootDir": "src/",
+    "types": ["jest", "node"]
+  },
   "references": [
     { "path": "../babel" },
     { "path": "../core" },

packages/utils/src/options/loadBabelOptions.ts

@@ -23,7 +23,15 @@ export default function loadBabelOptions(
     babel.loadOptions({
       ...overrides,
       filename,
-      caller: { name: 'linaria' },
+      caller: {
+        name: 'linaria',
+
+        // Indicates for @babel/preset-env to support all ESM syntax and avoid transforms before it's needed
+        supportsStaticESM: true,
+        supportsDynamicImport: true,
+        supportsTopLevelAwait: true,
+        supportsExportNamespaceFrom: true,
+      },
     }) ?? {};
 
   fileCache.set(filename, babelOptions);