A pof of how I would like CSS Modules to be. Warning this could all be bullshits! http://astexplorer.net/#/SfDfBXptzr

my_css_modules.css

/** stuff.css */
:root {
  --magic: {
    font-size: 3em;
  }
}

/** my-component.css */

/* @define MyComponent */

@import 'stuff.css';

:root body,
:root .foo { /* global css */
  background: hotpink;
}

:scope { /* component root */
  all: initial;
  display: block;
  background-color: red;
  @apply --magic; /* composes with standard features */
}

/* 
  Descendants.
  They are compiled as if they were all :scope prefixed.
  In fact they could.
*/
.thing {
  background-color: green;
}

.thing:hover {
  background-color: yellow;
}

/** my-component compiled */

body,
.foo { /* global css */
  background: hotpink;
}

._ABC_MyComponent {
  display: block;
  background-color: red;
  font-size: 3em;
}

._ABC_MyComponent_thing {
  background-color: green;
}

._ABC_MyComponent_thing:hover {
  background-color: yellow;
}

/*
  {
    ':root': '_ABC_MyComponent',
    'thing': '_ABC_MyComponent_thing'
  }
  
  <div class=":root">
    <div class="thing">hey</div>
  </div>
  
  becomes
  
  <div class="_ABC_MyComponent">
    <div class="_ABC_MyComponent_thing">hey</div>
  </div>
*/

/** Next step is to *Atomify* everything */

.display\:block { display: block; }
.backgroundColor\:red { background-color: red; }
.fontSize\:3em { font-size: 3em; }

.backgroundColor\:green { background-color: green; }

/*
 { 
    '_ABC_MyComponent': ['display:block', 'backgroundColor:red', 'fontSize:3em'],
    '_ABC_MyComponent_thing': ['backgroundColor:green']
 }
 
  <div class="_ABC_MyComponent">
    <div class="_ABC_MyComponent_thing">hey</div>
  </div>
  
  becomes
  
  <div class="_ABC_MyComponent display:block backgroundColor:red fontSize:3em">
    <div class="_ABC_MyComponent_thing backgroundColor:green">hey</div>
  </div>
  
  the rest (:hover states etc) is kept as is
*/