Merge repeated src declarations in @font-face into comma-separated list
Problem
In @font-face, multiple src declarations produce invalid CSS. Per the CSS Fonts spec:
When a given descriptor occurs multiple times in a given @font-face rule, only the last descriptor declaration is used and all prior declarations for that descriptor are ignored.
And from MDN:
If multiple
srcdescriptors are set, only the last declared rule that is able to load a resource is applied.
Currently Stylus compiles this:
@font-face
font-family 'MyFont'
src url('font-v1.woff2') format('woff2')
src url('font-v1.ttf') format('truetype')Into invalid CSS:
@font-face {
font-family: "MyFont";
src: url("font-v1.woff2") format("woff2");
src: url("font-v1.ttf") format("truetype");
}The first src is silently ignored by browsers.
Proposal
When multiple src declarations appear inside a single @font-face block, merge them into one comma-separated src property:
Input:
@font-face
font-family 'MyFont'
src url('font-v1.woff2') format('woff2')
src url('font-v1.ttf') format('truetype')
font-display blockOutput:
@font-face {
font-family: "MyFont";
src: url("font-v1.woff2") format("woff2"), url("font-v1.ttf") format("truetype");
font-display: block;
}Why
- Prevents a common silent bug — users write two
srclines and don't realize the first is ignored - Makes templates with loops and conditional output much cleaner (no need to track commas)
- Mirrors how other shorthand properties work — repeating a shorthand usually means "append", not "replace"
Scope
Start with src only in @font-face, since it's the most common and painful case. Could later extend to other descriptors if needed.
Environment: Stylus v0.64.0
Source: stylus/stylus