Generate const variable assignments + style all for classes?

[joshburgess]

Hi, I tried this out last night and noticed it converts everything to cssRule() calls. I was just wondering: Have you written anything that converts only the global css element rules (not classes) to use cssRule and converts all class rules to variable assignments or know of a way we could?

For example,

.display-block {
  display: block;
}

would, ideally, be converted to:

export const DISPLAY_BLOCK = style({
  display: 'block',
})

I'm sure this is much more difficult, but I'm just asking, because I've been working on converting several thousand lines of CSS from a library into TypeStyle styles, and it's taking me a very long time. So, I'm just wondering whether or not you think we could come up with something that could accomplish this.

[notoriousb1t]

I wrote this to power the http://typestyle.io/converter/. I am willing to work on something like that, but I am not sure how long that would take. The hardest part is dealing with $nest and at-rules like media. That is, it would have to invert all of those things to work properly.

I can take a look at the code tonight and see if I can find a path to also outputting the CSS that way.

[joshburgess]

Thanks, @notoriousb1t

[notoriousb1t]

After walking through the code and making an initial attempt, I believe this should be possible. It is going to require a rewrite of the conversion library, so it isn't a short term solution. I'm going to branch to work on that in the meantime.