Lobotomized owl CSS selector broken

[Munter]

I like to use a pattern of a CSS flex-box with whildren evenly spaced using the lobotomized owl selector.

My CSS looks like this:

  .user-section {
    display: flex;
  }

  .user-section > * + * {
    margin-left: 4px;
  }

Svelte compiles it into this:

.user-section.svelte-1aasoha {
  display: flex
}

.user-section>*+.svelte-1aasoha {
  margin-left: 4px
}

The right eye of the owl is replaced with the unique Svelte-generated selector id for the flexbox. I expected the unique id to be appended to the flexbox selector before the > part of the selector.

Is the id just naively appended to the end of the selector? Maybe a whitespace collapse is set to happen too early when handling this selector.

Svelte version: 3.5.3

[marceloadsj]

Maybe you will need to use the :global() modifier:
https://svelte.dev/repl/62df05ad1dd8451caa106918b210a5f7?version=3.6.1

<style>
  .user-section {
    display: flex;
  }

  .user-section > :global(* + *) {
    margin-left: 4px;
  }
</style>

[marceloadsj]

Following the way the css selectors works, something like:

1-
This is a single selector: div

• If we use a single selector, like * or div, Svelte will match the tags in that component, then it will inject the hash class and replace the css selector.

2-
This is an adjacent sibling selector: .user-section + *
That is equal to 2 single selectors combined: .user-section + *

• in this case, svelte will read the entire selector and, if some path match a tag, it will do the same process as the example 1, replacing that part with the hash.

Each +, >, ~ "breaks" the selector in single parts. Svelte match the entire selector, but can replace each part of it with the class hash.

So, using the :global() modifier, you let svelte know you want that selector to keep on the code as it is!

And just one more thing to keep documented, lol. The class selectors, like .user-section are never replaced by svelte, it just add it's class hash on it!

[Conduitry]

It does indeed look like the issue here is that ~ and + combinators are not handled properly. Consider something like:

App.svelte

<script>
	import Foo from './Foo.svelte';
</script>

<Foo/>
<div>
	bar
</div>

<style>
	div + div {
		color: red;
	}
</style>

Foo.svelte

<div>
	foo
</div>

The styles shouldn't match anything, but they do. The <div> in the parent component gets a scoping class, and the selector in the styles changes to div+div.svelte-xyz.

In general, it seems like these combinators are getting handled by ignoring everything but the last part when seeing which parts of the document they might match, and then it's also only this last part of the selector that gets scoped.

[Conduitry]

There's a rather telling comment here which I don't remember really absorbing before. Only WhiteSpace and > combinators have handling currently.

[Conduitry]

I was just thinking about this more, and there seem to be a lot more things to worry about with sibling selectors than with the other ones. For example:

{#each foo as bar}
	<div class='a'>...</div>
	<div class='b'>...</div>
{/each}

then .b + .a is a valid selector, because the loop will wrap around. In general, there seems to be a large number of cases to cover when deciding whether two elements can be (adjacent or non-adjacent) siblings when {#if}s/{#each}s/{:else}s/{#await}s become involved.

[Conduitry]

~ / + should now be getting scoped properly in v3.27.0.