#2958·stylus

Merge repeated src declarations in @font-face into comma-separated list

Author: sporteka2Created Jul 23, 2026Updated Jul 23, 2026

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 src descriptors are set, only the last declared rule that is able to load a resource is applied.

Currently Stylus compiles this:

stylus
@font-face
  font-family 'MyFont'
  src url('font-v1.woff2') format('woff2')
  src url('font-v1.ttf') format('truetype')

Into invalid CSS:

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:

stylus
@font-face
  font-family 'MyFont'
  src url('font-v1.woff2') format('woff2')
  src url('font-v1.ttf') format('truetype')
  font-display block

Output:

css
@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 src lines 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