Skip to content

[vector_graphics_compiler] Align HSL color parsing with RGB parser support #186153

Closed
flutter/packages
#11657

Description

@fondoger

Package

vector_graphics_compiler

Problem

Follow-up to flutter/packages#11619 and #185833.

The previous fix corrected decimal percentage handling in legacy hsl() / hsla() color parsing. During review, maintainers suggested two follow-up improvements:

  1. Move HSL parsing out of parser.dart into colors.dart, similar to the existing RGB parsing path, so HSL can share the same parser organization and support both legacy and modern syntax.

Optional, doesn't need to be part of this PR, but an idea for another potential improvement:

If we move the hsl code to a parseHslFunction in colors.dart similar to this parseRgbFunction, that could enable us to support both legacy and modern css style color strings "hsla(H, S, L, A)" and "hsla(H S L A)" the way we do for rgb in colors.dart.

flutter/packages#11619 (comment)

  1. Add explicit tests for alpha clamp behavior introduced by the HSL alpha parsing fix.

I like that you've added clamps. Please consider adding tests for values which would be clamped

flutter/packages#11619 (comment)

Proposed change

  • Add parseCssHsl and parseHslFunction to colors.dart, following the existing parseCssRgb / parseRgbFunction structure.
  • Keep this scoped to the same practical numeric subset supported by the current RGB parser rather than implementing the full CSS Color 4 grammar.
  • Support both:
    • legacy comma-separated HSL/HSLA syntax, e.g. hsl(270, 100%, 76%)
    • modern space-separated HSL/HSLA syntax, e.g. hsl(270 100% 76% / 0.5)
  • Add tests for valid/invalid HSL syntax variants and HSLA alpha clamping.

Notes

This is not intended to be a complete CSS Color 4 parser. For example, angle hue units, none, calc(), and relative color syntax remain out of scope, matching the existing RGB parser's regex-based subset approach.

Activity

  1. added
    in triagePresently being triaged by the triage team
    engineflutter/engine related. See also e: labels.
    CICDRun CI/CD
    packageflutter/packages repository. See also p: labels.
    and removed
    in triagePresently being triaged by the triage team
    on May 6, 2026
  2. mbcorona commented on May 6, 2026

    @mbcorona
    Member

    Hi @fondoger , thanks for reporting the issue and linking a PR, routing to team-engine for review.

  3. github-actions commented on May 25, 2026

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  4. locked as resolved and limited conversation to collaborators on May 25, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    CICDRun CI/CDengineflutter/engine related. See also e: labels.p: vector_graphicsThe vector_graphics package setpackageflutter/packages repository. See also p: labels.team-engineOwned by Engine team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions