[css-values?] What is the MVP for inline conditionals on custom properties?

[LeaVerou]

There are several issues across this repo proposing some kind of inline conditional function. Here is a sample:

• [css-variables?] Higher level custom properties that control multiple declarations #5624
• [css-values]: Express conditional values in a more terse way  #5009
• [css-values] Emulate conditionals with discontinuous function(s) in calc() #6638
• [css-values] Iverson bracket functions: if(), media(), supports(), defined() #4731

Yet, this is another case where progress has stalled because we’re trying to flesh out a much more general and powerful feature, which involves a significant amount of design & implementation effort. Meanwhile, this major author pain point remains unsolved, and authors have to resort to HTML attributes instead (as explained in #5624).

The current workarounds are:

• Using a 0/1 switch and linear interpolation: calc(var(--test) * var(--if-true) + (1 - var(--test)) * var(--if-false))
• "Space toggle": Using presence/absence and var(--test, var(--if-false))
• Style container queries: these are great, but only work on descendants.

However, there is no workaround for transforming arbitrary keywords to arbitrary values, even simple values. E.g. custom properties like these are impossible to implement (examples from Shoelace, one of the most popular web component libraries, but similar use cases can be found in almost any design system and/or WC library):

• --variant: auto | primary | success | neutral | warning | danger
• --effect: none | pulse
• --button-style: fill | outline
• --shape: rect | pill
• --avatar-shape: square | rounded | circle
• --size: small | medium | large
• --suffix: none | caret`
• --popup-placement: [top | right | bottom | left] [start | end]?
• --popup-arrow-placement: center | start | end

What if we could come up with an MVP that could be implemented fast and extended later?

We could scope it down quite a lot and still have something that addresses the most pressing author pain points.
Some example restrictions we could start with:

• Only style( <style-query> ) conditionals
• Only custom properties
• If it helps, the value space could be restricted too, even as much as single tokens
• If it helps, it could even be something that’s only allowed in custom property values

Syntax could be either functional (probably easier):

<if()> = if (style( <style-query> ), <true-value>, <false-value>? )

or keyword-based (fewer parens, no conflict with preprocessors):

<if-inline> = if style( <style-query> ) then <true-value> [ else <false-value> ]

Implementors, would this make it tractable? If not, what would?

[jjenzz]

Style container queries: these are great, but only work on descendants.

when i first discovered style queries, i admit i had intuitively tried to do something like this:

@container style(--variant: large) {
  & {
    /* style the container itself */
  }
}

it seems a way to select the container that @container style() matches would be a nice stepping stone but i have nowhere near enough context/history to know if that is doable.

or maybe enabling style queries as part of the @scope api?

@scope style(--variant: large) {
  :scope {}
}