@apply with nested &:hover state on shadow dom ::part() doesnt work

[joezappie]

My understanding was nested selectors are transformed by the css engine to act as if it was apart of the parent rule:

my-element::part(row){
 &:hover {}
}

transformed and equivelent to ->

my-element::part(row):hover {}

While that works fine for light dom element, it doesn't seem that works when using the ::part() selector. This makes it annoying to apply a tailwind class that also has a nested hover/focus state. Im using the @utility directive to generate an interactive-bg-color:

@utility hover-bg-* {
  background-color: color-mix(in oklch, --value(--color-*), --value(--color-on-*) 12%);
}

@utility interactive-bg-* {
  background-color: --value(--color-*);
  &:hover {
    background-color: --value(--hover-bg-*);
  }
}

On normal elements I can apply it with <div class='interactive-bg-surface-container'></div> and it works as intended.

Applying that to a shadow dom part does not apply the hover state:

table-element::part(row) {
  @apply interactive-bg-surface-container;
}

And instead I must apply it separately:

table-element::part(row) {
  @apply interactive-bg-surface-container-lowest;
}

table-element::part(row):hover {
  @apply hover-bg-surface-container-lowest;
}

Makes maintenance harder because if I change the surface level of an element I need to remember to update the hover/focus/etc states as well.

I'm curious if this is something tailwind could fix when generating the applied classes and expanding the nested css rules. I'm guessing this is what old versions of tailwind/postcss did to allow development in css but backwards compatibility with older browsers. If I used postcss instead with tailwind 4 would it expand the nested rules?

I did make an issue with csswg to see if this is intended browser behavior but I don't see why the engine shouldn't support that directly.

[joezappie]

According to the tailwind 4 docs it says that lightning css flattens the nested CSS:
https://tailwindcss.com/docs/compatibility#nesting

So I'm unsure why this doesnt work then.