fix :global & animation:..} (#144)

package.json

@@ -63,7 +63,7 @@
     "object.entries": "1.0.4",
     "source-map": "0.5.6",
     "string-hash": "1.1.1",
-    "stylis": "1.1.11"
+    "stylis": "1.2.3"
   },
   "devDependencies": {
     "ava": "0.17.0",

test/fixtures/different-jsx-ids.out.js

@@ -4,12 +4,12 @@ const otherColor = 'green';
 
 const A = () => <div data-jsx={924167211}>
     <p data-jsx={924167211}>test</p>
-    <_JSXStyle styleId={924167211} css={`p[data-jsx="924167211"] {color: ${color} }`} />
+    <_JSXStyle styleId={924167211} css={`p[data-jsx="924167211"] {color: ${color}}`} />
   </div>;
 
 const B = () => <div data-jsx={45234319}>
     <p data-jsx={45234319}>test</p>
-    <_JSXStyle styleId={45234319} css={`p[data-jsx="45234319"] {color: ${otherColor} }`} />
+    <_JSXStyle styleId={45234319} css={`p[data-jsx="45234319"] {color: ${otherColor}}`} />
   </div>;
 
 export default (() => <div>

test/fixtures/expressions.out.js

@@ -6,14 +6,14 @@ const animationDuration = '200ms';
 
 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={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={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};animation-duration:${animationDuration};`} />
+    <_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};animation-duration:${animationDuration};}`} />
   </div>);

test/fixtures/mixed-global-scoped.out.js

@@ -4,5 +4,5 @@ const Test = () => <_JSXStyle styleId={188072295} css={"p { color: red }"} />;
 export default (() => <div data-jsx={793889750}>
     <p data-jsx={793889750}>test</p>
     <_JSXStyle styleId={3149549172} css={"body { background: red }"} />
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"793889750\"] {color: red }"} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"793889750\"] {color: red}"} />
   </div>);

test/fixtures/non-styled-jsx-style.out.js

@@ -2,5 +2,5 @@ import _JSXStyle from 'styled-jsx/style';
 export default (() => <div data-jsx={188072295}>
     <p data-jsx={188072295}>woot</p>
     <style dangerouslySetInnerHTML={{ __html: `body { margin: 0; }` }}></style>
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red }"} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red}"} />
   </div>);

test/fixtures/source-maps.out.js

@@ -2,5 +2,5 @@ import _JSXStyle from 'styled-jsx/style';
 export default (() => <div data-jsx={188072295}>
     <p data-jsx={188072295}>test</p>
     <p data-jsx={188072295}>woot</p>
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red }\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNFIiwiZmlsZSI6InNvdXJjZS1tYXBzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8ZGl2PlxuICAgIDxwPnRlc3Q8L3A+XG4gICAgPHA+d29vdDwvcD5cbiAgICA8c3R5bGUganN4PnsncCB7IGNvbG9yOiByZWQgfSd9PC9zdHlsZT5cbiAgPC9kaXY+XG4pXG4iXX0= */\n/*@ sourceURL=source-maps.js */"} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNvdXJjZS1tYXBzLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUlnQixBQUNFIiwiZmlsZSI6InNvdXJjZS1tYXBzLmpzIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGRlZmF1bHQgKCkgPT4gKFxuICA8ZGl2PlxuICAgIDxwPnRlc3Q8L3A+XG4gICAgPHA+d29vdDwvcD5cbiAgICA8c3R5bGUganN4PnsncCB7IGNvbG9yOiByZWQgfSd9PC9zdHlsZT5cbiAgPC9kaXY+XG4pXG4iXX0= */\n/*@ sourceURL=source-maps.js */"} />
   </div>);

test/fixtures/stateless.out.js

@@ -3,5 +3,5 @@ export default (() => <div data-jsx={188072295}>
     <p data-jsx={188072295}>test</p>
     <p data-jsx={188072295}>woot</p>
     <p data-jsx={188072295}>woot</p>
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red }"} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red}"} />
   </div>);

test/fixtures/transform.out.css

@@ -1 +1 @@
-p {color: blue}p{color: blue;}p,a[data-jsx="123"] {color: blue;}.foo + a {color: red;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}p[data-jsx="123"] {color: red;}p[data-jsx="123"] {color: red}*[data-jsx="123"] {color: blue;}[href="woot"][data-jsx="123"] {color: red;}p[data-jsx="123"] a[data-jsx="123"] span[data-jsx="123"] {color: red;}p[data-jsx="123"] span {background: blue}p[data-jsx="123"] a[title="'w ' '  t'"][data-jsx="123"] {margin: auto}p[data-jsx="123"] span:not(.test) {color: green}p[data-jsx="123"],h1[data-jsx="123"] {color: blue;-webkit-animation:123hahaha 3s ease forwards infinite;animation:123hahaha 3s ease forwards infinite;-webkit-animation-name:123hahaha;animation-name:123hahaha;-webkit-animation-delay:100ms;animation-delay:100ms;}p[data-jsx="123"] {-webkit-animation:123hahaha 1s,123hehehe 2s;animation:123hahaha 1s,123hehehe 2s;}p[data-jsx="123"]:hover {color: red;}p[data-jsx="123"]::before {color: red;}[data-jsx="123"]:hover {color: red;}[data-jsx="123"]::before {color: red;}[data-jsx="123"]:hover p[data-jsx="123"] {color: red;}p[data-jsx="123"] + a[data-jsx="123"] {color: red;}p[data-jsx="123"] ~ a[data-jsx="123"] {color: red;}p[data-jsx="123"] > a[data-jsx="123"] {color: red;}p[data-jsx="123"] >> a[data-jsx="123"] {color: red;}@-webkit-keyframes 123hahaha {from {top: 0 }to {top: 100 }}@keyframes 123hahaha {from {top: 0 }to {top: 100 }}@-webkit-keyframes 123hehehe {from {left: 0 }to {left: 100 }}@keyframes 123hehehe {from {left: 0 }to {left: 100 }}@media (min-width: 500px) {.test[data-jsx="123"] {color: red;}}.test[data-jsx="123"] {display: block;}.inline-flex[data-jsx="123"] {display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-flexbox;display: inline-flex;}.flex[data-jsx="123"] {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.test[data-jsx="123"] {box-shadow: 0 0 10px black, inset 0 0 5px black}.test[title=","][data-jsx="123"] {display: inline-block;}
+p {color: blue}p{color: blue;}p,a[data-jsx="123"] {color: blue;}.foo + a {color: red;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;}p[data-jsx="123"] {color: red;}p[data-jsx="123"] {color: red}*[data-jsx="123"] {color: blue;}[href="woot"][data-jsx="123"] {color: red;}p[data-jsx="123"] a[data-jsx="123"] span[data-jsx="123"] {color: red;}p[data-jsx="123"] span {background: blue}p[data-jsx="123"] a[title="'w ' '  t'"][data-jsx="123"] {margin: auto}p[data-jsx="123"] span:not(.test) {color: green}p[data-jsx="123"],h1[data-jsx="123"] {color: blue;-webkit-animation:123hahaha 3s ease forwards infinite;animation:123hahaha 3s ease forwards infinite;-webkit-animation-name:123hahaha;animation-name:123hahaha;-webkit-animation-delay:100ms;animation-delay:100ms;}p[data-jsx="123"] {-webkit-animation:123hahaha 1s,123hehehe 2s;animation:123hahaha 1s,123hehehe 2s;}p[data-jsx="123"]:hover {color: red;}p[data-jsx="123"]::before {color: red;}[data-jsx="123"]:hover {color: red;}[data-jsx="123"]::before {color: red;}[data-jsx="123"]:hover p[data-jsx="123"] {color: red;}p[data-jsx="123"] + a[data-jsx="123"] {color: red;}p[data-jsx="123"] ~ a[data-jsx="123"] {color: red;}p[data-jsx="123"] > a[data-jsx="123"] {color: red;}p[data-jsx="123"] >> a[data-jsx="123"] {color: red;}@-webkit-keyframes 123hahaha {from {top: 0}to {top: 100}}@keyframes 123hahaha {from {top: 0}to {top: 100}}@-webkit-keyframes 123hehehe {from {left: 0}to {left: 100}}@keyframes 123hehehe {from {left: 0}to {left: 100}}@media (min-width: 500px) {.test[data-jsx="123"] {color: red;}}.test[data-jsx="123"] {display: block;}.inline-flex[data-jsx="123"] {display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-flexbox;display: inline-flex;}.flex[data-jsx="123"] {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}.test[data-jsx="123"] {box-shadow: 0 0 10px black, inset 0 0 5px black}.test[title=","][data-jsx="123"] {display: inline-block;}

test/fixtures/whitespace.out.js

@@ -3,5 +3,5 @@ export default (() => <div data-jsx={188072295}>
     <p data-jsx={188072295}>test</p>
     <p data-jsx={188072295}>woot</p>
     <p data-jsx={188072295}>woot</p>
-    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red }"} />
+    <_JSXStyle styleId={188072295} css={"p[data-jsx=\"188072295\"] {color: red}"} />
   </div>);