Composing Global Classes in CSS Modules from SCSS

Question

How do I compose from a global class in CSS Modules, when writing in SCSS?

According to (my understanding of) CSS Module's Composing from global class names documentation, the following should work:

:global {
  .bar {
    color: purple;
  }
}

.my-icon {
  composes: bar from global;
}

But I receive the following error:

referenced class name "bar" in composes not found

How can I change the above to properly compose from a global class?

Answer 1

You can do it this way:

:global(.bar) {
  color: red;
}

.myIcon {
  composes: bar from global;
}

Here is a link to a sandbox I created with a working example