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

    
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 }