Setting CSS variables

Request Feedback
1

To my surprise I couldn’t set CSS variables. The use case is simple: I need to do this in order to use an external CSS framework. “I can do this in Elm” doesn’t apply therefore. The framework is Google’s Material Comonents for the Web.

Now I need to use the very ugly trick of inserting a style node with a unique class name.

Is there any hope Elm will support this in the future? Or a workaround better than this?

Just not understanding why Elm does not support the full CSS spec.

2

You try to use elm-css?

3

There is debois/elm-mdl library, but I think, it’s still in version 0.18. You can inspire there or if you’re using some builder like Brunch you can write a similar config. (In posted link is for Bulma Css framework.)

4

@berend I saw your comments on the issue tracker, but for people who are not familiar with the existing tickets I’ve linked them below. The common theme is that it has been considered a feature request rather than a bug, which is incorrect in my view as it is part of the CSS spec and is supported by Edge, Firefox, Safari, Chrome, Opera, iOS Safari, Android, and others.

Issues -
elm/html issue #129
elm/html issue #177

Pull Requests -
elm/virtual-dom issue #44
elm/virtual-dom issue #127

One way you could support it is fixing the function in the compiled JS, e.g. it gets compiled to

      function Xt(e, t) {
        var n = e.style;
        for (var r in t) n[r] = t[r];
      }

And you could use sed or another tool to change it to

      function Xt(e, t) {
        var n = e.style;
        for (var r in t) n.setProperty(r, t[r]);
      }

Another way that can work is applying the style directly, like

Attributes.attribute "style" "--some-var: 10px"
3 Likes
5

@ondrej-tucek note that elm-mdl has been obsolete for years. You want elm-mdc.

6

That was fantastic @hpate! Using style directly works great. I’ll do some more experiments, but seems I’ll be switching elm-mdc to use this technique!

7

Unfortunately setting the style directly interferes with cases where the user passes a style. Is there a way to detect if a List (HtmlAttribute m) contains an Html.attribute "style" "..."?

8

Thanks so much @hpate. Using your workaround I was able to support inline CSS variables in elm-mdc. No longer style nodes and random class names!

9

@berend ouch sorry for that I didn’t know it. Thank you for elm-mdc, was hidden in front of me :slight_smile:

10

Another way that can work is applying the style directly, like

Attributes.attribute "style" "--some-var: 10px"

@hpate I like this work around - it is nice. Is elm smart enough not to clobber other css inline styles if you use this?

11

It’s order dependent I believe, if you have if first it won’t clobber it

div
    [ attribute "style" "--some-var: 10px"
    , style "background-color" "blue"
    ]

Results in style="--some-var: 10px; background-color: blue;", but if you change the order to

div
    [ style "background-color" "blue"
    , attribute "style" "--some-var: 10px"
    ]

It will only have style="--some-var: 10px"

2 Likes
12

Ooh dangerous :fearful:

13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.