Fix incorrect mocking inside template literal

Author: asvetliakov

src/__tests__/__snapshots__/babel.spec.ts.snap

@@ -145,10 +145,24 @@ exports[`For component like source Does not import inside in tagged template 1`]
 "import A from \\"a\\";
 import styled from \\"styled\\";
 import theme from \\"../theme\\";
+import { someFunc, someVal } from \\"./some\\";
 const StyledA = styled(A)\`
             color: \${theme.color.black};
         \`;
+const StyledB = styled(\\"div\\")\`
+            height: \${theme.elements.someHeight};
+            width: \${theme.elements.someWidth};
+        \`;
+const StyledC = styled(\\"div\\")\`\${theme.someFunc()}\`;
+const StyledD = styled(\\"div\\")\`\${someFunc()}\`;
+const StyledE = styled(\\"div\\")\`\${() => someFunc()}\`;
+const StyledF = styled(\\"div\\")\`\${someVal}\`;
 React.createElement(StyledA, null);
+React.createElement(StyledB, null);
+React.createElement(StyledC, null);
+React.createElement(StyledD, null);
+React.createElement(StyledE, null);
+React.createElement(StyledF, null);
 export const Mocks = [{
   identifier: \\"A\\",
   path: \\"a\\",
@@ -170,14 +184,46 @@ var _styled = _interopRequireDefault(require(\\"styled\\"));
 
 var _theme = _interopRequireDefault(require(\\"../theme\\"));
 
+var _some = require(\\"./some\\");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledA =
 /*#__PURE__*/
 (0, _styled.default)(_a.default, {
   target: \\"e1h80wsp0\\"
 })(\\"color:\\", _theme.default.color.black, \\";\\");
+const StyledB =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp1\\"
+})(\\"height:\\", _theme.default.elements.someHeight, \\";width:\\", _theme.default.elements.someWidth, \\";\\");
+const StyledC =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp2\\"
+})(_theme.default.someFunc());
+const StyledD =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp3\\"
+})((0, _some.someFunc)());
+const StyledE =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp4\\"
+})(() => (0, _some.someFunc)());
+const StyledF =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp5\\"
+})(_some.someVal);
 React.createElement(StyledA, null);
+React.createElement(StyledB, null);
+React.createElement(StyledC, null);
+React.createElement(StyledD, null);
+React.createElement(StyledE, null);
+React.createElement(StyledF, null);
 const Mocks = [{
   identifier: \\"A\\",
   path: \\"a\\",
@@ -298,14 +344,48 @@ var _styled = _interopRequireDefault(require(\\"styled\\"));
 
 var _theme = _interopRequireDefault(require(\\"../theme\\"));
 
+var _some = require(\\"./some\\");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var StyledA =
 /*#__PURE__*/
 (0, _styled.default)(_a.default, {
   target: \\"e1h80wsp0\\"
 })(\\"color:\\", _theme.default.color.black, \\";\\");
+var StyledB =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp1\\"
+})(\\"height:\\", _theme.default.elements.someHeight, \\";width:\\", _theme.default.elements.someWidth, \\";\\");
+var StyledC =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp2\\"
+})(_theme.default.someFunc());
+var StyledD =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp3\\"
+})((0, _some.someFunc)());
+var StyledE =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp4\\"
+})(function () {
+  return (0, _some.someFunc)();
+});
+var StyledF =
+/*#__PURE__*/
+(0, _styled.default)(\\"div\\", {
+  target: \\"e1h80wsp5\\"
+})(_some.someVal);
 React.createElement(StyledA, null);
+React.createElement(StyledB, null);
+React.createElement(StyledC, null);
+React.createElement(StyledD, null);
+React.createElement(StyledE, null);
+React.createElement(StyledF, null);
 const Mocks = [{
   identifier: \\"A\\",
   path: \\"a\\",

src/__tests__/babel.spec.ts

@@ -149,13 +149,29 @@ describe("For component like source", () => {
         import A from "a";
         import styled from "styled";
         import theme from "../theme";
+        import { someFunc, someVal } from "./some";
 
         const StyledA = styled(A)\`
             color: \${theme.color.black};
         \`;
 
+        const StyledB = styled("div") \`
+            height: \${theme.elements.someHeight};
+            width: \${theme.elements.someWidth};
+        \`;
+
+        const StyledC = styled("div") \`\${theme.someFunc()}\`;
+        const StyledD = styled("div") \`\${someFunc()}\`;
+        const StyledE = styled("div") \`\${() => someFunc()}\`;
+        const StyledF = styled("div") \`\${someVal}\`;
+
 
         <StyledA />;
+        <StyledB />;
+        <StyledC />;
+        <StyledD />;
+        <StyledE />;
+        <StyledF />;
         `;
 
         expect(transform(source, { babelrc: false, plugins: [plugin], presets: ["@babel/react"] }).code).toMatchSnapshot();

src/babel.ts

@@ -263,7 +263,7 @@ export default function plugin({ types: t, template: tmpl }: typeof b, options:
                                 [identifierNode, identifierBinding] = processHocLikeCallExpression(callExp.callee, binding.path.scope);
                             }
                             // otherwise process normally
-                            if (!identifierNode) {
+                            if (!identifierNode && !t.isCallExpression(callExp.callee)) {
                                 [identifierNode, identifierBinding] = processHocLikeCallExpression(callExp, binding.path.scope);
                             }
                         }