Generate unique class name in css file if it referenced in JSX

[yudium]

I want to request a feature. Rather than having to use styleName on every element we can put it only on parent element and use existing global class. So JSX syntax will more simpler to look.

For example when I use bootstrap:

<div styleName="container">
    <div className="card" styleName="card">
        <div className="card-header" styleName="card-header">Title Here</div>
        <div className="card-body" styleName="card-body">Body Here</div>
    </div>
</div>

Will much simpler to look if we put styleName only on parent element:

<div styleName="container">
    <div className="card">
        <div className="card-header">Title Here</div>
        <div className="card-body">Body Here</div>
    </div>
</div>

so SCSS:

.container {  <-- generate only this to be a unique class Name
    margin: 0;
    .card {
        font-size: 14px;
        .card-header {
             background: #ddd;
        }
        .card-body {
             background: #f8f8f8;
        }
    }
}