Skip to content

luminance() crashes with 'Invalid index' when Sass color functions return non-integer channel values #42447

@georiv

Description

@georiv

Description

bootstrap/scss/_functions.scss crashes with $n: Invalid index when compiled with Sass 1.x alongside color definitions that use color.adjust(), color.scale(), or other modern Sass color functions.

Root cause

Sass 1.x color functions can return non-integer channel values. For example:

$warning: color.adjust(#f7941c, $lightness: -5%);
// red channel → 241.0063829787 (not 241)

Bootstrap's luminance() function in _functions.scss then uses the raw channel value directly as a list index:

$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, $value + 1));

nth() requires an integer index. Passing 242.006 crashes with:

Error: $n: Invalid index 242.006 for a list with 256 elements.
  _functions.scss 191:104  luminance()

Suggested fix

Wrap the index in round() and clamp to the valid range before passing to nth():

$value: if(divide($value, 255) < .04045, divide(divide($value, 255), 12.92), nth($_luminance-list, min(255, max(0, round($value))) + 1));

Environment

  • Bootstrap: 5.3.8
  • Sass (dart-sass): 1.100.0
  • Triggered by any color.adjust() / color.scale() call producing non-integer RGB channels

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions