Added Tailwindcss plugin. Close #344

CHANGELOG.md

@@ -10,10 +10,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 ## [Unreleased]
 ### Added
 - Archetypes, that allows to create templates used when creating new content [#337].
+- New plugin `tailwindcss` [#344].
 - Third argument to `site.data()` to customize the data path [#339].
 - Improved the `relations` plugin:
   - You can configure the key used to save the relations with `relationKey`.
   - You can configure the key used to save the multiple relations with `pluralRelationKey`.
+- New hook `postcss` to modify the `Processor` instance in a low level.
 
 ### Changed
 - `denosass` library has been replaced with [@lumeland/sass](https://www.npmjs.com/package/@lumeland/sass) NPM package
@@ -2025,6 +2027,7 @@ The first version.
 [#339]: https://github.com/lumeland/lume/issues/339
 [#341]: https://github.com/lumeland/lume/issues/341
 [#342]: https://github.com/lumeland/lume/issues/342
+[#344]: https://github.com/lumeland/lume/issues/344
 [#346]: https://github.com/lumeland/lume/issues/346
 
 [Unreleased]: https://github.com/lumeland/lume/compare/v1.14.2...HEAD

cli/new.ts

@@ -21,6 +21,7 @@ export async function create(
   name: string,
   args: string[],
 ) {
+  // deno-lint-ignore no-explicit-any
   let fn: any;
   const site = await createSite(config);
 

deps/tailwindcss.ts

@@ -0,0 +1,2 @@
+export { default } from "npm:@lumeland/tailwindcss@3.2.5";
+export type { Config } from "npm:@lumeland/tailwindcss@3.2.5";

plugins/postcss.ts

@@ -63,6 +63,7 @@ export default function (userOptions?: Partial<Options>) {
     site.hooks.addPostcssPlugin = (plugin) => {
       runner.use(plugin);
     };
+    site.hooks.postcss = (callback) => callback(runner);
 
     site.loadAssets(options.extensions);
     site.process(options.extensions, postCss);

plugins/tailwindcss.ts

@@ -0,0 +1,58 @@
+import tailwind, { Config } from "../deps/tailwindcss.ts";
+import { merge } from "../core/utils.ts";
+
+import type { Site } from "../core.ts";
+
+export interface Options {
+  extensions: string[];
+  options: Config;
+}
+
+export const defaults: Options = {
+  extensions: [".html"],
+  options: {},
+};
+
+export default function (userOptions?: Partial<Options>) {
+  const options = merge(defaults, userOptions);
+
+  return (site: Site) => {
+    // deno-lint-ignore no-explicit-any
+    let tailwindPlugins: any[];
+
+    if (site.hooks.postcss) {
+      throw new Error(
+        "PostCSS plugin is required to be installed AFTER TailwindCSS plugin",
+      );
+    }
+
+    site.processAll(options.extensions, (pages) => {
+      // Get the content of all HTML pages
+      const content = pages.map((page) => ({ raw: page.content as string }));
+
+      // Create Tailwind plugin
+      // @ts-ignore: This expression is not callable.
+      const plugin = tailwind({
+        ...options.options,
+        content,
+      });
+
+      // Ensure PostCSS plugin is installed
+      if (!site.hooks.postcss) {
+        throw new Error(
+          "PostCSS plugin is required to be installed AFTER TailwindCSS plugin",
+        );
+      }
+
+      // Replace the old Tailwind plugin configuration from PostCSS plugins
+      // deno-lint-ignore no-explicit-any
+      site.hooks.postcss((runner: any) => {
+        tailwindPlugins?.forEach((plugin) => {
+          runner.plugins.splice(runner.plugins.indexOf(plugin), 1);
+        });
+        tailwindPlugins = runner.normalize([plugin]);
+        runner.plugins = runner.plugins.concat(tailwindPlugins);
+      });
+    });
+  };
+}

tests/assets/tailwindcss/script.js

@@ -0,0 +1,5 @@
+menuButton.addEventListener("click", function () {
+  const classList = document.getElementById("nav").classList;
+  classList.toggle("gap-8");
+  classList.toggle("gap-16");
+});

tests/assets/tailwindcss/styles.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tests/tailwindcss.test.ts

@@ -0,0 +1,18 @@
+import { assertSiteSnapshot, build, getSite } from "./utils.ts";
+import postcss from "../plugins/postcss.ts";
+import tailwindcss from "../plugins/tailwindcss.ts";
+
+Deno.test("postcss plugin", async (t) => {
+  const site = getSite({
+    src: "tailwindcss",
+  });
+
+  site.use(tailwindcss({
+    extensions: [".html", ".js"],
+  }));
+  site.use(postcss());
+  site.loadAssets([".js"]);
+
+  await build(site);
+  await assertSiteSnapshot(t, site);
+});