Unused CSS detection considers snippets to be external for combinator selectors

[jarrodldavis]

Describe the bug

Classes used within snippets do not contribute to the usage of combinator selectors. For example, in this component:

{#snippet blue()}
    <div class="blue">Blue</div>
{/snippet}

<div class="veryblue">
    {@render blue()}
</div>

<style>
    .blue {
        color: blue;
    }

    .veryblue .blue {
        background-color: blue;
    }
</style>

.blue is considered used since the selector selects elements entirely within the snippet, but .veryblue .blue is not considered used because the selector crosses a snippet boundary.

While it would be nice to have this work, some kind of warning or error for this would be sufficient to prevent confusion since I imagine traversing snippets for combinator selector usage detection would be tricky.

Reproduction

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE4VQSw7CIBC9Co4bTcTuazXqNcRFLVNDRCBAmzSkdxf6WVQXzmZ4M-8zIUAtJDrIbwFU-UbI4WIM7MB3JgHXovQYsdONrdIkrJ0SxqAnD9ngZtszRWIVXLSkkqVzRwZpw-B0ja3I4uLEVMgmWeQztWC3aLtJMXqFs0XF0X4lrCj9E0MojRZzZHw530mcXPeJTsIIUlVaapsPIYdxOtw2cOebflWPsno9rW4Up5OBe3VLjyKbc-PHvTUXtUAOubcN9vf-A_0iueRzAQAA

This REPL demonstrates the issue. In the CSS output tab, the .veryblue .blue is commented out and marked as unused. Uncommenting the non-snippet .blue div results in that CSS rule being uncommented and applied to both .blue divs.

Logs

No response

System Info

N/A (REPL)

Severity

annoyance

[Conduitry]

Duplicate of #10143.

[jarrodldavis]

Another interesting tidbit: adding an inner element and a selector that selects it works, but only when using CSS nesting:

https://svelte-5-preview.vercel.app/#H4sIAAAAAAAAE41S3W6DIBR-FUZvtmTYe-uabnd9hrELi8eFlB4MoIkhvvsAsZ3b0gwvPB_n-zme6GkrFVhavnuK9QVoSV-7jj5TN3YR2AGUg4Ct7o2IN35jUXYdOHJSPTw-TRxJOFUjByJUbe0Lp7HD6Z4jd_F5izDX1QNja7JEBBPYx_iutqG1J4xl8Yw5-m1ODXEcV_oBzHgNjKP4gwFswNwGXFxCZd2oIBOLSCB-BvEIrbQpk24336a4xF1ifqtOtTh_Gt1jw7KBPY__8SjSp0ereTetRsfSgCWRrlZS7ObWHw5XUbGG3N0b58b6mX03f5nhe5HWumwz_CAX3chWQkNLZ3qYPqYvUDOYXVsCAAA=

For this component markup:

{#snippet blue()}
    <div class="blue">
        Blue
        <div class="inner">Inner</div>
    </div>
{/snippet}

<div class="veryblue">
    {@render blue()}
</div>

this CSS works:

.veryblue {
    .blue {
        background-color: skyblue;

        .inner {
            font-style: italic;
        }
    }
}

but this CSS does not:

.veryblue .blue {
    background-color: skyblue;
}

.veryblue .blue .inner {
    font-style: italic;
}