Complex composable variants

[tmvnkr]

Currently I'm using this string:

[&:has([slot=icon]):not(:has([data-slot=text]))]:px-0

I was hoping to be able to update this in v4 to something like:

has-[slot=icon]-not-has-data-[slot=text]:px-0

But this produces the following css:

.has-\[slot\=icon\]-not-has-data-\[slot\=text\]\:px-0 {
    &:has(*:is(slot=icon]-not-has-data-[slot=text)) {
        padding-inline: calc(var(--spacing) * 0);
    }
}

Notice how the variants (not-has) after the first data selector don't resolve to correct css.

Is it possible to use the new composable variants syntax for use-cases like this?

[adamwathan]

I think this is the variant you’re looking for:

has-[slot=icon]:not-has-data-[slot=text]:px-0

[tmvnkr]

Thanks for your answer, it got me on the right track.
I had to put slot=icon in double square brackets for it to work, I don't know if that is intended.

Single square brackets:

has-[slot=icon]:not-has-data-[slot=text]:px-0

Outputs:

.has-\[slot\=icon\]\:not-has-data-\[slot\=text\]\:px-0 {
    &:has(*:is(slot=icon)) {
        &:not(*:has(*[data-slot="text"])) {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
}

Double square brackets:

has-[[slot=icon]]:not-has-data-[slot=text]:px-0

Outputs

.has-\[\[slot\=icon\]\]\:not-has-data-\[slot\=text\]\:px-0 {
    &:has(*:is([slot=icon])) {
        &:not(*:has(*[data-slot="text"])) {
            padding-inline: calc(var(--spacing) * 0);
        }
    }
}