Fixed multiple interpolations in a property

src/utils/general.js

@@ -48,6 +48,22 @@ const isLastLineWhitespaceOnly = text => {
   return true
 }
 
+/**
+ * Checks if text is empty or space only
+ */
+const isEmptyOrSpaceOnly = text => {
+  if (text === '') {
+    return true
+  }
+  for (let i = text.length - 1; i >= 0; i -= 1) {
+    const char = text.charAt(i)
+    if (char !== '\t' && char !== ' ') {
+      return false
+    }
+  }
+  return true
+}
+
 // eslint-disable-next-line no-return-assign
 const wrapSelector = content => `.selector${(count += 1)} {${content}}\n`
 const wrapKeyframes = content => `@keyframes {${content}}\n`
@@ -56,3 +72,4 @@ exports.wrapKeyframes = wrapKeyframes
 exports.wrapSelector = wrapSelector
 exports.fixIndentation = fixIndentation
 exports.isLastLineWhitespaceOnly = isLastLineWhitespaceOnly
+exports.isEmptyOrSpaceOnly = isEmptyOrSpaceOnly

src/utils/tagged-template-literal.js

@@ -1,4 +1,5 @@
 const isLastLineWhitespaceOnly = require('./general').isLastLineWhitespaceOnly
+const isEmptyOrSpaceOnly = require('./general').isEmptyOrSpaceOnly
 
 /**
  * Check if a node is a tagged template literal
@@ -21,7 +22,7 @@ const interleave = (quasis, expressions) => {
     const expression = expressions[i]
 
     css += prevText
-    if (isLastLineWhitespaceOnly(prevText)) {
+    if (isLastLineWhitespaceOnly(prevText) && !isEmptyOrSpaceOnly(prevText)) {
       css += `-styled-mixin: ${expression.name}`
       if (nextText.charAt(0) !== ';') {
         css += ';'

test/fixtures/interpolations/valid.js

@@ -71,3 +71,11 @@ const Button6 = styled.button`
   `}
   background: blue;
 `
+
+// multi interpolations within a property
+const borderWidth = '1px'
+const borderStyle = 'solid'
+const Button7 = styled.button`
+  width: 20px;
+  border: ${borderWidth} ${borderStyle} ${color};
+`

test/utils.test.js

@@ -1,5 +1,6 @@
 const interleave = require('../src/utils/tagged-template-literal').interleave
 const isLastLineWhitespaceOnly = require('../src/utils/general').isLastLineWhitespaceOnly
+const isEmptyOrSpaceOnly = require('../src/utils/general').isEmptyOrSpaceOnly
 
 describe('utils', () => {
   describe('interleave', () => {
@@ -60,4 +61,22 @@ describe('utils', () => {
       expect(isLastLineWhitespaceOnly('not space\n  ')).toEqual(true)
     })
   })
+
+  describe('isEmptyOrSpaceOnly', () => {
+    it('should return true for empty string', () => {
+      expect(isEmptyOrSpaceOnly('')).toEqual(true)
+    })
+
+    it('should return true for consecutive empty string', () => {
+      expect(isEmptyOrSpaceOnly(' ')).toEqual(true)
+    })
+
+    it('should return true for string of spaces and tabs', () => {
+      expect(isEmptyOrSpaceOnly(' \t  ')).toEqual(true)
+    })
+
+    it('should return false for string of newline', () => {
+      expect(isEmptyOrSpaceOnly('\n')).toEqual(false)
+    })
+  })
 })