Exporting SCSS variables into JavaScript/Svelte via CSS Modules without lint warning

Question

I'm attempting to share the variables that are defined in a SASS file with a svelte component via the :export functionality as it is defined here.

I know that it is possible as this works exactly as I expect/want it to:

// styleExport.module.scss
$colors: (
  red: #ff0000,
  green: #00ff00, 
  blue: #0000ff
)

:export {
  @each $color, $value in $colors {
    #{$color}: $value;
  }
}

// component.svelte
<div><!-- some markup--></div>

<script>
  import importedColors from "../styleExport.module.scss";
  console.log(importedColors);
/*
 produces expected output on the page of: 
 {red: '#f00f00', green: '#00ff00', blue: '#0000ff'}
*/
</script>

This works, but generates the warning:

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 '"" + $color'.

When I update the styleExport.module.scss file to use their requested interpolation implementation of:

:export {
  @each $color, $value in $colors {
    #{'"" + $color'}: $value;
  }
}

I get the error:

 You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser
 File: /app/src/lib/styles/testExport.module.scss
[build ]   1  |
[build ]   2  |  $colors: (
[build ]      |          ^
[build ]   3  |    red: #f00,
[build ]   4  |    green: #0f0,

My questions are:

• Is there a way to suppress the interpolation warning that I'm seeing in my initial implementation?
• If not, how do I implement this in a way that matches the expected interpolation standards

Answer 1

This works.

:export {
  @each $color, $value in $colors {
    #{"" + $color}: $value;
  }
}

...I'm infuriated