Large numbers of css declarations balloon js output file size.

It appears that the use of @inline in scalacss can cause unregulated growth. I have an (unfortunately proprietary) project that I’m attempting to optimize. It contains a large number (33) of instances of StyleSheet.Inline, with a total of 109 uses of style. Compilation size (due to many factors which I’m currently investigating), is at 2.7mb.

A serious culprit visible while eyeballing fastOptJS output is inline expansion of a loop somewhere in the style definitions:

var x$58 = $as_Lscalacss_AVs(jsx$143);
  $m_Lscalacss_StyleS$();
  var c$29 = $m_Lscalacss_Cond$().empty$1;
  var d$27 = new $c_sci_Map$Map1().init___O__O(c$29, x$58);
  var this$431 = $m_s_package$().Vector$1;
  var jsx$146 = this$431.NIL$6;
  var jsx$145 = $m_s_None$();
  var this$432 = $m_s_package$().Vector$1;
  var jsx$144 = this$432.NIL$6;
  var this$433 = $m_s_package$().Vector$1;
  var jsx$142 = new $c_Lscalacss_DslBase$ToStyle().init___Lscalacss_StyleS(new $c_Lscalacss_StyleS().init___sci_Map__sci_Vector__s_Option__sci_Vector__sci_Vector(d$27, jsx$146, jsx$145, jsx$144, this$433.NIL$6));
  this.dsl__Lscalacss_mutable_StyleSheet$Base$dsl$();
  this.dsl__Lscalacss_mutable_StyleSheet$Base$dsl$();
  var this$435 = $m_Lscalacss_Attrs$cursor$();
  var x$59 = new $c_Lscalacss_AV().init___Lscalacss_Attr__T(this$435.attr$2, "pointer");
  var this$437 = $m_Lscalacss_AVs$();
  var array$32 = [];
  var this$438 = this$437.apply__Lscalacss_Attr__T__Lscalacss_AVs(x$59.attr$1, x$59.value$1);
  var start$30 = 0;
  var end$30 = $uI(array$32.length);
  var z$30 = this$438;
  x$30: {
    var jsx$138;
    _foldl$30: while (true) {
      if ((start$30 === end$30)) {
        var jsx$138 = z$30;
        break x$30
      } else {
        var temp$start$30 = ((1 + start$30) | 0);
        var arg1$36 = z$30;
        var index$34 = start$30;
        var arg2$30 = array$32[index$34];
        var x$1$43 = $as_Lscalacss_AVs(arg1$36);
        var x$2$28 = $as_Lscalacss_AV(arg2$30);
        var temp$z$30 = x$1$43.add__Lscalacss_Attr__T__Lscalacss_AVs(x$2$28.attr$1, x$2$28.value$1);
        start$30 = temp$start$30;
        z$30 = temp$z$30;
        continue _foldl$30
      }
    }
  };

The string class__defaults__Lscalacss_Defaults__Lscalacss_IDefaults occurs 669 times in this output.

Disabling all scalajs optimizations with scalaJSOptimizerOptions ~= { _.withDisableOptimizer(true) } reduces the file size by ~700kb and now class__defaults__Lscalacss_Defaults__Lscalacss_IDefaults only appears twice.

This happens to be scalacss 0.3.0, so my next step will be migrating scalacss and scalajs-react to at least get us to the latest release, but I’m fairly confident given the amount of @inlines in the codebase that this is still an issue.

[mseddon]

That sounds about right, in fact keeping the forwarders may even shave off a few more kilobytes 😃 If I find the time I’ll try to send a PR sometime next week, unless someone else beats me to it.

[mseddon]

Oh hey- sorry I’ve been really snowed under recently, so didn’t have a chance to put that fix together- the changes you made look like they address the real areas where I see the inlines explode. Sadly to test it with our project, we’d need to upgrade scalacss, and scalajs-react. Once this is done, I’ll re-test and see how well it works, but for now, I’m happy to close- thanks!