Merge appendStringToArguments logic into appendStringReturningExpress…

…ionToArguments
emotion-js · Jan 1, 2020 · 6f9aac2 · 6f9aac2
1 parent adab54c
commit 6f9aac2
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 70 deletions.
diff --git a/packages/babel-plugin-emotion/src/utils/arguments.js b/packages/babel-plugin-emotion/src/utils/arguments.js
diff --git a/packages/babel-plugin-emotion/src/utils/checks.js b/packages/babel-plugin-emotion/src/utils/checks.js
diff --git a/packages/babel-plugin-emotion/src/utils/index.js b/packages/babel-plugin-emotion/src/utils/index.js
@@ -8,6 +8,9 @@ export {
   transformExpressionWithStyles
 } from './transform-expression-with-styles'
 export { getStyledOptions } from './get-styled-options'
-export { appendStringToArguments, joinStringLiterals } from './strings'
+export {
+  appendStringReturningExpressionToArguments,
+  joinStringLiterals
+} from './strings'
 export { addImport } from './add-import'
 export { createTransformerMacro } from './transformer-macro'
diff --git a/packages/babel-plugin-emotion/src/utils/strings.js b/packages/babel-plugin-emotion/src/utils/strings.js
@@ -1,13 +1,43 @@
 // @flow
-import { isTaggedTemplateExpressionTranspiledByTypeScript } from './checks'
-
-export const appendStringToArguments = (path: *, string: string, t: *) => {
-  if (!string) {
-    return
+function isTaggedTemplateExpressionTranspiledByTypeScript(path: *) {
+  if (path.node.arguments.length !== 1) {
+    return false
   }
-  const args = path.node.arguments
-  if (t.isStringLiteral(args[args.length - 1])) {
-    args[args.length - 1].value += string
+
+  const argPath = path.get('arguments')[0]
+
+  return (
+    argPath.isLogicalExpression() &&
+    argPath.get('left').isIdentifier() &&
+    argPath.node.left.name.includes('templateObject') &&
+    argPath.get('right').isAssignmentExpression() &&
+    argPath
+      .get('right')
+      .get('right')
+      .isCallExpression() &&
+    argPath
+      .get('right')
+      .get('right')
+      .get('callee')
+      .isIdentifier() &&
+    argPath.node.right.right.callee.name.includes('makeTemplateObject') &&
+    argPath.node.right.right.arguments.length === 2
+  )
+}
+
+export const appendStringReturningExpressionToArguments = (
+  t: *,
+  path: *,
+  expression: *
+) => {
+  let lastIndex = path.node.arguments.length - 1
+  let last = path.node.arguments[lastIndex]
+  if (t.isStringLiteral(last)) {
+    if (typeof expression === 'string') {
+      path.node.arguments[lastIndex].value += expression
+    } else {
+      path.node.arguments[lastIndex] = t.binaryExpression('+', last, expression)
+    }
   } else if (isTaggedTemplateExpressionTranspiledByTypeScript(path)) {
     const makeTemplateObjectCallPath = path
       .get('arguments')[0]
@@ -17,10 +47,20 @@ export const appendStringToArguments = (path: *, string: string, t: *) => {
     makeTemplateObjectCallPath.get('arguments').forEach(argPath => {
       const elements = argPath.get('elements')
       const lastElement = elements[elements.length - 1]
-      lastElement.replaceWith(t.stringLiteral(lastElement.node.value + string))
+      if (typeof expression === 'string') {
+        lastElement.replaceWith(
+          t.stringLiteral(lastElement.node.value + expression)
+        )
+      } else {
+        lastElement.replaceWith(
+          t.binaryExpression('+', lastElement.node, t.cloneNode(expression))
+        )
+      }
     })
+  } else if (typeof expression === 'string') {
+    path.node.arguments.push(t.stringLiteral(expression))
   } else {
-    args.push(t.stringLiteral(string))
+    path.node.arguments.push(expression)
   }
 }
 

diff --git a/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js b/packages/babel-plugin-emotion/src/utils/transform-expression-with-styles.js
@@ -5,8 +5,10 @@ import { getExpressionsFromTemplateLiteral } from './minify'
 import { getLabelFromPath } from './label'
 import { getSourceMap } from './source-maps'
 import { simplifyObject } from './object-to-string'
-import { appendStringReturningExpressionToArguments } from './arguments'
-import { appendStringToArguments, joinStringLiterals } from './strings'
+import {
+  appendStringReturningExpressionToArguments,
+  joinStringLiterals
+} from './strings'
 
 const CSS_OBJECT_STRINGIFIED_ERROR =
   "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)."
@@ -146,7 +148,7 @@ export let transformExpressionWithStyles = ({
           break
         }
         case 'always':
-          appendStringToArguments(path, labelString, t)
+          appendStringReturningExpressionToArguments(t, path, labelString)
           break
       }
     }