Open-sourcing the lightning_css Elixir package

I’ve been reading a lot and connecting with the idea of embracing the web platform and building right on it, without layers and layers of abstractions that make it harder to understand what’s going on under the hood, and that make the software less future-proof. For instance, I got rid of Tailwind from this website.

When it comes to styling, I’ve been following the Enduring CSS methodology. This provides answers for many challenges that CSS presents and embraces accessibility attributes to hold state leading to more accessible websites. Nevertheless, one challenge that I found, in particular in the context of Elixir and Phoenix, is that it’s hard to follow the directory convention that they propose to get styles close to the components. Doing so requires using a tool that’s able to resolve glob patterns to locate CSS files and bundle them into an output CSS bundle, and the tool that asset pipeline tool Phoenix projects use by default, powered by ESBuild, doesn’t provide that functionality for CSS.

Luckily, there’s a solution for that in the community: Lightning CSS. Yet, the integration into Elixir projects requires some tedious plumbing. Because I wanted to overcome that, and also scratch the itch of building an Elixir package. I built and open-sourced lightning_css. The interface is similar to the one that the Elixir’s esbuild package proposes. You first configure profiles in your Mix project’s configuration file:

config :lightning_css,
  version: "1.22.1",
  default: [
    args: ~w(assets/css/app.css --bundle --output-file=priv/static/styles/bundle.css),
    watch_files: "assets/css/**/*.css",
    cd: Path.expand("..", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

And then you can invoke it right from the terminal using the Mix CLI passing the profile, lightning_css default. In the case of Phoenix projects, you need some additional steps to integrate it into Phoenix tasks and watchers.

I still need to add some tests, which is another itch I want to scratch: getting familiar with Elixir’s testing framework. However, I’ll leave that for the near future. I’ll adjust this website to make use of glob patterns, and start using it in Glossia, in which I plan to continue investing early next year.