Skip to content

Keep layers comma-separated when exporting a multi-layer shorthand - #197

Merged
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:bugfix/shorthand-longhand-round-trip
Jul 23, 2026
Merged

Keep layers comma-separated when exporting a multi-layer shorthand#197
TylerBrinks merged 1 commit into
TylerBrinks:masterfrom
jhaygood86:bugfix/shorthand-longhand-round-trip

Conversation

@jhaygood86

Copy link
Copy Markdown
Contributor

Problem

EndListValueConverter.ListValue.ExtractFor joins the per-layer values with whitespace:

if (tokens.Count > 0) tokens.Add(Token.Whitespace);

but its own CssText joins with ", ", and ListValueConverter.ExtractFor — the sibling that handles plain comma lists — uses Token.Comma. EndListValueConverter is the one behind background, where a final layer may additionally carry background-color.

The result is that exporting a multi-layer shorthand to its longhands runs the layers together into a single invalid value:

background: url(a.png) no-repeat, url(b.png) repeat
longhand before after
background-repeat no-repeat repeat no-repeat, repeat
background-image initial url("a.png"), url("b.png")

background-repeat becomes one invalid two-keyword layer rather than two valid ones. background-image is worse: the whitespace-joined url("a.png") url("b.png") doesn't convert at all, so the longhand ends up with no value and reports initial.

Each comma-separated layer is its own layer for every longhand the shorthand covers (CSS Backgrounds 3 §2.1).

Fix

Use Token.Comma, matching ListValueConverter.

Tests

2 tests in PropertyTests/BackgroundProperty.cs, covering two- and three-layer backgrounds and asserting both background-image and background-repeat. Both fail on master.

The full suite (1263 existing tests) stays green with no existing assertion modified, and all seven target frameworks build with no new warnings.

EndListValueConverter.ListValue.ExtractFor joined the per-layer values
with whitespace while its own CssText, and ListValueConverter's
equivalent ExtractFor, both join with a comma. Exporting a multi-layer
shorthand to its longhands therefore ran the layers together into one
invalid value instead of a comma-separated list:

  background: url(a.png) no-repeat, url(b.png) repeat

  background-repeat -> "no-repeat repeat"   (one invalid layer)
  background-image  -> "initial"            (conversion failed outright)

Use Token.Comma, matching the sibling converter.
@jhaygood86
jhaygood86 marked this pull request as ready for review July 22, 2026 21:36
@jhaygood86
jhaygood86 marked this pull request as draft July 22, 2026 21:40
@jhaygood86
jhaygood86 marked this pull request as ready for review July 22, 2026 21:44
@TylerBrinks
TylerBrinks merged commit 20cf29f into TylerBrinks:master Jul 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants