Lightning_css - a wrapper to integrate LighningCSS into Elixir projects

Your Libraries & OS Mentoring Libraries
1

Hi there :wave:
I wanted to share a new Elixir package that I’ve built and open-sourced, lightning_css. I wanted to use globs to resolve and bundle CSS files, and I noticed that ESBuild, the default build tool that Phoenix ships with, doesn’t support that for CSS. Luckily, Lightning CSS does, and it ships as a binary that’s easy to pull and use in the same way the ESBuild Elixir package does. Therefore, I went ahead and built it.

Please, give it a try and let me know if you encounter any issues or have ideas for how to improve it. The README contains instructions for how to integrate it into a Phoenix project. I’d also recommend checking out Lightning CSS’s documentation, which goes into detail talking about other CSS-processing capabilities, which I don’t plan to use, but that you might find useful.

Happy Elixir coding!

12 Likes
2

Good one. :slightly_smiling_face:
Lightning CSS is great. I have used it in place of several PostCSS plugins in the past.

If I’m not mistaken, Tailwind will start to use it instead of PostCSS, or it’s in their plans or something.

3

A post was split to a new topic: Phoenix and the Asset Pipeline

4

Hi @pepicrft,

I’ve run into a problem with no solution found on Google, would you take a look plz?
I’ve set up lightningcss as doc instructed, bundle.css was successfully generated every time I made any change in assets/css/**/*.css
However, bundle.css can never be rendered any effect
But if I write it exactly like bundle.css it works instead, something wrong with that bundlecss? Or what step do I need to take to make it works?
Thank you

5

Hey, I used lightning_css here. If I’m understanding you correctly, you get the updated bundle.css, but it doesn’t show up in the UI? That could be because Phoenix is expecting “app.css” from tailwind, so you could change that to “bundle.css”

6

Hi Joel
This is my heex style reference

<link phx-track-static rel="stylesheet" href={~p"/styles/bundle.css"} />

It simply won’t work, but if I create a bundle.css myself and write some CSS in this file it works

EDIT: I built phoenix with --no-tailwind so

7

And are you sure that’s the place where you’re generated bundle.css is created (e.g. /styles/.. and not /assets/..? And are you sure you are using class names that exist in bundle.css in your .heex files?

I can only say that there shouldn’t be something wrong with the generated bundle.css, so it’s probably something else that’s missing.
I think I would need more information/code to help you.

8

Yes, I’m sure as per config.exs

config :lightning_css,
  version: "1.22.0",
  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__)}
  ]

I’ve also checked your codes for a bit, it seems like you are outputing it to /assets/app.css. However I’ve also done that, I’ve modified it to output it to /assets/app.css and it still doesn’t work.

Yes, I’m sure I’ve used the classname, I’ve tried the exact same classname with “bundle.css” that I write my own and it just works. Only the generated doesn’t.

Odd tho, I remembered when I first built lightningcss the output bundle.css is encrypted. But it isn’t any more. Still not working anyway.

EDIT: Everything I’ve done on lightningcss is from doc, I’ve not done anything else to modify it

9

Nevermind, solved it after I changed the output directory to /assets/app.css.
Weird, still don’t know why bundle.css won’t work.