Styled-jsx: Minification breaks descendant selectors in v1.0.0

[ifyio]

This

<style jsx global>
  .Input.is-invalid .Input-messageText {
    color: rgb(244, 0, 71);
  }
</style>

gets converted to

.Input.is-invalid.Input-messageText{color:rgb(244, 0, 71)}

Note that there is no space between .Input.is-invalid. and .Input-messageText

[giuseppeg]

@thysultan this seems like a bug in Stylis to me

[soulchainer]

I can't say it isn't (I'm not an expert) @giuseppeg , but you can check it quick if something it's correctly parsed by stylis cloning their project and open in your browser the path /docs/index.html. This opens a playground, @ifyio, and I checked your example code and it gets converted to:

.component-x .Input.is-invalid .Input-messageText {
    color: rgb(244, 0, 71);
}

(The .component-x it's because it's using scope by default) and... that's a correct output >_<.
So, I think that seems like a minification phase error, yup. IDK if the minification it's done also but stylis after that or what.

[thysultan]

Can confirm it is stylis, already have a patch for it, will push in a bit. @soulchainer The playground does not use cascade isolation so it won't reflect this case.

[ifyio]

@soulchainer I should have mentioned that I was using <style jsx global>

[soulchainer]

@thysultan Good to know it :þ. Always test rules there first when I find a prob ;).

[thysultan]

@giuseppeg patched in v3.0.5

[giuseppeg]

@ifyio fixed and released 1.0.1. Send some <3 to @thysultan

[ifyio]

Wow that was quick. Thanks guys and many thanks to @thysultan