Skip to content

Incorrect CSS Output for :not() Selector #14189

@abdel-17

Description

@abdel-17

Describe the bug

In the following example, the &:not([aria-expanded]) selector does not get applied.

<script>
    import Item from "./Item.svelte";
</script>

<div>
    <Item class="item">Item</Item>
</div>

<style>
    :global(.item) {
        border: 1px solid;

        &:not([aria-expanded]) {
            border-style: dashed;
        }
    }
</style>

This is due to a bug in the CSS output.

.item {
    border: 1px solid;

    &:not(/* (unused) [aria-expanded]*/) {
        border-style: dashed;
    }
}

Reproduction

https://svelte.dev/playground/untitled?version=5.1.11#H4sIAAAAAAAAE42SQYvbMBCF_8ogSonBcdhLKVontCwt7KU95Ljag2xNHIEsCWkSEoz_e5Edu5tt0vZipPG8b_Sk1zErW2ScPdvahYA1wdN2Cz8P5A8E310Abh0tMtiiwZpcYDnbaYOR8ZeO0dknbSqwfCJ99b6IRzSUapWMeKteO0toKTLOylgH7WkjrCDdehcInglb2AXXgmDFKu0uSsEehS1XvxW2VPoItZExrgUzOpJgA6kcGDJoucSTl1ahWgtG4YCCzf2asBVs8-3SUA6j_iLfSRNv6J-cMdLHG4B3jT-cXY7DZGVw7i5XSh9HN5HOBgdAkcxAl5aClI7eyDOHJmj1ONYa6Tk8fPKnYd8nuSDeGFdJsyjSxGySVy4oDBwe_AmiMzPCS6W0bTh8HilD8ePLle3XCTJhlsMZOSgZ9ziR-jvq-c7fYGpnXOBgdLOnyhzw34jLvd9h1C5I8wdkyO07K9l_e0mfcjW-BssZ4YkYT076_E7s36T0OvfXP-4Ev3Y2vTbUe21UQJtDURQ-OB-hhzV8GJaL7Gb6u6m133RfAlqFYeYssn5M17WJ1_4XDtgF8PkDAAA=

Logs

No response

System Info

Not necessary

Severity

annoyance

Metadata

Metadata

Assignees

Labels

cssStuff related to Svelte's built-in CSS handling

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions