How to I solve this sass interpolation issue

Question

WARNING: You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "white"). If you really want to use the color value here, use '"" + $colorName'.

   ╷
93 │       .text-#{$colorName}-#{$shade} {
   │               ^^^^^^^^^^
   ╵
    src\assets\styles\scss\_palette.scss 93:15  @import
    stdin 44:9  

I tried something like this as recommended,

.text-#{'"" + $colorName'}-#{$shade} {

But just adding the quotes didn't work. I am using angular cli.

Answer 1

Recently upgraded to the Angular9 and was facing the same issue. In my case updting this

.#{$colorName}#{$hue}-bg {
        background-color: $color !important;
}

to

.#{"" + $colorName}#{$hue}-bg {
        background-color: $color !important;
}

worked.

Answer 2

Found this post in a GitHub issue (https://github.com/sass/libsass/issues/2409#issuecomment-311932161). The underlying issue are unquoted map keys.

(Credits to @xzyfer.)

$testMap: (
-    white: (color: white) // white is a Color object
+    "white": (color: white) // "white" is a String object
);

@each $key in map-keys($testMap) {
    .test-btn-#{$key} {
        $colors: map_get($testMap, $key);

        color: map-get($colors, color);
    }
}