These are chat archives for japgolly/scalacss

4th
Jun 2016
Olivier Blanvillain
@OlivierBlanvillain
Jun 04 2016 11:34
@chandu0101 style(filter := "blur(4px)") should generate equivalent css. Source
Chandra Sekhar Kode
@chandu0101
Jun 04 2016 13:16
@OlivierBlanvillain hmm what about body.modal-open
Olivier Blanvillain
@OlivierBlanvillain
Jun 04 2016 13:23
@chandu0101 I guess something along the lines of style(unsafeRoot("body")(unsafeChild("modal-open")(unsafeChild("#app")(...)))), but if I'm not sure you gain anything from ScalaCSS if you use it that way.
Chandra Sekhar Kode
@chandu0101
Jun 04 2016 13:26

i tried

unsafeRoot(“body”)(unsafe child..)

but it didn’t worked , the only reason i am thinking this is way is to colocate all styles in one place. may be i should stick with plain css in this case ! ;)

Olivier Blanvillain
@OlivierBlanvillain
Jun 04 2016 13:32
I think the lib was made to be used along with scalajs-react or scalatags, you would typicaly define all the styles in a single object MyStyle extends StyleSheet.Inline and attache these to your html as needed.
But I'm not sure I can explain that better than the doc :P
Chandra Sekhar Kode
@chandu0101
Jun 04 2016 15:11
hmm scalacss main goal is better css :p

from readme
`ScalaCSS aims to bring type-safety and clarity to

creating CSS
using CSS
maintaining CSS
correctness of CSS`

i think what we need some thing like plainCss("body.modal-open #app")( filter := "blur(4px)" ) :s
Olivier Blanvillain
@OlivierBlanvillain
Jun 04 2016 15:23
I'm pretty sure you could implement a def plainCss(s: String) = ??? on top of ScalaCSS by combining unsafeRoot, unsafeChild and addClassNames
Chandra Sekhar Kode
@chandu0101
Jun 04 2016 15:31
i’ll check that tomorrow morning , thanks for pointer :)
Olivier Blanvillain
@OlivierBlanvillain
Jun 04 2016 15:31
But you would lose maintainability/correctness, as you don't have any guarantee that s is consistent with your html. What you are encouraged to do instead is something like:
class MyStyle ... {
  val modal = style(filter := "blur(4px)")
}

class MyHtml ... {
  val modal =
    <.div(
      MyStyle.modal,
      ...
    )
}