Skip to content

Add CSS Images 4 image functions and fix value-context hash tokenization#209

Open
jhaygood86 wants to merge 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/css-images-4
Open

Add CSS Images 4 image functions and fix value-context hash tokenization#209
jhaygood86 wants to merge 1 commit into
TylerBrinks:masterfrom
jhaygood86:feature/css-images-4

Conversation

@jhaygood86

Copy link
Copy Markdown
Contributor

Feature

image-set(), cross-fade() and element() (CSS Images 4 §2/§3) are valid <image> values but were rejected:

background-image: image-set("a.png" 1x, "b.png" 2x);
background-image: cross-fade(url(a.png), url(b.png), 50%);
background-image: element(#hero);

Adds ImageSetConverter, CrossFadeConverter and ElementImageConverter, composed into ImageSourceConverter so every <image> property accepts them.

Bundled lexer fix (required by element(#id))

element(#hero) needs a working <hash-token> in a value context, which surfaced a lexer bug. In a value context # was treated as a colour literal that consumed only hex characters, so #hero tokenized as an empty Color plus a stray hero Ident.

CSS Syntax §4.3.4 says # begins a whole <hash-token> consuming an entire <name>. The fix classifies it as a colour only when the name is all-hex (#f00, #abc123), otherwise emits a Hash token (#hero, #f00bar); a # not followed by a name is a plain delimiter. ValueBuilder now accepts Hash tokens in a value.

x resolution unit

image-set() options idiomatically use 1x/2x. x is the canonical alias for dppx (CSS Values 4 §7.4); it was missing from Resolution.GetUnit.

Tests

  • Tokenization.cs: #f00/#abc123/#deadbeefColor; #hero/#top/#f00barHash; # alone → delimiter
  • PropertyTests/BackgroundProperty.cs: 5 legal (image-set string & url with 1x/2dppx, both cross-fade forms, element(#hero)) and 3 malformed (image-set(banana), element(.klass), cross-fade(5px))

The full suite (1263 existing tests) stays green — the value-context hash change doesn't disturb any colour parsing — and all seven target frameworks build with no new warnings.

@jhaygood86
jhaygood86 marked this pull request as ready for review July 22, 2026 23:02
image-set(), cross-fade() and element() (CSS Images 4 2/3) are valid
<image> values but were rejected. Add ImageSetConverter,
CrossFadeConverter and ElementImageConverter, composed into
ImageSourceConverter so every <image> property accepts them.

element(#id) needs a working <hash-token> in a value context, which
exposed a lexer bug: in a value context '#' was treated as a color
literal and consumed only hex characters, so "#hero" became an empty
color plus a stray "hero" ident. Per CSS Syntax 4.3.4 a '#' begins a
whole <hash-token> consuming an entire <name>; classify it as a color
only when the name is all hex, otherwise emit a Hash token. ValueBuilder
now accepts Hash tokens in a value.

Also add the "x" resolution unit, the canonical alias for "dppx" (CSS
Values 4 7.4), which image-set() options idiomatically use ("1x"/"2x").
@jhaygood86
jhaygood86 force-pushed the feature/css-images-4 branch from 266f264 to 31547f2 Compare July 23, 2026 22:28
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.

1 participant