tailwind-hyperclay 0.1.0 → 0.1.2

package/PLAN.md

@@ -0,0 +1,86 @@
+# Plan: Integrate tailwind-hyperclay into ./hyperclay
+
+## Overview
+When a user saves an HTML file that references `https://hyperclay.com/tailwindcss/{siteName}.css`, automatically generate the CSS file using Tailwind v4.
+
+## Steps
+
+### 1. Install dependency
+```bash
+cd ./hyperclay
+npm install tailwind-hyperclay
+```
+
+### 2. Add static route for generated CSS
+In `hey.js`, add static serving for tailwind CSS files:
+```js
+'/tailwindcss' → public-assets/tailwindcss
+```
+
+### 3. Create the directory
+```bash
+mkdir -p ./hyperclay/public-assets/tailwindcss
+```
+
+### 4. Hook into saveHTML
+In `server-lib/state-actions.js`, after HTML is saved (~line 703):
+
+```js
+import { compileTailwind, hasTailwindLink } from 'tailwind-hyperclay';
+
+// After successful save...
+if (hasTailwindLink(formattedHtml, node.name)) {
+  const css = await compileTailwind(formattedHtml);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${node.name}.css`, css);
+}
+```
+
+### 5. Hook into uploadSyncFile
+In `server-lib/sync-actions.js`, after file is written (~line 311):
+
+```js
+import { compileTailwind, hasTailwindLink } from 'tailwind-hyperclay';
+
+// After file write...
+if (hasTailwindLink(content, siteName)) {
+  const css = await compileTailwind(content);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${siteName}.css`, css);
+}
+```
+
+### 6. Hook into restoreBackup
+In `server-lib/state-actions.js`, after backup is restored (~line 909):
+
+```js
+// After restore...
+if (hasTailwindLink(html, siteName)) {
+  const css = await compileTailwind(html);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${siteName}.css`, css);
+}
+```
+
+### 7. Hook into copySite
+In `server-lib/state-actions.js`, modify the copy logic (~line 399):
+
+```js
+import { compileTailwind, hasAnyTailwindLink, replaceTailwindLink } from 'tailwind-hyperclay';
+
+// Before writing the file, update the tailwind link to use new name
+let contentToWrite = siteContent;
+if (hasAnyTailwindLink(siteContent)) {
+  contentToWrite = replaceTailwindLink(siteContent, newSiteName);
+  const css = await compileTailwind(contentToWrite);
+  await dx('public-assets/tailwindcss').createFileOverwrite(`${newSiteName}.css`, css);
+}
+
+await dx('sites').createFileOverwrite(`${newSiteName}.html`, contentToWrite);
+```
+
+## Files to modify
+1. `hyperclay/package.json` - add dependency
+2. `hyperclay/hey.js` - add static route (~line 185)
+3. `hyperclay/server-lib/state-actions.js` - hooks at:
+   - `saveHTML` (~line 703)
+   - `copySite` (~line 399)
+   - `restoreBackup` (~line 909)
+4. `hyperclay/server-lib/sync-actions.js` - add post-sync hook (~line 311)

package/index.js

@@ -80,7 +80,44 @@ export function extractCandidates(html) {
   return Array.from(candidates);
 }
 
+function parseTailwindUrl(urlString) {
+  try {
+    const url = new URL(urlString);
+    if (url.host === 'hyperclay.com' &&
+        url.pathname.startsWith('/tailwindcss/') &&
+        url.pathname.endsWith('.css')) {
+      return url.pathname.slice(13, -4); // extract app name between /tailwindcss/ and .css
+    }
+  } catch {}
+  return null;
+}
+
+function extractHrefs(html) {
+  const hrefs = [];
+  const regex = /href\s*=\s*["']([^"']+)["']/gi;
+  let match;
+  while ((match = regex.exec(html)) !== null) {
+    hrefs.push(match[1]);
+  }
+  return hrefs;
+}
+
 export function hasTailwindLink(html, appName) {
-  const pattern = new RegExp(`https://hyperclay\\.com/tailwindcss/${appName}\\.css`);
-  return pattern.test(html);
+  return extractHrefs(html).some(url => parseTailwindUrl(url) === appName);
+}
+
+export function hasAnyTailwindLink(html) {
+  return extractHrefs(html).some(url => parseTailwindUrl(url) !== null);
+}
+
+export function replaceTailwindLink(html, newName) {
+  return html.replace(
+    /(href\s*=\s*["'])([^"']+)(["'])/gi,
+    (match, prefix, url, suffix) => {
+      if (parseTailwindUrl(url) !== null) {
+        return `${prefix}https://hyperclay.com/tailwindcss/${newName}.css${suffix}`;
+      }
+      return match;
+    }
+  );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-hyperclay",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "On-save Tailwind CSS generator for Hyperclay",
   "type": "module",
   "main": "index.js",
@@ -11,7 +11,11 @@
     "test": "node test/test.js",
     "release": "./scripts/release.sh"
   },
-  "keywords": ["tailwind", "hyperclay", "css"],
+  "keywords": [
+    "tailwind",
+    "hyperclay",
+    "css"
+  ],
   "author": "",
   "license": "MIT",
   "dependencies": {

package/test/test.js

@@ -1,4 +1,4 @@
-import { compileTailwind, hasTailwindLink } from '../index.js';
+import { compileTailwind, hasTailwindLink, hasAnyTailwindLink, replaceTailwindLink } from '../index.js';
 
 const testHTML = `
 <!DOCTYPE html>
@@ -15,20 +15,59 @@ const testHTML = `
 </html>
 `;
 
+const testHTMLWithQueryParams = `
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://hyperclay.com/tailwindcss/myApp.css?v=123&t=456" rel="stylesheet">
+</head>
+<body></body>
+</html>
+`;
+
+const testHTMLWithFragment = `
+<!DOCTYPE html>
+<html>
+<head>
+  <link href="https://hyperclay.com/tailwindcss/myApp.css#section" rel="stylesheet">
+</head>
+<body></body>
+</html>
+`;
+
+function test(name, actual, expected) {
+  const pass = actual === expected;
+  console.log(`  ${pass ? '✓' : '✗'} ${name}: ${actual} (expected ${expected})`);
+  if (!pass) process.exitCode = 1;
+}
+
 async function runTests() {
   console.log('Testing hasTailwindLink...');
-  console.log('  myApp:', hasTailwindLink(testHTML, 'myApp')); // true
-  console.log('  other:', hasTailwindLink(testHTML, 'other')); // false
+  test('myApp found', hasTailwindLink(testHTML, 'myApp'), true);
+  test('other not found', hasTailwindLink(testHTML, 'other'), false);
+  test('myApp with query params', hasTailwindLink(testHTMLWithQueryParams, 'myApp'), true);
+  test('myApp with fragment', hasTailwindLink(testHTMLWithFragment, 'myApp'), true);
+
+  console.log('\nTesting hasAnyTailwindLink...');
+  test('finds link', hasAnyTailwindLink(testHTML), true);
+  test('finds link with query params', hasAnyTailwindLink(testHTMLWithQueryParams), true);
+  test('no link', hasAnyTailwindLink('<html><body></body></html>'), false);
+
+  console.log('\nTesting replaceTailwindLink...');
+  const replaced = replaceTailwindLink(testHTML, 'newApp');
+  test('replaces app name', replaced.includes('https://hyperclay.com/tailwindcss/newApp.css'), true);
+  test('removes old app name', !replaced.includes('myApp'), true);
+
+  const replacedWithParams = replaceTailwindLink(testHTMLWithQueryParams, 'newApp');
+  test('replaces and strips query params', replacedWithParams.includes('https://hyperclay.com/tailwindcss/newApp.css"'), true);
+  test('query params removed', !replacedWithParams.includes('?v=123'), true);
 
   console.log('\nTesting compileTailwind...');
   const css = await compileTailwind(testHTML);
-  console.log('  Generated CSS length:', css.length);
-  console.log('  Contains .prose:', css.includes('.prose'));
-  console.log('  Contains .form-input:', css.includes('.form-input'));
-  console.log('  Contains .text-2xl:', css.includes('.text-2xl'));
-
-  console.log('\nSample output (first 500 chars):');
-  console.log(css.slice(0, 500));
+  test('generates CSS', css.length > 0, true);
+  test('contains .prose', css.includes('.prose'), true);
+  test('contains .form-input', css.includes('.form-input'), true);
+  test('contains .text-2xl', css.includes('.text-2xl'), true);
 }
 
 runTests().catch(console.error);