styled-jsx messed up when using .babelrc on root and using next on a subfolder

[mattecapu]

It's a weird issue I managed to downsize to this minimal use case.
Clone the repo and then run

npm install
npm start

and go to localhost:3000.

Expected behaviour: render a green, a red and a purple line of text.
Observed behaviour: renders 3 lines of green text.

It appears to be caused by running next inside a subdirectory, where it doesn't find a .babelrc file. Indeed, a temporary fix is to add a copy of your root .babelrc in the subdirectory as well.
The only effect seems to be messing up with styled-jsx encapsulation (confusing children and parent styles). Everything else is transpiled correctly.

[timneutkens]

@mattecapu I guess this is because of the .babelrc fallback. Can you how the .babelrc in your root folder?

[mattecapu]

it's all in the repo

[timneutkens]

@mattecapu oh sorry, I totally missed that <3

[mattecapu]

nothin on this? how can I fix?

[arunoda]

That seems like a weird bug. Let's see.

[arunoda]

@nkzawa any pointers?

[arunoda]

Research Notes.

Check these two gists: https://gist.github.com/arunoda/2307c8f6535a794185726ac8d5297bf1
Seems like data-jsx id getting set twice when we set a custom babelrc
May be this check getting failed: https://github.com/zeit/styled-jsx/blob/master/src/babel.js#L82