Fix expressions for the autoprefixed properties (#116)

Fixes #115

src/babel.js

@@ -333,7 +333,7 @@ export default function ({types: t}) {
             transformedCss = css.replacements.reduce(
               (transformedCss, currentReplacement) => {
                 transformedCss = transformedCss.replace(
-                  currentReplacement.replacement,
+                  new RegExp(currentReplacement.replacement, 'g'),
                   currentReplacement.initial
                 )
                 return transformedCss

test/fixtures/expressions.js

@@ -1,6 +1,7 @@
 const color = 'red'
 const otherColor = 'green'
 const mediumScreen = '680px'
+const animationDuration = '200ms'
 
 export default () => (
   <div>
@@ -18,5 +19,6 @@ export default () => (
       }
       p { color: red }`
     }</style>
+    <style jsx>{`p { animation-duration: ${animationDuration} }`}</style>
   </div>
 )

test/fixtures/expressions.out.js

@@ -2,14 +2,16 @@ import _JSXStyle from 'styled-jsx/style';
 const color = 'red';
 const otherColor = 'green';
 const mediumScreen = '680px';
+const animationDuration = '200ms';
 
-export default (() => <div data-jsx={1802783333}>
-    <p data-jsx={1802783333}>test</p>
-    <_JSXStyle styleId={414042974} css={`p.${color}[data-jsx="1802783333"] {color: ${otherColor} }`} />
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"1802783333\"] {color: red }"} />
+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 }"} />
     <_JSXStyle styleId={806016056} css={`body { background: ${color} }`} />
-    <_JSXStyle styleId={924167211} css={`p[data-jsx="1802783333"] {color: ${color} }`} />
-    <_JSXStyle styleId={3469794077} css={`p[data-jsx="1802783333"] {color: ${darken(color)} }`} />
-    <_JSXStyle styleId={945380644} css={`p[data-jsx="1802783333"] {color: ${darken(color) + 2} }`} />
-    <_JSXStyle styleId={4106311606} css={`@media (min-width: ${mediumScreen}) {p[data-jsx="1802783333"] {color: green }p[data-jsx="1802783333"] {color ${`red`}}}p[data-jsx="1802783333"] {color: red }`} />
+    <_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};`} />
   </div>);