Nesting breaks at-rules

[lubomirblazekcz]

LightningCSS is nesting at-rules wrong and inserts additional & { } which doesn't work in all browsers. This doesn't work for starting-style for example.

Playground

[devongovett]

These are indeed unnecessary but they shouldn't break anything. These rules are inserted implicitly by the parser in the browser too. Looks like this is working: https://codepen.io/devongovett/pen/NPWmgBm What is broken for you?

[lubomirblazekcz]

I was playing around with the new customizable select, and came around this problem. I had following code generated by lightningcss. And the starting-style animation didn't work properly. My original code didn't have the &, so I've tried to remove it in the browser and it started working. Maybe this happens only in some nesting conditions? I was having similar issue previously with custom-media not working too in some cases when additional & was present, but I'm not sure if I can reproduce that anymore.

.x-control {
    &:has(select:not([multiple])) {
        & select {
            cursor: var(--cursor-pointer, pointer);

            &, &::picker(select) {
                appearance: base-select;
            }

            &::picker-icon {
                display: none;
            }

            &::picker(select) {
                border-radius: var(--radius-sm);
                border: 1px solid var(--color-main-tertiary);
                background: var(--color-body-primary);
                margin-block: calc(var(--spacing) * 1);
                padding: calc(var(--spacing) * 1);
                gap: calc(var(--spacing) * 1);
                cursor: auto;
                transform-origin: top;
                scrollbar-width: thin;
                scrollbar-color: var(--color-main) var(--color-body-primary);
                will-change: transform, opacity;
                transition: opacity var(--default-transition-duration) var(--ease-in-out), transform var(--default-transition-duration) var(--ease-out), display var(--default-transition-duration) allow-discrete, overlay var(--default-transition-duration) allow-discrete;
                flex-direction: column;
                display: flex;
            }

            &:not(:open)::picker(select) {
                opacity: 0;
                display: revert;
                transform: scale(.9);
            }

            &:open::picker(select) {
                opacity: 1;
                transform: scale(1);

                @starting-style {
                    & {
                        opacity: 0;
                        transform: scale(.95);
                    }
                }
            }

            & option {
                padding: calc(var(--spacing) * 2);
                font-size: var(--text-sm);
                font-weight: var(--font-weight-semibold);
                border-radius: var(--radius-sm);
                cursor: pointer;
                transition: var(--transition-background);
                line-height: calc(1em + .125rem);

                &::checkmark {
                    display: none;
                }

                &:hover, &:focus-visible {
                    background-color: var(--color-body);
                }

                &:checked {
                    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
                }
            }
        }
    }
}

[lubomirblazekcz]

I was able to reproduce the problem with media queries too after all and it seems that the problem occurs only once the at-rule with & is in pseudo element. Here is the updated codepen - https://codepen.io/lubomirblazekcz/pen/LEYvoqV

.x-app {
    &::before {
        content: "";
        display: inline-block;
        
        @media (width >= 46.5rem) {
            & {
                display: none;
            }
        }
    }
}

I also think that my previous problem with media query occurred in :root or :host, so any pseudo might cause problems.