Compiling fails if there is whitespace between style tag and brace

[jacobmischka]

The following tag will fail, because the whitespace causes styled-jsx to think that the style tag has three children, when really two of them aren't real/are just empty whitespace.

<style jsx>
    {`
        div { color: 'red'; }
    `}
</style>

Error:

ERROR in ./src/components/FullCalendar.js
Module build failed: SyntaxError: Expected a child under JSX Style tag, but got 3 (eg: <style jsx>{`hi`}</style>)

  32 | 
  33 | 		return (
> 34 | 			<div>
     | 			^
  35 | 				<div id={this.state.calendarId}></div>
  36 | 				<style jsx>
  37 | 					{`

Changing the above to the following makes it work:

<style jsx>{`
    div { color: 'red'; }
`}</style>

I just kind of like the former syntax a little better personally, the style tags line up correctly this way at the expense of some horizontal space.

This is purely a preference thing, and since the workaround is very straightforward it's certainly not a priority, but it would be appreciated.

Thanks for everything! 🐣

[rauchg]

This should absolutely be fixed. I was somewhat mindful about this situation while I was writing the transformation, but never wrote a test for it.

[rauchg]

Fixed

[jacobmischka]

Thanks! 👍