Merge pull request styled-components#59 from emilgoldsmith/fix/styled-components#55/several-interpolation-strings

Make -styled-mixins unique and clarify interpolation linting in readme

Author: mxstbr

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
 

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/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;`}
+`

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
 }
 

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'
       )
     })
   })