These are chat archives for japgolly/scalacss

12th
Feb 2018
Abdhesh Kumar
@abdheshkumar
Feb 12 2018 10:03
@KurToMe Thanks. this way is already with scalacss. if you see my example, that is a kind of json but scalacss generate pure css style code.
actually I was trying to an implement http://cssinjs.org/?v=v9.8.0#example using scalacss
Kurtis Melby
@kurtome
Feb 12 2018 16:29
oh hmm, i have a hacky way of turning inline scalacss classes into json elements, but it doesn't work for everything
basically i use it to write my css using scalacss and then use it as the style prop on a React component which expects the css to be a js object.
not sure if this is helpful....
  /**
    * snake-case-string to camelCaseString
    *
    * <p>Note that a leading - will produce a leading capital, for example:
    *   -webkit-animation-delay  =>  WebkitAnimationDelay
    */
  def snakeToCamel(snake: String): String = {
    snake
      .split("-")
      .zipWithIndex
      .foldRight("")((strAndIndex, word) =>
        if (strAndIndex._2 == 0) strAndIndex._1 + word else strAndIndex._1.capitalize + word)
  }

  implicit val dynamicRenderer = new Renderer[Map[String, js.Dynamic]] {
    override def apply(css: Css) = {
      css map {
        case style: CssEntry.Style =>
          val jsStyle = js.Dynamic.literal()
          style.content.foreach(kv => {
            // js representation of CSS rules should be camel case, like lineHeight, etc.
            val jsKey = snakeToCamel(kv.key)
            jsStyle.updateDynamic(jsKey)(kv.value)
          })
          style.sel.replace(".", "") -> jsStyle
        case x => throw new IllegalArgumentException("unsupported " + x.toString)
      } toMap
    }
  }

  /**
    * Renders a stylesheet into a map of javascript objects keyed by classname.
    * This does not support styles with {@code addClassName} method on ScalaCss.
    *
    * @return
    */
  def styleObjsByClassName(styleSheet: StyleSheet.Inline): Map[String, js.Dynamic] = {
    styleSheet.render[Map[String, js.Dynamic]]
  }