CSS variable set via Halogen

#1

I am trying to use prop (https://pursuit.purescript.org/packages/purescript-halogen/3.1.3/docs/Halogen.HTML.Properties#v:prop) to set a CSS-variable using (for example)

boardSize :: Int
boardSize = 8

...

boardSizeProp :: forall r i. HP.IProp r i
boardSizeProp = HP.prop (HH.PropName "--boardSize") $ show boardSize

...

HH.div 
    [ HP.classes [ HH.ClassName "board-grid" ] 
    , boardSizeProp
    ] 
    [ ... ]

...

.board-grid {
    display: grid;
    grid-template-columns: repeat(var(--boardSize), 80px);

but cannot get it to work. (I’m on Purescript 0.11.7)

Using actual value did not help:

HP.prop (HH.PropName "--boardSize") boardSize

and neither did putting the prop on the highest-most div.

But the technique is successfully demoed in JS-based https://codepen.io/michellebarker/pen/xWPyWj

Kindly advise.

#2

monoidmusician answers from cross-posting on Slack:

import Halogen.HTML as HH
import Halogen.HTML.CSS as HC
import CSS as CSS

HH.div
    [ HC.style do (CSS.key (CSS.fromString "--boardSize") (show boardSize))
    ] 
    [ ... ]