Repository: styled-components/stylelint-processor-styled-components
Pull request #5 (2016-10-26 06:21:33)

Leave interpolations


Patch:
diff --git a/README.md b/README.md
index 1263c97..6524428 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # `stylelint-processor-styled-components`
 
-Lint the CSS in your [styled components](https://github.com/styled-components/styled-components) with [stylelint](http://stylelint.io/)!
+Lint the CSS in your [styled components](https://github.com/styled-components/styled-components) with `stylelint`!
 
 [![Build Status](https://travis-ci.org/styled-components/stylelint-processor-styled-components.svg?branch=master)](https://travis-ci.org/styled-components/stylelint-processor-styled-components) [![Coverage Status](https://coveralls.io/repos/github/styled-components/stylelint-processor-styled-components/badge.svg?branch=ci)](https://coveralls.io/github/styled-components/stylelint-processor-styled-components?branch=ci)
 
diff --git a/src/utils/tagged-template-literal.js b/src/utils/tagged-template-literal.js
index 8562db4..7e076bf 100644
--- a/src/utils/tagged-template-literal.js
+++ b/src/utils/tagged-template-literal.js
@@ -11,13 +11,10 @@ const hasInterpolations = (node) => !node.quasi.quasis[0].tail
 /**
  * Merges the interpolations in a parsed tagged template literals with the strings
  */
-const interleave = (quasis) => (
-  quasis.reduce((prev, quasi, i) => {
-    if (i === 0) {
-      return quasi.value.raw.replace(/(\n.*$)/, '\n')
-    }
-    return prev + quasi.value.raw.replace(/(\n.*$|^.+\n)/, '')
-  }, '')
+const interleave = (quasis, expressions) => (
+  expressions.reduce((prev, expression, index) => (
+    prev.concat(`$${expression.name}`, quasis[index + 1].value.raw)
+  ), [quasis[0].value.raw]).join('')
 )
 
 /**


Test patch:
diff --git a/test/fixtures/hard/source-maps.js b/test/fixtures/hard/source-maps.js
index 22b7b94..37bd8c2 100644
--- a/test/fixtures/hard/source-maps.js
+++ b/test/fixtures/hard/source-maps.js
@@ -14,3 +14,26 @@ const Button2 = styled.button`
 const Button3 = styled.button`
     color: blue;
 `
+
+// ⚠️ BAD INDENTATION at 22:5 ⚠️
+const Button4 = styled.button`
+  color: blue;
+  background: ${color};
+    display: block; 
+`
+
+// ⚠️ BAD INDENTATION at 28:5 ⚠️
+const Button5 = styled.button`
+  color: blue;
+    background: ${color};
+  display: block; 
+`
+
+// ⚠️ BAD INDENTATION at 35:5 ⚠️
+const Button6 = styled.button`
+  color: blue;
+    ${`
+      background: red;
+    `}
+  display: block; 
+`
diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js
index 8c84b8e..f569e8d 100644
--- a/test/fixtures/interpolations/valid.js
+++ b/test/fixtures/interpolations/valid.js
@@ -49,3 +49,23 @@ const Button4 = styled.button`
   `}
   background: blue;
 `
+
+// Conditional 
+const cond = true
+const Button5 = styled.button`
+  display: block;
+  ${cond && `
+    color: blue;
+  `}
+  background: blue;
+`
+
+// Conditional 
+const cond2 = false 
+const Button6 = styled.button`
+  display: block;
+  ${cond2 && `
+    color: ${cond2};
+  `}
+  background: blue;
+`
diff --git a/test/hard.test.js b/test/hard.test.js
index 50eb0c9..9e4c734 100644
--- a/test/hard.test.js
+++ b/test/hard.test.js
@@ -16,6 +16,7 @@ describe('hard', () => {
   beforeEach((done) => {
     stylelint.lint({
       files: [fixture],
+      syntax: 'scss',
       config: {
         processors: [processor],
         rules,
@@ -98,13 +99,16 @@ describe('hard', () => {
       expect(data.errored).toEqual(true)
     })
 
-    it('should have two warning', () => {
-      expect(data.results[0].warnings.length).toEqual(2)
+    it('should have five warning', () => {
+      expect(data.results[0].warnings.length).toEqual(5)
     })
 
-    it('should have two warnings about indentation', () => {
+    it('should have four warnings about indentation', () => {
       expect(data.results[0].warnings[0].rule).toEqual('indentation')
       expect(data.results[0].warnings[1].rule).toEqual('indentation')
+      expect(data.results[0].warnings[2].rule).toEqual('indentation')
+      expect(data.results[0].warnings[3].rule).toEqual('indentation')
+      expect(data.results[0].warnings[4].rule).toEqual('indentation')
     })
 
     it('should have a warning in line 5', () => {
@@ -114,5 +118,17 @@ describe('hard', () => {
     it('should have a warning in line 15', () => {
       expect(data.results[0].warnings[1].line).toEqual(15)
     })
+
+    it('should have a warning in line 22', () => {
+      expect(data.results[0].warnings[2].line).toEqual(22)
+    })
+
+    it('should have a warning in line 28', () => {
+      expect(data.results[0].warnings[3].line).toEqual(28)
+    })
+
+    it('should have a warning in line 35', () => {
+      expect(data.results[0].warnings[4].line).toEqual(35)
+    })
   })
 })
diff --git a/test/interpolations.test.js b/test/interpolations.test.js
index 1d58fe6..a6ab55a 100644
--- a/test/interpolations.test.js
+++ b/test/interpolations.test.js
@@ -14,6 +14,7 @@ describe('interpolations', () => {
   beforeEach((done) => {
     stylelint.lint({
       files: [fixture],
+      syntax: 'scss',
       config: {
         processors: [processor],
         rules,
@@ -49,7 +50,7 @@ describe('interpolations', () => {
     })
   })
 
-  describe('invalid interpolations (should be ignored)', () => {
+  describe('invalid interpolations', () => {
     beforeAll(() => {
       fixture = path.join(__dirname, './fixtures/interpolations/invalid.js')
     })
@@ -62,12 +63,16 @@ describe('interpolations', () => {
       expect(data.results[0].source).toEqual(fixture)
     })
 
-    it('should not have errored', () => {
-      expect(data.errored).toEqual(false)
+    it('should have errored', () => {
+      expect(data.errored).toEqual(true)
     })
 
-    it('should not have any warnings', () => {
-      expect(data.results[0].warnings.length).toEqual(0)
+    it('should have warnings', () => {
+      expect(data.results[0].warnings.length).toEqual(1)
+    })
+
+    it('should have an indentation as the first warning', () => {
+      expect(data.results[0].warnings[0].rule).toEqual('indentation')
     })
   })
 })
diff --git a/test/simple.test.js b/test/simple.test.js
index 00ceb55..4469a29 100644
--- a/test/simple.test.js
+++ b/test/simple.test.js
@@ -16,6 +16,7 @@ describe('simple', () => {
   beforeEach((done) => {
     stylelint.lint({
       files: [fixture],
+      syntax: 'scss',
       config: {
         processors: [processor],
         rules,
@@ -24,6 +25,7 @@ describe('simple', () => {
       data = result
       done()
     }).catch((err) => {
+      console.log(err)
       data = err
       done()
     })
diff --git a/test/utils.test.js b/test/utils.test.js
index 465faf2..133461c 100644
--- a/test/utils.test.js
+++ b/test/utils.test.js
@@ -12,10 +12,10 @@ describe('utils', () => {
       expect(interleave(quasis, [])).toEqual(raw)
     })
 
-    it('should remove an interpolation', () => {
+    it('should variabelize an interpolation', () => {
       const quasis = [{
         value: {
-          raw: '\n  display: block;\ncolor: ',
+          raw: '\n  display: block;\n  color: ',
         },
       }, {
         value: {
@@ -25,7 +25,7 @@ describe('utils', () => {
       const expressions = [{
         name: 'color',
       }]
-      expect(interleave(quasis, expressions)).toEqual('\n  display: block;\n  background: blue;\n')
+      expect(interleave(quasis, expressions)).toEqual('\n  display: block;\n  color: $color;\n  background: blue;\n')
     })
   })
 })