I forgot to mention: If the plan with USWDS v3 is to drop support for non-Dart SASS (i.e. use SASS module syntax), then this could also be solved by using the new built-in math.pow, which I assume performs reasonably-well. A look-up would still probably be faster, but at least in that case you wouldn't need to include a huge list of 256 float values 😅

The main advantage of this implementation is that it works across all compilers.

Thanks for the review, @mejiaj !

I wonder if we should move the $luminance-values somewhere else. Either inside the function or to core/_variables.scss.

Yeah, I think that could make sense to move it to _variables.scss. Maybe under a new section "Luminance", since I don't see an existing section that would be a great fit.

Keeping it outside the function might be a soft preference for me, since while I don't know how SASS optimizes variables within functions, I might worry if it's the sort of thing where the 255-entry list would be allocated/garbage collected for every call.

Keeping it outside the function might be a soft preference for me, since while I don't know how SASS optimizes variables within functions, I might worry if it's the sort of thing where the 255-entry list would be allocated/garbage collected for every call.

That's a good point. Moving this to final review 🙂

I had attempted to measure results in (native) Dart Sass, but the math of the previous logic seems to not work at all for me in Dart Sass, due to a division by zero (see related #4438). Thus, this refactoring could also serve as a bug fix for Dart Sass.

For what it's worth, digging into this, it might be related to maximum integer size in Dart, causing the factorial function to return 0, and since the result of that is used as a denominator in exp, it's a division by zero.

Example script to reproduce:

@function factorial($value) {
  $result: 1;

  @if $value == 0 {
    @return $result;
  }

  @for $index from 1 through $value {
    $result: $result * $index;
    @debug 'index #{$index}, result #{$result}';
  }

  @return $result;
}

@debug factorial(99);

example.scss:10 Debug: index 1, result 1
example.scss:10 Debug: index 2, result 2
example.scss:10 Debug: index 3, result 6
...
example.scss:10 Debug: index 65, result -9223372036854775808
example.scss:10 Debug: index 66, result 0
...
example.scss:10 Debug: index 99, result 0

Thank you!

@thisisdano @aduth Just wanted to pop in and say THANK YOU THANK YOU THANK YOU. It has always confused me why the CSS build step took so long in my application and this made a noticeable dent.