Repository: styled-components/stylelint-processor-styled-components (js)

Issue:
"Unknown word CssSyntaxError" in interpolation after comment
When using these packages...

```
├─ stylelint-config-recommended@1.0.0
├─ stylelint-config-standard@17.0.0
│  └─ stylelint-config-recommended@^1.0.0
├─ stylelint-processor-styled-components@0.2.1
├─ stylelint@8.0.0
```

...this code...
```
const ColumnWidthMixin = `
    min-width: 0;
`;
const StyledDraggableColumn = styled.div`
    flex: 1 1 0px;  /* stylelint-disable-line length-zero-no-unit */
    ${ColumnWidthMixin}
`;
```

...throws this error:
```
 3:5  ✖  Unknown word   CssSyntaxError
```

But these variations *do not* throw the error:

```
const var1 = styled.div`
    flex: 1 1 0px;  /* stylelint-disable-line length-zero-no-unit */
    min-width: 0;
`;

const var2 = styled.div`
    ${ColumnWidthMixin}
    flex: 1 1 0px;  /* stylelint-disable-line length-zero-no-unit */
`;

const var3 = styled.div`
    flex: 1 1 3px;
    ${ColumnWidthMixin}
`;

const var4 = styled.div`
    flex: 1 1 0px;  /* stylelint-disable-line length-zero-no-unit */
    border: 1px solid red;
    ${ColumnWidthMixin}
`;
```

So looks like the problem is using an interpolation right after a comment


Pull request:
Fix interpolation following a comment edge case
This resolves #79 

This is done and ready for review.

Patch:
diff --git a/src/utils/general.js b/src/utils/general.js
index d8d2bb9..2b601ec 100644
--- a/src/utils/general.js
+++ b/src/utils/general.js
@@ -44,7 +44,9 @@ const nextNonWhitespaceChar = text => {
 const reverseString = str => str.split('').reverse().join('')
 
 const isLastDeclarationCompleted = text => {
-  const reversedText = reverseString(text)
+  // We disregard all comments in this assessment of declaration completion
+  const commentsRemoved = text.replace(/\/\*.*?\*\//g, '')
+  const reversedText = reverseString(commentsRemoved)
   const lastNonWhitespaceChar = nextNonWhitespaceChar(reversedText)
   if (
     lastNonWhitespaceChar === ';' ||


Test patch:
diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js
index 664aed2..d397328 100644
--- a/test/fixtures/interpolations/valid.js
+++ b/test/fixtures/interpolations/valid.js
@@ -94,8 +94,6 @@ const Button9 = styled.button`
 `
 
 // Complex interpolations in one-line css
-const display = 'block'
-const colorExpression = 'color: red;'
 const backgroundExpression = 'background: blue;'
 const Button9 = styled.button`
   display: ${display}; ${colorExpression} ${backgroundExpression}
@@ -106,3 +104,15 @@ const Button10 = styled.button`
     ${'display: block;'}
   }
 `;
+
+// Interpolations after comments
+const Button11 = styled.button`
+  display: block; /* stylelint-disable-line */
+  ${colorExpression}
+`
+
+const Button12 = styled.button`
+  display: block;
+  /* stylelint-disable */
+  ${colorExpression}
+`
diff --git a/test/utils.test.js b/test/utils.test.js
index 42712e1..9eb74d8 100644
--- a/test/utils.test.js
+++ b/test/utils.test.js
@@ -308,6 +308,30 @@ describe('utils', () => {
           `
       expect(fn(prevCSS)).toBe(true)
     })
+
+    it('handles being preceded by a comment', () => {
+      const prevCSS1 = `
+        display: block; /* stylelint-disable */
+        `
+      expect(fn(prevCSS1)).toBe(true)
+
+      const prevCSS2 = `
+      display: block;
+      /* stylelint-disable */
+        `
+      expect(fn(prevCSS2)).toBe(true)
+
+      const prevCSS3 = `
+        display: /* stylelint-disable */
+        `
+      expect(fn(prevCSS3)).toBe(false)
+
+      const prevCSS4 = `
+      display:
+      /* stylelint-disable */
+        `
+      expect(fn(prevCSS4)).toBe(false)
+    })
   })
 
   describe('isStylelintComment', () => {