Merge pull request #219 from chinesedfan/clever_guess

Improve interpolations guesses

src/utils/tagged-template-literal.js

@@ -1,4 +1,5 @@
 const CssError = require('postcss/lib/css-syntax-error')
+const reverseString = require('./general').reverseString
 const nextNonWhitespaceChar = require('./general').nextNonWhitespaceChar
 const isLastDeclarationCompleted = require('./general').isLastDeclarationCompleted
 const extrapolateShortenedCommand = require('./general').extrapolateShortenedCommand
@@ -74,7 +75,7 @@ const parseInterpolationTag = (expression, id, absolutePath) => {
       )
       switch (scTagInformation.command) {
         case 'selector':
-          substitute = 'div'
+          substitute = `.sc-selector${id}`
           break
 
         case 'block':
@@ -120,14 +121,27 @@ const interleave = (quasis, expressions, absolutePath) => {
   for (let i = 0, l = expressions.length; i < l; i += 1) {
     const prevText = quasis[i].value.raw
     const nextText = quasis[i + 1].value.raw
+    const prevChar = nextNonWhitespaceChar(reverseString(prevText))
+    const nextChar = nextNonWhitespaceChar(nextText)
 
     css += prevText
     let substitute
     if (hasInterpolationTag(expressions[i])) {
       substitute = parseInterpolationTag(expressions[i], count, absolutePath)
       count += 1
-    } else if (isLastDeclarationCompleted(css)) {
       // No sc tag so we guess defaults
+    } else if (nextChar === '{') {
+      // Guess as selector, which shares format with `parseInterpolationTag`, but not `wrapSelector`
+      substitute = `.sc-selector${count}`
+      count += 1
+    } else if (prevChar === ':') {
+      // After a colon and not a pseudo-class, then guess as value
+      substitute = '$dummyValue'
+    } else if (nextChar === ':') {
+      // Before a colon, then guess as property
+      substitute = `-styled-mixin${count}`
+      count += 1
+    } else if (isLastDeclarationCompleted(css)) {
       /** This block assumes that if you put an interpolation in the position
        * of the start of a declaration that the interpolation will
        * contain a full declaration and not later in the template literal

test/fixtures/interpolation-tagging/valid.js

@@ -12,12 +12,16 @@ const Button2 = styled.button`
   ${/* sc-selector */ ':hover'} {
     background-color: blue;
   }
+  ${/* sc-selector */ ':active'} {
+    background-color: green;
+  }
 `;
 
 // Test declaration
 const Button3 = styled.button`
   color: red;
   ${/* sc-declaration */ 'dummy'}
+  ${/* sc-declaration */ 'dummy2'}
 `;
 
 // Test property

test/fixtures/interpolations/complex.js

@@ -15,6 +15,17 @@ const Button = styled.button`
   ${props => props.isHovering && interpolatedStyle}
 `
 
+// #110
+const Bla = styled.div`
+  ${Button} {
+    ${something}: blue;
+  }
+
+  background: ${bla};
+
+  ${someValue}
+`
+
 // Multi-line interpolations
 const MultiLineDiv = styled.div`
   color: ${

test/interpolation-tagging.test.js

@@ -5,6 +5,7 @@ const processor = path.join(__dirname, '../lib/index.js')
 const rules = {
   'block-no-empty': true,
   'declaration-block-no-duplicate-properties': true,
+  'no-duplicate-selectors': true,
   indentation: 2
 }
 

test/utils.test.js

@@ -498,7 +498,7 @@ describe('utils', () => {
     })
     it('handles the API', () => {
       const selectorExpression = prepExpression('selector')
-      expect(fn(selectorExpression, 1, 'path/to/file')).toBe('div')
+      expect(fn(selectorExpression, 1, 'path/to/file')).toBe('.sc-selector1')
 
       const blockExpression = prepExpression('block')
       expect(fn(blockExpression, 1, 'path/to/file')).toBe('-styled-mixin1: dummyValue;')