styled-jsx messed up when using .babelrc on root and using next on a subfolder #743
Description
It's a weird issue I managed to downsize to this minimal use case.
Clone the repo and then run
npm install
npm startand 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.