Trying to figure out how to programmatically generate CSS class names using SASS + CSS Modules + babel-react-css-modules

text.module.scss

$colors: ("white": $white, "yellow": $yellow, "green": $green, "blue": $blue);

@each $name, $color in $colors {
  // this programmatically generates 4 class namaes in the resultant css.
  // but when Babel parses the module to pull out the class names, it just
  // gets "bg-color-#${name}" since postcss-scss doesn't compile the SCSS
  // (https://github.com/postcss/postcss-scss) when used with babel-react-css-modules
  // (https://github.com/gajus/babel-plugin-react-css-modules#configurate-syntax-loaders)
  .bg-color-#{$name} {
    background-color: #{$color};
  }
}