Page MenuHomePhabricator

Support css variables inside calc() in template styles
Closed, ResolvedPublicFeature

Description

Feature summary (what you would like to be able to do and where):

I'd like to be able to use constructs like calc( var( --foo, 2px ) + 1px) inside template styles.

To clarify, i am only proposing being able to use css variables in calc(). My idea is that they would be set in inline styles as part of template parameters and not in templatestyles.

Use case(s) (list the steps that you performed to discover that problem, and describe the actual underlying problem which you want to solve. Do not describe only a solution):

I was writing a complex template involving css animations. I wanted the start point of the animation to be a parameter to the template. I had to make a lot of rules for potential common parameter values. It would be nice if i could just write in the template <div style="--start: {{{start|123}}}"> rest of template </div> and use that in template styles instead of setting a different class for each possible parameter and having separate rules.

To make it concrete: https://commons.wikimedia.org/wiki/Template:Cubemap_player is the template.
https://commons.wikimedia.org/wiki/Special:PrefixIndex/Template:Cubemap_player is all the different css i had to write to make it semi-parameterized.

Benefits (why should this be implemented?):

I believe this provides 95% of the benefits of T200632 without the concerns Tim raised in T200632#10594645 . Calc() would force this to be limited to just numeric and dimensional values (and technically relative colours). You wouldn't be able to use idents, strings etc. You could maybe use numeric functions in it, but that seems a much lower surface area. I think its unlikely that css would introduce a numeric valued function that is a security concern.

At the same time i think this covers most parameterization needs. Ident values tend to be a limited set of values that dont really need to be parameterized. Other than colours i suspect the vast majority of parameterized values will be numbers or dimensional.

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Event Timeline

Bawolff updated the task description. (Show Details)

P.s. the goal of this task is to get a yes/no answer on if this is an acceptable idea. Once that is decided, i'm happy to do the implementation if the answer is yes.

Well i guess i'll make a patch and see what people say

For historical context see also T208881 but that doesn't seem relavent anymore.

Change #1194259 had a related patch set uploaded (by Brian Wolff; author: Brian Wolff):

[css-sanitizer@master] Allow calc() and other math functions to contain var()

https://gerrit.wikimedia.org/r/1194259

cscott added subscribers: sbassett, cscott.

Adding @sbassett to see if security wants to do a review. The current state of affairs is described at T406594#11274980 and relies on the fact that var is only allowed in places which accept color values. It is implied (but not enforced) that variables will only be *set* to color values, as well -- and perhaps we want to enforce that somehow in the future.

This patch, although in isolation apparently safe, does expand our security perimeter. Now we are saying var is allowed in places which accept color /and number/ values, and that variables will be set to color /and number/ values.

Similarly, we were concerned with direct concatenation of variables before potentially creating something malicious out of something individually innocent, like a color value. With this patch vars can't be directly concatenated (probably good?) but they can be put into juxtaposition with arithmetic operators like /.

Probably fine, but it is expanding our perimeter. The question is whether there is sufficient value.

Adding @sbassett to see if security wants to do a review.

Thanks. After an initial glance, I don't think I have many concerns about https://gerrit.wikimedia.org/r/1194259 as long as we're extremely confident that calc() will always force numeric values for its output. Which we seem to be.

Change #1194259 merged by jenkins-bot:

[css-sanitizer@master] Allow calc() and other math functions to contain var()

https://gerrit.wikimedia.org/r/1194259

Bawolff closed this task as Resolved.EditedNov 2 2025, 12:12 AM
Bawolff claimed this task.
Bawolff added a project: User-notice.

This might be a little in the weeds for tech news, but i think this is an interesting change for wikipedians who write templates with TemplateStyles as it opens up some new possibilities such as a limited form of having template parameters affect templatestyles.

I would suggest something like:

  • In TemplateStyles, when writing CSS, users can now use CSS variables, including those set from inline styles, inside the calc() function.

Would this be useful to share with template creators via Tech News? How do we word it?

SD0001 subscribed.

This can be announced together with T384992 which is similar. I'd suggest:

CSS variables defined by the skin, codex or using HTML style attributes in wikitext, can now by used in TemplateStyles within math and color functions such as calc() and rgb(). [[phab:T405519|1]] [[phab:T384992|2]]

However, it's better to announce once the changes are in a released version of the library and added to mediawiki.

Pppery subscribed.

This did not get announced for some reason, no point in announcing it a month later.