Opens an external site in a new window
Mental Health Awareness Month
“Community”
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links
  • Profile
RODNEY LAB
  • Home
  • Plus +
  • Newsletter
  • Links

Using Lightning CSS with Deno: Bundle & Transform ⚡️ # Using Lightning CSS with Deno: Bundle & Transform ⚡️ #

blurry low resolution placeholder image Using Lightning CSS with Deno
  1. Home Rodney Lab Home
  2. Blog Posts Rodney Lab Blog Posts
  3. Deno Deno Blog Posts
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Using Lightning CSS with Deno: Bundle & Transform ⚡️ #

Updated 13 months ago
3 minute read
Gunning Fog Index: 4.9
Content by Rodney
blurry low resolution placeholder image Author Image: Rodney from Rodney Lab
SHARE:

💅 Using Lightning CSS with Deno #

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.

I hope it will be useful for you. You can drop a comment below or reach out for a chat on Element , as well as X @mention  if you have suggestions for improvements or questions.

📹 Video #

Please enable JavaScript to watch the video 📼

Using Lightning CSS with Deno: Bundle & Transform

🗳 Poll #

Do you just use Deno in JavaScript/TypeScript projects?
Voting reveals latest results.

🖥 Using Lightning CSS with Deno: Code #

Watch Script #

lightningcss.ts — click to expand code.
lightningcss.ts
typescript
    
1 import { debounce } from "@std/async";
2 import { relative, resolve } from "@std/path";
3 import browserslist from "browserslist";
4 import { build } from "esbuild/mod.js";
5 import init, { browserslistToTargets, transform } from "lightningcss";
6
7 const __dirname = resolve();
8 const ignoreFiles = ["styles/main_bundled.css"];
9
10 await init();
11 console.log("Watching for updates...");
12
13 const targets = browserslistToTargets(
14 browserslist(
15 "> 0.5%, last 2 versions, Firefox >= 102, Firefox ESR, not dead",
16 ),
17 );
18
19 async function buildStyles(path: string) {
20 try {
21 const css = await Deno.readTextFile(path);
22 const { code: outputCss } = transform({
23 filename: path,
24 code: new TextEncoder().encode(css),
25 minify: true,
26 targets,
27 });
28
29 const outputDir = "./static";
30 const outputPath = `${outputDir}/styles.css`;
31 const decoder = new TextDecoder();
32 try {
33 await Deno.writeTextFile(outputPath, decoder.decode(outputCss));
34 } catch (error: unknown) {
35 if (error instanceof Deno.errors.NotFound) {
36 await Deno.mkdir(outputDir, { recursive: true });
37 await Deno.writeTextFile(outputPath, decoder.decode(outputCss));
38 }
39 throw error;
40 }
41 } catch (error: unknown) {
42 console.error(`Error building styles for path ${path}: ${error as string}`);
43 }
44 }
45
46 async function bundleStyles() {
47 try {
48 await build({
49 entryPoints: ["styles/main.css"],
50 bundle: true,
51 outfile: "styles/main_bundled.css",
52 external: ["*.woff2"],
53 });
54 } catch (error: unknown) {
55 console.error(`Error bundling styles: ${error as string}`);
56 }
57 }
58
59 const debouncedUpdateStyles = debounce(async (path: string) => {
60 const relativePath = relative(__dirname, path);
61
62 if (!ignoreFiles.includes(relativePath)) {
63 await bundleStyles();
64 await buildStyles("styles/main_bundled.css");
65 console.log("Updated static/styles.css");
66 }
67 }, 200);
68
69 const watcher = Deno.watchFs(["./styles"]);
70 for await (const event of watcher) {
71 const { paths } = event;
72 paths.forEach((path) => {
73 debouncedUpdateStyles(path);
74 });
75 }

Running Watch Script #

In a new Terminal tab, run:

    
deno task watch:css

🔗 Links #

  • 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 

🙏🏽 Feedback #

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.

blurry low resolution placeholder image ask Rodney X (formerly Twitter) avatar

Rodney

@askRodney

Just dropped a new video on ⚡️ Lightning CSS using:

— 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

— Rodney (@askRodney) October 13, 2023

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.

Thanks for reading this post. I hope you found it valuable. Please get in touch with your feedback and suggestions for posts you would like to see. Read more about me …

blurry low resolution placeholder image Rodney from Rodney Lab
TAGS:
DENOCSS

Related Post

blurry low resolution placeholder image Trying out Leptos: Fine-grained Reactive Framework for Rust 🦀

Trying out Leptos: Fine-grained Reactive Framework for Rust 🦀

rust
<PREVIOUS POST
NEXT POST >
LATEST POST >>

Leave a comment …

Your information will be handled in line with our Privacy Policy .

Ask for more

1 Nov 2022 — Astro Server-Side Rendering: Edge Search Site
3 Oct 2022 — Svelte eCommerce Site: SvelteKit Snipcart Storefront
1 Sept 2022 — Get Started with SvelteKit Headless WordPress

Copyright © 2020 – 2025 Rodney Johnson. All Rights Reserved. Please read important copyright and intellectual property information.

  • Home
  • Profile
  • Plus +
  • Newsletter
  • Contact
  • Links
  • Terms of Use
  • Privacy Policy
We use cookies  to enhance visitors’ experience. Please click the “Options” button to make your choice.  Learn more here.