SCSS themify not working with Fluent UI React - sass

Question

I'm working with a fluent UI react command bar. I'm using the SCSS themify pattern to theme elements.
Theming works for the top level command bar class names, but certain themify blocks seem to be skipped entirely.
For example, the block shown below never executes so the icon path will have red fill.
.chartCommandIcon {
path{
fill: red;
#include themify{
fill: themed('color-theme-accent');
}
}
}
This is another example. The themify block works on the top level commandItem styles, but not on the dropdownMenu (a fluent UI subMenu). The .dropdownMenu selector does work however. If I set the dropdown menu background-color: red outside of the themify block, the color is updated.
.commandItem{
#include themify{
color: themed('color-text-rest'); // works here (top level?)
}
}
.dropdownMenu{
background-color: red; // works here
#include themify{
background-color: themed('color-bg-panel-contextual'); // not here
}
}
Any ideas why this may be happening would be super helpful! Thanks : )
Here is the themify SCSS mixin code taken from an external package.
/// Creates theme variations
///
/// #param {Map} $themes - Theme map to loop through. Optional.
#mixin themify($themes: $themes) {
// for each theme, get its name and color variable map:
#each $theme, $colors in $themes {
// re-export the color map under the global scope so the
// `themed` function below can access it inside the content:
$theme-map: $colors !global;
:global(.#{$default-prefix}-#{$theme}) & {
#content;
}
// reset the theme-map global variable:
$theme-map: null !global;
}
}
/// Gets a value from the color map.
///
/// #param {String} $key - Name of the color variable
/// #param {Map} $theme-map - Theme map to use. Optional.
///
/// #returns {String} The color for the given key
#function themed($key, $theme-map: $theme-map) {
$value: map-get($theme-map, $key);
#if not $value {
#error 'There is no `#{$key}` in your theme colors.';
}
#return $value;
}