Re: [csswg-drafts] [css-cascade][css-syntax] New `!revertable` flag to mark a declaration as "can be reverted when IACVT" (#10443)

The CSS Working Group just discussed ``[css-cascade][css-syntax] New `!revertable` flag to mark a declaration as "can be reverted when IACVT"``, and agreed to the following:

* `RESOLVED: Add revert-rule as a css-wide keyword`

<details><summary>The full IRC log of that discussion</summary>
&lt;ntim> lea: instead of having declarations override other declarations when they are IACVT<br>
&lt;oriol> q+<br>
&lt;ntim> lea: this would allow declarations to revert<br>
&lt;emilio> q+<br>
&lt;ntim> lea: make it like they didn't exist, which is very useful for if()<br>
&lt;ntim> lea: this is the last piece for making it work properly<br>
&lt;ntim> lea: we have style queries/if() functions, this last piece gives us conditionals that can be rolled back<br>
&lt;ntim> lea: the more we add IACVT things to the language, the more useful it is<br>
&lt;astearns> ack fantasai<br>
&lt;Zakim> fantasai, you wanted to react to lea to explain this in a different way<br>
&lt;dbaron> Wiktionary says revertible is a more common spelling than revertable.  (I'm also a little hesitant about the name because I think people will have trouble spelling it.)<br>
&lt;dbaron> Otherwise I like the idea.<br>
&lt;lea> s/ this is the last piece for making it work properly/ this is the last piece for having conditionals in CSS, but it's also useful for anything that does IACVT/<br>
&lt;lea> q+<br>
&lt;miriam> q+<br>
&lt;ntim> fantasai: if you have a bunch of invalid things, we need to make it revertible, instead of falling back to the previous declaration<br>
&lt;ntim> lea: this behavior should have been the default in the past<br>
&lt;ntim> lea: it's a pain for authors<br>
&lt;ntim> lea: an opt-in makes it very intentional<br>
&lt;astearns> ack oriol<br>
&lt;fantasai> s/if you have a bunch of invalid things/if you have things that can become invalid at computed value time, rather than at cascade time, then when it becomes invalid you have to fall back to a default value rather than to the previous declaration in the cascade./<br>
&lt;fantasai> s/we need to make it revertible/Lea's proposal is to flag such declarations to request that the previous declaration in the cascade be cached, so that you can fall back to it if the !revertible declaration becomes invalid/<br>
&lt;ntim> oriol: I don't like a !revertible flag for this because the way you are block, the indexing of the block is that you have an ordering, and each property has value.<br>
&lt;ntim> oriol: if we were only reverting within the same property, we could shift down declarations for the same property<br>
&lt;lea> I don't understand the issue, perhaps an example could help?<br>
&lt;fantasai> s/instead of falling back to the previous declaration/just as if it had become invalid during the cascade/<br>
&lt;ntim> oriol: we could shift everything down to the last declaration for the last property<br>
&lt;ntim> oriol: since we have cases where different properties share properties, like logical properties.<br>
&lt;bramus> scribe+<br>
&lt;bramus> oriol: strongly thingk that here we should have the same reverting behavior that reverts within props that share the computed value<br>
&lt;bramus> … and then this implies to keep track of the value declarations and they could be interleaved<br>
&lt;bramus> … and we would need to keep trackt of that in order to revert propertly<br>
&lt;bramus> … deos not work with how CSSOM exposes these<br>
&lt;bramus> … and how its implemented<br>
&lt;bramus> … isntead of a flag, this hsould be a new at-rule<br>
&lt;bramus> … @revertible selector<br>
&lt;bramus> … that would not assume you have a single value for each prop to allow ??? with differnent indexigin<br>
&lt;bramus> … in the issue lea argued against this asahying it would make it easier for authors to opt in and bad for perf<br>
&lt;bramus> … dont agree that making things harder is ??<br>
&lt;bramus> … its backwards<br>
&lt;bramus> … an atrule could be better<br>
&lt;astearns> ack emilio<br>
&lt;bramus> emilio: big +1 to the counterpoints oriol made<br>
&lt;bramus> … this would really complicate how css is exposed in CSSOM and other details<br>
&lt;bramus> … but i have an idea that might work<br>
&lt;bramus> … seems to me that what you want is fallback within same decl block and that is problematic<br>
&lt;bramus> … and fallback within separate decl blocks<br>
&lt;bramus> … with revertable you revert as in some new kind of revert unlike the revert keyword<br>
&lt;bramus> … feels like 2 features<br>
&lt;bramus> … 1 could be a csswide keyword that says ignore<br>
&lt;bramus> … a nice way to represent this would be  a top level value function<br>
&lt;bramus> … you would do border-radius: var(--width);<br>
&lt;bramus> … you’d try a list of values instead with a function<br>
&lt;TabAtkins> qq+<br>
&lt;bramus> … and none of them parse then the decl gets ignored<br>
&lt;bramus> lea: sounds like first-valid<br>
&lt;lea> q+ to say this does not address use cases at all<br>
&lt;bramus> TabAtkins: with the addition of that wipe keyword<br>
&lt;dbaron> s/wipe/CSS-wide/<br>
&lt;bramus> emilio: that would achieve what you want<br>
&lt;bramus> TabAtkins: i thkn it does<br>
&lt;bramus> emilio: no need to repeat property name<br>
&lt;lea> q?<br>
&lt;bramus> … and more consistent with everything else<br>
&lt;TabAtkins> ack<br>
&lt;TabAtkins> q-<br>
&lt;dbaron> So I think emilio is proposing try(value1, value2, ignore)<br>
&lt;ntim> emilio: I think it addresses it in a less verbose way<br>
&lt;emilio> right<br>
&lt;oriol> q+<br>
&lt;bramus> lea: oh, that would bake it into first-valid<br>
&lt;bramus> TabAtkins: i gues sthe keyword is not usseful ouside of first-valid<br>
&lt;bramus> lea: it is<br>
&lt;bramus> … more useful than the function<br>
&lt;bramus> … you can have expressions that output the keyword<br>
&lt;bramus> … sounds better<br>
&lt;bramus> … its like revert-declaration<br>
&lt;bramus> … can we do that?><br>
&lt;bramus> emilio: i think so<br>
&lt;oriol> This is https://github.com/w3c/csswg-drafts/issues/5319<br>
&lt;bramus> … at least more easily than what you proposed<br>
&lt;bramus> lea: its even better<br>
&lt;bramus> astearns: lets go to the queue<br>
&lt;bramus> TabAtkins: emilio, is that only easier at parse time?<br>
&lt;bramus> emilio: no, should work fine at computed value time<br>
&lt;bramus> TabAtkins: how would you treat it as if it has never been said?<br>
&lt;bramus> emilio: when apply decls … so revergint is ???<br>
&lt;bramus> TabAtkins: i see, you have a full cascade list<br>
&lt;lea> s/lea: its even better/lea: if we can actually do that, that is even better!/<br>
&lt;dbaron> s/revergint is ???/reverting is just keeping going/<br>
&lt;bramus> emilio: and you already have that for revert-layer<br>
&lt;bramus> TabAtkins: thought that ws simpler<br>
&lt;bramus> lea: will that work if you have a diffrent decl for the same prop in the same rule<br>
&lt;bramus> emilio: no<br>
&lt;astearns> ack lea<br>
&lt;Zakim> lea, you wanted to say this does not address use cases at all<br>
&lt;bramus> lea: so like revert-rule then<br>
&lt;bramus> … love this<br>
&lt;bramus> … amazing<br>
&lt;bramus> … lets piggy back on revert-layer for the name<br>
&lt;astearns> ack miriam<br>
&lt;dbaron> lea: ... and call it something like revert-rule<br>
&lt;bramus> miriam: emilio’s proposal solves all my issues with this, i like it<br>
&lt;bramus> emilio: naming is chosen by ?? – open to any naming<br>
&lt;astearns> ack dbaron<br>
&lt;emilio> s/??/jet-lagged emilio/<br>
&lt;bramus> dbaron: issue that i was gonna raise that i felt i need a diff between in-rule and across-rule behavior<br>
&lt;bramus> … but if name is revert-rule that is addressed<br>
&lt;TabAtkins> so, replacing the issue example<br>
&lt;TabAtkins> <br>
&lt;TabAtkins> animation: if(style(--effect: grow), 1s grow) !revertable;<br>
&lt;TabAtkins> animation: if(style(--effect: pulse), 4s pulse infinite) !revertable;<br>
&lt;TabAtkins> <br>
&lt;TabAtkins> with<br>
&lt;TabAtkins> <br>
&lt;TabAtkins> animation: if(style(--effect: grow): 1s grow; style(--effect: pulse): 4s pulse infinite; else: revert-rule);<br>
&lt;bramus> … the revert-rule name cleverly addresses that confusion<br>
&lt;astearns> ack oriol<br>
&lt;bramus> oriol: i expressed earlier concerns about messing with the data structures of how rules are stored in impls<br>
&lt;bramus> … adding a keyword was proposed in another issue before<br>
&lt;bramus> … support it<br>
&lt;bramus> … its already implemented that in fallback values hwere you use revert-layer<br>
&lt;bramus> … could auto0-wrap without forcing all this<br>
&lt;bramus> … it convenient<br>
&lt;dbaron> And the proposal seems to be to use https://www.w3.org/TR/css-values-5/#first-valid<br>
&lt;bramus> astearns: do we have a proposed resolution?<br>
&lt;bramus> emilio: dont know status of first-valid<br>
&lt;bramus> emilio: resolution wuold be to add a new revert-rule css-wide keyword that reverses to the previous declaration in any rule (not within cascade layers)<br>
&lt;bramus> dbaron: in a different rule<br>
&lt;bramus> emilio: right<br>
&lt;astearns> ack fantasai<br>
&lt;bramus> fantasai: so a rule is selectr { decls }<br>
&lt;bramus> … so woul dyou revert entire block, or only the 1 prop?<br>
&lt;bramus> TabAtkins: 1 prop<br>
&lt;bramus> fantasai: so only that prop bu tout of tha tentire block of decls<br>
&lt;bramus> emilio: yes<br>
&lt;bramus> … conceptullay there is no order decl for tha tprop in that block<br>
&lt;bramus> fantasai: yers<br>
&lt;bramus> s/yers/yes<br>
&lt;kizu> q+<br>
&lt;bramus> fantasai: makes sens<br>
&lt;ntim> I think TabAtkins' example illustrates it somewhat well:<br>
&lt;ntim> animation: if(style(--effect: grow): 1s grow; style(--effect: pulse): 4s pulse infinite; else: revert-rule);<br>
&lt;bramus> … but thye cant do it in same block<br>
&lt;bramus> emilio: but can use first-valid for that<br>
&lt;oriol> q+<br>
&lt;bramus> TabAtkins: yes, already have first-valid that covers this<br>
&lt;bramus> fantasai: so you”d always have to wrap the decl value in first-valid<br>
&lt;bramus> TabAtkins: or use if()<br>
&lt;bramus> lea: can we make first valid work like that by default?<br>
&lt;bramus> TabAtkins: would prefert not. usually to be explicti when doing this stuff<br>
&lt;lea> q+ to ask, can we have a function that works like first-valid() but has this fallback automatically<br>
&lt;bramus> fantasai: this si gonna be author-to-author - you are not gonna creata this list. overhead when using first-valid to attach the keyword at the end is not ergonomic<br>
&lt;bramus> … other than that it seams reaosnable<br>
&lt;lea> +1 to fantasai. I missed what the reason to always wrap in a function is?<br>
&lt;bramus> emilio: would choose a different name for the fn, maybe try<br>
&lt;bramus> fantasai: its the fact that you need to use the fn, not the keyword<br>
&lt;bramus> emilio: syntactic overhead is already there<br>
&lt;bramus> fantasai: what if you did !try<br>
&lt;bramus> emilio: then you have the same cssom issues<br>
&lt;bramus> fantasai: would behave as if you wrap it in first-valid<br>
&lt;astearns> qq+<br>
&lt;fantasai> foo: first-valid(stuff, revert-rule); -> foo: stuff !try;<br>
&lt;bramus> emilio: think i misunderstood – so elika is saying that !try implitcly wraps it i first-valid(…, revert-thing) by itself<br>
&lt;bramus> … its less obvious when you have<br>
&lt;bramus> … if i use !try , ’d expect reverting to prev decl<br>
&lt;bramus> fantasai: i’m saying its a lot to write with first-valid + keyword<br>
&lt;lea> Another downside with this approach is that it's less composable. Often values are composed from other variables, now every point of usage needs to know about this<br>
&lt;bramus> … does not require much syntactic structure to this<br>
&lt;bramus> … authors woul duse this a lot i think<br>
&lt;bramus> astearns: can add the short name in the future<br>
&lt;astearns> ack astearns<br>
&lt;Zakim> astearns, you wanted to react to fantasai<br>
&lt;astearns> ack kizu<br>
&lt;astearns> s/short name/short syntax/<br>
&lt;bramus> kizu: should work in first-valid, else would need to work as fallback for custom props<br>
&lt;bramus> … only chrome handles css-wide keywrods in custo m props properly i think<br>
&lt;kbabbitt> s/else would need/also would need/<br>
&lt;bramus> … !try as syntax sugar would be nice to have as well<br>
&lt;astearns> ack oriol<br>
&lt;bramus> oriol: i recall that tab strongly saying that first-valid should only check parse validity, not the computed values<br>
&lt;bramus> … do we change first-valid then?<br>
&lt;bramus> TabAtkins: dont recall that, let me check<br>
&lt;bramus> … if thats the case then we use a diff fn or change first-valid<br>
&lt;astearns> ack lea<br>
&lt;Zakim> lea, you wanted to ask, can we have a function that works like first-valid() but has this fallback automatically<br>
&lt;bramus> lea: why did we conclude that we need to wrap in fn?<br>
&lt;bramus> TabAtkins: the css-wide keyword is a no-op<br>
&lt;bramus> emilio: would override decl in the same block<br>
&lt;bramus> TabAtkins: if you do color: revert-rule is same as writing it not at all<br>
&lt;bramus> lea: in prcatice youd not do that<br>
&lt;bramus> … you could var(--sth, revert-rule)<br>
&lt;bramus> TabAtkins: that is fine<br>
&lt;bramus> emilio: that would work<br>
&lt;bramus> TabAtkins: if you use it literally you need the fn<br>
&lt;bramus> emilio: the variable fallback case addresses some of the syntactic boiler plate thing<br>
&lt;bramus> TabAtkins: i see an issue about first-valid to decide on its name<br>
&lt;bramus> TabAtkins: can go for resolution about revert-rule keyword<br>
&lt;bramus> astearns: comments or qs?<br>
&lt;bramus> … objections?<br>
&lt;bramus> RESOLVED: Add revert-rule as a css-wide keyword<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10443#issuecomment-2627865962 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 January 2025 17:29:31 UTC