Merge pull request #5 from styled-components/leave-interpolations

Leave interpolations

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

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

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

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

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

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