@oberoncms/plugin-tailwind 0.18.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @oberoncms/plugin-tailwind
+
+## 0.18.0
+
+### Minor Changes
+
+- 8109ea8: Add a dynamic Tailwind plugin, expose public plugin settings through
+  the core adapter, and scaffold the Tailwind plugin into new apps.
+
+### Patch Changes
+
+- 8109ea8: Fix Tailwind compiler loading, seed the welcome block on initial
+  pages, and make Playwright smoke report uploads rerun-safe.
+- fc1747c: Refactor the tailwind plugin to simplify style syncing and serve
+  immutable hashed css assets from path-based endpoints.
+- Updated dependencies [a73560b]
+- Updated dependencies [8109ea8]
+- Updated dependencies [b654991]
+- Updated dependencies [8109ea8]
+- Updated dependencies [a4578f6]
+- Updated dependencies [a011a89]
+- Updated dependencies [28aa7e5]
+- Updated dependencies [48de893]
+- Updated dependencies [aa5371a]
+- Updated dependencies [36a3b7e]
+- Updated dependencies [237d393]
+  - @oberoncms/core@0.18.0

package/dist/compiler.d.ts

@@ -0,0 +1,3 @@
+import "server-cli-only";
+export declare function buildCss(classes: string[]): Promise<string>;
+//# sourceMappingURL=compiler.d.ts.map

package/dist/compiler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compiler.d.ts","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AASxB,wBAAsB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,mBAO/C"}

package/dist/compiler.js

@@ -0,0 +1,17 @@
+import "server-cli-only";
+import { compile } from "@tailwindcss/node";
+const tailwindEntry = [
+  '@import "tailwindcss/theme" theme(reference);',
+  '@import "tailwindcss/utilities";'
+].join("\n");
+async function buildCss(classes) {
+  const compiler = await compile(tailwindEntry, {
+    base: process.cwd(),
+    onDependency() {
+    }
+  });
+  return compiler.build(classes);
+}
+export {
+  buildCss
+};

package/dist/index.client.d.ts

@@ -0,0 +1,3 @@
+import type { OberonPlugin } from "@oberoncms/core";
+export declare const plugin: OberonPlugin;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../src/index.client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAEnD,eAAO,MAAM,MAAM,EAAE,YAEpB,CAAA"}

package/dist/index.client.js

@@ -0,0 +1,6 @@
+const plugin = () => {
+  throw new Error("Not available in browser");
+};
+export {
+  plugin
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import "server-cli-only";
+import { type OberonPlugin } from "@oberoncms/core";
+export declare function extractTailwindClasses(data: unknown): Promise<string[]>;
+export declare const plugin: OberonPlugin;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AAGxB,OAAO,EACL,KAAK,YAAY,EAGlB,MAAM,iBAAiB,CAAA;AAaxB,wBAAsB,sBAAsB,CAAC,IAAI,EAAE,OAAO,qBAczD;AA6ED,eAAO,MAAM,MAAM,EAAE,YA6EnB,CAAA"}

package/dist/index.js

@@ -0,0 +1,144 @@
+import "server-cli-only";
+import { createHash } from "crypto";
+import { ResponseError } from "@oberoncms/core";
+import { walkAsyncStep } from "walkjs";
+import { z } from "zod";
+import { version, name } from "./package.json.js";
+import { buildCss } from "./compiler.js";
+const tailwindStateSchema = z.object({
+  activeHash: z.string().nullable(),
+  classes: z.array(z.string())
+});
+const classDelimiter = /\s+/;
+async function extractTailwindClasses(data) {
+  const classes = /* @__PURE__ */ new Set();
+  for await (const node of walkAsyncStep(data)) {
+    if (node.key !== "className" || typeof node.val !== "string") {
+      continue;
+    }
+    for (const cls of node.val.split(classDelimiter)) {
+      if (cls) classes.add(cls);
+    }
+  }
+  return [...classes].sort();
+}
+async function getState(adapter) {
+  const parsed = tailwindStateSchema.safeParse(
+    await adapter.getKV(name, "state")
+  );
+  return parsed.success ? parsed.data : { activeHash: null, classes: [] };
+}
+async function getAsset(adapter, hash) {
+  if (!hash) {
+    return null;
+  }
+  const asset = await adapter.getKV(name, `asset:${hash}`);
+  return typeof asset === "string" ? asset : null;
+}
+async function getAllPublishedClasses(adapter) {
+  const classes = /* @__PURE__ */ new Set();
+  const pages = await adapter.getAllPages();
+  for (const { key } of pages) {
+    const data = await adapter.getPageData(key);
+    if (!data) continue;
+    for await (const node of walkAsyncStep(data)) {
+      if (node.key !== "className" || typeof node.val !== "string") {
+        continue;
+      }
+      for (const cls of node.val.split(classDelimiter)) {
+        if (cls) classes.add(cls);
+      }
+    }
+  }
+  return [...classes].sort();
+}
+async function syncStyles(adapter) {
+  const classes = await getAllPublishedClasses(adapter);
+  const state = await getState(adapter);
+  if (!classes.length) {
+    if (state.activeHash === null && state.classes.length === 0) {
+      return;
+    }
+    await adapter.putKV(name, "state", { activeHash: null, classes: [] });
+    return;
+  }
+  const hash = createHash("sha256").update(classes.join("\n")).digest("hex");
+  if (hash === state.activeHash && await getAsset(adapter, hash)) {
+    return;
+  }
+  const css = await buildCss(classes);
+  await adapter.putKV(name, `asset:${hash}`, css);
+  await adapter.putKV(name, "state", { activeHash: hash, classes });
+}
+const plugin = (adapter) => ({
+  name,
+  version,
+  handlers: {
+    tailwind: () => ({
+      GET: async (request) => {
+        try {
+          const pathname = new URL(request.url).pathname;
+          const filename = pathname.split("/").pop();
+          const hash = filename?.endsWith(".css") ? filename.slice(0, -4) : void 0;
+          const css = await getAsset(adapter, hash);
+          if (!css) {
+            return new Response("", {
+              status: 404,
+              headers: {
+                "Cache-Control": "no-store",
+                "Content-Type": "text/css; charset=utf-8"
+              }
+            });
+          }
+          return new Response(css, {
+            status: 200,
+            headers: {
+              "Cache-Control": "public, max-age=31536000, immutable",
+              "Content-Type": "text/css; charset=utf-8"
+            }
+          });
+        } catch {
+          return new Response("", {
+            status: 404,
+            headers: {
+              "Cache-Control": "no-store",
+              "Content-Type": "text/css; charset=utf-8"
+            }
+          });
+        }
+      }
+    })
+  },
+  adapter: {
+    prebuild: async () => {
+      try {
+        await adapter.prebuild();
+        await syncStyles(adapter);
+      } catch (error) {
+        if (error instanceof ResponseError) {
+          throw error;
+        }
+        throw new ResponseError(
+          error instanceof Error && error.message ? `Failed to prepare Tailwind styles: ${error.message}` : "Failed to prepare Tailwind styles"
+        );
+      }
+    },
+    updatePageData: async (page) => {
+      try {
+        await adapter.updatePageData(page);
+        await syncStyles(adapter);
+      } catch (error) {
+        if (error instanceof ResponseError) {
+          throw error;
+        }
+        throw new ResponseError(
+          error instanceof Error && error.message ? `Failed to update Tailwind styles: ${error.message}` : "Failed to update Tailwind styles"
+        );
+      }
+    }
+  }
+});
+export {
+  extractTailwindClasses,
+  plugin
+};

package/dist/package.json.js

@@ -0,0 +1,6 @@
+const name = "@oberoncms/plugin-tailwind";
+const version = "0.18.0";
+export {
+  name,
+  version
+};

package/dist/version

@@ -0,0 +1 @@
+0.0.0

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@oberoncms/plugin-tailwind",
+  "version": "0.18.0",
+  "author": "Tohuhono ltd",
+  "license": "MIT",
+  "description": "A dynamic Tailwind utilities plugin for OberonCMS",
+  "keywords": [
+    "oberon",
+    "oberoncms",
+    "cms",
+    "nextjs",
+    "react",
+    "adapter",
+    "plugin",
+    "tailwind"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tohuhono/Oberon",
+    "directory": "packages/plugins/tailwind"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG*",
+    "README*",
+    "LICENSE*"
+  ],
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "vite build",
+    "clean": "odt clean",
+    "dev": "vite build --watch",
+    "lint": "eslint .",
+    "test:unit": "vitest run",
+    "test:watch": "vitest",
+    "tsc": "tsc --pretty",
+    "wait": "wait-on ./dist/version && echo done",
+    "wait:clean": "rimraf ./dist/version"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@oberoncms/core": "workspace:*",
+    "@tailwindcss/node": "^4.2.1",
+    "server-cli-only": "^0.3.2",
+    "walkjs": "^6.0.1",
+    "zod": "^4.3.6"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@dev/eslint": "workspace:*",
+    "@dev/scripts": "workspace:*",
+    "@dev/typescript": "workspace:*",
+    "@dev/vite": "workspace:*",
+    "@dev/vitest": "workspace:*",
+    "@oberoncms/sqlite": "workspace:*",
+    "@oberoncms/testing": "workspace:*",
+    "@types/node": "24.10.1",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "typescript": "5.9.3"
+  }
+}

package/src/compiler.ts

@@ -0,0 +1,17 @@
+import "server-cli-only"
+
+import { compile } from "@tailwindcss/node"
+
+const tailwindEntry = [
+  '@import "tailwindcss/theme" theme(reference);',
+  '@import "tailwindcss/utilities";',
+].join("\n")
+
+export async function buildCss(classes: string[]) {
+  const compiler = await compile(tailwindEntry, {
+    base: process.cwd(),
+    onDependency() {},
+  })
+
+  return compiler.build(classes)
+}

package/src/index.client.ts

@@ -0,0 +1,5 @@
+import type { OberonPlugin } from "@oberoncms/core"
+
+export const plugin: OberonPlugin = () => {
+  throw new Error("Not available in browser")
+}

package/src/index.test.ts

@@ -0,0 +1,297 @@
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+import { fromPartial, test } from "@dev/vitest"
+import type { OberonPluginAdapter } from "@oberoncms/core"
+import {
+  NotImplementedError,
+  ResponseError,
+  type OberonPage,
+} from "@oberoncms/core"
+import {
+  createPluginTest,
+  createStorageAdapterFactory,
+} from "@oberoncms/testing"
+import { z } from "zod"
+import { name as pluginName } from "../package.json" with { type: "json" }
+import { plugin as tailwindPlugin } from "./index"
+
+const rootDirectory = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "../../../..",
+)
+
+const sqliteFile = resolve(rootDirectory, ".tmp/tailwind-plugin-unit-tests.db")
+
+function createPage(className: string, key = "/"): OberonPage {
+  return {
+    key,
+    updatedAt: new Date("2025-01-01T00:00:00.000Z"),
+    updatedBy: "test@oberon.invalid",
+    data: {
+      content: [
+        {
+          type: "Text",
+          props: {
+            className,
+          },
+        },
+      ],
+      root: {
+        props: {
+          title: "Test",
+        },
+      },
+    },
+  }
+}
+
+const tailwindStateSchema = z.object({
+  activeHash: z.string().nullable(),
+  classes: z.array(z.string()),
+})
+
+type TailwindState = z.infer<typeof tailwindStateSchema>
+
+async function getState(adapter: Pick<OberonPluginAdapter, "getKV">) {
+  const parsed = tailwindStateSchema.safeParse(
+    await adapter.getKV(pluginName, "state"),
+  )
+
+  return parsed.success ? (parsed.data satisfies TailwindState) : null
+}
+
+async function getAsset(
+  adapter: Pick<OberonPluginAdapter, "getKV">,
+  hash: string,
+) {
+  return await adapter.getKV(pluginName, `asset:${hash}`)
+}
+
+async function getStylesheets(adapter: Pick<OberonPluginAdapter, "getKV">) {
+  const state = await getState(adapter)
+
+  if (!state?.activeHash) {
+    return []
+  }
+
+  const asset = await getAsset(adapter, state.activeHash)
+
+  if (typeof asset !== "string") {
+    return []
+  }
+
+  return [`/cms/api/tailwind/${state.activeHash}.css`]
+}
+
+const createAdapter = createStorageAdapterFactory({
+  sqliteFile,
+})
+
+const tailwindTest = createPluginTest(test)
+  .extend(
+    "adapter",
+    { scope: "worker" },
+    // eslint-disable-next-line no-empty-pattern
+    async ({}, { onCleanup }) => {
+      return await createAdapter(onCleanup)
+    },
+  )
+  .extend("plugin", { scope: "worker" }, async ({ adapter }) => {
+    return tailwindPlugin(adapter)
+  })
+
+tailwindTest.describe("tailwind plugin", { tags: ["ai", "issue-314"] }, () => {
+  tailwindTest.beforeEach(async ({ adapter }) => {
+    const state = await getState(adapter)
+
+    if (state?.activeHash) {
+      await adapter.deleteKV(pluginName, `asset:${state.activeHash}`)
+    }
+
+    await adapter.deleteKV(pluginName, "state")
+
+    const pages = await adapter.getAllPages()
+
+    for (const { key } of pages) {
+      await adapter.deletePage(key)
+    }
+  })
+
+  tailwindTest(
+    "publishes a hashed dynamic asset and exposes its stylesheet href",
+    async ({ expect, adapter, plugin }) => {
+      const page = createPage("text-red-500 md:grid text-red-500")
+
+      await plugin.adapter?.updatePageData?.(page)
+
+      const state = await getState(adapter)
+
+      expect(state?.classes).toEqual(["md:grid", "text-red-500"])
+      expect(state?.activeHash).toHaveLength(64)
+      await expect(getAsset(adapter, state!.activeHash!)).resolves.toContain(
+        ".text-red-500",
+      )
+
+      await expect(getStylesheets(adapter)).resolves.toEqual([
+        `/cms/api/tailwind/${state!.activeHash}.css`,
+      ])
+
+      const response = await plugin.handlers
+        ?.tailwind?.(fromPartial({}))
+        .GET?.(
+          new Request(
+            `https://oberon.invalid/cms/api/tailwind/${state!.activeHash}.css`,
+          ) as never,
+        )
+
+      expect(response?.status).toBe(200)
+      await expect(response?.text()).resolves.toContain(".md\\:grid")
+    },
+  )
+
+  tailwindTest(
+    "publishes the playground text example classes without throwing",
+    async ({ expect, adapter, plugin }) => {
+      const page = createPage("prose dark:prose-invert lg:prose-lg p-1")
+
+      await expect(
+        plugin.adapter?.updatePageData?.(page),
+      ).resolves.toBeUndefined()
+
+      const state = await getState(adapter)
+
+      expect(state?.classes).toEqual([
+        "dark:prose-invert",
+        "lg:prose-lg",
+        "p-1",
+        "prose",
+      ])
+      expect(state?.activeHash).toHaveLength(64)
+    },
+  )
+
+  tailwindTest(
+    "reconciles missing assets during prebuild",
+    async ({ expect, adapter, plugin }) => {
+      await plugin.adapter?.updatePageData?.(createPage("underline"))
+
+      await plugin.adapter?.prebuild?.()
+
+      const firstState = await getState(adapter)
+
+      await adapter.deleteKV(pluginName, `asset:${firstState!.activeHash}`)
+
+      await expect(getStylesheets(adapter)).resolves.toEqual([])
+
+      await plugin.adapter?.prebuild?.()
+
+      await expect(
+        getAsset(adapter, firstState!.activeHash!),
+      ).resolves.toContain(".underline")
+    },
+  )
+
+  tailwindTest(
+    "degrades when no dynamic asset is available",
+    async ({ expect, adapter, plugin }) => {
+      await expect(getStylesheets(adapter)).resolves.toEqual([])
+
+      const response = await plugin.handlers
+        ?.tailwind?.(fromPartial({}))
+        .GET?.(new Request("https://oberon.invalid/cms/api/tailwind") as never)
+
+      expect(response?.status).toBe(404)
+    },
+  )
+
+  tailwindTest(
+    "fails loudly during prebuild when KV storage is unavailable",
+    async ({ expect }) => {
+      const plugin = tailwindPlugin(
+        fromPartial({
+          prebuild: async () => {},
+          getAllPages: async () => [{ key: "/" }],
+          getPageData: async () => createPage("underline").data,
+          getKV: async () => {
+            throw new NotImplementedError(
+              "This action is not available in the demo",
+            )
+          },
+          putKV: async () => {
+            throw new NotImplementedError(
+              "This action is not available in the demo",
+            )
+          },
+        }),
+      )
+
+      await expect(plugin.adapter?.prebuild?.()).rejects.toThrow(
+        new NotImplementedError("This action is not available in the demo"),
+      )
+
+      const response = await plugin.handlers
+        ?.tailwind?.(fromPartial({}))
+        .GET?.(new Request("https://oberon.invalid/cms/api/tailwind") as never)
+
+      expect(response?.status).toBe(404)
+    },
+  )
+
+  tailwindTest(
+    "fails loudly during page updates when KV storage is unavailable",
+    async ({ expect }) => {
+      const plugin = tailwindPlugin(
+        fromPartial({
+          updatePageData: async () => {},
+          getAllPages: async () => [{ key: "/" }],
+          getPageData: async () => createPage("underline").data,
+          getKV: async () => {
+            throw new NotImplementedError(
+              "This action is not available in the demo",
+            )
+          },
+          putKV: async () => {
+            throw new NotImplementedError(
+              "This action is not available in the demo",
+            )
+          },
+        }),
+      )
+
+      await expect(
+        plugin.adapter?.updatePageData?.(createPage("underline")),
+      ).rejects.toThrow(
+        new NotImplementedError("This action is not available in the demo"),
+      )
+
+      const response = await plugin.handlers
+        ?.tailwind?.(fromPartial({}))
+        .GET?.(new Request("https://oberon.invalid/cms/api/tailwind") as never)
+
+      expect(response?.status).toBe(404)
+    },
+  )
+
+  tailwindTest(
+    "surfaces generic Tailwind update failures as response errors",
+    async ({ expect }) => {
+      const plugin = tailwindPlugin(
+        fromPartial({
+          updatePageData: async () => {},
+          getAllPages: async () => [{ key: "/" }],
+          getPageData: async () => createPage("underline").data,
+          getKV: async () => null,
+          putKV: async () => {
+            throw new Error("boom")
+          },
+        }),
+      )
+
+      await expect(
+        plugin.adapter?.updatePageData?.(createPage("underline")),
+      ).rejects.toThrow(
+        new ResponseError("Failed to update Tailwind styles: boom"),
+      )
+    },
+  )
+})

package/src/index.ts

@@ -0,0 +1,189 @@
+import "server-cli-only"
+
+import { createHash } from "crypto"
+import {
+  type OberonPlugin,
+  type OberonPluginAdapter,
+  ResponseError,
+} from "@oberoncms/core"
+import { walkAsyncStep } from "walkjs"
+import { z } from "zod"
+import { name, version } from "../package.json" with { type: "json" }
+import { buildCss } from "./compiler"
+
+const tailwindStateSchema = z.object({
+  activeHash: z.string().nullable(),
+  classes: z.array(z.string()),
+})
+
+const classDelimiter = /\s+/
+
+export async function extractTailwindClasses(data: unknown) {
+  const classes = new Set<string>()
+
+  for await (const node of walkAsyncStep(data)) {
+    if (node.key !== "className" || typeof node.val !== "string") {
+      continue
+    }
+
+    for (const cls of node.val.split(classDelimiter)) {
+      if (cls) classes.add(cls)
+    }
+  }
+
+  return [...classes].sort()
+}
+
+async function getState(adapter: Pick<OberonPluginAdapter, "getKV">) {
+  const parsed = tailwindStateSchema.safeParse(
+    await adapter.getKV(name, "state"),
+  )
+
+  return parsed.success ? parsed.data : { activeHash: null, classes: [] }
+}
+
+async function getAsset(
+  adapter: Pick<OberonPluginAdapter, "getKV">,
+  hash: string | null | undefined,
+) {
+  if (!hash) {
+    return null
+  }
+
+  const asset = await adapter.getKV(name, `asset:${hash}`)
+
+  return typeof asset === "string" ? asset : null
+}
+
+async function getAllPublishedClasses(
+  adapter: Pick<OberonPluginAdapter, "getAllPages" | "getPageData">,
+) {
+  const classes = new Set<string>()
+  const pages = await adapter.getAllPages()
+
+  for (const { key } of pages) {
+    const data = await adapter.getPageData(key)
+    if (!data) continue
+
+    for await (const node of walkAsyncStep(data)) {
+      if (node.key !== "className" || typeof node.val !== "string") {
+        continue
+      }
+
+      for (const cls of node.val.split(classDelimiter)) {
+        if (cls) classes.add(cls)
+      }
+    }
+  }
+
+  return [...classes].sort()
+}
+
+async function syncStyles(
+  adapter: Pick<
+    OberonPluginAdapter,
+    "getAllPages" | "getKV" | "getPageData" | "putKV"
+  >,
+) {
+  const classes = await getAllPublishedClasses(adapter)
+  const state = await getState(adapter)
+
+  if (!classes.length) {
+    if (state.activeHash === null && state.classes.length === 0) {
+      return
+    }
+
+    await adapter.putKV(name, "state", { activeHash: null, classes: [] })
+    return
+  }
+
+  const hash = createHash("sha256").update(classes.join("\n")).digest("hex")
+
+  if (hash === state.activeHash && (await getAsset(adapter, hash))) {
+    return
+  }
+
+  const css = await buildCss(classes)
+  await adapter.putKV(name, `asset:${hash}`, css)
+
+  await adapter.putKV(name, "state", { activeHash: hash, classes })
+}
+
+export const plugin: OberonPlugin = (adapter) => ({
+  name,
+  version,
+  handlers: {
+    tailwind: () => ({
+      GET: async (request) => {
+        try {
+          const pathname = new URL(request.url).pathname
+          const filename = pathname.split("/").pop()
+          const hash = filename?.endsWith(".css")
+            ? filename.slice(0, -4)
+            : undefined
+          const css = await getAsset(adapter, hash)
+
+          if (!css) {
+            return new Response("", {
+              status: 404,
+              headers: {
+                "Cache-Control": "no-store",
+                "Content-Type": "text/css; charset=utf-8",
+              },
+            })
+          }
+
+          return new Response(css, {
+            status: 200,
+            headers: {
+              "Cache-Control": "public, max-age=31536000, immutable",
+              "Content-Type": "text/css; charset=utf-8",
+            },
+          })
+        } catch {
+          return new Response("", {
+            status: 404,
+            headers: {
+              "Cache-Control": "no-store",
+              "Content-Type": "text/css; charset=utf-8",
+            },
+          })
+        }
+      },
+    }),
+  },
+  adapter: {
+    prebuild: async () => {
+      try {
+        await adapter.prebuild()
+        await syncStyles(adapter)
+      } catch (error) {
+        if (error instanceof ResponseError) {
+          throw error
+        }
+
+        throw new ResponseError(
+          error instanceof Error && error.message
+            ? `Failed to prepare Tailwind styles: ${error.message}`
+            : "Failed to prepare Tailwind styles",
+        )
+      }
+    },
+    updatePageData: async (page) => {
+      try {
+        await adapter.updatePageData(page)
+        await syncStyles(adapter)
+      } catch (error) {
+        if (error instanceof ResponseError) {
+          throw error
+        }
+
+        throw new ResponseError(
+          error instanceof Error && error.message
+            ? `Failed to update Tailwind styles: ${error.message}`
+            : "Failed to update Tailwind styles",
+        )
+      }
+    },
+  },
+})