These are chat archives for japgolly/scalacss

24th
Feb 2016
Roberto Leibman
@rleibman
Feb 24 2016 22:41
Hey... back in august of last year, thanks to chandu0101 I figured out how to use a style declared in a "Stylesheet.Inline". But I'm trying to use the latest version of scalacss and things got broke
Here was my original question

Hey... good morn (or whatever).. I'm trying to set the style in a MuiRaisedButton I have no idea how to do it... the constructor takes a js.Any for a style, I construct a style like so:

 val buttons = style("mybuttons")(padding(10.px, 10.px, 10.px, 10.px),
  margin(10.px, 10.px, 10.px, 10.px),
  backgroundColor(c"#ff0000"))

But then don't know what to do with it, how do I tell MuiRaisedButton to use this style?

The solution back then was to convert my style to an object and use that in the muiraisedbutton
val buttons = CssJs.cssToJsObject(Style.css)("mybuttons")
The problem is that now, in the new version, my cssToJsObject is broken.
 def cssToJsObject(css: Css): StylesObject = {
    val styles: StylesObject = Dictionary.empty
    css.foreach { entry ⇒
      // Ignore media queries and pseudo-selected
      val m = plainClassSel.matcher(entry.sel)
      if (m.matches() && entry.mq.isEmpty) {
        val className = m.group(1)

        // Get/create style
        val style = styles.get(className) getOrElse {
          val s: StyleObject = Dictionary.empty
          styles(className) = s
          s
        }

        // Add style CSS
        entry.content.foreach { kv ⇒
          val k = camelCase(kv.key)
          style(k) = kv.value
        }
      }
    }

    styles
  }
entry.sel and entry.content no longer exist in CssEntry
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:14
hah i remember this - i still want to fix it properly
anyways, pattern match on entry
Roberto Leibman
@rleibman
Feb 24 2016 23:14
Yeah, I figured that much.. and I still don't like it.
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:14
you want to see if it's a CssStyleEntry i guess
jump to definition of StyleEntry and im sure you will figure it out easily, if im understanding this correctly
Roberto Leibman
@rleibman
Feb 24 2016 23:16
Yeah, now it looks like this:
  def cssToJsObject(css: Css): StylesObject = {
    val styles: StylesObject = Dictionary.empty
    css.foreach { entry ⇒
      entry match {
        case CssStyleEntry(mq, sel, content) ⇒ {
          // Ignore media queries and pseudo-selected
          val m = plainClassSel.matcher(sel)
          if (m.matches() && mq.isEmpty) {
            val className = m.group(1)

            // Get/create style
            val style = styles.get(className) getOrElse {
              val s: StyleObject = Dictionary.empty
              styles(className) = s
              s
            }

            // Add style CSS
            content.foreach { kv ⇒
              val k = camelCase(kv.key)
              style(k) = kv.value
            }
          }
        }
        case _ ⇒
      }
    }

    styles
  }
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:17
so that works?
Roberto Leibman
@rleibman
Feb 24 2016 23:18
It compiles, I have other issues before I can say it works.
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:18
haha right
you can drop entry match {} by the way
and pattern match directly in the foreach
Roberto Leibman
@rleibman
Feb 24 2016 23:18
Yeah, I know, but I was trying it first.
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:19
right
but hey, i have a question about this too
the other options for a CssEntry are CssFontFace and CssKeyframesEntry
is there any way of encoding those in a javascript object?
Roberto Leibman
@rleibman
Feb 24 2016 23:20
It wouldn't be a problem if you fixed the way the MaterialUI components used styles :P
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:20
haha no can do
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:26
@rleibman what does plainClassSel look like in that snippet?
Roberto Leibman
@rleibman
Feb 24 2016 23:45
It's a Pattern
I'm not done fixing compiling problems yet.
David Barri
@japgolly
Feb 24 2016 23:48
Before CSS text is generated, it lives in Scala models. The Scala representation turns into CSS text due to Renderer[String]s that you can see in the defaults.
It sounds like you might want to build a Renderer[js.Object]?
My advice is turn it into a PR (with tests) so it lives in the library, then in future when other PRs come in, if they break it, they must fix it.
Øyvind Raddum Berg
@oyvindberg
Feb 24 2016 23:56
i tried to write one
but i dont know how to encode media queries for example, so it would be a partial renderer