Fix handling of template literals with expressions

package.json

@@ -31,6 +31,7 @@
     "ava": "^0.17.0",
     "babel-cli": "^6.18.0",
     "babel-core": "^6.21.0",
+    "babel-generator": "^6.24.0",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
     "babel-plugin-transform-es2015-destructuring": "^6.19.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.18.0",
@@ -47,7 +48,7 @@
     "babylon": "^6.14.1",
     "postcss": "^5.2.8",
     "postcss-load-plugins": "^2.2.0",
-    "styled-jsx": "^0.4.0",
+    "styled-jsx": "^0.5.7",
     "deasync": "^0.1.9"
   },
   "ava": {

src/babel.js

@@ -1,5 +1,6 @@
 import {parse} from 'babylon'
 import jsx from 'styled-jsx/babel'
+import generate from 'babel-generator'
 import traverse from 'babel-traverse'
 import {loopWhile} from 'deasync'
 import processor from './processor'
@@ -17,20 +18,24 @@ export default function ({types: t}) {
       }
     }
 
-    const expressions = exprPath.get('expressions')
-
-    if (expressions.length === 0) {
+    if (node.expressions.length === 0) {
       return {
         path: exprPath,
         source: node.quasis[0].value.cooked
       }
     }
 
-    const replacements = getPlaceholders(expressions)
-    const source = addPlaceholders(
-      replacements,
-      exprPath.getSource().slice(1, -1)
-    )
+    let source = ''
+    const replacements = []
+    node.expressions.forEach((e, i) => {
+      const r = `___styledjsxexpression${i}___`
+      source += node.quasis[i].value.cooked + r
+      replacements.push({
+        replacement: r,
+        initial: `$\{${generate(e).code}}`
+      })
+    })
+    source += node.quasis[node.quasis.length - 1].value.cooked
 
     return {
       path: exprPath,
@@ -129,23 +134,6 @@ export default function ({types: t}) {
   }
 }
 
-function getPlaceholders(expressions) {
-  return expressions.map((e, id) => ({
-    replacement: `___styledjsxexpression${id}___`,
-    initial: `$\{${e.getSource()}}`
-  })).sort((a, b) => a.initial.length < b.initial.length)
-}
-
-function addPlaceholders(replacements, src) {
-  return replacements.reduce((src, currentReplacement) => {
-    src = src.replace(
-      currentReplacement.initial,
-      currentReplacement.replacement
-    )
-    return src
-  }, src)
-}
-
 function replacePlaceholders(replacements, src) {
   return replacements.reduce((src, currentReplacement) => {
     src = src.replace(

test/fixtures/basic.js

@@ -1,5 +1,3 @@
-const color = 'red'
-
 export default () => (
   <div>
     <p>test</p>

test/fixtures/basic.out.js

@@ -1,6 +1,4 @@
 import _JSXStyle from 'styled-jsx/style';
-const color = 'red';
-
 export default (() => <div data-jsx={1579778875}>
     <p data-jsx={1579778875}>test</p>
     <_JSXStyle styleId={1579778875} css={"p[data-jsx=\"1579778875\"] {color: rgba(255, 0, 0, 0.9); }\np[data-jsx=\"1579778875\"] img[data-jsx=\"1579778875\"] {display: block }"} />

test/fixtures/expressions.js

@@ -0,0 +1,8 @@
+const color = 'red'
+
+export default () => (
+  <div>
+    <p>test</p>
+    <style jsx>{`p { img { display: block} color: ${color} }`}</style>
+  </div>
+)

test/fixtures/expressions.out.js

@@ -0,0 +1,8 @@
+import _JSXStyle from 'styled-jsx/style';
+const color = 'red';
+
+export default (() => <div data-jsx={1108639175}>
+    <p data-jsx={1108639175}>test</p>
+    <_JSXStyle styleId={1108639175} css={`p[data-jsx="1108639175"] {color: ${color}; }
+p[data-jsx="1108639175"] img[data-jsx="1108639175"] {display: block }`} />
+  </div>);

test/index.js

@@ -7,3 +7,9 @@ test('applies plugins', async t => {
   const out = await read('./fixtures/basic.out.js')
   t.is(code, out.trim())
 })
+
+test('works with expressions', async t => {
+  const {code} = await transform('./fixtures/expressions.js')
+  const out = await read('./fixtures/expressions.out.js')
+  t.is(code, out.trim())
+})