In this video, we see a watch script for running Lightning CSS with Deno. This Deno script:
- waits, watching for changes to your input CSS files;
- bundles input CSS into a single output file when inputs change; and
- transpiles and minifies the generated CSS.
We use esbuild and Lightning CSS together, to generate ready-to-ship CSS which will run in older browsers, even when you work with modern CSS features. Lightning CSS is written in Rust, and makes use of the servo browser code (also used in Firefox Browser) for parsing CSS.
You see some details on setting up the watch script, which will help you customize it to suit your own workflow. Although we work completely in Deno here (using Deno Fresh as the framework), the script will be just as handy working in Rust Leptos, and other non-JS web frameworks.
lightningcss.ts — click to expand code.
In a new Terminal tab, run:
- GitHub repo with full project code
- Trying out Leptos post
- esbuild docs
- Lightning CSS docs
- Why switch to OK LCH colours
- Element chat: #Rodney matrix chat
- X handle: @askRodney
Have you found the post useful? Would you prefer to see posts on another topic instead? Get in touch with ideas for new posts. Also, if you like my writing style, get in touch if I can write some posts for your company site on a consultancy basis. Read on to find ways to get in touch, further below. If you want to support posts similar to this one and can spare a few dollars, euros or pounds, please consider supporting me through Buy me a Coffee.
Just dropped a new video on ⚡️ Lightning CSS using:— Rodney (@askRodney) October 13, 2023
— Deno watchFS, to watch for input CSS changes;
— esbuild to bundle
@import source into a single file; and
— Lightning CSS to minify and add legacy browser support.
Hope you find it useful!#askRodneyhttps://t.co/4M4CHazdmb
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter, @[email protected] on Mastodon and also the #rodney Element Matrix room. Also, see further ways to get in touch with Rodney Lab. I post regularly on Astro as well as Deno. Also, subscribe to the newsletter to keep up-to-date with our latest projects.