Amazing stuff! I am curious about the developer integration though.

Are the class names generated via the symbol names? If so, how optimised is the output?

For example now, a button would look something like:

.btn { border: none; padding: 2rem; }

.btn--primary { background-color: orange; color: white; }

.btn--secondary { background-color: purple; color: pink; }

Is the generated code attaching all styles to a single class? This really bulks out the size of the CSS file by code duplication. Instead of the above, the output of the CSS would look something like:

.btn--primary { border: none; padding: 2rem; background-color: orange; color: white; }

.btn--secondary { border: none; padding: 2rem; background-color: purple; color: pink; }