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

Issue:
Unknown word - CssSyntaxError
Hi!
Not sure if this is bug since I wasn't the one who set up our tooling.
But after upgrading to 0.2.0 yesterday I'm no longer able to use the css helper in nested rules.
Since I don't know how to properly set up a fresh environment I can't really prove it's a problem with the stylelint processor. But this was the only package I updated yesterday besides postcss.
 
```
const css = css`
  color: #FFF;
`

const div = styled(div)`
  span {
    ${css}
  } 
`
``` 

Feel free to close if you don't think it's a bug.

Pull request description:
[FIX] Handle interpolations in nested blocks
Had missed a case in #59, this is the breaking tests and the fix. This should also resolve #73, we can probably merge this in quickly and publish a 0.2.1 so our friend in #73 doesn't have to see ugly errors anymore :).

Patch:
diff --git a/src/utils/general.js b/src/utils/general.js
index ecac2f7..d8d2bb9 100644
--- a/src/utils/general.js
+++ b/src/utils/general.js
@@ -49,6 +49,7 @@ const isLastDeclarationCompleted = text => {
   if (
     lastNonWhitespaceChar === ';' ||
     lastNonWhitespaceChar === '}' ||
+    lastNonWhitespaceChar === '{' ||
     lastNonWhitespaceChar === null
   ) {
     return true


Test patch:
diff --git a/test/fixtures/interpolations/valid.js b/test/fixtures/interpolations/valid.js
index 47f1bb6..664aed2 100644
--- a/test/fixtures/interpolations/valid.js
+++ b/test/fixtures/interpolations/valid.js
@@ -100,3 +100,9 @@ const backgroundExpression = 'background: blue;'
 const Button9 = styled.button`
   display: ${display}; ${colorExpression} ${backgroundExpression}
 `
+// Interpolations in nested blocks
+const Button10 = styled.button`
+  span {
+    ${'display: block;'}
+  }
+`;
diff --git a/test/utils.test.js b/test/utils.test.js
index 12bb5fe..42712e1 100644
--- a/test/utils.test.js
+++ b/test/utils.test.js
@@ -301,6 +301,13 @@ describe('utils', () => {
       `
       expect(fn(prevCSS)).toBe(true)
     })
+
+    it('handles being inside a declaration block', () => {
+      const prevCSS = `
+        span {
+          `
+      expect(fn(prevCSS)).toBe(true)
+    })
   })
 
   describe('isStylelintComment', () => {