These are chat archives for japgolly/scalacss

25th
Mar 2015
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 02:45
its generating duplicate class names even with same register ?
in CssPager project i created one more component
  object Style extends StyleSheet.Inline {
    import dsl._

    val home = style(backgroundColor("red"),width(200.px),height(200.px))
  }
  val component = ReactComponentB[Unit]("TestComponent")
    .render(P => {
    div(Style.home)
  }).buildU
added them to document
CssPager.Style.addToDocument()
    TestComponent.Style.addToDocument()
second component class name is also scalacss-0001
am i missing something here …
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 03:15
created an issue regarding size japgolly/scalacss#17
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 03:24
@japgolly mate If i were you , I’ll focus on size and advanced class name geenration and some other practical problems instead of type safe values (yeah i can use my brain while typing ) and speed up things by 100ms .. , - my 2 cents! . Yeah i know its your baby ;)
David Barri
@japgolly
Mar 25 2015 05:28
@chandu0101 No no we had this conversation remember? Don't call addToDocument more than once per SPA-page.
Found it! I think you forgot mate :)

If two stylesheets use different Registers and the same class-name-gen from Defaults, you will end up with different stylesheets both generating classnames like .scalacss-0001 (or _1 in production)
chandu0101 March 23 2015
whats the best way then ?
japgolly March 23 2015
It's best to only have one stylesheet object per SPA and include the children into the parent one.

Like this example: http://japgolly.github.io/scalacss/book/features/reuse.html
OR you could make CssPager generate names like .csspager-0001 if you want to. It's all configurable
chandu0101 March 23 2015
ok , thank you

Chandra Sekhar Kode
@chandu0101
Mar 25 2015 05:30
i thought thats for using component in another project! :s
David Barri
@japgolly
Mar 25 2015 05:31
No no, ever. The name generation isn't magic and CSS is basically a global namespace.
The only thing that could make that possible would be @matthughes idea about macros to automatically detect the variable name.
And even then you'd be playing with fire because the same variable names can easily occur into different modules.
Put everything you need in one module and you'll never have namespace issues. It's a one-liner to add a shared module to a main one and they nest.
Try that :+1:
About the speed, I agree with you mate. Do keep in mind that this has been released for about 10 seconds only :P All the important things will happen, I'm just one tired man who'll be working on this on weekends. Speed is my next focus.
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 05:41
hmm one global Style sheet! , i think its me who dreaming :P
i thought we had a system similar to this
i know you’re working hard mate ,my only conern is you must work on things you’re capable of (size/speed/more hard problems) instead of … ;)
David Barri
@japgolly
Mar 25 2015 05:46
:)
I haven't seen that - don't have time now
If you want to be able to just add completely separate stylesheets maybe we could use hashing to generate class names?
Or something like that.
Anyway for now, add it all to one stylesheet
Besides, it's not like you lose anything...
object a extends stylesheet {
}
object b extends stylesheet {
}
object c extends stylesheet {
}
a.addToDocument()
b.addToDocument()
c.addToDocument()
vs
object B extends stylesheet {
}
object C extends stylesheet {
}
object a extends stylesheet {
   val b = B
   val c = C
}
a.addToDocument()
Same LoC, same number of references to b & c
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 06:02
ofc mate , i’ll use one style sheet for now :)
David Barri
@japgolly
Mar 25 2015 06:25
hey I was just thinking - show me how you think it should/could work. I wanna see what's in your head. Most of the styles I'll be writing are all within a single webapp so I think you'll be doing much more reusable styles than me
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 07:10
here is my ideal list for current version of scalacss :
1) When i define stylesheet for my component the final class names should auto-namespaced with component name.
2) Style sheets per page/module , so that we only insert required styles instead of loading all ! (CSSDOM!)
on a side note i am curious about
1) Why not geenrate autoprefixed css file in compile time!
2) why its adding 524K to file size for a single component with scalacss ..
Otto Chrons
@ochrons
Mar 25 2015 07:12
probably taking some scalaz etc dependencies that you don't otherwise have?
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 07:26
hmm , we can’t take that granted!
Otto Chrons
@ochrons
Mar 25 2015 20:17
so, how do I render a Standalone stylesheet into HTMLElement that I can append to document.head?
the React extension supports only Inline stylesheets
Otto Chrons
@ochrons
Mar 25 2015 20:23
suppose I need to use Inline and unsafeRoot
@japgolly my first two use cases are not covered by the documentation :)
Otto Chrons
@ochrons
Mar 25 2015 20:29
one is defining style for body tag another is overriding an existing style class in Bootstrap
basically this,
body {
    padding-top: 50px;
}

.label-as-badge {
    border-radius: 1em;
}
following the instructions on http://japgolly.github.io/scalacss/book/ext/react.html I end up with,
scalajs-spa-tutorial\js\src\main\scala\spatutorial\client\SPAMain.scala:24: could not find implicit value for parameter s: japgolly.scalacss.Renderer[org.scalajs.dom.raw.HTMLStyleElement]
[error]     GlobalStyles.addToDocument()
[error]                               ^
Otto Chrons
@ochrons
Mar 25 2015 20:35
ok, I needed to add
import japgolly.scalacss.Defaults._
Otto Chrons
@ochrons
Mar 25 2015 20:43
this didn't work, but gave no error in compilation nor runtime,
object GlobalStyles extends StyleSheet.Inline {
  import dsl._

  unsafeRoot("body")(
    paddingTop(50.px)
  )
of course correct version was,
  val body = style(unsafeRoot("body")(
    paddingTop(50.px)
    ))
might as well leave the val body = out
now the base CSS works as expected using ScalaCSS
David Barri
@japgolly
Mar 25 2015 21:01

When i define stylesheet for my component the final class names should auto-namespaced with component name.

Hmm ok I'll have a think about that.

Style sheets per page/module , so that we only insert required styles instead of loading all ! (CSSDOM!)

I barely know what you mean by that. More info would be helpful along with how you think it should (could?) work.

Why not geenrate autoprefixed css file in compile time!

Caniuse.com data changes often. Newer versions of Chrome complain when certain prefixes are present. Users need ability to provide their own k/v transformations. Styles are generated only once when the page loads, not every time they're used so it doesn't need to be super-optimised.

why its adding 524K to file size for a single component with scalacss

Yep I've said a few times already this will be addressed.

Otto Chrons
@ochrons
Mar 25 2015 21:05
would this make sense (defining Bootstrap Button CSS),
object BootstrapStyles extends StyleSheet.Inline {
  import dsl._

  object CommonStyle extends Enumeration {
    val default, primary, success, info, warning, danger = Value
  }

  val buttonOpt = styleF(Domain.ofValues(default, primary, success, info, warning, danger))( opt =>
    addClassNames("btn", s"btn-$opt")
  )

  val button = buttonOpt(default)
}
David Barri
@japgolly
Mar 25 2015 21:05
@ochrons You got it! I hoped that having unsafeRoot without registering it would've caused the compiler to warn about an unused pure value. There were no warnings?
You can omit the val body = part but you need style as you found out. I'm not sure how I make that bit safer - the problem with DSLs like this is that I can't define scopes. It would be cool if I could create an outer DSL and then an inner DSL that's only active in certain functioins.
absolutely it would!
That's the kind of usage I imagined
Otto Chrons
@ochrons
Mar 25 2015 21:06
yea, just documenting my progress, so you'll see what difficulties I run into :)
David Barri
@japgolly
Mar 25 2015 21:08
Please do! :D We can use it to add to the book/doc.
Otto Chrons
@ochrons
Mar 25 2015 21:14
ok, the buttonOpt worked as expected
although it generated <button type="button" class="scalacss-0006 btn btn-danger " but the scalacss-0006 is not in the inline-generated CSS
because the style is empty besides those two additional class names?
David Barri
@japgolly
Mar 25 2015 21:16
Exactly
It's harmless so I'm not too bothered by it right now. Actually would you be able to file an issue on that?
Otto Chrons
@ochrons
Mar 25 2015 21:19
hm, even if I try to define some actual style in buttonOpt, it's still not generating it in the CSS snippet
isn't it enough to have val bootstrapStyles = BootstrapStyles in my GlobalStyles?
David Barri
@japgolly
Mar 25 2015 21:20
Ah if you want BootstrapStyles to be usable in some other stylesheet (at least at the moment) you need to make it a class instead of object
Otto Chrons
@ochrons
Mar 25 2015 21:21
ok, and use new
David Barri
@japgolly
Mar 25 2015 21:21
yeah
Otto Chrons
@ochrons
Mar 25 2015 21:21
just trying to modularize the styles
David Barri
@japgolly
Mar 25 2015 21:21
There's a snippet on that reuse page that would be quicker to copy & paste
cos you need an implicit register as well
Otto Chrons
@ochrons
Mar 25 2015 21:21
yeah, I saw that
David Barri
@japgolly
Mar 25 2015 21:23
Register is the only mutable class in the entire library but it seems to (indirectly) be the biggest source of confusion
Otto Chrons
@ochrons
Mar 25 2015 21:23
you should add import japgolly.scalacss.mutable to that doc page
because it's needed to find the mutable.Register
David Barri
@japgolly
Mar 25 2015 21:24
thanks :)
Otto Chrons
@ochrons
Mar 25 2015 21:24
so, can I then refer to the BootstrapStyles without going through GlobalStyles?
David Barri
@japgolly
Mar 25 2015 21:24
No you go through Global cos it's the only object
Otto Chrons
@ochrons
Mar 25 2015 21:25
uh, that's kinda ugly
David Barri
@japgolly
Mar 25 2015 21:25
Yeah chandu was saying the same thing
Otto Chrons
@ochrons
Mar 25 2015 21:25
like I have a Bootstrap lib that defines BootstrapStyles, but shouldn't concern itself with the global styles
David Barri
@japgolly
Mar 25 2015 21:25
I think we'll need to change how this reusable stuff works
Otto Chrons
@ochrons
Mar 25 2015 21:26
yeah, I'd like to see support for parametrizable style libs
so I could define things like global colors which would be used by different style libs
David Barri
@japgolly
Mar 25 2015 21:26
Would you be able to have a think about it and share ideas about how you think it would work or what it would look like?
Maybe even fake code that shows how you would ideally use it
Otto Chrons
@ochrons
Mar 25 2015 21:27
I can think about that while skiing 30km tomorrow :ski: :sweat_smile:
David Barri
@japgolly
Mar 25 2015 21:27
@chandu0101 You too. If you could share some fake code showing how you wish you could write/use styles I can see if I can make it possible.
Haha woah, that sounds dangerous cos you could hit a tree or something! Be careful mate :P
Otto Chrons
@ochrons
Mar 25 2015 21:29
the dangerous part was today when snowboarding :snowboarder:
David Barri
@japgolly
Mar 25 2015 21:30
You spend a lot of time in snow ey?
Otto Chrons
@ochrons
Mar 25 2015 21:30
just this week in Lapland... otherwise the winter has been really poor snow-wise
David Barri
@japgolly
Mar 25 2015 21:32
Cool, Do you live far from this skiing place in Lapland?
Otto Chrons
@ochrons
Mar 25 2015 21:32
about 10hr drive :)
David Barri
@japgolly
Mar 25 2015 21:33
That means you're committed! As long as you're having fun :D
Otto Chrons
@ochrons
Mar 25 2015 21:34
well this is like a family tradition, we are here with a bit of extended family etc.
but I did start snowboarding only this year!
btw, the CSS now generates six copies of identical style defs, because the only changing part is in the addClassNames
.scalacss-0003 {
  padding-left: 30px;
}

.scalacss-0004 {
  padding-left: 30px;
}

.scalacss-0005 {
  padding-left: 30px;
}

.scalacss-0006 {
  padding-left: 30px;
}

.scalacss-0007 {
  padding-left: 30px;
}

.scalacss-0008 {
  padding-left: 30px;
}
  val buttonOpt = styleF(Domain.ofValues(default, primary, success, info, warning, danger))(opt =>
    styleS(addClassNames("btn", s"btn-$opt"), paddingLeft(30.px))
  )
Otto Chrons
@ochrons
Mar 25 2015 21:39
that's the source
maybe add an optimizer that combines identical inline styles or even does something fancier :)
but anyway, it works now with the class BootstrapStyles definition
Otto Chrons
@ochrons
Mar 25 2015 22:07
quite nice to be able to define in a type safe manner,
  val alertDomain = Domain.ofValues(success, info, warning, danger)

  val alert = commonStyle(alertDomain, "alert")
no chance of alert alert-primary or other common mistake
also plain alert is not allowed
which could never be enforced with plain old CSS, no matter how good code completion the IDE would provide
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 22:39

@japgolly

Style sheets per page/module , so that we only insert required styles instead of loading all ! (CSSDOM!)
I barely know what you mean by that. More info would be helpful along with how you think it should (could?) work.

that boils down to multiple addToDocument support.
Chandra Sekhar Kode
@chandu0101
Mar 25 2015 22:44
Here is my understanding - when we add styles using addToDocument browser creates CSSDOM on the fly!, why to load all styles one time when home page just need appbar and someother simple styles!