Error compiling CSS

[tomyan]

When I try to embed the repl I get the following error:

:global(...) can be at the start or end of a selector sequence, but not in the middle

When I comment these lines the error goes away and it loads, but the styling is messed up:

https://github.com/sveltejs/svelte-repl/blob/v0.2.1/src/Repl.svelte#L213-L225

[tomyan]

It seems that this code isn't valid in the latest versions of Svelte:

https://svelte.dev/repl/1764cf66cdf343338e54856f314f749f?version=3.37.0 - no error
https://svelte.dev/repl/1764cf66cdf343338e54856f314f749f?version=3.38.0 - error

[roychoo]

not sure is there a bug in the validator but below is how i will write if i want to do what you want. which i think it is the same thing but shorter.

  .container :global(section > *:first-child) {
	color: red;
}

instead of

 .container :global(section) > :global(*):first-child {
	color: red;
}

[nikmolnar]

I'm experiencing this issue as well, and with only a single level global selector. Here is my failing style:

This was my fault. I was using SCSS and forgot how nested commands would compile 😳

[Conduitry]

This is fixed in 3.38.3 - https://svelte.dev/repl/1764cf66cdf343338e54856f314f749f?version=3.38.3 this CSS is now allowed again.

[jsprog]

I can still confirm that matching against multiple selectors (e.g: tag + attribute) using the & operator (scss) is failing with the last fix, and it used to work with previous versions of svelte (e.g: 3.37.0).

https://svelte.dev/repl/2701f7195edf49aeab448495b964e4be?version=3.44.1

<div class="container">
  <section>
    <div row="one">row 1</div>
    <div row="two">row 2</div>
  </section>
</div>

<style>
  /* OK */
  .container :global(section) > :global(div[row=one]) {
    color: blue;
  }
	
  /* this what you get from sass generation */
  /* error: :global(...) can be at the start or end of a selector sequence, but not in the middle (17:13)*/
  .container :global(section) > :global(div)[row=two] {
    color: red;
  }
</style>