Repository: styled-components/stylelint-processor-styled-components
Pull request #52 (2017-06-27 02:24:11)

Fixed multiple interpolations in a property
related to #20 #21

This change enable to use multiple interpolations in a property at once.

```
  width: 20px;
  border: ${borderWidth} ${borderStyle} ${color};
```
is now translated to:

```
 width: 20px;
 border: $borderWidth -styled-mixin: borderStyle; -styled-mixin: color;
```
This changes above to: 

```
 width: 20px;
 border: $borderWidth $borderStyle $color;
```

Cc: @mxstbr 

coveralls: 
[![Coverage Status](https://:/builds/12144429/badge)](https://:/builds/12144429)

Coverage remained the same at 99.333% when pulling **65eae1489ae0613da9850ff5c6be29154faee097 on taneba:master** into **3c43e97f5678ece590cd6a284b0e943fc69073af on styled-components:master**.

coveralls: 
[![Coverage Status](https://coveralls.io/builds/12268051/badge)](https://coveralls.io/builds/12268051)

Coverage increased (+0.04%) to 99.375% when pulling **73ee889febbecab132d56fe8e116ce377942e087 on taneba:master** into **3c43e97f5678ece590cd6a284b0e943fc69073af on styled-components:master**.

taneba: I've refactored by following suggestion by @ismay 
How about this?
ismay: Thanks for the update @taneba. To me this looks good. If there aren't any objections I think this is ready for merging.

Patch:
diff --git a/src/utils/general.js b/src/utils/general.js
index 0ae8a14..ddfeb4d 100644
--- a/src/utils/general.js
+++ b/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
diff --git a/src/utils/tagged-template-literal.js b/src/utils/tagged-template-literal.js
index a6977cd..1f8ff7e 100644
--- a/src/utils/tagged-template-literal.js
+++ b/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 patch:
diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js
index 00dd798..9d9529c 100644
--- a/test/fixtures/interpolations/valid.js
+++ b/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};
+`
diff --git a/test/utils.test.js b/test/utils.test.js
index 9536d8b..3a27faf 100644
--- a/test/utils.test.js
+++ b/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)
+    })
+  })
 })