replaced windi_css with unocss

MIGRATION.md

@@ -40,3 +40,7 @@
 ## `netlify_cms` Plugin
 
 - Renamed to `decap_cms`.
+
+## `windi_css` Plugin
+
+- Replaced with `unocss`.

core/formats.ts

@@ -62,7 +62,7 @@ export default class Formats {
       return;
     }
 
-    // Chained extension (.tmpl.js, .windi.css) goes first
+    // Chained extension (.tmpl.js) goes first
     if (ext.match(/^\.\w+\.\w+$/)) {
       const entries = Array.from(this.entries.entries());
       entries.unshift([ext, format]);

core/utils.ts

@@ -46,8 +46,8 @@ export const pluginNames = [
   "tailwindcss",
   "terser",
   "toml",
+  "unocss",
   "vento",
-  "windi_css",
 ];
 
 export function log(...lines: (string | undefined)[]) {

deps/unocss.ts

@@ -0,0 +1,4 @@
+export { createGenerator, type UserConfig } from "npm:@unocss/[email protected]";
+export { presetUno } from "npm:@unocss/[email protected]";
+
+export const resetUrl = "https://unpkg.com/@unocss/[email protected]";

plugins/unocss.ts

@@ -0,0 +1,106 @@
+import type { DeepPartial, Site } from "../core.ts";
+import { merge, read } from "../core/utils.ts";
+import { Page } from "../core/filesystem.ts";
+import { createGenerator, presetUno, resetUrl } from "../deps/unocss.ts";
+
+import type { UserConfig } from "../deps/unocss.ts";
+
+export interface Options {
+  /**
+   * Configurations for UnoCSS.
+   * @see {@link https://unocss.dev/guide/config-file}
+   */
+  config?: UserConfig;
+  /**
+   * Set the css filename for all generated styles,
+   * Set to `false` to insert a <style> tag per page.
+   * @defaultValue `false`
+   */
+  cssFile: false | string;
+  /**
+   * Supported CSS reset options.
+   * @see {@link https://github.com/unocss/unocss/tree/main/packages/reset}
+   * @defaultValue `tailwind`
+   */
+  reset: false | "tailwind" | "tailwind-compat" | "eric-meyer";
+}
+
+export const defaults: Options = {
+  config: {
+    presets: [presetUno()],
+  },
+  cssFile: false,
+  reset: "tailwind",
+};
+
+export default function (userOptions: DeepPartial<Options> = {}) {
+  const options = merge(defaults, userOptions) as Options;
+
+  return (site: Site) => {
+    const uno = createGenerator(options.config);
+
+    if (options.cssFile === false) {
+      // Insert a <style> tag for each page
+      site.processAll([".html"], async (pages) => {
+        const reset = await getResetCss(options);
+
+        Promise.all(pages.map(async (page) => {
+          const document = page.document!;
+          const result = await uno.generate(
+            document.documentElement?.innerHTML ?? "",
+          );
+          const css = reset ? `${reset}\n${result.css}` : result.css;
+
+          if (css) {
+            const style = document.createElement("style");
+            style.innerText = css;
+            page.document?.head?.appendChild(style);
+          }
+        }));
+      });
+      return;
+    }
+
+    // Generate the stylesheets for all pages
+    site.processAll([".html"], async (pages) => {
+      const classes = new Set<string>();
+
+      await Promise.all(
+        pages.map(async (page) =>
+          await uno.generate(
+            page.document?.documentElement?.innerHTML ?? "",
+          )
+            .then((res) => res.matched)
+            .then((matched) => matched.forEach((match) => classes.add(match)))
+        ),
+      );
+
+      // Create & merge stylesheets for all pages
+      const reset = await getResetCss(options);
+      const result = await uno.generate(classes);
+      const css = reset ? `${reset}\n${result.css}` : result.css;
+
+      // output css as a page
+      const exists = site.pages.find((page) =>
+        page.outputPath === options.cssFile
+      );
+
+      if (exists) {
+        exists.content += `\n${css}`;
+      } else {
+        site.pages.push(Page.create(options.cssFile as string, css));
+      }
+    });
+  };
+}
+
+/**
+ * TODO: Replace with CSS Modules Import
+ * @remarks Deno does not currently support CSS Modules.
+ * @see {@link https://github.com/denoland/deno/issues/11961}
+ */
+async function getResetCss(options: Options) {
+  return options.reset === false
+    ? ""
+    : await read(`${resetUrl}/${options.reset}.css`, false);
+}