mnfst 0.5.203 → 0.5.205

package/lib/manifest.utilities.node.mjs

@@ -1,5 +1,25 @@
 /* manifest.utilities.node.mjs — built from scripts/utilities/ (DOM-free) */
 
+if (typeof globalThis.window === 'undefined') globalThis.window = globalThis;
+if (typeof globalThis.document === 'undefined') {
+    const inertElement = () => ({ style: {}, textContent: '', classList: { add(){}, remove(){}, contains: () => false }, setAttribute(){}, appendChild(){}, insertBefore(){} });
+    globalThis.document = {
+        documentElement: { outerHTML: '' },
+        head: { firstChild: null, lastElementChild: null, innerHTML: '', appendChild(){}, insertBefore(){} },
+        querySelectorAll: () => [],
+        querySelector: () => null,
+        getElementById: () => null,
+        getElementsByTagName: () => [],
+        createElement: inertElement,
+        addEventListener(){},
+        styleSheets: []
+    };
+}
+if (typeof globalThis.getComputedStyle === 'undefined') globalThis.getComputedStyle = () => ({ getPropertyValue: () => '' });
+if (typeof globalThis.localStorage === 'undefined') globalThis.localStorage = { getItem: () => null, setItem(){}, removeItem(){} };
+if (typeof globalThis.performance === 'undefined') globalThis.performance = { now: () => Date.now() };
+if (typeof globalThis.requestAnimationFrame === 'undefined') globalThis.requestAnimationFrame = (cb) => setTimeout(cb, 0);
+
 // Utility generators
 // Functions that generate CSS utilities from CSS variable suffixes
 
@@ -556,8 +576,10 @@ class TailwindCompiler {
 
         // Read any publish/render-provided static utilities sheet before the
         // first compile — its classes are skipped rather than regenerated.
+        // Fails open (never "everything covered") until this resolves —
+        // compile()'s first run awaits it, capped at 2s (see static.js).
         this.staticUtilitiesCoveredClasses = null;
-        this.detectStaticUtilitiesSheet();
+        this.staticUtilitiesReady = this.detectStaticUtilitiesSheet();
 
         // Add critical styles IMMEDIATELY - don't wait for anything
         this.addCriticalBlockingStylesSync();
@@ -902,9 +924,12 @@ TailwindCompiler.prototype.scanStaticClasses = async function () {
 
 // Extract classes from HTML content
 TailwindCompiler.prototype.extractClassesFromHTML = function (html, classSet) {
-    // Plain class attributes only — the leading boundary excludes Alpine's
-    // :class / x-bind:class bindings (JS expressions, not token lists)
-    const classRegex = /(?:^|[\s"'`>/])(?:[a-zA-Z][\w.-]*-)?class=["']([^"']+)["']/g;
+    // Literal class="..."/class='...' only — lookbehind excludes `:class=`
+    // (Alpine binding), whose "class=" substring would otherwise match and
+    // truncate at the literal's first internal quote, leaking a stray '{'.
+    // Whitespace-only split below keeps every token Tailwind would accept
+    // (variants, arbitrary values, leading '-', '!'); only x-/$ tokens drop.
+    const classRegex = /(?<![:\w])class=["']([^"']+)["']/g;
     let match;
 
     while ((match = classRegex.exec(html)) !== null) {
@@ -1115,8 +1140,11 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
 TailwindCompiler.prototype.extractThemeVariables = function (cssText) {
     const variables = new Map();
 
-    // Extract ALL CSS custom properties from ANY declaration block
-    const varRegex = /--([\w-]+):\s*([^;]+);/g;
+    // Extract ALL CSS custom properties from ANY declaration block. Terminator
+    // is a lookahead (`;` or `}`) rather than a consumed `;` so the last
+    // declaration in a block still matches when the author omits the
+    // trailing semicolon (valid CSS, e.g. `:root{--x:1rem}`).
+    const varRegex = /--([\w-]+):\s*([^;}]+)(?=[;}])/g;
 
     let varMatch;
     while ((varMatch = varRegex.exec(cssText)) !== null) {
@@ -2594,6 +2622,11 @@ TailwindCompiler.prototype.compile = async function () {
         if (!this.hasScannedStatic) {
             await this.scanStaticClasses();
 
+            // Wait for the static utilities sheet's covered-class read to
+            // settle (capped at 2s in detectStaticUtilitiesSheet) so this
+            // first compile decision isn't a guess — see static.js.
+            if (this.staticUtilitiesReady) await this.staticUtilitiesReady;
+
             // Fetch CSS content once for initial compilation
             const themeCss = await this.fetchThemeContent();
             if (themeCss) {
@@ -2775,6 +2808,13 @@ TailwindCompiler.prototype.compile = async function () {
 // buildUtilitiesNodeModule) with the DOM-free subset of the browser plugin's
 // subscripts (generators, variants, main, helpers, compile) so this exports
 // the exact same generation logic the browser JIT runs, with no document.
+//
+// compileUtilities() also runs the real `tailwindcss` engine (see the
+// "Tailwind engine pass" section below) — a real, lazily-imported dependency
+// used only there, via Node's fs/require by default, or via the `tailwind`
+// option for runtimes (e.g. Workers) that bundle the engine/CSS themselves
+// instead; every other export in this file stays dependency-free and
+// DOM-free as before.
 
 /** A bare TailwindCompiler instance carrying only what the pure generation
  * methods (generateUtilitiesFromVars, generateCustomUtilities, parseClassName,
@@ -2798,23 +2838,190 @@ function createNodeCompiler() {
     return instance;
 }
 
+// --- Tailwind engine pass -------------------------------------------------
+// Bakes the plain Tailwind-style utilities (flex, gap-2, rounded-full,
+// w-[37px], md:, hover:, …) that the runtime's bundled Tailwind engine
+// (lib/manifest.tailwind.js — a Tailwind v4 "Play CDN" browser build) would
+// otherwise generate live. Uses the real `tailwindcss` package's compile()/
+// build() — the same core compiler that browser build wraps, not a fork —
+// which is pure JS with no native binding and no DOM requirement.
+//
+// The browser engine reads only `<style type="text/tailwindcss">` tags
+// (default: `@import "tailwindcss";` plus whatever such tags are on the
+// page) and derives its candidates from `document.querySelectorAll("[class]")`
+// — it does not see Manifest's theme vars, so this mirrors that: no bridging
+// of `themeCss` into Tailwind's `@theme`. The custom variants below mirror
+// injectTailwindVariants() in manifest.utilities.init.js — keep both in sync.
+const TAILWIND_CUSTOM_VARIANTS = [
+    '@custom-variant touch (@media (pointer: coarse));',
+    '@custom-variant cursor (@media (pointer: fine) and (hover: hover));',
+    '@custom-variant pointer (@media (any-pointer: fine));',
+    '@custom-variant mac (&:where([data-os="macos"] *));',
+    '@custom-variant windows (&:where([data-os="windows"] *));',
+    '@custom-variant linux (&:where([data-os="linux"] *));',
+    '@custom-variant ios (&:where([data-os="ios"] *));',
+    '@custom-variant android (&:where([data-os="android"] *));',
+    '@custom-variant apple (&:where([data-os="macos"] *, [data-os="ios"] *));',
+    '@custom-variant online (&:where([data-online="true"] *));',
+    '@custom-variant offline (&:where([data-online="false"] *));',
+    '@custom-variant standalone (&:where([data-standalone] *));',
+    '@custom-variant native (&:where([data-native] *));',
+    '@custom-variant web (&:where(html:not([data-native]) *));'
+].join('\n');
+
+/** Balanced-brace extraction of a top-level `@layer <name> { ... }` body —
+ * the compiled CSS nests braces (media queries, `&:hover`), so a regex can't
+ * safely find the matching close brace. Returns '' when the layer is absent. */
+function extractLayerBody(css, layerName) {
+    const marker = `@layer ${layerName} {`;
+    const start = css.indexOf(marker);
+    if (start === -1) return '';
+    let depth = 1;
+    let i = start + marker.length;
+    const bodyStart = i;
+    for (; i < css.length && depth > 0; i++) {
+        if (css[i] === '{') depth++;
+        else if (css[i] === '}') depth--;
+    }
+    return css.slice(bodyStart, i - 1).trim();
+}
+
+let _tailwindEnginePromise = null;
+/** Lazily loads tailwindcss's compile() plus its theme.css/utilities.css text
+ * — the expensive, reusable I/O (dynamic import, two fs reads). Cached
+ * across calls; resolves to null (fail open) when the package or Node's
+ * fs/require aren't available in this runtime (e.g. a bare Workers isolate),
+ * so callers degrade to Manifest-only utilities rather than throwing.
+ *
+ * `injected`, when given, skips the fs/require path entirely: a caller that
+ * already has the engine and CSS in hand (a bundler-built Workers isolate,
+ * which has no `fs`/`require` — see the `tailwind` param on compileUtilities)
+ * supplies `{ engine, themeCss, utilitiesCss }`, where `engine` is the
+ * imported `tailwindcss` module namespace (its `compile` export is used).
+ * Not cached on `_tailwindEnginePromise`: cheap (no I/O, just wrapping
+ * already-resident values) and the caller owns the instance's lifetime.
+ *
+ * Deliberately skips tailwindcss/preflight.css: the browser engine's own
+ * default `@import "tailwindcss"` — see `jo`/`Io` in lib/manifest.tailwind.js
+ * — wires up only theme.css and utilities.css and leaves preflight empty, so
+ * matching it means never importing preflight here either (Manifest ships
+ * its own reset; the runtime never asks Tailwind for one). */
+function loadTailwindEngine(injected) {
+    if (injected) {
+        const { engine, themeCss, utilitiesCss } = injected;
+        if (!engine || typeof engine.compile !== 'function' || !themeCss || !utilitiesCss) {
+            return Promise.resolve(null);
+        }
+        return Promise.resolve({ compile: engine.compile, base: '/', themeCss, utilitiesCss });
+    }
+    if (_tailwindEnginePromise) return _tailwindEnginePromise;
+    _tailwindEnginePromise = (async () => {
+        try {
+            const { compile } = await import('tailwindcss');
+            const fs = await import('node:fs');
+            const path = await import('node:path');
+            const { createRequire } = await import('node:module');
+            const req = createRequire(import.meta.url);
+            const themePath = req.resolve('tailwindcss/theme.css');
+            const utilitiesPath = req.resolve('tailwindcss/utilities.css');
+            const themeCss = fs.readFileSync(themePath, 'utf8');
+            const utilitiesCss = fs.readFileSync(utilitiesPath, 'utf8');
+            const base = path.dirname(themePath);
+            return { compile, base, themeCss, utilitiesCss };
+        } catch (e) {
+            return null;
+        }
+    })();
+    return _tailwindEnginePromise;
+}
+
+/** Runs the real Tailwind engine over exactly `classes`, returning its
+ * (tree-shaken, used-only) `theme` and `utilities` layer bodies as a single
+ * CSS chunk. Returns '' when Tailwind can't be loaded here, or produced no
+ * utility rules for these classes (the default theme's font/spacing tokens
+ * would otherwise show up even for a class list with no real Tailwind match
+ * — e.g. Manifest's own `.row`/`.col` — since they're always defined; only
+ * emit the theme chunk alongside actual utility output).
+ *
+ * `injected` is passed straight through to loadTailwindEngine — see there.
+ *
+ * A fresh compiler is built per call (~a few ms — see loadTailwindEngine for
+ * the cached, reusable part): tailwindcss's compiler.build() is an
+ * incremental/watch-mode API that accumulates every candidate it has ever
+ * seen, so reusing one compiler across calls with different class lists
+ * would leak earlier calls' classes into later output — the same reason the
+ * browser engine tracks its own "already seen" set (see the header comment)
+ * before calling build(). */
+async function compileTailwindPass(classes, injected) {
+    if (!classes.length) return '';
+    const engine = await loadTailwindEngine(injected);
+    if (!engine) return '';
+    try {
+        const { compile, base, themeCss, utilitiesCss } = engine;
+        const input = `@layer theme, base, components, utilities;\n@import "tailwindcss/theme" layer(theme);\n@import "tailwindcss/utilities" layer(utilities);\n${TAILWIND_CUSTOM_VARIANTS}\n`;
+        const compiler = await compile(input, {
+            base,
+            loadStylesheet: async (id) => {
+                if (id === 'tailwindcss/theme') return { base, content: themeCss };
+                if (id === 'tailwindcss/utilities') return { base, content: utilitiesCss };
+                throw new Error(`manifest utilities: cannot load "${id}" for Tailwind bake`);
+            },
+            loadModule: async () => { throw new Error('manifest utilities: Tailwind plugins unsupported in bake'); }
+        });
+        const css = compiler.build(classes);
+        const utilities = extractLayerBody(css, 'utilities');
+        if (!utilities) return '';
+        const theme = extractLayerBody(css, 'theme');
+        const parts = [];
+        if (theme) parts.push(`@layer theme {\n${theme}\n}`);
+        parts.push(`@layer utilities {\n${utilities}\n}`);
+        return parts.join('\n\n');
+    } catch (e) {
+        return '';
+    }
+}
+
 /**
- * Compile the utility CSS the browser plugin would produce for exactly
- * `classes` — variants, theme-variable-driven utilities (generateUtilitiesFromVars)
- * and custom utilities (generateCustomUtilities) discovered in `themeCss`/`baseCss`.
+ * Compile the utility CSS the browser plugin (Manifest's own generators) plus
+ * the framework's bundled Tailwind engine would together produce for exactly
+ * `classes`. Manifest side: variants, theme-variable-driven utilities
+ * (generateUtilitiesFromVars) and custom utilities (generateCustomUtilities)
+ * discovered in `themeCss`/`baseCss`. Tailwind side: whatever real Tailwind
+ * utilities (`flex`, `gap-2`, `rounded-full`, arbitrary values like
+ * `w-[37px]`, and their variants) the class list resolves to, via the actual
+ * `tailwindcss` compiler (see compileTailwindPass above) — not a fork.
  * Deterministic for a given (classes, themeCss, baseCss) triple.
  *
- * @param {{classes?: string[], themeCss?: string, baseCss?: string}} options
+ * `baseCss` should include the framework's own utility CSS (lib/manifest.css)
+ * whenever the caller isn't already loading it: the browser plugin's compile()
+ * finds it for free via discoverCssFiles() scanning the page's own
+ * stylesheets, so generateCustomUtilities() recognises Manifest's semantic
+ * utilities (.row, .col, .center, …) and bakes variants like `md:row` or
+ * `hover:col-wrap`. Without it those variants are silently skipped here —
+ * scripts/utilities-static.mjs loads it automatically for this reason.
+ *
+ * `tailwind`, when given, is passed to the Tailwind engine pass instead of
+ * its default lazy `fs`/`require` load — `{ engine, themeCss, utilitiesCss }`
+ * where `engine` is the imported `tailwindcss` module namespace and the two
+ * CSS strings are the contents of `tailwindcss/theme.css` and
+ * `tailwindcss/utilities.css`. For runtimes that can statically import
+ * `tailwindcss` and inline its CSS at bundle time but have no `fs`/`require`
+ * to read them from node_modules at runtime (e.g. a Cloudflare Workers
+ * isolate) — see loadTailwindEngine. Omit it (the default) to keep using the
+ * Node/CLI fs-based load.
+ *
+ * @param {{classes?: string[], themeCss?: string, baseCss?: string, tailwind?: {engine: object, themeCss: string, utilitiesCss: string}}} options
  * @returns {Promise<string>}
  */
-export async function compileUtilities({ classes = [], themeCss = '', baseCss = '' } = {}) {
+export async function compileUtilities({ classes = [], themeCss = '', baseCss = '', tailwind = null } = {}) {
     const compiler = createNodeCompiler();
     const cssText = [baseCss, themeCss].filter(Boolean).join('\n');
+    const uniqueClasses = Array.from(new Set(classes));
 
     const discovered = compiler.extractCustomUtilities(cssText);
     for (const [name, value] of discovered) compiler.customUtilities.set(name, value);
 
-    const usedData = { classes: Array.from(new Set(classes)), variableSuffixes: [] };
+    const usedData = { classes: uniqueClasses, variableSuffixes: [] };
 
     const varUtilities = compiler.generateUtilitiesFromVars(cssText, usedData);
     const customUtilities = compiler.generateCustomUtilities(usedData);
@@ -2822,7 +3029,13 @@ export async function compileUtilities({ classes = [], themeCss = '', baseCss =
     let allUtilities = [varUtilities, customUtilities].filter(Boolean).join('\n\n');
     allUtilities = compiler.sortUtilities(allUtilities);
 
-    return allUtilities ? `@layer utilities {\n${allUtilities}\n}` : '';
+    const manifestLayer = allUtilities ? `@layer utilities {\n${allUtilities}\n}` : '';
+    const tailwindLayer = await compileTailwindPass(uniqueClasses, tailwind);
+
+    const body = [manifestLayer, tailwindLayer].filter(Boolean).join('\n\n');
+    if (!body) return '';
+    // Layer order preamble: wins over a later `base` reset regardless of load order.
+    return `@layer base, components, utilities;\n\n${body}`;
 }
 
 // `class:token=` (per-class conditional binding) and the `:class="..."`

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.203",
+    "version": "0.5.205",
     "private": false,
     "workspaces": [
         "templates/starter",
@@ -20,6 +20,9 @@
         "README.md",
         "LICENSE"
     ],
+    "dependencies": {
+        "tailwindcss": "^4.2.4"
+    },
     "scripts": {
         "clean": "rimraf src/styles/manifest.css src/styles/manifest.min.css src/styles/manifest.theme.css src/styles/manifest.code.css src/styles/manifest.code.min.css lib",
         "build": "cd src && node scripts/build.mjs",
@@ -58,7 +61,6 @@
         "puppeteer": "^24.15.0",
         "rimraf": "^5.0.0",
         "rollup": "^4.24.2",
-        "tailwindcss": "^4.2.4",
         "vitest": "^4.1.2"
     },
     "keywords": [