Styled-jsx: Weird style transformation on multiple selectors + :global() + line break

[nkzawa]

When transpiled the following css:

.foo :global(path),
.bar
   :global(path) {
   stroke: #067df7;
 }

Generated css is:

.jsx-123{.foo :global(path),.bar;}path{stroke:#067df7;}

It's no problem when css is like:

// no line break
.foo :global(path),
.bar :global(path) {
  stroke: #067df7;
}

[giuseppeg]

@nkzawa looks like a bug in Stylis. I am able to reproduce on https://stylis.js.org

cc @thysultan

[thysultan]

Works with the following config(required semicolons): stylis.set({semicolon: true, cascade: false}). I'll see if i can improve the no-semicolon option to also handle this. Can you open a corresponding issue on the stylis repo.

[nkzawa]

Thanks, created the issue on stylis: https://github.com/thysultan/stylis.js/issues/97

[nkzawa]

@thysultan thanks for the fix!

@giuseppeg https://github.com/zeit/styled-jsx/pull/413 can we have a release ? We're having the problem on our homepage.

[giuseppeg]

@nkzawa just released 2.2.5