Skip to content

parse rgba/hsla/hsva with optional alpha (#274) - #286

Open
cpruijsen wants to merge 1 commit into
bgrins:masterfrom
cpruijsen:fix/issue-274
Open

parse rgba/hsla/hsva with optional alpha (#274)#286
cpruijsen wants to merge 1 commit into
bgrins:masterfrom
cpruijsen:fix/issue-274

Conversation

@cpruijsen

Copy link
Copy Markdown

CSS Color 4 (the grammar quoted in #274) makes the alpha group on rgba() optional:

rgba( [ <number> | <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )

TinyColor required a fourth CSS unit, so rgba(255, 0, 0) did not parse (isValid() === false, color acted like black). Same matcher is used for hsla() / hsva().

Fixes #274

Summary

  • PERMISSIVE_MATCH4 (shared by rgba / hsla / hsva) now takes three components with an optional fourth.
  • / is accepted as the separator before that optional alpha, matching the modern form in the issue (rgba(255 0 0 / 0.5)).
  • Omitted alpha still becomes 1 through the existing boundAlpha path. Four-value comma forms are unchanged.

Decision

  • Chose: optional fourth component on the shared *a matcher, including slash-separated alpha.
  • Alternative: rgba-only, and/or leave slash-separated alpha invalid.
  • Why: those three parsers already share one regex. Making the fourth optional without / would parse rgba(255 0 0 / 0.5) as opaque red, because the matchers are unanchored and leftover input is ignored. Happy to drop slash, or to limit this to rgba, if you prefer.

Generated UMD/CJS/ESM copies are produced by deno task build and are not in this commit. I can add a build commit if you want the CDN copies updated here.

Test plan

  • rgba(255, 0, 0) and rgba 200 100 0 parse (isValid(), equals the RGB object, alpha 1 via toRgbString)
  • rgba(90%, 45%, 0%) without alpha still parses
  • rgba(255 0 0 / 0.5) keeps alpha 0.5
  • rgba(255, 0, 0, 0.5) / rgba 200 100 0 .4 (existing four-value) still work
  • hsla(...) / hsva(...) without alpha parse
  • deno test test.js, 45 passed, 1 ignored

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.

RGBA fails to parse if alpha is missing

1 participant