@poveste/plugin-tailwind 0.14.0 → 0.15.0

package/README.md

@@ -34,5 +34,5 @@ Adding the plugin also adds a `Design System` group to the story tree.
 > project that merely had a file named `src/app.css` got a design-system group
 > and a story full of Tailwind's defaults it never asked for. It is opt-in now.
 
-[Configuration](https://poveste.dev/reference/config.html) ·
+[Configuration](https://poveste.dev/reference/config) ·
 [Documentation](https://poveste.dev)

package/dist/index.js

@@ -1,4 +1,5 @@
 import fs from 'node:fs';
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises';
 import path from 'pathe';
 import { getInjectedImport } from 'poveste';
 import { css } from './tokens-style.js';
@@ -77,19 +78,19 @@ export function isTailwindEntry(filePath) {
 export function HstTailwind(options = {}) {
     // An explicit `cssFile` is the caller saying so, and is taken at their word.
     const tailwindCssFile = options.cssFile ?? findUp(process.cwd(), CSS_ENTRY_CANDIDATES, isTailwindEntry);
-    async function generate(api) {
+    async function generate(api, cssFile) {
         try {
-            await api.fs.ensureDir(api.pluginTempDir);
-            await api.fs.emptyDir(api.pluginTempDir);
+            await rm(api.pluginTempDir, { recursive: true, force: true });
+            await mkdir(api.pluginTempDir, { recursive: true });
             api.moduleLoader.clearCache();
-            await api.fs.writeFile(api.path.resolve(api.pluginTempDir, 'style.css'), css);
-            const theme = await loadTailwindTheme(api, tailwindCssFile);
-            const storyFile = api.path.resolve(api.pluginTempDir, 'Tailwind.story.js');
-            await api.fs.writeFile(storyFile, storyTemplate({ theme }));
+            await writeFile(path.resolve(api.pluginTempDir, 'style.css'), css);
+            const theme = await loadTailwindTheme(cssFile);
+            const storyFile = path.resolve(api.pluginTempDir, 'Tailwind.story.js');
+            await writeFile(storyFile, storyTemplate({ theme }));
             api.addStoryFile(storyFile);
         }
         catch (e) {
-            api.error(e.stack ?? e.message);
+            api.error(e instanceof Error ? e.stack ?? e.message : String(e));
         }
     }
     return {
@@ -118,20 +119,19 @@ export function HstTailwind(options = {}) {
                 }
             }
         },
-        async onDev(api, onCleanup) {
+        async onDev(api) {
             if (tailwindCssFile) {
-                await generate(api);
-                const watcher = api.watcher.watch(tailwindCssFile)
-                    .on('change', () => generate(api))
-                    .on('add', () => generate(api));
-                onCleanup(() => {
-                    watcher.close();
+                await generate(api, tailwindCssFile);
+                api.watch(tailwindCssFile, async (event) => {
+                    if (event !== 'unlink') {
+                        await generate(api, tailwindCssFile);
+                    }
                 });
             }
         },
         async onBuild(api) {
             if (tailwindCssFile) {
-                await generate(api);
+                await generate(api, tailwindCssFile);
             }
         },
     };
@@ -147,18 +147,18 @@ export function HstTailwind(options = {}) {
  * to the JS entry, so its `style` field is used instead — that is how
  * `@import 'tailwindcss'` reaches `tailwindcss/index.css`.
  */
-async function resolveStylesheet(api, id, importBase) {
+async function resolveStylesheet(id, importBase) {
     const { createRequire } = await import('node:module');
     const require = createRequire(`${importBase}/`);
     if (id.startsWith('.')) {
-        return api.path.resolve(importBase, id);
+        return path.resolve(importBase, id);
     }
     if (id.endsWith('.css')) {
         return require.resolve(id);
     }
     const packageJsonPath = require.resolve(`${id}/package.json`);
-    const packageJson = JSON.parse(await api.fs.readFile(packageJsonPath, 'utf8'));
-    return api.path.resolve(api.path.dirname(packageJsonPath), packageJson.style ?? 'index.css');
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+    return path.resolve(path.dirname(packageJsonPath), packageJson.style ?? 'index.css');
 }
 export const TAILWIND_V4_REQUIRED = '@poveste/plugin-tailwind needs Tailwind v4: the installed tailwindcss does not export '
     + '`__unstable__loadDesignSystem`. A v3 project has nothing for this plugin to read — install tailwindcss@^4.';
@@ -180,17 +180,17 @@ export async function resolveDesignSystemLoader(importTailwind = () => import('t
     }
     return tailwind.__unstable__loadDesignSystem;
 }
-async function loadTailwindTheme(api, cssFile) {
+async function loadTailwindTheme(cssFile) {
     const __unstable__loadDesignSystem = await resolveDesignSystemLoader();
-    const base = api.path.dirname(cssFile);
-    const designSystem = await __unstable__loadDesignSystem(await api.fs.readFile(cssFile, 'utf8'), {
+    const base = path.dirname(cssFile);
+    const designSystem = await __unstable__loadDesignSystem(await readFile(cssFile, 'utf8'), {
         base,
         loadStylesheet: async (id, importBase) => {
-            const resolved = await resolveStylesheet(api, id, importBase);
+            const resolved = await resolveStylesheet(id, importBase);
             return {
                 path: resolved,
-                base: api.path.dirname(resolved),
-                content: await api.fs.readFile(resolved, 'utf8'),
+                base: path.dirname(resolved),
+                content: await readFile(resolved, 'utf8'),
             };
         },
     });
@@ -213,7 +213,7 @@ async function loadTailwindTheme(api, cssFile) {
         const out = {};
         for (const [key, value] of Object.entries(group('--color'))) {
             const match = key.match(/^(.*)-(\d+)$/);
-            if (match) {
+            if (match?.[1] !== undefined && match[2] !== undefined) {
                 out[match[1]] ??= {};
                 out[match[1]][match[2]] = value;
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@poveste/plugin-tailwind",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Poveste plugin that renders a Tailwind design system as a story",
   "author": {
     "name": "Sorin Gitlan",
@@ -47,18 +47,18 @@
     "node": "^22.22.2 || ^24.15.0 || >=26.0.0"
   },
   "peerDependencies": {
-    "poveste": "^0.14.0",
+    "poveste": "^0.15.0",
     "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "@poveste/shared": "0.14.0",
-    "pathe": "^1.1.2"
+    "@poveste/shared": "0.15.0",
+    "pathe": "^2.0.3"
   },
   "devDependencies": {
     "@types/node": "^22.10.1",
-    "poveste": "0.14.0",
+    "poveste": "0.15.0",
     "tailwindcss": "^4.3.3",
-    "typescript": "5.6.3",
+    "typescript": "6.0.3",
     "vite": "^8.2.0",
     "vitest": "^5.0.0"
   },