Filter indentation warnings generated by interpolations substitution

Author: chinesedfan

src/index.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const parse = require('./parsers/index')
 
+const interpolationLinesMap = {}
 const sourceMapsCorrections = {}
 const DEFAULT_OPTIONS = {
   moduleName: 'styled-components'
@@ -11,11 +12,15 @@ module.exports = options => ({
   code(input, filepath) {
     const absolutePath = path.resolve(process.cwd(), filepath)
     sourceMapsCorrections[absolutePath] = {}
-    const { extractedCSS, sourceMap } = parse(
+    const { extractedCSS, interpolationLines, sourceMap } = parse(
       input,
       absolutePath,
       Object.assign({}, DEFAULT_OPTIONS, options)
     )
+    // Save interpolation lines
+    interpolationLinesMap[absolutePath] = interpolationLines.concat(
+      interpolationLinesMap[absolutePath] || []
+    )
     // Save source location, merging existing corrections with current corrections
     sourceMapsCorrections[absolutePath] = Object.assign(
       sourceMapsCorrections[absolutePath],
@@ -25,16 +30,28 @@ module.exports = options => ({
   },
   // Fix sourcemaps
   result(stylelintResult, filepath) {
+    const interpolationLines = interpolationLinesMap[filepath] || []
     const lineCorrection = sourceMapsCorrections[filepath]
-    const warnings = stylelintResult.warnings.map(warning =>
-      Object.assign({}, warning, {
-        // Replace "brace" with "backtick" in warnings, e.g.
-        // "Unexpected empty line before closing backtick" (instead of "brace")
-        text: warning.text.replace(/brace/, 'backtick'),
-        line: lineCorrection[warning.line]
-      })
-    )
+    const warnings = stylelintResult.warnings
+      .filter(
+        warning =>
+          // Filter indentation warnings generated by interpolations substitution
+          warning.rule !== 'indentation' ||
+          interpolationLines.indexOf(lineCorrection[warning.line]) < 0
+      )
+      .map(warning =>
+        Object.assign({}, warning, {
+          // Replace "brace" with "backtick" in warnings, e.g.
+          // "Unexpected empty line before closing backtick" (instead of "brace")
+          text: warning.text.replace(/brace/, 'backtick'),
+          line: lineCorrection[warning.line]
+        })
+      )
 
-    return Object.assign({}, stylelintResult, { warnings })
+    return Object.assign({}, stylelintResult, {
+      warnings,
+      // Remember to fix
+      errored: warnings.length ? true : undefined
+    })
   }
 })

src/parsers/index.js

@@ -27,6 +27,7 @@ const processStyledComponentsFile = (ast, absolutePath, options) => {
     injectGlobal: 'injectGlobal'
   }
   let sourceMap = {}
+  const interpolationLines = []
   traverse(ast, {
     noScope: true,
     enter({ node }) {
@@ -76,6 +77,15 @@ const processStyledComponentsFile = (ast, absolutePath, options) => {
         sourceMap,
         getSourceMap(extractedCSS.join('\n'), wrappedContent, processedNode.quasi.loc.start.line)
       )
+      // Save interpolation lines
+      node.quasi.expressions.forEach((expression, i) => {
+        let l = node.quasi.quasis[i].loc.end.line + 1
+        while (l <= node.quasi.quasis[i + 1].loc.start.line) {
+          interpolationLines.push(l)
+          l += 1
+        }
+      })
+
       /**
        * All queued comments have been added to the file so we don't need to, and actually shouldn't
        * add them to the file more than once
@@ -86,6 +96,7 @@ const processStyledComponentsFile = (ast, absolutePath, options) => {
 
   return {
     extractedCSS: extractedCSS.join('\n'),
+    interpolationLines,
     sourceMap
   }
 }

src/utils/tagged-template-literal.js

@@ -142,12 +142,10 @@ const interleave = (quasis, expressions, absolutePath) => {
       substitute = '$dummyValue'
     }
     // Make sure substituted by same count of lines
-    const intentCount = prevText.split('\n').pop().length
-    const intent = new Array(intentCount).fill(' ').join('')
     const targetLines = quasis[i + 1].loc.start.line - quasis[i].loc.end.line + 1
     let currentLines = substitute.split('\n').length
     while (currentLines < targetLines) {
-      substitute += `\n${intent}-styled-mixin${count}: dummyValue;`
+      substitute += '\n/* dummyComment */'
       count += 1
       currentLines += 1
     }

test/fixtures/interpolations/invalid.js

@@ -10,6 +10,9 @@ const Button2 = styled.button.attrs({
   ${
     props => props.isHovering && interpolatedStyle
   }
+  position: ${
+    props => props.position
+  };
 color: ${color};
   background: blue;
 `

test/hard.test.js

@@ -102,18 +102,16 @@ describe('hard', () => {
       expect(data.errored).toEqual(true)
     })
 
-    it('should have seven warning', () => {
-      expect(data.results[0].warnings.length).toEqual(7)
+    it('should have five warning', () => {
+      expect(data.results[0].warnings.length).toEqual(5)
     })
 
-    it('should have seven 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')
-      expect(data.results[0].warnings[5].rule).toEqual('indentation')
-      expect(data.results[0].warnings[6].rule).toEqual('indentation')
     })
 
     it('should have a warning in line 5', () => {
@@ -135,13 +133,5 @@ describe('hard', () => {
     it('should have a warning in line 35', () => {
       expect(data.results[0].warnings[4].line).toEqual(35)
     })
-
-    it('should have a warning in line 36', () => {
-      expect(data.results[0].warnings[5].line).toEqual(36)
-    })
-
-    it('should have a warning in line 37', () => {
-      expect(data.results[0].warnings[6].line).toEqual(37)
-    })
   })
 })

test/interpolations.test.js

@@ -80,7 +80,7 @@ describe('interpolations', () => {
     })
 
     it('should have the indentation warning in the right line', () => {
-      expect(data.results[0].warnings[0].line).toEqual(13)
+      expect(data.results[0].warnings[0].line).toEqual(16)
     })
   })