Fixed an issue with styled transformer sometimes not using the used l…

…ocal name (#2602)

.changeset/perfect-yaks-carry.md

@@ -0,0 +1,5 @@
+---
+'@emotion/babel-plugin': patch
+---
+
+Fixed an issue with styled transformer sometimes not using the used local name for the imported named export when used with `importMap`.

packages/babel-plugin/__tests__/import-mapping/__fixtures__/non-default-styled-aliased.js

@@ -0,0 +1,3 @@
+import { nonDefaultStyled as someAlias } from 'package-one'
+
+let SomeComp = someAlias.div({ color: 'hotpink' })

packages/babel-plugin/__tests__/import-mapping/__snapshots__/import-mapping.js.snap

@@ -100,6 +100,33 @@ let SomeComp = nonDefaultStyled(\\"div\\", process.env.NODE_ENV === \\"productio
 });"
 `;
 
+exports[`import mapping non-default-styled-aliased 1`] = `
+"import { nonDefaultStyled as someAlias } from 'package-one'
+
+let SomeComp = someAlias.div({ color: 'hotpink' })
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return \\"You have tried to stringify object returned from \`css\` function. It isn't supposed to be used directly (e.g. as value of the \`className\` prop), but rather handed to emotion so it can handle it (e.g. as value of \`css\` prop).\\"; }
+
+import { nonDefaultStyled as someAlias } from 'package-one';
+let SomeComp = someAlias(\\"div\\", process.env.NODE_ENV === \\"production\\" ? {
+  target: \\"erjjkeh0\\"
+} : {
+  target: \\"erjjkeh0\\",
+  label: \\"SomeComp\\"
+})(process.env.NODE_ENV === \\"production\\" ? {
+  name: \\"3sn2xs\\",
+  styles: \\"color:hotpink\\"
+} : {
+  name: \\"3sn2xs\\",
+  styles: \\"color:hotpink\\",
+  map: \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vbi1kZWZhdWx0LXN0eWxlZC1hbGlhc2VkLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVlIiwiZmlsZSI6Im5vbi1kZWZhdWx0LXN0eWxlZC1hbGlhc2VkLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbm9uRGVmYXVsdFN0eWxlZCBhcyBzb21lQWxpYXMgfSBmcm9tICdwYWNrYWdlLW9uZSdcblxubGV0IFNvbWVDb21wID0gc29tZUFsaWFzLmRpdih7IGNvbG9yOiAnaG90cGluaycgfSlcbiJdfQ== */\\",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});"
+`;
+
 exports[`import mapping styled-with-base-specified 1`] = `
 "import { nonDefaultStyled } from 'package-four'
 

packages/babel-plugin/src/styled-macro.js

@@ -38,12 +38,7 @@ export let styledTransformer = ({
       (styledBaseImport[0] === importSource &&
         styledBaseImport[1] === importSpecifierName)
     ) {
-      return importSpecifierName === 'default'
-        ? t.identifier(
-            path.get('specifiers').find(p => p.isImportDefaultSpecifier()).node
-              .local.name
-          )
-        : t.identifier(importSpecifierName)
+      return t.cloneNode(reference.node)
     }
 
     if (path.node) {