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

Announcements
1

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)
-- ...
5 Likes
2

nice! Shpadoinkle has something similar. It was kind of unreasonably effective in practice lol.

3

Could you share a link? I did researched on hackage before starting the library, but haven’t found anything suitable.

1 Like
4

I can’t find the module we use in the codebase (we used a very early version since the author was my cofounder) but I think it evolved into shpadoinkle-html.

Yours being its own standalone thing is great though. Bookmarked!

2 Likes
5

This is cool. I’ve been using Miso with static stylesheets, but been uneasy about the “stringly-typed” nature of linking them together the naive way.

What stops me from using this straight away is that I’d want support for IDs as well as classes. I see no reason not to also generate bindings for those, except that it would ideally mean renaming the library (css-bindgen?), which would be a bit annoying at this stage.

1 Like
6

Also, includeCss should really be using addDependentFile so that bindings are regenerated when the file changes.

7

Thanks for your feedback. This motivated me to release v0.0.3 with CSS id support and marking included files with addDependentFile.
Id support didn’t get into initial version because my project don’t have any and e.g. whole bulma library (+600kb) dito.

I think of CSS id as a stricter version of CSS class (linear CSS class).

2 Likes