Page MenuHomePhabricator

Allow use of CSS `var()` for CSS `border` in css-sanitizer
Open, Needs TriagePublicFeature

Description

Steps to replicate the issue (include links if applicable):

As a part of trying to make Wikimedia Commons compatible with upcoming night mode I faced this issue,

Try to do the same as https://commons.wikimedia.org/?diff=889292136 in https://commons.wikimedia.org/wiki/Template:Cc-by-sa-layout/styles.css#L-11 and use border: var(--border-subtle, 2px solid #c8ccd1); instead of currently border: 2px solid #e0e0e0;

What happens?:
It fails to save giving this error instead of save,

image.png (1,212×460 px, 221 KB)

What should have happened instead?:

It should allow use of var in border or at least should be consistent with inline style sanitization rules.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

It apparently happened here https://github.com/wikimedia/css-sanitizer/commit/34b37a6a1c9a2e8f8f2d10023f3e6d51051e1a07

It's related to T361934

Event Timeline

I wanted to make https://commons.wikimedia.org/wiki/Module:Diff compatible with dark mode but knowing var are allowed by background-color but not border-color I only fixed background-color ones https://commons.wikimedia.org/w/index.php?title=Module%3ADiff%2Fstyles.css&diff=889925503&oldid=360425282 and am thinking about use of inline styles for unsupported ones.

I think specifying border-top-color, border-right-color, border-bottom-color and border-left-color, while looks ugly, should work.

I think specifying border-top-color, border-right-color, border-bottom-color and border-left-color, while looks ugly, should work.

Interesting workaround, thanks for sharing.

Only colors are supported right now, so border: solid 2px var(--border-subtle-color, #c8ccd1); should also work!

That works also, I didn't know, but border-color: var(--border-subtle-color, #c8ccd1); doesn't.

Izno changed the subtype of this task from "Bug Report" to "Feature Request".Oct 28 2024, 3:07 AM
Izno moved this task from Backlog to External (css-sanitizer) on the TemplateStyles board.