So I really personally like using Richard Feldman’s elm-css in my projects because it gives me very fine controls over the way things display in my projects, but I really wanted to add a lot of new properties to it, such as Grid and Logical Properties (eg. margin-block-end).
Understandably, the original maintainer hasn’t had time to merge PR requests for such things, so I decided to fork.
But instead of forking the newest version and just adding properties there, I decided to pick up where elm-css’s phantom-types branch left off (a large-scale effort to re-write the massive codebase as phantom types for better maintainability and error messages), and basically kept adding property and value functions to it, and produced coverage tests for all of my contributions until I was happy enough to publish it. (And then I merged it with the latest version of the original repo so it has all the backend improvements since they diverged many years ago.)
I’m at the point where I’m happy enough to publish it and show and tell it!
Differences / improvements
Phantom types
CSS property and value functions are developed with an obscure type structure known as phantom types. This allows for much more flexible and readable type annotations as well as much better developer-facing error messages.
New properties (but also some missing ones)
As aforementioned, this has stuff that the original elm-css doesn’t, such as…
- Grid (all properties apart from
griditself) - All Logical property variants (eg.
margin-inline-end,padding-block-start,inset-block, etc.) - Scroll snapping and overscroll (
scroll-margin*,scroll-padding*,overscroll-behavior*, etc.) - Various font-related properties (
font-variant-emoji,font-variant-east-asian) - Filter properties (
filter,backdrop-filter)
I have not checked parity with the original package, so there may be a few things missing from mine for the time being though. I know my version currently lacks transitions.
I have a list where I confirm coverage for particular CSS features.
Extensive testing
The @-rules, properties, values, pseudo-classes and pseudo-elements have been coverage-tested (almost 9000 tests total!) so it should be relatively bug free, at least from the CSS side of things.
(And future updates are being run in a Test Driven Development method to ensure continued correctness of the CSS output.)
Extensive documentation
All properties are fully documented with code examples and have links to either CSS Tricks or MDN for further understanding of how they work.
All properties and values are grouped roughly based on their use case so it should be easy to find related properties next to each other in the docs.
Even though I did a lot of repetitive work to get this package up to this point, this package would not have been possible without the work of Richard Feldman and many other contributors who contributed to not only elm-css itself, but the phantom types fork. Even the list I used to check my CSS property/value coverage is a fork of someone else’s who was working on phantom types.
I’m open for feedback and PRs, just check the code of conduct on the repo before you do! ^^ (Also keep in mind I might be slow to respond since this is a labour of love, I don’t get paid to work on it, etc. :D)
https://package.elm-lang.org/packages/dzuk-mutant/elm-css/latest/