Allow whitespace in expressions inside template literals (#129)

Fixes #126

package.json

@@ -16,6 +16,7 @@
     "babel-traverse": "^6.21.0",
     "babylon": "^6.14.1",
     "convert-source-map": "^1.3.0",
+    "escape-string-regexp": "^1.0.5",
     "object.entries": "^1.0.4",
     "source-map": "^0.5.6",
     "string-hash": "^1.1.1"

src/babel.js

@@ -5,6 +5,7 @@ import {SourceMapGenerator} from 'source-map'
 import convert from 'convert-source-map'
 import traverse from 'babel-traverse'
 import {parse} from 'babylon'
+import escapeStringRegExp from 'escape-string-regexp'
 
 // Ours
 import transform from '../lib/style-transform'
@@ -104,6 +105,7 @@ export default function ({types: t}) {
     // p { color: ___styledjsxexpression0___; }
 
     const replacements = expressions.map((e, id) => ({
+      pattern: new RegExp(`\\$\\{\\s*${escapeStringRegExp(e.getSource())}\\s*\\}`),
       replacement: `___styledjsxexpression_${id}___`,
       initial: `$\{${e.getSource()}}`
     })).sort((a, b) => a.initial.length < b.initial.length)
@@ -112,7 +114,7 @@ export default function ({types: t}) {
 
     const modified = replacements.reduce((source, currentReplacement) => {
       source = source.replace(
-        currentReplacement.initial,
+        currentReplacement.pattern,
         currentReplacement.replacement
       )
       return source

test/fixtures/expressions.js

@@ -9,7 +9,9 @@ export default () => (
     <style jsx>{`p.${color} { color: ${otherColor} }`}</style>
     <style jsx>{'p { color: red }'}</style>
     <style jsx global>{`body { background: ${color} }`}</style>
+    <style jsx global>{`body { background: ${ color } }`}</style>
     <style jsx>{`p { color: ${color} }`}</style>
+    <style jsx>{`p { color: ${ color } }`}</style>
     <style jsx>{`p { color: ${darken(color)} }`}</style>
     <style jsx>{`p { color: ${darken(color) + 2} }`}</style>
     <style jsx>{`

test/fixtures/expressions.out.js

@@ -4,14 +4,16 @@ const otherColor = 'green';
 const mediumScreen = '680px';
 const animationDuration = '200ms';
 
-export default (() => <div data-jsx={3173239910}>
-    <p data-jsx={3173239910}>test</p>
-    <_JSXStyle styleId={414042974} css={`p.${color}[data-jsx="3173239910"] {color: ${otherColor} }`} />
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"3173239910\"] {color: red }"} />
+export default (() => <div data-jsx={3422891701}>
+    <p data-jsx={3422891701}>test</p>
+    <_JSXStyle styleId={414042974} css={`p.${color}[data-jsx="3422891701"] {color: ${otherColor} }`} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"3422891701\"] {color: red }"} />
     <_JSXStyle styleId={806016056} css={`body { background: ${color} }`} />
-    <_JSXStyle styleId={924167211} css={`p[data-jsx="3173239910"] {color: ${color} }`} />
-    <_JSXStyle styleId={3469794077} css={`p[data-jsx="3173239910"] {color: ${darken(color)} }`} />
-    <_JSXStyle styleId={945380644} css={`p[data-jsx="3173239910"] {color: ${darken(color) + 2} }`} />
-    <_JSXStyle styleId={4106311606} css={`@media (min-width: ${mediumScreen}) {p[data-jsx="3173239910"] {color: green }p[data-jsx="3173239910"] {color ${`red`}}}p[data-jsx="3173239910"] {color: red }`} />
-    <_JSXStyle styleId={2369334310} css={`p[data-jsx="3173239910"] {-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};animation-duration:${animationDuration};`} />
+    <_JSXStyle styleId={2278229016} css={`body { background: ${color} }`} />
+    <_JSXStyle styleId={924167211} css={`p[data-jsx="3422891701"] {color: ${color} }`} />
+    <_JSXStyle styleId={1586014475} css={`p[data-jsx="3422891701"] {color: ${color} }`} />
+    <_JSXStyle styleId={3469794077} css={`p[data-jsx="3422891701"] {color: ${darken(color)} }`} />
+    <_JSXStyle styleId={945380644} css={`p[data-jsx="3422891701"] {color: ${darken(color) + 2} }`} />
+    <_JSXStyle styleId={4106311606} css={`@media (min-width: ${mediumScreen}) {p[data-jsx="3422891701"] {color: green }p[data-jsx="3422891701"] {color ${`red`}}}p[data-jsx="3422891701"] {color: red }`} />
+    <_JSXStyle styleId={2369334310} css={`p[data-jsx="3422891701"] {-webkit-animation-duration:${animationDuration};-moz-animation-duration:${animationDuration};animation-duration:${animationDuration};`} />
   </div>);