feat: add support for validation in substitution

Author: martin-tichovsky-s2

src/utils/result.js

@@ -2,7 +2,11 @@ exports.isCausedBySubstitution = (warning, line, interpolationLines) =>
   interpolationLines.some(({ start, end }) => {
     if (line > start && line < end) {
       // Inner interpolation lines must be
-      return true
+      return (
+        ['value-list-max-empty-lines', 'comment-empty-line-before', 'indentation'].indexOf(
+          warning.rule
+        ) >= 0
+      )
     } else if (line === start) {
       return ['value-list-max-empty-lines', 'comment-empty-line-before'].indexOf(warning.rule) >= 0
     } else if (line === end) {

test/fixtures/hard/invalid-properties.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+import React from 'react'
+
+export default props => {
+  const CirclePrimitive = styled.div`
+    // next line has wrong property
+    widthh: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    ${props.rotate && css`
+      -webkit-transform: rotate(${props.rotate}deg);
+      -ms-transform: rotate(${props.rotate}deg);
+      transform: rotate(${props.rotate}deg);
+    `}
+
+    &:before {
+      content: '';
+      display: block;
+      margin: 0 auto;
+      width: 15%;
+      height: 15%;
+      // next line has wrong property
+      background-colorr: #333;
+      border-radius: 100%;
+      animation: ${animations.spinnerCircle} 1.2s infinite ease-in-out both;
+      ${props.delay && css`
+        -webkit-animation-delay: ${props.delay}s;
+        animation-delay: ${props.delay}s;
+      `}
+    }
+  `
+  return React.createElement(CirclePrimitive)
+}

test/fixtures/hard/invalid-substitution-properties.js

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components';
+import React from 'react'
+
+export default props => {
+  const CirclePrimitive = styled.div`
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    ${props.rotate && css`
+      -webkit-transform: rotate(${props.rotate}deg);
+      -ms-transform: rotate(${props.rotate}deg);
+      // next line has wrong property
+      transformm: rotate(${props.rotate}deg);
+    `}
+
+    &:before {
+      content: '';
+      display: block;
+      margin: 0 auto;
+      width: 15%;
+      height: 15%;
+      background-color: #333;
+      border-radius: 100%;
+      animation: ${animations.spinnerCircle} 1.2s infinite ease-in-out both;
+      ${props.delay && css`
+        -webkit-animation-delay: ${props.delay}s;
+        // next line has wrong property
+        animation-delayy: ${props.delay}s;
+      `}
+    }
+  `
+  return React.createElement(CirclePrimitive)
+}

test/hard.test.js

@@ -166,4 +166,54 @@ describe('hard', () => {
       })
     })
   })
+
+  describe('invalid properties', () => {
+    describe('valid', () => {
+      beforeAll(() => {
+        fixture = slash(path.join(__dirname, './fixtures/hard/invalid-properties.js'))
+      })
+
+      it('should have one result', () => {
+        expect(data.results.length).toEqual(1)
+      })
+
+      it('should use the right file', () => {
+        expect(slash(data.results[0].source)).toEqual(fixture)
+      })
+
+      it('should have errored', () => {
+        expect(data.errored).toEqual(true)
+      })
+
+      it('should not have any warnings', () => {
+        console.log(data)
+        expect(data.results[0].warnings.length).toEqual(2)
+      })
+    })
+  })
+
+  describe('invalid substitution properties', () => {
+    describe('valid', () => {
+      beforeAll(() => {
+        fixture = slash(path.join(__dirname, './fixtures/hard/invalid-substitution-properties.js'))
+      })
+
+      it('should have one result', () => {
+        expect(data.results.length).toEqual(1)
+      })
+
+      it('should use the right file', () => {
+        expect(slash(data.results[0].source)).toEqual(fixture)
+      })
+
+      it('should have errored', () => {
+        expect(data.errored).toEqual(true)
+      })
+
+      it('should not have any warnings', () => {
+        console.log(data)
+        expect(data.results[0].warnings.length).toEqual(2)
+      })
+    })
+  })
 })

test/utils.test.js

@@ -632,7 +632,9 @@ html {
       { start: 5, end: 5 }
     ]
     it("returns true if real warning line is between some interpolation's start and end", () => {
-      expect(fn({ rule: 'any rule' }, 3, interpolationLines)).toEqual(true)
+      expect(fn({ rule: 'value-list-max-empty-lines' }, 3, interpolationLines)).toEqual(true)
+      expect(fn({ rule: 'comment-empty-line-before' }, 3, interpolationLines)).toEqual(true)
+      expect(fn({ rule: 'indentation' }, 3, interpolationLines)).toEqual(true)
     })
     it("returns false if real warning line is beyond any interpolation's start and end", () => {
       expect(fn({ rule: 'any rule' }, 1, interpolationLines)).toEqual(false)