- From: Lea Verou via GitHub <sysbot+gh@w3.org>
- Date: Tue, 12 Mar 2024 19:16:21 +0000
- To: public-css-archive@w3.org
LeaVerou has just created a new issue for https://github.com/w3c/csswg-drafts: == What is the MVP for inline conditionals on custom properties? == There are several issues across this repo proposing some kind of inline conditional function. Here is a sample: - https://github.com/w3c/csswg-drafts/issues/5624 - https://github.com/w3c/csswg-drafts/issues/5009 - https://github.com/w3c/csswg-drafts/issues/6638 - https://github.com/w3c/csswg-drafts/issues/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`](https://shoelace.style/components/alert#variants) - [`--effect: none | pulse`](https://shoelace.style/components/badge#pulsating-badges) - [`--button-style: fill | outline`](https://shoelace.style/components/button#pill-buttons) - [`--shape: rect | pill`](https://shoelace.style/components/input#pill) - [`--avatar-shape: square | rounded | circle`](https://shoelace.style/components/avatar#shapes) - [`--size: small | medium | large`](https://shoelace.style/components/radio-button#sizes) - [`--suffix: none | caret`](https://shoelace.style/components/button#caret)` 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> )`](https://drafts.csswg.org/css-contain-3/#typedef-style-feature) 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? Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10064 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 12 March 2024 19:16:22 UTC