Selectors with linebreaks silently break sometimes

[Macil]

Do you want to request a feature or report a bug?

bug

What is the current behavior?

Some multi-line CSS selectors are mis-compiled. Take the following CSS:

      body {
        color: red;
      }

      :hover {
        color: red;
        display: flex;
        animation: foo 1s ease-out;
      }

      div:hover
        a {
        display: none;
      }

      [data-test] > div {
        color: red;
      }

styled-jsx compiles this into

.jsx-4062291310{div:hover;}body.jsx-4062291310{color:red;}.jsx-4062291310:hover{color:red;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-animation:foo-jsx-4062291310 1s ease-out;animation:foo-jsx-4062291310 1s ease-out;}a.jsx-4062291310{display:none;}[data-test].jsx-4062291310>div.jsx-4062291310{color:red;}

Notice that the div:hover \n a { display: none; } rule got transformed into .jsx-4062291310{div:hover;} a.jsx-4062291310{display:none;} which is very wrong.

What is the expected behavior?

The div:hover \n a { display: none; } rule should be transformed into div:hover.jsx-4062291310 a.jsx-4062291310{display:none;}.

Environment (include versions)

• OS: Mac
• Browser: node v10.15.2
• styled-jsx (version): 3.2.1 and current master

Did this work in previous versions?

Unknown

[giuseppeg]

This should be a bug in Stylis (https://github.com/thysultan/stylis.js) the css processor we use to rewrite selectors. Can you file an issue there?

[Mehrdad-Dadkhah]

@Macil @giuseppeg

same problem....

I think it is related to this issue of stylis.js

and some one said: It should work if you disable auto semi-colon insertion mode stylis.set(semicolon: true).

and problem Patched in 3.4.5 of sylis.js, but styled-jsx use 3.5.4 and problem exist!!

I think right? what is solution?

[giuseppeg]

@Mehrdad-Dadkhah good catch! I am not sure I understand what semicolon does cc @thysultan

In any case would you like to put together a PR to disable that and add a few tests?

[Mehrdad-Dadkhah]

@giuseppeg

I change node_modules/styled-jsx/dist/lib/style-transform.js file to test effect of semicolon option in my case (local project).

It don't fix problem