Compile-time CSS generation

It would be fantastic to generate CSS at compile-time instead of runtime, mainly because it would reduce the output JS size to near zero, making #72 obsolete.

Example:

val abc = style(display.block)
// Macro turns ↑ into something like ↓
val abc = StyleA(…, PreGeneratedCss("display:block"))

It would have to handle autoprefixing too.

How/could it determine whether variables are static/dynamic to handle marginLeft(zzz.px * 2)?

Even if it just takes care of the easy, static cases, I wonder how large the JS size savings could be…

[japgolly]

Oh very cool, thanks! How do you handle supporting both dev and prod modes? (Specifically, controlling whether the macros generate verbose or minimised CSS?)

Also, a few weeks ago I did a prototype for scalacss v2 and it worked 🎉 I’m envisioning a future where you just paste normal CSS and it calls out to the JS ecosystem at compile-time to do things like validation, minification, auto-prefixing, etc. The idea of a Scala-based DSL for CSS has turned out to be a failure in my opinion.

1. It’s too hard to type all possibilities for ~10% of CSS attributes.
2. the CSS world moves too fast and it’s not feasible to try to keep up.
3. Personally I prototype my HTML & CSS using just HAML with embedded CSS and then once the prototypes are done, I have to copy the styles from CSS which the whole world understands to a special DSL which only Scala understands. My experience here might not be indicative of the whole ecosystem but it’s just become the most efficient workflow for me.

I’m envisioning something like this:

    val header =
      css"""color: #3659e2;
           |margin-bottom: $size;
           |""".stripMargin

    val betterHeader =
      css"""$header
           |font-weight: bold;
           |""".stripMargin

It would still need some custom stuff to be able to support things like addClassNames but should be quite a small surface area.

What do you think?

[ddworak]

We use scalacss with compile-time / backend CSS rendering quite extensively in udash-css, while reusing most of the DSL. The output JS is just the classnames (safe to use though!). You can check https://guide.udash.io/frontend/templates or dive into the code https://github.com/UdashFramework/udash-core/tree/master/css, https://github.com/UdashFramework/udash-core/blob/master/macros/src/main/scala/io/udash/css/macros/StyleMacros.scala