Handle inline <style>s

[karlfloersch]

I've been playing around with react-magic, testing it on a number of different websites. I got one syntax error quite often. I've included a few examples of this error.

How to reproduce For each site I opened up the debug console (in Firefox), and ran this command (taken from the bookmarklet):

    (function(b){function c(){if(0!==d.length){var e=d.shift(),a=b.createElement("script");a.src=e;a.onload=c;b.body.appendChild(a)}}var d=["http://fb.me/react-0.13.3.min.js","http://fb.me/JSXTransformer-0.13.3.js","http://reactjs.github.io/react-magic/magic.min.js"];c();return!1})(document);

URL	React-Magic Error
http://www.uschs.org/	Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 268: Unexpected token :
http://www.starwars.com/news	Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 5: Unexpected token :
http://karl.tech/	Error: Something bad happened when transforming HTML to JSX: Error: Parse Error: Line 12: Unexpected token :

Maybe it has to do with inline styles?

[Daniel15]

Inline styles should be fine... I'll try to look into this soon and determine what the problem is.

[sicks]

Cause looks to be internal stylesheets. Inline styles are being handled correctly the 'JSX way' but internal stylesheets are not.

<style>
  h1 { color: red; }
</style>

needs to convert to

<style>{"\
  h1 { color: red; }\
"}</style>

(thanks stackoverflow!)

[Daniel15]

Thanks! Sounds like we need custom handling. That can be done :)

(as an aside, using \ to escape newlines doesn't have very good browser support, so it's not really recommended)

[sicks]

We didn't need those newlines anyway!

[sicks]

So #36 fixes internal stylesheets, but the battle against curly braces is still far from over. It's easily handled in <style> tags as we can expect CSS to contain curly braces, but I'm not sure how to best address unpredictable ones. For example, in that star wars page there's an iframe with a name attribute that contains { } which again breaks the JSX parser.

[ssorallen]

@Daniel15, can you release a new version on NPM with this fix?

[Daniel15]

@ssorallen Pushed to NPM as 0.2.5 👍

[ssorallen]

@Daniel15 💯