CSS Local scope with importing

0 - MyComponent.jsx

import React from "react";
import styles from "./MyComponent.css";

export class MyComponent {
	render() {
		return <div className={styles.root}>
			<div className={styles.inner}>
				<button className={styles.sendButton}>Send</button>
			</div>
		</div>
	}
}

1 - MyComponent.css

:local(.root) {
	background: #EEE;
}

:local(.inner) {
	border-top: 1px solid #333;
}

:local(.sendButton):extends(.button.primary from "./button.css") {}

2 - button.css

:local(.button) {
	border: 1px solid black;
}

:local(.button.default) {
	background: #777;
}

:local(.button.primary) {
	background: #963;
}

3 - Result.md

<div class="_3yaFGStEE5HZR76pgXnQ9U">
  <div class="_2at6lD9krUatPEotTdhwuH">
    <button class="_1LL5pTxICz82tUFVFhHfGJ _2pRVOQgXQi_rLFokPO3lXJ _18hpVr2Jy_wfoEMxTtmry6">
      Send
    </button>
  </div>
</div>

._2pRVOQgXQi_rLFokPO3lXJ {
  border: 1px solid black;
}

._2pRVOQgXQi_rLFokPO3lXJ._1PenEhkLZRXb330B49idpc {
  background: #777;
}

._2pRVOQgXQi_rLFokPO3lXJ._18hpVr2Jy_wfoEMxTtmry6 {
  background: #963;
}
._3yaFGStEE5HZR76pgXnQ9U {
  background: #EEE;
}

._2at6lD9krUatPEotTdhwuH {
  border-top: 1px solid #333;
}

._1LL5pTxICz82tUFVFhHfGJ {}

What do I get if I import button.css into a JS module, since it's nested?

import styles from "./button.css";

styles.button === "_2pRVOQgXQi_rLFokPO3lXJ"
styles.default === "_1PenEhkLZRXb330B49idpc"
styles.primary === "_18hpVr2Jy_wfoEMxTtmry6"

._2pRVOQgXQi_rLFokPO3lXJ {
  border: 1px solid black;
}

._2pRVOQgXQi_rLFokPO3lXJ._1PenEhkLZRXb330B49idpc {
  background: #777;
}

._2pRVOQgXQi_rLFokPO3lXJ._18hpVr2Jy_wfoEMxTtmry6 {
  background: #963;
}

button.css behave exactly as MyComponent.css. Actually you could import MyComponent.css from another component css. i. e.:

/* MyBigComponent.jsx */
:local(.bigSendButton):extends(.sendButton from "./MyComponent.css") {
  font-size: 200%;
}

i was wondering why the css-loader implementation isn't using :extends. i'm guessing because people wanted to extend from multiple sources? i think that's a pretty terrible idea though because it hugely increases the complexity of the css inheritance chain.