CSS Conditionals

[R5dan]

There is now if() statements in CSS: https://drafts.csswg.org/css-conditional-values-1

I think that this could be added to css, and not require using js for this.
I propose the following syntax:
<elm class="cond[x]-[condition]; true[x]:[value when if[x] is true]; false[x]:[value when if[x] is false]" />

so Example 5:

font-size: if(var(--size) = small, 2em)
           if(var(--size) = medium, 3em)
           if(var(--size) = large, 5em)

would be in tailwind:

<div class="cond[1]-[sm=True]; true[1]:[text-sm]; cond[2]-[md=True]; true[2]:[text-md]; cond[3]-[lg=True]; true[3]:text-lg>

You can also define else ifs effectively. I propose one of these syntax: false[prev]:cond[new]-[cond] elif[prev]:cond[new]-[cond] where prev is the id of the previous condition and new is the id of the new condition.

You can only define false or the else if.

So this example:

  border-color: if(
                    style(--status: pending): var(--color-blue-50);
                    style(--status: complete): var(--color-green-50);
                    else: var(--color-grey-50);

goes to this:

<div class="cond[1]-[style(--status, pending)]; true[1]:[border-blue-50]; elif[1]:cond[2]-[style(--status), complete]; true[2]:border-green-50; false[2]:border-grey-50" />

If there is only one condition in an element, you don't need to specify the id.

[bzbetty]

I think you've inverted a couple of things

1. in CSS conditionals you define the property name first, your version you've got the property name in the result which would allow illegal syntaxes. So I'd say it should probably have a prefix of "border-"

2. The true[1] false[2] syntax is confusing and separates things too much. As much as I think it'll be ugly, I think a single larger selector woudl be clearer.

Curiously I think with arbitrary values we can almost do it already in tailwind

eg

<div class="border-[if(style(--status:pending):var(--color-blue-50);style(--status:complete):var(--color-green-50);else:var(--color-grey-50))]">

it might be possible to clean that up slightly with something like a state selector

<div class="if:border-[style(--status:pending):var(--color-blue-50);style(--status:complete):var(--color-green-50);var(--color-grey-50))]">

could potentially use built in styles too by omitting var()

<div class="if:border-[style(--status:pending):blue-50;style(--status:complete):green-50;grey-50]">

more examples

<!-- Background color -->
<div class="if:bg-[style(--theme:dark):slate-900;style(--theme:light):white;gray-100]">

<!-- Text size -->
<div class="if:text-[style(--size:large):2xl;style(--size:medium):lg;base]">

<!-- Width -->
<div class="if:w-[style(--expanded:true):full;style(--collapsed:true):0;64]">

<!-- Multiple conditional properties -->
<div class="if:border-[style(--status:pending):blue-50;style(--status:complete):green-50;grey-50]
           if:text-[style(--status:pending):blue-700;style(--status:complete):green-700;grey-700]">