CSS Custom Properties

[kevinSuttle]

Is the recommended syntax for "CSS variables Custom Properties" covered by this function?

https://github.com/rtfeldman/elm-css/blob/master/src/Css.elm#L5105

[lukewestby]

Can you share some more context on what the recommended syntax for CSS Custom Properties is?

[lukewestby]

Can you share some more context on what the recommended syntax for CSS Custom Properties is?

[kevinSuttle]

Sure.

Normally they're declared inside the global root selector

:root {
  --primaryThemeColor: #b4d4ss;
}

.newsfeed {
  background-color: var(--primaryThemeColor);
}

https://philipwalton.com/articles/why-im-excited-about-native-css-variables/

[kevinSuttle]

Sure.

Normally they're declared inside the global root selector

:root {
  --primaryThemeColor: #b4d4ss;
}

.newsfeed {
  background-color: var(--primaryThemeColor);
}

https://philipwalton.com/articles/why-im-excited-about-native-css-variables/

[lukewestby]

gotcha! i think the root function is what you're looking for

https://github.com/rtfeldman/elm-css/blob/master/src/Css.elm#L5389

[lukewestby]

gotcha! i think the root function is what you're looking for

https://github.com/rtfeldman/elm-css/blob/master/src/Css.elm#L5389

[kevinSuttle]

Cool. That covers :root. How about the custom properties?

[kevinSuttle]

Cool. That covers :root. How about the custom properties?

[lukewestby]

property should work for both cases

[ root
    [ property "--primaryThemeColor" "#b4d4ss" ]
, (.) NewsFeed
    [ property "background-color" "var(--primaryThemeColor)" ]
]

I know it's not ideal but it'll get the job done until a typesafe representation of this part of the spec is added to the API

[lukewestby]

property should work for both cases

[ root
    [ property "--primaryThemeColor" "#b4d4ss" ]
, (.) NewsFeed
    [ property "background-color" "var(--primaryThemeColor)" ]
]

I know it's not ideal but it'll get the job done until a typesafe representation of this part of the spec is added to the API

[eeue56]

Eh, I don't think they should ever get included. What's the benefit of doing a CSS variable when you can just do an Elm one?

[eeue56]

Eh, I don't think they should ever get included. What's the benefit of doing a CSS variable when you can just do an Elm one?

[kevinSuttle]

@lukewestby Funny you say that. https://groups.google.com/forum/#!topic/elm-discuss/vvJGw1u7NVQ

[kevinSuttle]

@lukewestby Funny you say that. https://groups.google.com/forum/#!topic/elm-discuss/vvJGw1u7NVQ

[eeue56]

I already answered in that thread, I am Noah.

[eeue56]

I already answered in that thread, I am Noah.

[eeue56]

I don't think this will go anywhere. I don't think there's any point supporting it beyond what you can already do. Reading through the custom property spec confirms this belief - there's nothing in there that wouldn't be better done in Elm land. SASS have this issue where they discuss all things CSS in terms of keeping features in order to be a superset of CSS. In Elm-Css, we don't need to worry about that. It's possible to do this through the methods described by luke above, but the recommendation is that you should just use Elm, because that's the whole point of Elm-Css.

If anyone disagrees, please open an issue with an explicit use case and examples of where that would be helpful :)

[eeue56]

I don't think this will go anywhere. I don't think there's any point supporting it beyond what you can already do. Reading through the custom property spec confirms this belief - there's nothing in there that wouldn't be better done in Elm land. SASS have this issue where they discuss all things CSS in terms of keeping features in order to be a superset of CSS. In Elm-Css, we don't need to worry about that. It's possible to do this through the methods described by luke above, but the recommendation is that you should just use Elm, because that's the whole point of Elm-Css.

If anyone disagrees, please open an issue with an explicit use case and examples of where that would be helpful :)