Repository: styled-components/stylelint-processor-styled-components (js)

Issue:
Error declaration-block-no-duplicate-properties from rules with mixins only
My code:
```
import styled from 'styled-components';
import { ellipsis } from 'polished';
import { TYPOGRAPHY } from 'style-constants';

const NameLink = styled.span`
  ${ellipsis('110px')}
  ${TYPOGRAPHY.bodyBold}
`;

export default NameLink;
```

 7:3  ✖  Unexpected duplicate "undefined"   declaration-block-no-duplicate-properties


Pull request:
Make -styled-mixins unique and clarify interpolation linting in readme
Up until now I just added a failing test for #55. It seems to be a problem with [this line](https://github.com/styled-components/stylelint-processor-styled-components/blob/3c43e97f5678ece590cd6a284b0e943fc69073af/src/utils/tagged-template-literal.js#L21) returning undefined on a string as opposed to a variable.

I'll probably look at it again tomorrow night after work, and see if I can also fix it, my first impression is that it's a bigger problem with the approach and that it's better to find a better approach rather than patching an edge case for another one to soon pop out, but again, I haven't looked at it that much yet.

Any advice from more seasoned contributors that know the codebase better is of course welcome, otherwise I'll look at it again tomorrow night.

(fixes #55)

Patch:
diff --git a/README.md b/README.md
index 9e69502..caa7a84 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,8 @@ const Wrapper = styled.div`
 `;
 ```
 
+#### Interpolation linting
+We do not currently support linting interpolations as it could be a big performance hit though we aspire to have at least partial support in the future. You can of course lint your own mixins in their separate files, but it won't be linted in context, the implementation currently just inserts relevant dummy values. This, we are afraid, means you won't be able to lint cases such as `declaration-block-no-duplicate-properties` etc. and won't be able to lint outside mixins such as [polished](https://github.com/styled-components/polished).
 
 ## License
 
diff --git a/src/utils/tagged-template-literal.js b/src/utils/tagged-template-literal.js
index 1f8ff7e..22d45fd 100644
--- a/src/utils/tagged-template-literal.js
+++ b/src/utils/tagged-template-literal.js
@@ -14,21 +14,23 @@ const hasInterpolations = node => !node.quasi.quasis[0].tail
 /**
  * Merges the interpolations in a parsed tagged template literals with the strings
  */
+// Used for making sure our dummy mixins are all unique
+let count = 0
 const interleave = (quasis, expressions) => {
   let css = ''
   for (let i = 0, l = expressions.length; i < l; i += 1) {
     const prevText = quasis[i].value.raw
     const nextText = quasis[i + 1].value.raw
-    const expression = expressions[i]
 
     css += prevText
     if (isLastLineWhitespaceOnly(prevText) && !isEmptyOrSpaceOnly(prevText)) {
-      css += `-styled-mixin: ${expression.name}`
+      css += `-styled-mixin${count}: dummyValue`
+      count += 1
       if (nextText.charAt(0) !== ';') {
         css += ';'
       }
     } else {
-      css += `$${expression.name}`
+      css += '$dummyValue'
     }
   }
   css += quasis[quasis.length - 1].value.raw


Test patch:
diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js
index 9d9529c..acd2135 100644
--- a/test/fixtures/interpolations/valid.js
+++ b/test/fixtures/interpolations/valid.js
@@ -42,6 +42,7 @@ const Box3 = styled(Box2)`
 `
 
 // Multiline
+// prettier-ignore
 const Button4 = styled.button`
   display: block;
   ${`
@@ -52,6 +53,7 @@ const Button4 = styled.button`
 
 // Conditional
 const cond = true
+// prettier-ignore
 const Button5 = styled.button`
   display: block;
   ${cond &&
@@ -63,10 +65,11 @@ const Button5 = styled.button`
 
 // Conditional
 const cond2 = false
+// prettier-ignore
 const Button6 = styled.button`
   display: block;
   ${cond2 &&
-    `
+   `
     color: ${cond2};
   `}
   background: blue;
@@ -79,3 +82,11 @@ const Button7 = styled.button`
   width: 20px;
   border: ${borderWidth} ${borderStyle} ${color};
 `
+
+// Several interpolation statements in a block
+// prettier-ignore
+const Button8 = styled.button`
+  ${`display: block;`}
+  ${`color: ${color};`}
+  ${`background: blue;`}
+`
diff --git a/test/interpolations.test.js b/test/interpolations.test.js
index 3a43d02..d081fb4 100644
--- a/test/interpolations.test.js
+++ b/test/interpolations.test.js
@@ -4,6 +4,7 @@ const path = require('path')
 const processor = path.join(__dirname, '../src/index.js')
 const rules = {
   'block-no-empty': true,
+  'declaration-block-no-duplicate-properties': true,
   indentation: 2
 }
 
diff --git a/test/utils.test.js b/test/utils.test.js
index 3a27faf..fa3cb56 100644
--- a/test/utils.test.js
+++ b/test/utils.test.js
@@ -35,7 +35,7 @@ describe('utils', () => {
         }
       ]
       expect(interleave(quasis, expressions)).toEqual(
-        '\n  display: block;\n  color: $color;\n  background: blue;\n'
+        '\n  display: block;\n  color: $dummyValue;\n  background: blue;\n'
       )
     })
   })