mnfst 0.5.218 → 0.5.220

package/lib/manifest.utilities.node.mjs

@@ -617,6 +617,7 @@ class TailwindCompiler {
         this.lastClassesHash = ''; // Track changes in used classes
         this.staticClassCache = new Set(); // Cache classes found in static HTML/components
         this.dynamicClassCache = new Set(); // Cache classes that appear dynamically
+        this.quietClasses = new Set(); // Seen only inside ignored elements, not yet compiled
         this.hasScannedStatic = false; // Track if we've done initial static scan
         this.staticScanPromise = null; // Promise for initial static scan
         this.ignoredClassPatterns = [ // Patterns for classes to ignore
@@ -772,6 +773,7 @@ class TailwindCompiler {
 TailwindCompiler.prototype.ensureUtilityStylesLast = function () {
     if (this.styleElement && this.styleElement.parentNode && document.head.lastElementChild !== this.styleElement) {
         document.head.appendChild(this.styleElement);
+        if (this.resyncUtilitiesText) this.resyncUtilitiesText();
     }
 };
 
@@ -1148,6 +1150,8 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
     // Wait for all fetches to complete
     await Promise.all(fetchPromises);
 
+    // Order-free identity (fetches land in any order) for "theme unchanged" checks
+    this.lastThemeKey = Array.from(themeContents).sort().join('\n');
     return Array.from(themeContents).join('\n');
 };
 
@@ -1884,6 +1888,10 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
         const generatedRules = new Set(); // Track generated rules to prevent duplicates
         const variables = this.extractThemeVariables(cssText);
         const { classes: usedClasses, variableSuffixes } = usedData;
+        // Optional: raw rules + their full-regen order keys (incremental apply places deltas by them)
+        const rulesOut = usedData.rulesOut, keysOut = usedData.keysOut;
+        let slot = null;
+        const emit = (rule, sub) => { utilities.push(rule); if (rulesOut) { rulesOut.push(rule); keysOut.push(slot.concat(slot[3] ? 2 : sub)); } }; // opacity rules order by discovery
 
         if (variables.size === 0) {
             return '';
@@ -1908,7 +1916,7 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
             if (usedClasses.includes(baseClass)) {
                 const rule = `.${escapeClassName(baseClass)} { ${css} }`;
                 if (!generatedRules.has(rule)) {
-                    utilities.push(rule);
+                    emit(rule, 0);
                     generatedRules.add(rule);
                 }
             }
@@ -1919,7 +1927,7 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
                     css + ' !important';
                 const rule = `.${escapeClassName('!' + baseClass)} { ${importantCss} }`;
                 if (!generatedRules.has(rule)) {
-                    utilities.push(rule);
+                    emit(rule, 1);
                     generatedRules.add(rule);
                 }
             }
@@ -1988,26 +1996,33 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
                     rule;
 
                 if (!generatedRules.has(finalRule)) {
-                    utilities.push(finalRule);
+                    emit(finalRule, 2);
                     generatedRules.add(finalRule);
                 }
             }
         };
 
+        // Every generated class ends in its variable's suffix: skip variables no used class mentions
+        const usedBases = usedClasses.map(cls => this.parseClassName(cls).baseClass);
+
         // Generate utilities based on variable prefix
+        let vi = -1;
         for (const [varName, varValue] of variables.entries()) {
+            vi++;
             if (!varName.match(this.regexPatterns.tailwindPrefix)) {
                 continue;
             }
 
             const suffix = varName.split('-').slice(1).join('-');
+            if (!usedBases.some(base => base.includes(suffix))) continue;
             const value = `var(--${varName})`;
             const prefix = varName.split('-')[0] + '-';
             const generator = this.utilityGenerators[prefix];
 
             if (generator) {
                 const utilityPairs = generator(suffix, value);
-                for (const [className, css] of utilityPairs) {
+                for (let pi = 0; pi < utilityPairs.length; pi++) {
+                    const [className, css] = utilityPairs[pi];
                     // Check if this specific utility class is actually used (including variants and important)
                     const isUsed = usedClasses.some(cls => {
                         // Parse the class to extract the base utility name
@@ -2020,6 +2035,7 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
                             (baseClass.startsWith('!') && baseClass.slice(1) === className);
                     });
                     if (isUsed) {
+                        slot = [0, vi, pi, 0];
                         generateUtility(className, css);
                     }
 
@@ -2051,6 +2067,7 @@ TailwindCompiler.prototype.generateUtilitiesFromVars = function (cssText, usedDa
                         const opacity = opacityBaseClass.split('/')[1];
                         const opacityValue = `color-mix(in oklch, ${value} ${opacity}%, transparent)`;
                         const opacityCss = css.replace(value, opacityValue);
+                        slot = [0, vi, pi, 1];
                         generateUtility(opacityBaseClass, opacityCss);
                     }
                 }
@@ -2070,6 +2087,9 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
         const utilities = [];
         const generatedRules = new Set();
         const { classes: usedClasses } = usedData;
+        const rulesOut = usedData.rulesOut, keysOut = usedData.keysOut;
+        let slot = null;
+        const emit = (rule, sub) => { utilities.push(rule); if (rulesOut) { rulesOut.push(rule); keysOut.push(slot.concat(sub)); } };
 
         // Helper to clean up [object Object] from CSS strings
         const cleanCssString = (css) => {
@@ -2225,7 +2245,7 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
                     rule = `.${escapeClassName('!' + baseClass)} { ${importantCss} }`;
                 }
                 if (!generatedRules.has(rule)) {
-                    utilities.push(rule);
+                    emit(rule, 1);
                     generatedRules.add(rule);
                 }
             }
@@ -2399,14 +2419,16 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
                 }
 
                 if (!generatedRules.has(finalRule)) {
-                    utilities.push(finalRule);
+                    emit(finalRule, 2);
                     generatedRules.add(finalRule);
                 }
             }
         };
 
         // Generate utilities for each custom class that's actually used
+        let ci = -1;
         for (const [className, cssOrSelector] of this.customUtilities.entries()) {
+            ci++;
             // Normalize class name: if it starts with !, extract the base name
             const hasImportantPrefix = className.startsWith('!');
             const baseClassName = hasImportantPrefix ? className.slice(1) : className;
@@ -2446,9 +2468,12 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
                 // Generate utility with base class name (without !)
                 // The CSS already has !important if className started with !
                 if (typeof cssOrSelector === 'string') {
+                    slot = [1, ci, 0, 0];
                     generateUtility(baseClassName, normalizedCss, null);
                 } else if (Array.isArray(cssOrSelector)) {
-                    for (const entry of cssOrSelector) {
+                    for (let ai = 0; ai < cssOrSelector.length; ai++) {
+                        const entry = cssOrSelector[ai];
+                        slot = [1, ci, ai, 0];
                         if (entry && entry.css && entry.selector) {
                             // Ensure entry.css is a string (not an object)
                             const extracted = typeof entry.css === 'string' ? entry.css :
@@ -2469,6 +2494,7 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
                             String(cssOrSelector.css));
                     const selectorCss = cleanCssString(extracted);
 
+                    slot = [1, ci, 0, 0];
                     generateUtility(baseClassName, selectorCss, {
                         selector: cssOrSelector.selector,
                         fullBlock: cssOrSelector.fullBlock || false
@@ -2484,49 +2510,169 @@ TailwindCompiler.prototype.generateCustomUtilities = function (usedData) {
     }
 };
 
-// Helper function to sort utilities so base classes come before variants
-TailwindCompiler.prototype.sortUtilities = function(utilitiesText) {
-    if (!utilitiesText) return '';
-    
-    // Split into individual rules (each rule starts with . or @media)
+// Split generated CSS into top-level rules (each starts with . or an at-rule)
+TailwindCompiler.prototype.splitUtilityRules = function (utilitiesText) {
     const rules = [];
     let currentRule = '';
-    const lines = utilitiesText.split('\n');
-    
-    for (const line of lines) {
-        // Check if this line starts a new rule
+    for (const line of utilitiesText.split('\n')) {
         if (line.trim().match(/^(\.|@media|@layer|@supports)/)) {
-            // Save previous rule if exists
-            if (currentRule.trim()) {
-                rules.push(currentRule.trim());
-            }
+            if (currentRule.trim()) rules.push(currentRule.trim());
             currentRule = line;
         } else {
-            // Continue current rule
             currentRule += '\n' + line;
         }
     }
-    // Add last rule
-    if (currentRule.trim()) {
-        rules.push(currentRule.trim());
-    }
-    
-    // Sort: base utilities (no @media) come before variants (with @media)
+    if (currentRule.trim()) rules.push(currentRule.trim());
+    return rules;
+};
+
+// Sort utilities so base classes come before variants (@media)
+TailwindCompiler.prototype.sortUtilities = function (utilitiesText) {
+    if (!utilitiesText) return '';
+    const rules = this.splitUtilityRules(utilitiesText);
     rules.sort((a, b) => {
         const aHasMedia = a.startsWith('@media');
         const bHasMedia = b.startsWith('@media');
-        
-        // Base utilities come before variants
         if (!aHasMedia && bHasMedia) return -1;
         if (aHasMedia && !bHasMedia) return 1;
-        
-        // Same type, maintain order
         return 0;
     });
-    
     return rules.join('\n\n');
 };
 
+// ---- Incremental apply: new rules go in through CSSOM, never a whole-sheet rewrite ----
+// Entries mirror the layer's cssRules 1:1, each keyed by where a full regen would emit it
+// ([media, section, var/entry, pair/array, region, sub]); deltas are inserted at that index.
+
+const utilitiesCssFrom = (applied) => `@layer utilities {\n${applied.entries.map(e => e.rule).join('\n\n')}\n}`;
+const isMediaRule = (rule) => rule.trim().startsWith('@media');
+
+function compareKeys(a, b) {
+    for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return a[i] - b[i];
+    return 0;
+}
+
+// Raw rules + order keys for a class set, as a full regen would emit them (base before @media, stable)
+TailwindCompiler.prototype.generateKeyedUtilities = function (themeCss, classes) {
+    const usedData = { classes, variableSuffixes: [], rulesOut: [], keysOut: [] };
+    this.generateUtilitiesFromVars(themeCss, usedData);
+    this.generateCustomUtilities(usedData);
+    const out = usedData.rulesOut.map((rule, i) => {
+        const media = isMediaRule(rule) ? 1 : 0;
+        return { rule, key: [media].concat(usedData.keysOut[i]) };
+    });
+    return out.filter(e => !e.key[0]).concat(out.filter(e => e.key[0]));
+};
+
+TailwindCompiler.prototype.utilitiesLayerRule = function () {
+    const sheet = this.styleElement && this.styleElement.sheet;
+    if (!sheet || typeof CSSLayerBlockRule === 'undefined') return null;
+    try {
+        for (const rule of sheet.cssRules) {
+            if (rule instanceof CSSLayerBlockRule && rule.name === 'utilities') return rule;
+        }
+    } catch (e) { }
+    return null;
+};
+
+// Entries must match the parsed sheet rule-for-rule, or deltas could land at the wrong index
+TailwindCompiler.prototype.entriesMatchSheet = function (entries) {
+    const layer = this.utilitiesLayerRule();
+    if (!layer || layer.cssRules.length !== entries.length) return false;
+    for (let i = 0; i < entries.length; i++) {
+        if ((layer.cssRules[i] instanceof CSSMediaRule) !== !!entries[i].key[0]) return false;
+    }
+    return true;
+};
+
+// After a full write: remember its rules so later compiles can insert beside them
+TailwindCompiler.prototype.recordAppliedUtilities = function (entries, themeCss) {
+    this._applied = null;
+    if (window.__manifestRender === true || !this.entriesMatchSheet(entries)) return;
+    this._applied = {
+        themeKey: this.lastThemeKey,
+        themeCss,           // keys index this exact variable order
+        entries,
+        rules: new Set(entries.map(e => e.rule)),
+        classes: new Set(this.dynamicClassCache),
+        dirty: false        // inserted rules not yet in textContent
+    };
+};
+
+// Moving <style> rebuilds its sheet from textContent: write inserted rules back first
+TailwindCompiler.prototype.resyncUtilitiesText = function () {
+    const applied = this._applied;
+    if (!applied || !applied.dirty) return;
+    applied.dirty = false;
+    this.styleElement.textContent = utilitiesCssFrom(applied);
+    if (!this.entriesMatchSheet(applied.entries)) this._applied = null;
+};
+
+// Prerender snapshots read #manifest-styles text, so render passes always rewrite it
+TailwindCompiler.prototype.canCompileDelta = function () {
+    return !!this._applied && window.__manifestRender !== true && !!this.utilitiesLayerRule();
+};
+
+// Generate only never-compiled classes and insert each rule where a full regen would put it.
+// Returns false when a rule's place depends on class discovery order: caller does a full compile.
+TailwindCompiler.prototype.compileDelta = function (themeCss) {
+    const applied = this._applied;
+    const candidates = [];
+    for (const cls of this.dynamicClassCache) if (!applied.classes.has(cls)) candidates.push(cls);
+    const classes = this.filterStaticallyCoveredClasses(candidates);
+    const fresh = classes.length ? this.generateKeyedUtilities(themeCss, classes).filter(e => !applied.rules.has(e.rule)) : [];
+    const entries = applied.entries;
+
+    // Place every rule first; bail before touching the sheet if any is ambiguous
+    const plan = [];
+    for (const e of fresh) {
+        let lo = 0, hi = entries.length;
+        while (lo < hi) { const mid = (lo + hi) >> 1; if (compareKeys(entries[mid].key, e.key) <= 0) lo = mid + 1; else hi = mid; }
+        // Same utility, same group, both variants: full regen orders them by discovery
+        if (e.key[5] === 2) {
+            const sameSlot = (x) => x && compareKeys(x.key.slice(0, 5), e.key.slice(0, 5)) === 0 && x.key[5] === 2;
+            if (sameSlot(entries[lo - 1]) || sameSlot(entries[lo]) || plan.some(q => sameSlot(q.e))) return false;
+        }
+        plan.push({ e, at: lo });
+    }
+    for (const cls of candidates) applied.classes.add(cls);
+    if (!plan.length) return true;
+
+    const layer = this.utilitiesLayerRule();
+    try {
+        // Insert in key order; each insert shifts later indices by one
+        plan.sort((x, y) => compareKeys(x.e.key, y.e.key));
+        plan.forEach((q, n) => {
+            layer.insertRule(q.e.rule, q.at + n);
+            entries.splice(q.at + n, 0, q.e);
+            applied.rules.add(q.e.rule);
+        });
+    } catch (err) {
+        // A rule the parser splits or drops: the planned indices no longer hold
+        this._applied = null;
+        return false;
+    }
+    applied.dirty = true;
+    this.schedulePersistentSave(themeCss);
+    return true;
+};
+
+// Coalesce cache writes: localStorage serialisation is too slow to run per compile
+TailwindCompiler.prototype.schedulePersistentSave = function (themeCss) {
+    clearTimeout(this._persistTimer);
+    this._persistTimer = setTimeout(() => {
+        if (!this._applied) return;
+        const classesHash = Array.from(this.dynamicClassCache).sort().join(',');
+        const themeHash = this.generateThemeHash(themeCss);
+        this.cache.set(`${classesHash}-${themeHash}`, {
+            css: utilitiesCssFrom(this._applied),
+            timestamp: Date.now(),
+            themeHash
+        });
+        this.savePersistentCache();
+    }, 1000);
+};
+
 // Helper function to filter critical utilities that are already in layer utilities
 TailwindCompiler.prototype.filterCriticalUtilities = function(criticalText, layerUtilities) {
     if (!criticalText || !layerUtilities) return '';
@@ -2630,6 +2776,7 @@ TailwindCompiler.prototype.compile = async function () {
         }
         this.lastCompileTime = now;
         this.isCompiling = true;
+        this.quietClasses.clear(); // this compile covers them
         window.__manifestUtilitiesPending = (window.__manifestUtilitiesPending || 0) + 1;
         this._compileCounted = true;
 
@@ -2720,6 +2867,13 @@ TailwindCompiler.prototype.compile = async function () {
             return;
         }
 
+        // Theme unchanged since the last full write: insert only the new classes
+        let prefetchedTheme = null;
+        if (this.canCompileDelta()) {
+            prefetchedTheme = await this.fetchThemeContent();
+            if (prefetchedTheme && this.lastThemeKey === this._applied.themeKey && this.compileDelta(this._applied.themeCss)) return;
+        }
+
         // For subsequent compilations, check for new dynamic classes
         const usedData = this.getUsedClasses();
         const dynamicClasses = Array.from(this.dynamicClassCache);
@@ -2730,7 +2884,7 @@ TailwindCompiler.prototype.compile = async function () {
         // Check if dynamic classes have actually changed
         if (dynamicClassesHash !== this.lastClassesHash || !this.hasInitialized) {
             // Fetch CSS content for dynamic compilation
-            const themeCss = await this.fetchThemeContent();
+            const themeCss = prefetchedTheme || await this.fetchThemeContent();
             if (!themeCss) {
                 this.isCompiling = false;
                 return;
@@ -2757,8 +2911,10 @@ TailwindCompiler.prototype.compile = async function () {
             if (hasVariableChanges || dynamicClassesHash !== this.lastClassesHash) {
 
                 // Generate both variable-based and custom utilities
-                const varUtilities = this.generateUtilitiesFromVars(themeCss, usedData);
-                const customUtilitiesGenerated = this.generateCustomUtilities(usedData);
+                const rulesOut = [], keysOut = [];
+                const keyedData = Object.assign({}, usedData, { rulesOut, keysOut });
+                const varUtilities = this.generateUtilitiesFromVars(themeCss, keyedData);
+                const customUtilitiesGenerated = this.generateCustomUtilities(keyedData);
 
                 let allUtilities = [varUtilities, customUtilitiesGenerated].filter(Boolean).join('\n\n');
                 // Sort utilities so base classes come before variants
@@ -2784,6 +2940,8 @@ TailwindCompiler.prototype.compile = async function () {
                         });
                     });
                     this.lastClassesHash = dynamicClassesHash;
+                    const entries = rulesOut.map((rule, i) => ({ rule, key: [isMediaRule(rule) ? 1 : 0].concat(keysOut[i]) }));
+                    this.recordAppliedUtilities(entries.filter(e => !e.key[0]).concat(entries.filter(e => e.key[0])), themeCss);
 
                     // Save to cache for next page load
                     const themeHash = this.generateThemeHash(themeCss);
@@ -2795,6 +2953,8 @@ TailwindCompiler.prototype.compile = async function () {
                     });
                     this.savePersistentCache();
                 }
+            } else {
+                this._applied = null; // theme text moved: order keys are stale until the next full write
             }
         }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.218",
+    "version": "0.5.220",
     "private": false,
     "workspaces": [
         "templates/starter",