[vector_graphics_compiler] Add modern HSL color parsing

[fondoger]

Description

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

This moves HSL/HSLA function parsing from parser.dart into colors.dart, following the existing parseCssRgb / parseRgbFunction structure. It also adds support for the same practical legacy/modern syntax split already supported for RGB:

• legacy comma-separated syntax, e.g. hsl(270, 100%, 76%)
• modern space-separated syntax, e.g. hsl(270 100% 76% / 0.5)

This is intentionally scoped to the existing regex-based numeric parser style; it does not attempt to implement the full CSS Color 4 grammar.

Tests

• Added parseCssHsl record parser tests covering legacy syntax, modern syntax, whitespace/case variations, decimal/negative tokens, and invalid syntax.
• Added SvgParser.parseColor tests for modern HSL/HSLA conversion and HSLA alpha behavior.
• Added HSLA alpha boundary and clamp tests for 0, 0%, 1, 100%, 50%, -0.5, -10%, 2, and 150%.

Ran locally:

flutter test test/colors_test.dart test/parsers_test.dart
dart analyze lib/src/svg/colors.dart lib/src/svg/parser.dart test/colors_test.dart test/parsers_test.dart

Related Issues

Fixes flutter/flutter#186153

[fondoger]

@andywolff @gaaclarke this is a follow-up PR to #11619.

It addresses the follow-up suggestions from that review:

• Moves HSL/HSLA parsing into colors.dart as parseCssHsl / parseHslFunction, following the existing RGB parser structure and adding modern space-separated HSL/HSLA syntax support.
• Adds explicit HSLA alpha boundary/clamp coverage for values such as 0, 0%, 1, 100%, 50%, -0.5, -10%, 2, and 150%.

Related issue: flutter/flutter#186153

[gemini-code-assist]

Code Review

This pull request introduces support for modern space-separated HSL and HSLA color syntax in the vector_graphics_compiler package. It adds new parsing logic and regex patterns, refactors the SVG parser to use these centralized functions, and includes comprehensive unit tests. Feedback recommends optimizing the HSL-to-RGB conversion by reducing list allocations and ensuring that saturation, luminance, and final RGB values are properly clamped.

I am having trouble creating individual review comments. Click here to see my feedback.

packages/vector_graphics_compiler/lib/src/svg/colors.dart (351-391)

The HSL to RGB conversion logic can be optimized by avoiding multiple list allocations and reassignments. Using a simple loop or direct index access is more efficient. Additionally, saturation and luminance values should be clamped to the [0, 100] range, and the final RGB values should be clamped to [0, 255] to ensure they are valid for Color.fromARGB.

Color _cssHslRecordToColor(CssHslRecord record) {
  final double hue = _parseHslValue(record.h) / 360 % 1;
  final double saturation = _parseHslValue(record.s).clamp(0, 100) / 100;
  final double luminance = _parseHslValue(record.l).clamp(0, 100) / 100;
  final int alpha = _parseHslAlpha(record.a);
  final List<double> rgb = <double>[0, 0, 0];

  if (hue < 1 / 6) {
    rgb[0] = 1;
    rgb[1] = hue * 6;
  } else if (hue < 2 / 6) {
    rgb[0] = 2 - hue * 6;
    rgb[1] = 1;
  } else if (hue < 3 / 6) {
    rgb[1] = 1;
    rgb[2] = hue * 6 - 2;
  } else if (hue < 4 / 6) {
    rgb[1] = 4 - hue * 6;
    rgb[2] = 1;
  } else if (hue < 5 / 6) {
    rgb[0] = hue * 6 - 4;
    rgb[2] = 1;
  } else {
    rgb[0] = 1;
    rgb[2] = 6 - hue * 6;
  }

  for (int i = 0; i < 3; i++) {
    rgb[i] += (1 - saturation) * (0.5 - rgb[i]);
    if (luminance < 0.5) {
      rgb[i] *= luminance * 2;
    } else {
      rgb[i] = luminance * 2 * (1 - rgb[i]) + 2 * rgb[i] - 1;
    }
    rgb[i] *= 255;
  }

  return Color.fromARGB(
    alpha,
    rgb[0].round().clamp(0, 255),
    rgb[1].round().clamp(0, 255),
    rgb[2].round().clamp(0, 255),
  );
}

[fondoger]

Thanks for the review note. I pushed a follow-up commit addressing this feedback:

• Clamps HSL saturation and lightness to the supported percentage range before conversion.
• Clamps final RGB channels before creating Color.fromARGB.
• Reworked the HSL-to-RGB conversion to avoid repeated map(...).toList() allocations.
• Added saturation/lightness clamp tests for values below 0% and above 100%.

The alpha percentage conversion still uses percent / 100 * 255 (rather than * 2.55) to avoid floating-point rounding cases such as 50% producing 127.

Ran locally:

flutter test test/colors_test.dart test/parsers_test.dart
dart analyze lib/src/svg/colors.dart lib/src/svg/parser.dart test/colors_test.dart test/parsers_test.dart

[andywolff]

Looks good, thanks!

[gaaclarke]

lgtm, thanks

[auto-submit]

autosubmit label was removed for flutter/packages/11657, because - The status or check suite Mac_x64 ios_build_all_packages master has failed. Please fix the issues identified (or deflake) before re-applying this label.

[fondoger]

Hi @gaaclarke, could you please trigger another CI/CD run? This run failed due to some transient issues.

[gaaclarke]

Hi @gaaclarke, could you please trigger another CI/CD run? This run failed due to some transient issues.

👍 hit rerun