These are chat archives for japgolly/scalacss

1st
Apr 2015
David Barri
@japgolly
Apr 01 2015 00:01
Also the JS is 150kb without gzip. It's much better but I realised yesterday it's still a little high. If @chandu0101 or someone could contribute and reduce the filesize a bit more before 0.2.0 that would be great.
Matt Hughes
@matthughes
Apr 01 2015 00:29
are there specific tasks to look for that? i.e., do you have any idea where the file size is coming in?
i remember sebastian showing you how you could see what classes were being linked, but i can't find it in chat
David Barri
@japgolly
Apr 01 2015 01:22
He linked me to this: Linker.scala#L81-L92
But I haven't made use of it yet.
I was surprised, most it was due to Scalaz and in surprising ways sometimes. Using Traverse[Vector] was pulling in scalaz.DList under the covers which was pulling in a bunch of its stuff. I wrote my own Traverse[Vector] typeclass and the footprint reduced significantly.
Stuff like that. Removing all the attributes and StyleC/Shapeless made no difference to the filesize.
Matt Hughes
@matthughes
Apr 01 2015 01:26
ah
David Barri
@japgolly
Apr 01 2015 01:28
If you want to play with it, you can just start randomly deleting stuff and from sbt, run bench/cmpJsSizeFast to see what impact it has.
David Barri
@japgolly
Apr 01 2015 01:38
Oh cool, I just found another one
I needed a Lens over CssKV so I just flippantly used shapeless.Lens. I just removed it and the filesize dropped by 5%
I'll replace that with a handwritten lens later. Another small gain.
Maaan, this shit makes no difference in Scala-land. Life changes in JS-land.
Matt Hughes
@matthughes
Apr 01 2015 01:48
yup
nobody cares about 200megs of jars
David Barri
@japgolly
Apr 01 2015 07:30
yeah, 200mb of javascript doesn't make anyone happy :D
Otto Chrons
@ochrons
Apr 01 2015 07:34
would be cleaner if libs like ScalaCSS wouldn't have extensive dependencies to big libs
especially if the reason is "nice to have" in some internal thingy
David Barri
@japgolly
Apr 01 2015 07:37
i don't want to spend time reinventing the wheel
(one can also argue that I don't want to spend time reducing JS size)
Otto Chrons
@ochrons
Apr 01 2015 07:38
it's just that there is always the potential risk of lib version conflicts in the future
but as long as you're not using bleeding edge stuff from the libs, it should be ok :)
I bet we all have had our share of library version dependency hell at some point
Anton Kulaga
@antonkulaga
Apr 01 2015 07:48
By the way, what is the main difference between this scalacss implementation and the one that is in scalatags?
David Barri
@japgolly
Apr 01 2015 07:50
@antonkulaga Well 1) this came first, 2) more features and a different goal.
I'll guess that the scalatags-css's goal is to create css nicely in Scala. This library acknowledges that in addition to creating css nicely, there are many other things that go wrong w.r.t css, and so tries to protect integrity over time.
@ochrons Nah, no bleeding edge stuff, just very basic stuff.
Otto Chrons
@ochrons
Apr 01 2015 07:53
someday I'm gonna make a lib that uses operators \o/ _o/ and \o_
David Barri
@japgolly
Apr 01 2015 07:53
haha!
There's already \&/, you could integrate with that
Matt Hughes
@matthughes
Apr 01 2015 15:16
Having an issue where a CSS class is repeated. I have val x = style("foo")(...). I refer to it in multiple places. The generated CSS repeats the style twice, but with different contents.
This is with latest 0.2.0-SNAPSHOT
Matt Hughes
@matthughes
Apr 01 2015 15:26
Hmm, I was doing this
  val inflexible = style("foo")(
    display.block
  )

  val panelHeading = style(
    addClassNames("panel-heading"),
    inflexible
  )
But then I now see the warning ".foo -- Another style in the register has the same classname."
I thought using a style in another style would just combine their styles.
Otto Chrons
@ochrons
Apr 01 2015 15:28
the style call actually registers the style
Matt Hughes
@matthughes
Apr 01 2015 15:28
so it's getting registered both during inflexible and panelHeading
so how do I accomplish the above? Where I want to use 'inflexible' as a mixin of sorts.
Otto Chrons
@ochrons
Apr 01 2015 15:29
btw, been wondering how to define cascades like you can in Scalatags CSS, http://lihaoyi.github.io/scalatags/#Cascading
maybe define it as
val inflexible = Seq(display.block)
or something like that
Matt Hughes
@matthughes
Apr 01 2015 15:32
How is what I'm trying to accomplish different than this: https://japgolly.github.io/scalacss/book/features/reuse.html
Otto Chrons
@ochrons
Apr 01 2015 15:33
might be the problem is somewhere else afterall
Matt Hughes
@matthughes
Apr 01 2015 15:39
yeah
// In UserStyles.scala val userTitle = style(marginLeft(4 ex), ...) ... val userButton = style(button, userTitle, ...)
// In UserStyles.scala
val userTitle = style(marginLeft(4 ex), ...)
...
val userButton = style(button, userTitle, ...)
i'm doing the exact same thing. oh, but I give mine a name.
Otto Chrons
@ochrons
Apr 01 2015 15:41
you sure you just don't have another style definition somewhere else with the same name?
Matt Hughes
@matthughes
Apr 01 2015 16:35
yes. reproduced here: japgolly/scalacss#25
Otto Chrons
@ochrons
Apr 01 2015 16:42
it's probably due to styles being composed and the name of the style gets composed as well
Matt Hughes
@matthughes
Apr 01 2015 16:42
yeah I was looking at the Compose class a bit
So if you have the above 'UserStyles' example, do you expect the 'userButton' class to have both styles? Or is it that when you use 'userButton', both classNames get applied to the element.
Otto Chrons
@ochrons
Apr 01 2015 16:43
it's here,
val cn: Option[ClassName] =
      (a.className, b.className) match {
        case (None,       None) => None
        case (r@ Some(_), None) => r // Should this also warn
        case (None, r@ Some(_)) => r // about propagation too?
        case (Some(l), Some(r)) => absorbWarning(Cond.empty, rules.mergeClassNames(l, r))
      }
you could use addClassName to specify the latter case
at least my assumption would be that if you include a style in another style definition, it's going to be inlined in that specific position
because order is also very important in CSS
Matt Hughes
@matthughes
Apr 01 2015 16:51
hmm ok.
Here's another one: I have a defined style("foo")(fontWeight.bold) and used on an element. The className gets added to the element, but the style itself is not generated.
i've definitely had this happen to me multiple times.
David Barri
@japgolly
Apr 01 2015 22:27
I'm not sure what you mean by cascades, do you like mixins?
@matthughes Do you ever plan to use inflexibleon its own or is it just a mixin for other styles?

If the latter, then don't define like this:

val inflexible = style("foo")(...)

because that registers it as a completed style.
Create an unregistered style with no classname:

val inflexible = styleS(...)
If that's what is meant by "cascades", then that's how you do it.
As for #25, thanks.
So I'm guessing that if we have a registered sytle with a manually specified classname, and you mix it into something else it should remove the original classname without a warning?
David Barri
@japgolly
Apr 01 2015 22:33
Makes sense. I'll get this in for 0.2.0