Push source maps & labels to cooked/raw arrays in TS-transpiled tagge…

…d template expressions with interpolations (#1761)

* check for strings length before performing check

* Fix detecting template expressions with interpolations transpiled by TS

* Add changeset

* update snapshots

* tweak changeset

Co-authored-by: Mateusz Burzyński <[email protected]>

.changeset/olive-papayas-flow.md

@@ -0,0 +1,5 @@
+---
+'babel-plugin-emotion': patch
+---
+
+Push source maps & labels to cooked/raw arrays in TS-transpiled tagged template expressions containing interpolations. This is a case not covered previously by [#1538](https://github.com/emotion-js/emotion/pull/1538).

packages/babel-plugin-emotion/__tests__/__snapshots__/css-requires-options.js.snap

@@ -112,11 +112,24 @@ let cls = /*#__PURE__*/_css(process.env.NODE_ENV === 'production' ? {
 });"
 `;
 
+exports[`babel css inline babel 6 label on code transpiled by TS (with interpolations)  1`] = `
+"import _css from '@emotion/css';
+
+import { __makeTemplateObject } from 'tslib';
+
+import { hoverStyles } from './styles';
+
+var templateObject_1;
+
+const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n;label:someVar;'], ['\\\\n  color: hotpink;\\\\n;label:someVar;'])), hoverStyles);"
+`;
+
 exports[`babel css inline babel 6 label on code transpiled by TS 1`] = `
 "import _css from '@emotion/css';
 
 import { __makeTemplateObject } from 'tslib';
 
+
 var templateObject_1;
 
 const someVar = /*#__PURE__*/_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n;label:someVar;'], ['\\\\n  color: hotpink;\\\\n;label:someVar;'])));"
@@ -245,6 +258,17 @@ _css(process.env.NODE_ENV === \\"production\\" ? {
 });"
 `;
 
+exports[`babel css inline babel 7 label on code transpiled by TS (with interpolations)  1`] = `
+"import _css from \\"@emotion/css\\";
+import { __makeTemplateObject } from 'tslib';
+import { hoverStyles } from './styles';
+var templateObject_1;
+
+const someVar =
+/*#__PURE__*/
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\"])), hoverStyles);"
+`;
+
 exports[`babel css inline babel 7 label on code transpiled by TS 1`] = `
 "import _css from \\"@emotion/css\\";
 import { __makeTemplateObject } from 'tslib';

packages/babel-plugin-emotion/__tests__/__snapshots__/css.js.snap

@@ -440,8 +440,8 @@ const thing = {
 `;
 
 exports[`@emotion/babel-plugin-core css label-transpiled-by-ts 1`] = `
-"import css from '@emotion/css'
-import { __makeTemplateObject } from 'tslib'
+"import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css'
 
 var templateObject_1
 
@@ -457,12 +457,47 @@ const someVar = css(
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\";
+
+import { __makeTemplateObject } from 'tslib';
+var templateObject_1;
+
+const someVar =
+/*#__PURE__*/
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])));"
+`;
+
+exports[`@emotion/babel-plugin-core css label-transpiled-by-ts-with-interpolations 1`] = `
+"import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+const someVar = css(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\\\\n  color: hotpink;\\\\n'],
+      ['\\\\n  color: hotpink;\\\\n']
+    )),
+  hoverStyles
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMtd2l0aC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoibGFiZWwtdHJhbnNwaWxlZC1ieS10cy13aXRoLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcbmltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzJ1xuaW1wb3J0IHsgaG92ZXJTdHlsZXMgfSBmcm9tICcuL3N0eWxlcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKSxcbiAgaG92ZXJTdHlsZXNcbilcbiJdfQ== */\\";
+
 import { __makeTemplateObject } from 'tslib';
+import { hoverStyles } from './styles';
 var templateObject_1;
 
 const someVar =
 /*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcbmltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSAndHNsaWInXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcbmltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSAndHNsaWInXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")])));"
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])), hoverStyles);"
 `;
 
 exports[`@emotion/babel-plugin-core css multiple-calls 1`] = `

packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts-with-interpolations.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css/macro'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+const someVar = css(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  color: hotpink;\n'],
+      ['\n  color: hotpink;\n']
+    )),
+  hoverStyles
+)

packages/babel-plugin-emotion/__tests__/css-macro/__fixtures__/label-transpiled-by-ts.js

@@ -1,5 +1,5 @@
-import css from '@emotion/css/macro'
 import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css/macro'
 
 var templateObject_1
 

packages/babel-plugin-emotion/__tests__/css-macro/__snapshots__/index.js.snap

@@ -440,8 +440,8 @@ const thing = {
 `;
 
 exports[`@emotion/css/macro label-transpiled-by-ts 1`] = `
-"import css from '@emotion/css/macro'
-import { __makeTemplateObject } from 'tslib'
+"import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css/macro'
 
 var templateObject_1
 
@@ -457,12 +457,47 @@ const someVar = css(
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MvbWFjcm8nXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\";
+
+import { __makeTemplateObject } from 'tslib';
+var templateObject_1;
+
+const someVar =
+/*#__PURE__*/
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])));"
+`;
+
+exports[`@emotion/css/macro label-transpiled-by-ts-with-interpolations 1`] = `
+"import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css/macro'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+const someVar = css(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\\\\n  color: hotpink;\\\\n'],
+      ['\\\\n  color: hotpink;\\\\n']
+    )),
+  hoverStyles
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMtd2l0aC1pbnRlcnBvbGF0aW9ucy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNZ0IiLCJmaWxlIjoibGFiZWwtdHJhbnNwaWxlZC1ieS10cy13aXRoLWludGVycG9sYXRpb25zLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgX19tYWtlVGVtcGxhdGVPYmplY3QgfSBmcm9tICd0c2xpYidcbmltcG9ydCBjc3MgZnJvbSAnQGVtb3Rpb24vY3NzL21hY3JvJ1xuaW1wb3J0IHsgaG92ZXJTdHlsZXMgfSBmcm9tICcuL3N0eWxlcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY29uc3Qgc29tZVZhciA9IGNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKSxcbiAgaG92ZXJTdHlsZXNcbilcbiJdfQ== */\\";
+
 import { __makeTemplateObject } from 'tslib';
+import { hoverStyles } from './styles';
 var templateObject_1;
 
 const someVar =
 /*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcbmltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSAndHNsaWInXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2dCIiwiZmlsZSI6ImxhYmVsLXRyYW5zcGlsZWQtYnktdHMuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2Nzcy9tYWNybydcbmltcG9ydCB7IF9fbWFrZVRlbXBsYXRlT2JqZWN0IH0gZnJvbSAndHNsaWInXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNvbnN0IHNvbWVWYXIgPSBjc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSlcbilcbiJdfQ== */\\")])));"
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject([\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap], [\\"\\\\n  color: hotpink;\\\\n;label:someVar;\\" + _emotionSourceMap])), hoverStyles);"
 `;
 
 exports[`@emotion/css/macro multiple-calls 1`] = `

packages/babel-plugin-emotion/__tests__/css-requires-options.js

@@ -54,7 +54,6 @@ const inline = {
   'label on code transpiled by TS': {
     code: `
     import { __makeTemplateObject } from 'tslib'
-
     import css from '@emotion/css'
 
     var templateObject_1
@@ -74,6 +73,30 @@ const inline = {
     filename: __filename
   },
 
+  'label on code transpiled by TS (with interpolations) ': {
+    code: `
+    import { __makeTemplateObject } from 'tslib'
+    import css from '@emotion/css'
+    import { hoverStyles } from './styles'
+
+    var templateObject_1
+
+    const someVar = css(
+      templateObject_1 ||
+        (templateObject_1 = __makeTemplateObject(
+          ['\\n  color: hotpink;\\n'],
+          ['\\n  color: hotpink;\\n']
+        )),
+      hoverStyles
+    )
+    `,
+    opts: {
+      autoLabel: true,
+      sourceMap: false
+    },
+    filename: __filename
+  },
+
   'custom instance': {
     code: `
     import {css as lol} from 'my-emotion-instance'

packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts-with-interpolations.js

@@ -0,0 +1,14 @@
+import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+css(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\n  color: hotpink;\n'],
+      ['\n  color: hotpink;\n']
+    )),
+  hoverStyles
+)

packages/babel-plugin-emotion/__tests__/source-maps/__fixtures__/css-transpiled-by-ts.js

@@ -1,5 +1,4 @@
 import { __makeTemplateObject } from 'tslib'
-
 import css from '@emotion/css'
 
 var templateObject_1

packages/babel-plugin-emotion/__tests__/source-maps/__snapshots__/index.js.snap

@@ -105,7 +105,6 @@ process.env.NODE_ENV === \\"production\\" ? {
 
 exports[`source maps css-transpiled-by-ts 1`] = `
 "import { __makeTemplateObject } from 'tslib'
-
 import css from '@emotion/css'
 
 var templateObject_1
@@ -122,11 +121,45 @@ css(
       ↓ ↓ ↓ ↓ ↓ ↓
 
 import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5cbnZhciB0ZW1wbGF0ZU9iamVjdF8xXG5cbmNzcyhcbiAgdGVtcGxhdGVPYmplY3RfMSB8fFxuICAgICh0ZW1wbGF0ZU9iamVjdF8xID0gX19tYWtlVGVtcGxhdGVPYmplY3QoXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ10sXG4gICAgICBbJ1xcbiAgY29sb3I6IGhvdHBpbms7XFxuJ11cbiAgICApKVxuKVxuIl19 */\\";
+
+import { __makeTemplateObject } from 'tslib';
+var templateObject_1;
+
+/*#__PURE__*/
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n' + _emotionSourceMap], ['\\\\n  color: hotpink;\\\\n' + _emotionSourceMap])));"
+`;
+
+exports[`source maps css-transpiled-by-ts-with-interpolations 1`] = `
+"import { __makeTemplateObject } from 'tslib'
+import css from '@emotion/css'
+import { hoverStyles } from './styles'
+
+var templateObject_1
+
+css(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      ['\\\\n  color: hotpink;\\\\n'],
+      ['\\\\n  color: hotpink;\\\\n']
+    )),
+  hoverStyles
+)
+
+
+      ↓ ↓ ↓ ↓ ↓ ↓
+
+import _css from \\"@emotion/css\\";
+
+var _emotionSourceMap = process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuaW1wb3J0IGNzcyBmcm9tICdAZW1vdGlvbi9jc3MnXG5pbXBvcnQgeyBob3ZlclN0eWxlcyB9IGZyb20gJy4vc3R5bGVzJ1xuXG52YXIgdGVtcGxhdGVPYmplY3RfMVxuXG5jc3MoXG4gIHRlbXBsYXRlT2JqZWN0XzEgfHxcbiAgICAodGVtcGxhdGVPYmplY3RfMSA9IF9fbWFrZVRlbXBsYXRlT2JqZWN0KFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddLFxuICAgICAgWydcXG4gIGNvbG9yOiBob3RwaW5rO1xcbiddXG4gICAgKSksXG4gIGhvdmVyU3R5bGVzXG4pXG4iXX0= */\\";
+
 import { __makeTemplateObject } from 'tslib';
+import { hoverStyles } from './styles';
 var templateObject_1;
 
 /*#__PURE__*/
-_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY3NzKFxuICB0ZW1wbGF0ZU9iamVjdF8xIHx8XG4gICAgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChcbiAgICAgIFsnXFxuICBjb2xvcjogaG90cGluaztcXG4nXSxcbiAgICAgIFsnXFxuICBjb2xvcjogaG90cGluaztcXG4nXVxuICAgICkpXG4pXG4iXX0= */\\")], ['\\\\n  color: hotpink;\\\\n' + (process.env.NODE_ENV === \\"production\\" ? \\"\\" : \\"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXAudGVzdC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNQSIsImZpbGUiOiJzb3VyY2UtbWFwLnRlc3QuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBfX21ha2VUZW1wbGF0ZU9iamVjdCB9IGZyb20gJ3RzbGliJ1xuXG5pbXBvcnQgY3NzIGZyb20gJ0BlbW90aW9uL2NzcydcblxudmFyIHRlbXBsYXRlT2JqZWN0XzFcblxuY3NzKFxuICB0ZW1wbGF0ZU9iamVjdF8xIHx8XG4gICAgKHRlbXBsYXRlT2JqZWN0XzEgPSBfX21ha2VUZW1wbGF0ZU9iamVjdChcbiAgICAgIFsnXFxuICBjb2xvcjogaG90cGluaztcXG4nXSxcbiAgICAgIFsnXFxuICBjb2xvcjogaG90cGluaztcXG4nXVxuICAgICkpXG4pXG4iXX0= */\\")])));"
+_css(templateObject_1 || (templateObject_1 = __makeTemplateObject(['\\\\n  color: hotpink;\\\\n' + _emotionSourceMap], ['\\\\n  color: hotpink;\\\\n' + _emotionSourceMap])), hoverStyles);"
 `;
 
 exports[`source maps styled-object 1`] = `

packages/babel-plugin-emotion/src/utils/strings.js

@@ -1,5 +1,5 @@
 // @flow
-import { isTaggedTemplateExpressionTranspiledByTypeScript } from './checks'
+import { getTypeScriptMakeTemplateObjectPath } from './ts-output-utils'
 
 export const appendStringToArguments = (path: *, string: string, t: *) => {
   if (!string) {
@@ -8,19 +8,20 @@ export const appendStringToArguments = (path: *, string: string, t: *) => {
   const args = path.node.arguments
   if (t.isStringLiteral(args[args.length - 1])) {
     args[args.length - 1].value += string
-  } else if (isTaggedTemplateExpressionTranspiledByTypeScript(path)) {
-    const makeTemplateObjectCallPath = path
-      .get('arguments')[0]
-      .get('right')
-      .get('right')
-
-    makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
-      const elements = argPath.get('elements')
-      const lastElement = elements[elements.length - 1]
-      lastElement.replaceWith(t.stringLiteral(lastElement.node.value + string))
-    })
   } else {
-    args.push(t.stringLiteral(string))
+    const makeTemplateObjectCallPath = getTypeScriptMakeTemplateObjectPath(path)
+
+    if (makeTemplateObjectCallPath) {
+      makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
+        const elements = argPath.get('elements')
+        const lastElement = elements[elements.length - 1]
+        lastElement.replaceWith(
+          t.stringLiteral(lastElement.node.value + string)
+        )
+      })
+    } else {
+      args.push(t.stringLiteral(string))
+    }
   }
 }