LESS preprocessor idea

1-styles.less

/* Source LESS file */

.my-component {
    background: #eee;
    
    .subcomponent {
        color: #000;
    }
    
    &.extreme {
        background: red;
        
        .subcomponent {
            font-weight: bold;
        }
    }
}

2-styles.css

/* Generated CSS file */

.my-component {
    background: #eee;
}
/* Note that it keeps original definition so that even if some of your HTML
   doesn't go thru the build system, it will continue to work fine, just won't
   be quite as performant. */
.my-component .subcomponent,
.my-component__subcomponent {
  color: #000;
}
.my-component.extreme,
.my-component--extreme {
  background: red;
}
.my-component.extreme .subcomponent,
.my-component--extreme__subcomponent {
  font-weight: bold;
}

3-in.html

<!-- Source HTML file -->

<div class="my-component class-with-no-rules">
    <span class="subcomponent">Hello world.</span>
</div>
<div class="my-component extreme class-with-no-rules">
    <span class="subcomponent">Hello world.</span>
</div>

4-out.html

<!-- Generated HTML file -->

<div class="my-component class-with-no-rules">
    <span class="my-component__subcomponent">Hello world.</span>
</div>
<div class="my-component--extreme class-with-no-rules">
    <span class="my-component--extreme__subcomponent">Hello world.</span>
</div>