{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreicbzazvl7ao5tdart2fhbhhndz63pfhvt5ker4n5225loykkwjum4",
    "uri": "at://did:plc:pi6woz4d47bkuws673w2il2r/app.bsky.feed.post/3mi747s5zgil2"
  },
  "path": "/t/ann-css-class-bindings-library-generates-haskell-bindings-for-css-classes/13857#post_1",
  "publishedAt": "2026-03-28T19:52:12.000Z",
  "site": "https://discourse.haskell.org",
  "tags": [
    "github.com",
    "GitHub - yaitskov/css-class-bindings: library generates Haskell bindings for CSS classes"
  ],
  "textContent": "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.\n\n#### Quasi-quote input\n\n\n    {-# LANGUAGE QuasiQuotes #-}\n    module Css where\n    import CssClassBindings ( css )\n\n    [css|\n    .foo-bar {\n      color: #fc2c2c;\n    }\n    |]\n\n\n\n    module Main where\n\n    import Css (fooBar, cssAsLiteralText)\n    import CssClassBindings qualified as C\n    import Miso\n    import Miso.Html.Element (div_, button_)\n    import Miso.Html.Property qualified as P\n\n    class_ :: C.CssClass MisoString -> Attribute action\n    class_ = P.class_ . C.class_\n\n    app :: App Model Action\n    app = (component emptyModel updateModel viewModel)\n      { styles = [ Style cssAsLiteralText ]\n      }\n\n    viewModel :: Model -> View Model Action\n    viewModel m = div_ [] [ button_ [ class_ fooBar ] [ \"Submit\" ] ]\n\n\n#### File input\n\n\n    import CssClassBindings ( includeCss )\n    includeCss \"assets/style.css\"\n\n\n\n    module Main where\n    import Css (fooBar, style)\n    -- ...\n\n\ngithub.com\n\n### GitHub - yaitskov/css-class-bindings: library generates Haskell bindings for CSS classes\n\nlibrary generates Haskell bindings for CSS classes",
  "title": "[ANN] css-class-bindings library generates Haskell bindings for CSS classes"
}