slotted + hover (and other pseudo-classes)

volker-schukai commented 1 year ago

I think that slotted(p) { &:hover } must lead to slotted(p:hover) and not to slotted(p):hover.

I have written a test case:

https://github.com/volker-schukai/postcss-nested/blob/a0b8185078853c5a38174ae5bcfe22bb73ac4aac/index.test.js#L778

I think this must happen in the function interpolateAmpInSelector, don't know me well enough with the internal structure con postcss to build a patch.

example

<!doctype html>
<meta charset="utf-8">
<title>CSS Scoping Test: ::slotted() allows ::placeholder</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
<link rel="match" href="slotted-placeholder-ref.html">
<div id="host">
    <p>this is a paragraph</p>
</div>
<script>
    host.attachShadow({ mode: "open" }).innerHTML = `
    <style>
      ::slotted(p) { color: green }
      ::slotted(p:hover) { color: red }
    </style>
    <slot></slot>
  `;
</script>

ai commented 1 year ago

Sorry, I do not want to implement it right now:

It needs a lot of changes
The feature is not popular yet
Spec is in the draft state and can be changed

You can implement this logic in another plugin like postcss-slotted-nested

phoenisx commented 1 year ago

~~Is there any workaround to achieve this behaviour using this plugin?~~

~~I tried doing this, but I guess even this is not supported:~~

.foo {
  &-bar {
    :where(& .baz) { ... }
  }
}

/** it does work and results in the following: */
:where(.foo-bar .baz) { ... }

My bad the above works. I was using a wrong selector 🙇🏽

postcss / postcss-nested

slotted + hover (and other pseudo-classes) #148