@at-root breaks with @use above it

I don't know if this is a bug or some intentional language design gotcha I'm not aware of.

Anyway, I migrated our styles to use math.div(). That worked great, or so I thought...

Apparently @at-root breaks when used with @use above it:

//styles.scss

.namespace {
    @import "foobar";
}

//_foobar.scss

@use "sass:math";

@at-root {
    .foo {
        width: math.div(6px, 2);
    }
}

.bar {
    width: math.div(6px, 2);
}

If transpiles into the following:

// styles.css

.namespace .foo {
    width: 3px;
}
.namespace .bar {
    width: 3px;
}

I expected the following:

// styles.css

.foo {
    width: 3px;
}

.namespace .bar {
    width: 3px;
}

I tried the following:

• Using @include meta.load-css("foobar") instead of @import
• Wrapping @at-root within a mixin and calling it immediately
• Move @use below @at-root (errors out as expected, but thought I'd try)

--

If I remove @use and just use the division symbol like previously it outputs as expected.