feat: Integrates TailwindCSS with Decofile (#230)

plugins/tailwind/bundler.ts

@@ -1,7 +1,7 @@
 import autoprefixer from "npm:[email protected]";
 import cssnano from "npm:[email protected]";
 import postcss from "npm:[email protected]";
-import tailwindcss from "npm:tailwindcss@3.3.3";
+import tailwindcss from "npm:tailwindcss@3.4.1";
 import { cyan } from "std/fmt/colors.ts";
 import { ensureFile } from "std/fs/mod.ts";
 import { join, toFileUrl } from "std/path/mod.ts";
@@ -17,7 +17,9 @@ const DEFAULT_TAILWIND_CSS = `
 @tailwind utilities;
 `;
 
-export const bundle = async ({ to, from }: { to: string; from: string }) => {
+export const bundle = async (
+  { to, from, release }: { to: string; from: string; release: string },
+) => {
   const start = performance.now();
 
   // Try to recover config from default file, a.k.a tailwind.config.ts
@@ -27,6 +29,15 @@ export const bundle = async ({ to, from }: { to: string; from: string }) => {
     .then((mod) => mod.default)
     .catch(() => DEFAULT_OPTIONS);
 
+  if (Array.isArray(config.content)) {
+    config.content.push({
+      raw: release,
+      extension: "json",
+    });
+  } else {
+    console.warn("TailwindCSS generation from decofile disabled");
+  }
+
   const processor = postcss([
     // deno-lint-ignore no-explicit-any
     (tailwindcss as any)(config),

plugins/tailwind/mod.ts

@@ -1,11 +1,20 @@
 import type { Handlers, Plugin } from "$fresh/server.ts";
-import { context } from "deco/live.ts";
+import { Context, context } from "deco/deco.ts";
 import { createWorker } from "../../utils/worker.ts";
 
 export const TO = "./static/tailwind.css";
 export const FROM = "./tailwind.css";
 
+let current: string | undefined = "";
+
 const generate = async () => {
+  const active = Context.active();
+  const revision = await active.release?.revision();
+
+  if (revision === current) {
+    return;
+  }
+
   /**
    * Here be capybaras! 🐁🐁🐁
    *
@@ -22,16 +31,21 @@ const generate = async () => {
     type: "module",
   });
 
-  await worker.bundle({ to: TO, from: FROM });
+  await worker.bundle({
+    to: TO,
+    from: FROM,
+    release: JSON.stringify(await active.release?.state()),
+  });
 
   worker.dispose();
+  current = revision;
 };
 
-const bundle = context.isDeploy ? Promise.resolve() : generate();
+const bundle = context.isDeploy ? () => Promise.resolve() : generate;
 
 export const handler: Handlers = {
   GET: async () => {
-    await bundle;
+    await bundle();
 
     try {
       const [stats, file] = await Promise.all([Deno.lstat(TO), Deno.open(TO)]);