How does :local(.class) { } work in CSS Modules?

Question

I've started using CSS modules, however I cannot find any examples of how exactly this works:

:local(.class){
    /* some property */
}

All classes are local by default, so what does :local or :global mean?

Answer 1

That's right, all classes are local by default. But if you switched a block to global and you need a local selector inside, this where you need local applied.

:global {
   .a {
    ...
  }
  :local(.b) {
    ...
  }
}

compiles to

.a {
  ...
}
.b___1bJNe {
  ...
}