**Feature summary:**
Allow CSS custom variables (`var(--some-variable)`) to be used in
counter names in sanitized CSS.
In particular, TemplateStyles currently prevents constructs such as:
```
.something::before {
content: counter(var(--some-variable), decimal);
}
```
and:
```
.something {
counter-increment: var(--some-variable) 1;
}
```
I would like MediaWiki's CSS sanitizer/validator to permit CSS custom variables in these contexts, so that the name of a CSS counter can be supplied dynamically through a variable.
**Use case(s):**
On lawiki I would like to create a pair of templates for maintaining independent CSS counters (mainly to numerate the stanzas of poems).
The first template initializes a counter, while the second increments and displays it. The templates currently work as intended when the counter name is hard-coded in the CSS. However, I would like the counter name to be passed from a template parameter to the stylesheet through a CSS custom variable, thus allowing multiple independent counters to coexist.
In particular, the following code works as intended (`{{Novus numerus currens}}`):
```
<includeonly><templatestyles src="Formula:Numerus currens/styles.css" /><div style="position: absolute; width: 0; height: 0; counter-reset: {{#if:{{{1|}}}|{{{1}}}|numeratio}} {{#if:{{{2|}}}|{{{2}}}|0}};"></div></includeonly><noinclude>{{Documentatio}}</noinclude>
```
The following code also works as intended, **the custom CSS variable is set and consumed correctly** (`{{Numerus currens}}`):
```
<includeonly><span class="numerus-currens" style="--qui-numerus: {{#if:{{{1|}}}|{{{1}}}|numeratio}}; counter-increment: var(--qui-numerus) {{#if:{{{2|}}}|{{{2}}}|1}};" data-praeambulum="{{{3|}}}" data-postilla="{{{4|}}}"></span></includeonly><noinclude>{{Documentatio}}</noinclude>
```
However, MediaWiki prevents me from creating the corresponding TemplateStyles rule (`Formula:Numerus currens/styles.css`):
```
.numerus-currens::before {
content: attr(data-praeambulum) counter(var(--qui-numerus), decimal) attr(data-postilla);
}
```
This is how these templates should be used:
```
{{Novus numerus currens|numeratio|123}}{{Novus numerus currens|something|11}}
{{Numerus currens|numeratio}}
{{Numerus currens|something|18}}
{{Numerus currens|numeratio|-99}}
{{Numerus currens|something}}
{{Numerus currens}}
{{Numerus currens}}
```
And this is the expected result:
```
124
29
25
30
26
27
```
The problem is not with CSS variables themselves: **`--qui-numerus` can be defined and used in the inline `style` attribute without problems**. Rather, MediaWiki's CSS sanitizer does not currently allow it in a TemplateStyles CSS. Consequently, a template cannot support arbitrary counter names.
**Benefits:**
Supporting CSS variables in these contexts would make TemplateStyles more flexible and avoid unnecessary duplicate CSS.
It would allow reusable templates to parameterize CSS counters without generating separate CSS rules for every possible counter name. This is particularly useful for wiki templates that need to maintain multiple independent counters.
More generally, supporting CSS variables would bring MediaWiki a step closer to modern CSS.