feat: add custom tailwind plugin for perf (#702)

Co-authored-by: Jo Franchetti <jofranchetti@gmail.com>
denoland · Aug 14, 2024 · 785fde0 · 785fde0
1 parent aa20d00
commit 785fde0
Show file tree

Hide file tree

Showing 5 changed files with 160 additions and 6 deletions.
diff --git a/_config.ts b/_config.ts
@@ -1,7 +1,6 @@
 import lume from "lume/mod.ts";
 import jsx from "lume/plugins/jsx_preact.ts";
-import tailwindcss from "lume/plugins/tailwindcss.ts";
-import postcss from "lume/plugins/postcss.ts";
+import tailwindcss from "./plugins/tailwind.ts";
 import prism from "lume/plugins/prism.ts";
 import search from "lume/plugins/search.ts";
 import esbuild from "lume/plugins/esbuild.ts";
@@ -88,11 +87,11 @@ site.use(redirects({
 }));
 site.use(search());
 site.use(jsx());
+
+// Custom plugin that for tailwind + postcss combined
 site.use(tailwindcss({
   options: tailwindConfig,
-  extensions: [".tsx", ".md", ".ts"],
 }));
-site.use(postcss());
 site.use(esbuild({
   extensions: [".client.ts"],
   options: {

diff --git a/deno.json b/deno.json
@@ -1,8 +1,11 @@
 {
   "imports": {
     "@std/fs": "jsr:@std/fs@^0.229.3",
+    "autoprefixer": "npm:autoprefixer@^10.4.20",
     "ga4": "https://raw.githubusercontent.com/denoland/ga4/04a1ce209116f158b5ef1658b957bdb109db68ed/mod.ts",
-    "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@1ec41559522534fb463888710764f2aadb640adf/"
+    "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@1ec41559522534fb463888710764f2aadb640adf/",
+    "postcss": "npm:postcss@^8.4.41",
+    "tailwindcss": "npm:tailwindcss@^3.4.9"
   },
   "tasks": {
     "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",

diff --git a/deno.lock b/deno.lock
diff --git a/plugins/tailwind.ts b/plugins/tailwind.ts
@@ -0,0 +1,35 @@
+import tw from "tailwindcss";
+import postcss from "postcss";
+import autoprefixer from "autoprefixer";
+import Site from "lume/core/site.ts";
+
+export interface TailwindOptions {
+  autoprefixer?: autoprefixer.Options;
+  options: tw.Config;
+}
+
+export default function (options: TailwindOptions) {
+  const extensions = [".css"];
+
+  return (site: Site) => {
+    // Setup PostCSS process pipeline with TailwindCSS + autoprefixer
+    const processor = postcss([
+      tw(options.options),
+      // deno-lint-ignore no-explicit-any
+      autoprefixer(options.autoprefixer) as any,
+    ]);
+
+    site.loadAssets(extensions);
+
+    site.process(extensions, async (pages) => {
+      // Process all CSS files which tends to be fast enough
+      await Promise.all(pages.map(async (page) => {
+        const result = await processor.process(page.content!, {
+          from: page.src.entry?.src,
+        });
+
+        page.content = result.content;
+      }));
+    });
+  };
+}
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,10 @@
 // tailwind.config.js
 /** @type {import('npm:tailwindcss').Config} */
 export default {
+  content: [
+    "{by-example,deploy,_components,_includes,runtime,static,subhosting}/**/*.{md,ts,tsx}",
+    "*.{ts,tsx}",
+  ],
   corePlugins: {
     preflight: true,
   },