thread panic with sass/scss relative color

[ClayCore]

I'm currently in the midst of theming a Vue app with SCSS and I've got colors defined like so

// variables.scss
$color-red: hsl(0 50% 50%);
$color-light-red: hsl(from #{$color-red} h s + 10 l + 20);
$color-dark-red: hsl(from #{$color-red} h s - 10 l - 10);

$color-vivid-red: hsl(from #{$color-red} h 100% l);
$color-vivid-light-red: hsl(from #{$color-vivid-red} h s l + 20);
$color-vivid-dark-red: hsl(from #{$color-vivid-red} h s l - 20);

// ...

The output is invalid however, so I tried an alternative approach

$color-red: hsl(0 50% 50%);
$color-light-red: hsl(from $color-red h s + 10 l + 20);
$color-dark-red: hsl(from $color-red h s - 10 l - 10);

This also doesn't work, but doesn't cause a crash. Finally I use the solution MDN provides with regular CSS

$color-red: hsl(0 50% 50%);
$color-light-red: hsl(from #{$color-red} h calc(s + 10) calc(l + 20));
$color-dark-red: hsl(from #{$color-red} h calc(s - 10) calc(l - 10));

However the above causes a thread panic with parcel.

Full backtrace

> yarn run start
yarn run v1.22.22
$ parcel serve src/index.pug --no-cache -p 3002
Server running at http://localhost:3002
/ Building index.mjs...
DEPRECATION WARNING: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.

More info: https://sass-lang.com/d/legacy-js-api
\ Building HomePage.vue...
thread '<unnamed>' panicked at src\values\percentage.rs:81:12:
internal error: entered unreachable code
stack backtrace:
   0:     0x7ffbd79da8ed - napi_register_module_v1
   1:     0x7ffbd71f8e3d - <unknown>
   2:     0x7ffbd79d00c1 - napi_register_module_v1
   3:     0x7ffbd79dc6da - napi_register_module_v1
   4:     0x7ffbd79dbfa9 - napi_register_module_v1
   5:     0x7ffbd79dce10 - napi_register_module_v1
   6:     0x7ffbd79dc8cb - napi_register_module_v1
   7:     0x7ffbd79dc849 - napi_register_module_v1
   8:     0x7ffbd79dc832 - napi_register_module_v1
   9:     0x7ffbd79de937 - napi_register_module_v1
  10:     0x7ffbd79deb02 - napi_register_module_v1
  11:     0x7ffbd72c0d64 - <unknown>
  12:     0x7ffbd73184c5 - <unknown>
  13:     0x7ffbd7315cb8 - <unknown>
  14:     0x7ffbd728263d - <unknown>
 |  0xBuilding env.js...7ffbd73e07a1
<unknown>
  17:     0x7ffbd722e2c5 - <unknown>
  18:     0x7ffbd7241549 - <unknown>
  19:     0x7ffbd7225fa0 - <unknown>
  20:     0x7ffbd7220ec6 - <unknown>
  21:     0x7ffbd752dccf - <unknown>
  22:     0x7ffbd796235d - <unknown>
  23:     0x7ffbd78e714b - <unknown>
/ Building env.js...
  25:     0x7ff73c4cf210 - node::Stop
  26:     0x7ff73ce57d29 - v8::internal::Builtins::code_handle
  27:     0x7ff73ce57909 - v8::internal::Builtins::code_handle
  28:     0x7ff73ce57bcc - v8::internal::Builtins::code_handle
  29:     0x7ff73ce57a30 - v8::internal::Builtins::code_handle
  30:     0x7ff73cf305f1 - v8::internal::SetupIsolateDelegate::SetupHeap
  31:     0x7ff73cebf2c2 - v8::internal::SetupIsolateDelegate::SetupHeap
  32:     0x7ff73ceef4f3 - v8::internal::SetupIsolateDelegate::SetupHeap
  33:     0x7ff73cf7b46c - v8::internal::SetupIsolateDelegate::SetupHeap
  34:     0x7ff73cee0e16 - v8::internal::SetupIsolateDelegate::SetupHeap
  35:     0x7ff73cebd28b - v8::internal::SetupIsolateDelegate::SetupHeap
  36:     0x7ff73cd9b0c9 - v8::internal::Execution::CallWasm
  37:     0x7ff73cd9b1eb - v8::internal::Execution::CallWasm
  38:     0x7ff73cd9bc9a - v8::internal::Execution::TryCall
  39:     0x7ff73cd7875a - v8::internal::MicrotaskQueue::RunMicrotasks
  40:     0x7ff73cd784fa - v8::internal::MicrotaskQueue::PerformCheckpointInternal
  41:     0x7ff73ce57d29 - v8::internal::Builtins::code_handle
  42:     0x7ff73ce57909 - v8::internal::Builtins::code_handle
  43:     0x7ff73ce57bcc - v8::internal::Builtins::code_handle
  44:     0x7ff73ce57a30 - v8::internal::Builtins::code_handle
  45:     0x7ff73cf305f1 - v8::internal::SetupIsolateDelegate::SetupHeap
  46:      0x1e828a73b78 - <unknown>
  47:     0x7ff73cebd38f - v8::internal::SetupIsolateDelegate::SetupHeap
  48:     0x7ff73cebcf8b - v8::internal::SetupIsolateDelegate::SetupHeap
  49:     0x7ff73cd9b09f - v8::internal::Execution::CallWasm
  50:     0x7ff73cd9a98f - v8::internal::Execution::Call
  51:     0x7ff73ce7eb6c - v8::Function::Call
  52:     0x7ff73c530001 - node::CallbackScope::~CallbackScope
  53:     0x7ff73c5303a0 - node::CallbackScope::~CallbackScope
  54:     0x7ff73c52821f - v8::internal::compiler::Operator::EffectOutputCount
  55:     0x7ff73c487dc3 - v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth
  56:     0x7ff73c47a368 - v8::base::CPU::has_sse
  57:     0x7ff73c5648a7 - uv_timer_stop
  58:     0x7ff73c560e4b - uv_async_send
  59:     0x7ff73c5605dc - uv_loop_init
  60:     0x7ff73c56077a - uv_run
  61:     0x7ff73c52f675 - node::SpinEventLoop
  62:     0x7ff73c3cba00 - v8::internal::interpreter::BytecodeLabel::bind
  63:     0x7ff73c3c7248 - v8::internal::interpreter::BytecodeLabel::bind
  64:     0x7ff73c550e4d - uv_poll_stop
  65:     0x7ff73d448a70 - v8::internal::compiler::RepresentationChanger::Uint32OverflowOperatorFor
  66:     0x7ffc12187ac4 - BaseThreadInitThunk
  67:     0x7ffc1259a8c1 - RtlUserThreadStart
error Command failed with exit code 3221226505.

I'm using the above colors with the following theming mixin and function

// themes.scss
@use "variables" as *;

$themes: (
    light: (
        rootBackgroundColor: $color-dark,
        primaryBackgroundColor: $color-light,
        primaryTextColor: $color-dark,
        primaryTextMuted: hsl(from #{$color-dark} h s 33%),
        bodyLinkColor: $color-red,
        bodyBorderColor: $color-primary-border-darker,
        bodyGrooveBorderColor: hsl(from #{$color-dark} h s 90%),
        bodyZebraColor: hsl(0 0% 0% / 7.5%),
        surfaceBackgroundColor: $color-red,
        surfaceTextMuted: hsl(from #{$color-light} h s l / 60%),
        surfaceTextColor: $color-light,
        surfaceLinkColor: $color-light,
        surfaceBorderColor: $color-surface-border,
        surfaceMutedBorderColor: hsl(from #{$color-dark-red} h s l / 50%),
        surfaceGrooveBorderColor: $color-dark-red,
        borderThin: 1px,
        borderThick: 2px,
    ),
    dark: (
        rootBackgroundColor: $color-dark,
        primaryBackgroundColor: $color-dark,
        primaryTextColor: $color-light,
        primaryTextMuted: hsl(from #{$color-light} h s 77%),
        bodyLinkColor: $color-red,
        bodyBorderColor: $color-primary-border-lighter,
        bodyGrooveBorderColor: hsl(from #{$color-dark} h s 40%),
        bodyZebraColor: hsl(0 0% 100% / 7.5%),
        surfaceBackgroundColor: $color-red,
        surfaceTextMuted: hsl(from #{$color-light} h s l / 60%),
        surfaceTextColor: $color-light,
        surfaceLinkColor: $color-light,
        surfaceBorderColor: $color-surface-border,
        surfaceMutedBorderColor: hsl(from #{$color-light-red} h s l / 50%),
        surfaceGrooveBorderColor: $color-light-red,
        borderThin: 1px,
        borderThick: 2px,
    ),
);

// mixins.scss
@use "sass:map";

@use "themes" as *;
@use "variables" as *;

$theme-supermap: $themes;

@mixin themify() {
    $theme-supermap: $themes !default !global;
    @each $theme, $map in $theme-supermap {
        .theme-#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map.get(map.get($theme-supermap, $theme), "#{$key}");
                $theme-map: map.merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }

            @content;
            $theme-map: null !global;
        }
    }
}

@function themed($key) {
    @return map.get($theme-map, $key);
}

I'm not exactly sure why this happens, and I don't really know how to test SASS/SCSS on its own without parcel.