Pseudo-element selectors break compiled output

[unregistered]

On the latest version 1.0.8:

When rendered in a react element:

<style jsx global>{`
	.other-selector {
	  display: none;
	}

	.corrupting-selector:before
	{
	}
`}</style>

I would expect to see:

.other-selector {display: none}

I actually see

<style id="__jsx-style-11968641476">{.corrupting-selector:before;{;}.other-selector{display:none}</style>

Which is invalid CSS, causing other styles defined in that block to be ignored.

I can replicate this by adding that code to one of the test fixtures and running the unit tests as well.

[giuseppeg]

It might be an issue with empty rules and pseudo selectors, can you remove the empty rule in the meantime? cc @thysultan

[thysultan]

I thought it might be ASI, but i can't reproduce this with stylis, it emits the expected output:

.other-selector#id{display: none;}

[unregistered]

@giuseppeg It can still happen when the rules aren't empty. It doesn't even have to be a pseudo-element selector, it might be a parsing issue:

module.exports = `
  .other-selector {
    display: none;
  }

  .bad-selector:hover,
  .bad-selector:focus
  {
      outline: none;
  }
`

"var __styledJsxDefaultExport = new String("{.bad-selector:hover, .bad-selector:focus}.other-selector{display:none}{outline:none}");

Edit: adding content to my original example did fix it though

[unregistered]

It also seems to have trouble with the @font-face selector. I recently encountered this gem:

@font-face {
    font-family: 'Custom';
    src: url('/font/Custom.bb4929e353324148ae5f0ee1c395fbd0.eot');
    src: url('/font/Custom.bb4929e353324148ae5f0ee1c395fbd0.eot?#iefix') format('embedded-opentype'), ;
    url('/font/Custom.bb4929e353324148ae5f0ee1c395fbd0.woff2') format('woff2'), url('/font/Custom-Regular.bb4929e353324148ae5f0ee1c395fbd0.woff') format('woff'), url('/font/Custom-Regular.bb4929e353324148ae5f0ee1c395fbd0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

[giuseppeg]

@unregistered can you paste the original css for the latests snippet?

[giuseppeg]

{.bad-selector:hover, .bad-selector:focus}

@thysultan this is a bug in stylis and it happens when the curly bracket is in a new line

  .bad-selector:hover,
  .bad-selector:focus
  {

[thysultan]

@giuseppeg This test covers that, what version are you trying this on?

[unregistered]

@giuseppeg Here's an example which produces bad output for that latest snippet, if you put it in the unit test suite:

  @font-face {
    font-family: 'Redacted Sans';
    src: url('/font/Redacted-Regular-WebS.eot'); /* IE9 Compat Modes */
    src: url('/font/Redacted-Regular-WebS.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/font/Redacted-Regular-WebS.woff2') format('woff2'), /* Super Modern Browsers */
    url('/font/Redacted-Regular-WebS.woff') format('woff'), /* Pretty Modern Browsers */
    url('/font/Redacted-Regular-WebS.ttf') format('truetype'); /* Safari, Android, iOS */

    /* Remove this font because it is >200kb
    /* url('/font/Redacted-Regular-WebS.svg#Redacted-Regular-WebS') format('svg'); /* Legacy iOS */

    font-weight: normal;
    font-style: normal;
  }

Result:

.other-selector[data-jsx-ext~=\\"2118869031\\"]{display:none}@font-face{font-family:'Redacted Sans';src:url('/font/Redacted-Regular-WebS.eot');src:url('/font/Redacted-Regular-WebS.eot?#iefix') format('embedded-opentype'),;url('/font/Redacted-Regular-WebS.woff2') format('woff2'), url('/font/Redacted-Regular-WebS.woff') format('woff'), url('/font/Redacted-Regular-WebS.ttf') format('truetype');font-weight:normal;font-style:normal}

The messed up part:
),;url('/font/Redacted-Regular-WebS.woff2')

[thysultan]

Can't seem to reproduce any of them on stylis 3.2.6, so i think an upgrade to 3.2.6 would probably fix these.

[giuseppeg]

@unregistered fixed in 1.0.9