fix: add support for params in dynamic imports (#1325)

* fix: add support for params in dynamic imports

* Create long-singers-provide.md

* Update dynamic-import.ts

.changeset/long-singers-provide.md

@@ -0,0 +1,7 @@
+---
+"@linaria/babel-preset": patch
+"@linaria/testkit": patch
+"@linaria/utils": patch
+---
+
+fix: add support for params in dynamic imports

packages/babel/src/plugins/dynamic-import.ts

@@ -15,14 +15,26 @@ export default function dynamicImport(babel: Core): PluginObj {
         if (path.get('callee').isImport()) {
           const moduleName = path.get('arguments.0') as NodePath;
 
-          if (!moduleName.isStringLiteral()) {
-            throw new Error('Dynamic import argument must be a string literal');
+          if (moduleName.isStringLiteral()) {
+            path.replaceWith(
+              t.callExpression(t.identifier('__linaria_dynamic_import'), [
+                t.stringLiteral(moduleName.node.value),
+              ])
+            );
+            return;
           }
 
-          path.replaceWith(
-            t.callExpression(t.identifier('__linaria_dynamic_import'), [
-              t.stringLiteral(moduleName.node.value),
-            ])
+          if (moduleName.isTemplateLiteral()) {
+            path.replaceWith(
+              t.callExpression(t.identifier('__linaria_dynamic_import'), [
+                t.cloneNode(moduleName.node, true, true),
+              ])
+            );
+            return;
+          }
+
+          throw new Error(
+            'Dynamic import argument must be a string or a template literal'
           );
         }
       },

packages/testkit/src/__fixtures__/prepare-code-test-cases/dynamic-import-param/input.ts

@@ -0,0 +1,5 @@
+// *
+
+export function foo(locale, onImport) {
+  import(`./foo/${locale}`).then(onImport);
+}

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

@@ -14,6 +14,20 @@ exports[`prepareCode Testing transformation for dynamic-import: imports 1`] = `M
 
 exports[`prepareCode Testing transformation for dynamic-import: metadata 1`] = `Object {}`;
 
+exports[`prepareCode Testing transformation for dynamic-import-param: code 1`] = `
+"\\"use strict\\";
+
+exports.__esModule = true;
+exports.foo = foo;
+function foo(locale, onImport) {
+  __linaria_dynamic_import(\\"./foo/\\" + locale).then(onImport);
+}"
+`;
+
+exports[`prepareCode Testing transformation for dynamic-import-param: imports 1`] = `Map {}`;
+
+exports[`prepareCode Testing transformation for dynamic-import-param: metadata 1`] = `Object {}`;
+
 exports[`prepareCode Testing transformation for for-debug: code 1`] = `
 "'use strict';
 

packages/utils/package.json

@@ -34,7 +34,6 @@
     "@babel/core": "^7.22.9",
     "@babel/generator": "^7.22.9",
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-modules-commonjs": "^7.22.5",
     "@babel/template": "^7.22.5",
     "@babel/traverse": "^7.22.8",