Use localByDefault plugin for both local and global behaviours.

[fxb]

The postcss-modules-local-by-default plugin actually has the modes local, global and pure (link).

If the plugin is NOT added in the global case, shorthand selectors (link) will result in an error.

Shorthand selectors are actually quite useful in SCSS with nesting.

SCSS

:local {
  .foo {
    color: red;
  }

  .bar {
    color: blue;
  }
}

CSS

:local .layer {
  color: red;
}

:local .bar {
  color: blue;
}

The resulting error message (without using the plugin) is:

Unexpected comma (",") in :local block

Adding the postcss-modules-local-by-default plugin with the correct global mode will enable this syntax.

---

I created this first commit directly on github.com. I can add some test cases to this PR later.

[fxb]

@madyankin I've added tests for the change now.

[madyankin]

@fxb thank you Felix! Published. Sorry for keeping you waiting so long

[fxb]

Thanks a lot! No worries :)