[ANN] css-class-bindings library generates Haskell bindings for CSS classes

Recently I migrated a frontend to Miso library (WASM backend), and I noticed that DOM functions (e.g. div_) accept CSS class names as plain strings.

Quasi-quote input

{-# LANGUAGE QuasiQuotes #-}
module Css where
import CssClassBindings ( css )

[css|
.foo-bar {
  color: #fc2c2c;
}
|]



module Main where

import Css (fooBar, cssAsLiteralText)
import CssClassBindings qualified as C
import Miso
import Miso.Html.Element (div_, button_)
import Miso.Html.Property qualified as P

class_ :: C.CssClass MisoString -> Attribute action
class_ = P.class_ . C.class_

app :: App Model Action
app = (component emptyModel updateModel viewModel)
  { styles = [ Style cssAsLiteralText ]
  }

viewModel :: Model -> View Model Action
viewModel m = div_ [] [ button_ [ class_ fooBar ] [ "Submit" ] ]

File input

import CssClassBindings ( includeCss )
includeCss "assets/style.css"



module Main where
import Css (fooBar, style)
-- ...

github.com

GitHub - yaitskov/css-class-bindings: library generates Haskell bindings for CSS classes

library generates Haskell bindings for CSS classes