mnfst 0.5.91 → 0.5.93

package/lib/manifest.integrity.json

@@ -21,6 +21,6 @@
   "manifest.toasts.js": "sha384-ytd5rDbax/Ou9z23uedFXPZbxDPsk2E/pxCTq4WLvfv+os1qTI6kELp0kPp07g24",
   "manifest.tooltips.js": "sha384-Hhip5ZN66xhDw3m0XBrKLKLpcVRz3Z9RszPKqo6xvFF0mrUgQBVZ+mZjZsXgOOjS",
   "manifest.url.parameters.js": "sha384-FIufiClqDx1rJpU/QUc9z/D43qClQ6Qm8rBahipbJl9BDHUvhrOsUDegmTWW7Tuf",
-  "manifest.utilities.js": "sha384-JzIkeYogrK/qabMCyBx3RQc9j+QYGGsgVZVQGrFNqoLMhEVUSogEqap2JqHlruyk",
+  "manifest.utilities.js": "sha384-x07Pfi4UxK9tbdcOZgZ5jkveseT1xBUTFtO08ORcokCH64FHsUceoiAICAsRJMle",
   "manifest.js": "sha384-CUFN8gbtQW6+fnxiBnx0nPw6kKDA21+He0KFoDE9FabfJPR4lKRXaT2PWpOOKUS+"
 }

package/lib/manifest.utilities.js

@@ -1588,41 +1588,9 @@ TailwindCompiler.prototype.getUsedClasses = function () {
     }
 };
 
-// True for Manifest framework stylesheets (the compiled bundle and its plugin
-// partials, on the CDN or self-hosted), false for the developer-overridable
-// theme entry-point, inline <style> blocks, and any non-framework CSS.
-//
-// Used to split fetchThemeContent's output into two buckets: CSS *variables*
-// are read from every sheet (developers can declare custom properties
-// anywhere), but custom utility *class* declarations are only harvested from
-// non-framework sheets — framework semantic classes like .brand / .row / .col
-// already live in the static cascade and re-emitting them at runtime causes
-// duplicate #manifest-styles entries.
-TailwindCompiler.prototype.isFrameworkStylesheet = function (source) {
-    if (typeof source !== 'string' || source.startsWith('inline:')) return false;
-    const lower = source.toLowerCase();
-    // manifest.theme.css ships with the framework but is developer-overridable —
-    // always scan it for class declarations.
-    if (/\/manifest\.theme\.css(?:[?#]|$)/.test(lower)) return false;
-    // Framework CDN bundles (jsdelivr/unpkg/etc. publishing manifestjs or mnfst).
-    if (lower.includes('manifestjs') || lower.includes('mnfst')) return true;
-    // Self-hosted framework files: manifest.css, manifest.min.css,
-    // manifest.<plugin>.css. Heuristic on basename — a developer who names their
-    // own bundle "manifest.foo.css" will get caught by this, which is rare and
-    // easy to work around by renaming.
-    if (/\/manifest(?:\.[\w-]+)*\.css(?:[?#]|$)/.test(lower)) return true;
-    return false;
-};
-
-// Fetch theme content from CSS files.
-//
-// Returns { all, userScannable }:
-// - all: every loaded stylesheet, used for CSS-variable extraction.
-// - userScannable: same minus framework stylesheets (see isFrameworkStylesheet).
-//   Used for custom-utility class extraction.
+// Fetch theme content from CSS files
 TailwindCompiler.prototype.fetchThemeContent = async function () {
-    const allContents = new Set();
-    const userContents = new Set();
+    const themeContents = new Set();
     const fetchPromises = [];
 
     // If we haven't discovered CSS files yet, do it now
@@ -1632,7 +1600,6 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
 
     // Process all files concurrently
     for (const source of this.cssFiles) {
-        const isFramework = this.isFrameworkStylesheet(source);
         const fetchPromise = (async () => {
             try {
                 let content = '';
@@ -1691,10 +1658,7 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
                 }
 
                 if (content) {
-                    allContents.add(content);
-                    if (!isFramework) {
-                        userContents.add(content);
-                    }
+                    themeContents.add(content);
                 }
             } catch (error) {
                 console.warn(`Error fetching CSS from ${source}:`, error);
@@ -1706,10 +1670,7 @@ TailwindCompiler.prototype.fetchThemeContent = async function () {
     // Wait for all fetches to complete
     await Promise.all(fetchPromises);
 
-    return {
-        all: Array.from(allContents).join('\n'),
-        userScannable: Array.from(userContents).join('\n')
-    };
+    return Array.from(themeContents).join('\n');
 };
 
 // Extract CSS variables from CSS text
@@ -2184,6 +2145,32 @@ TailwindCompiler.prototype.extractCustomUtilities = function (cssText) {
         // Tolerate parsing errors; this is best-effort
     }
 
+    // Dedupe captured entries per class. The four parser passes above (flat
+    // regex, :where() extractor, compound-selector fallback, universal nested
+    // resolver) can each capture the same source rule with slightly different
+    // whitespace or selector ordering. Without this, the generator emits
+    // duplicate variant blocks at runtime (e.g. four `.\!brand { … }` rules
+    // where one suffices). Normalize whitespace before comparing so trivial
+    // formatting differences collapse.
+    for (const [className, value] of utilities.entries()) {
+        if (!Array.isArray(value)) continue;
+        const seen = new Set();
+        const deduped = [];
+        for (const entry of value) {
+            if (!entry || typeof entry !== 'object') continue;
+            const sel = String(entry.selector || '').replace(/\s+/g, ' ').trim();
+            const css = String(entry.css || '').replace(/\s+/g, ' ').trim();
+            if (!css) continue;
+            const key = `${sel}${css}`;
+            if (seen.has(key)) continue;
+            seen.add(key);
+            deduped.push(entry);
+        }
+        if (deduped.length > 0) {
+            utilities.set(className, deduped);
+        }
+    }
+
     return utilities;
 };
 
@@ -3120,18 +3107,20 @@ TailwindCompiler.prototype.compile = async function () {
 
             // Fetch CSS content once for initial compilation
             const themeCss = await this.fetchThemeContent();
-            if (themeCss && themeCss.all) {
-                // Extract custom utility classes from non-framework CSS only.
-                // Framework semantic classes (.brand, .row, .col, etc.) already
-                // live in the compiled manifest.css; re-emitting them here would
-                // duplicate rules in #manifest-styles.
-                const discoveredCustomUtilities = this.extractCustomUtilities(themeCss.userScannable);
+            if (themeCss) {
+                // Extract and cache custom utilities. We scan framework CSS too
+                // because the generator needs to know about semantic classes
+                // like .brand / .row / .col to emit their responsive/state
+                // variants (e.g. md:row, hover:brand). Base-form re-emission is
+                // suppressed in generateCustomUtilities ("Skip generating base
+                // utility - it already exists in the CSS"); duplicate captures
+                // are collapsed at the end of extractCustomUtilities.
+                const discoveredCustomUtilities = this.extractCustomUtilities(themeCss);
                 for (const [name, value] of discoveredCustomUtilities.entries()) {
                     this.customUtilities.set(name, value);
                 }
 
-                // CSS variables can live in any stylesheet — scan everything.
-                const variables = this.extractThemeVariables(themeCss.all);
+                const variables = this.extractThemeVariables(themeCss);
                 for (const [name, value] of variables.entries()) {
                     this.currentThemeVars.set(name, value);
                 }
@@ -3152,7 +3141,7 @@ TailwindCompiler.prototype.compile = async function () {
                 }
 
                 // Generate both variable-based and custom utilities
-                const varUtilities = this.generateUtilitiesFromVars(themeCss.all, staticUsedData);
+                const varUtilities = this.generateUtilitiesFromVars(themeCss, staticUsedData);
                 const customUtilitiesGenerated = this.generateCustomUtilities(staticUsedData);
 
                 let allUtilities = [varUtilities, customUtilitiesGenerated].filter(Boolean).join('\n\n');
@@ -3181,7 +3170,7 @@ TailwindCompiler.prototype.compile = async function () {
                     this.lastClassesHash = staticUsedData.classes.sort().join(',');
 
                     // Save to cache for next page load
-                    const themeHash = this.generateThemeHash(themeCss.all);
+                    const themeHash = this.generateThemeHash(themeCss);
                     const cacheKey = `${this.lastClassesHash}-${themeHash}`;
                     this.cache.set(cacheKey, {
                         css: finalCss,
@@ -3208,20 +3197,19 @@ TailwindCompiler.prototype.compile = async function () {
         if (dynamicClassesHash !== this.lastClassesHash || !this.hasInitialized) {
             // Fetch CSS content for dynamic compilation
             const themeCss = await this.fetchThemeContent();
-            if (!themeCss || !themeCss.all) {
+            if (!themeCss) {
                 this.isCompiling = false;
                 return;
             }
 
-            // Update custom utilities cache from non-framework CSS only — see
-            // first compile path for rationale.
-            const discoveredCustomUtilities = this.extractCustomUtilities(themeCss.userScannable);
+            // Update custom utilities cache if needed
+            const discoveredCustomUtilities = this.extractCustomUtilities(themeCss);
             for (const [name, value] of discoveredCustomUtilities.entries()) {
                 this.customUtilities.set(name, value);
             }
 
             // Check for variable changes
-            const variables = this.extractThemeVariables(themeCss.all);
+            const variables = this.extractThemeVariables(themeCss);
             let hasVariableChanges = false;
             for (const [name, value] of variables.entries()) {
                 const currentValue = this.currentThemeVars.get(name);
@@ -3235,7 +3223,7 @@ TailwindCompiler.prototype.compile = async function () {
             if (hasVariableChanges || dynamicClassesHash !== this.lastClassesHash) {
 
                 // Generate both variable-based and custom utilities
-                const varUtilities = this.generateUtilitiesFromVars(themeCss.all, usedData);
+                const varUtilities = this.generateUtilitiesFromVars(themeCss, usedData);
                 const customUtilitiesGenerated = this.generateCustomUtilities(usedData);
 
                 let allUtilities = [varUtilities, customUtilitiesGenerated].filter(Boolean).join('\n\n');
@@ -3264,7 +3252,7 @@ TailwindCompiler.prototype.compile = async function () {
                     this.lastClassesHash = dynamicClassesHash;
 
                     // Save to cache for next page load
-                    const themeHash = this.generateThemeHash(themeCss.all);
+                    const themeHash = this.generateThemeHash(themeCss);
                     const cacheKey = `${this.lastClassesHash}-${themeHash}`;
                     this.cache.set(cacheKey, {
                         css: finalCss,
@@ -3438,54 +3426,19 @@ TailwindCompiler.prototype.setupComponentLoadListener = function () {
     });
 };
 
-// Start processing with initial compilation and observer setup
+// Start processing with initial compilation. DOM observation is owned by
+// setupComponentLoadListener (called separately from main.js init) — that one
+// uses an incremental staticClassCache lookup per mutation, which scales to
+// thousands of elements. A previous version of this method also installed its
+// own MutationObserver here that called getUsedClasses() on EVERY mutation
+// (a full document-wide O(N) DOM scan), so on a busy page with N≥3000 the
+// scan cost exceeded the inter-mutation interval and the main thread froze
+// (~100% CPU on docs site, 3042 elements). That observer was redundant with
+// the incremental one and has been removed.
 TailwindCompiler.prototype.startProcessing = async function () {
     if (this.usesStaticPrerenderUtilities) return;
     try {
-        // Start initial compilation immediately
-        const initialCompilation = this.compile();
-
-        // Set up observer while compilation is running
-        this.observer = new MutationObserver((mutations) => {
-            const relevantMutations = mutations.filter(mutation => {
-                if (mutation.type === 'attributes' &&
-                    mutation.attributeName === 'class') {
-                    return true;
-                }
-                if (mutation.type === 'childList') {
-                    return Array.from(mutation.addedNodes).some(node =>
-                        node.nodeType === Node.ELEMENT_NODE);
-                }
-                return false;
-            });
-
-            if (relevantMutations.length === 0) return;
-
-            // Check if there are any new classes that need processing
-            const newClasses = this.getUsedClasses();
-            if (newClasses.classes.length === 0) return;
-
-            if (this.compileTimeout) {
-                clearTimeout(this.compileTimeout);
-            }
-            this.compileTimeout = setTimeout(() => {
-                if (!this.isCompiling) {
-                    this.compile();
-                }
-            }, this.options.debounceTime);
-        });
-
-        // Start observing immediately
-        this.observer.observe(document.documentElement, {
-            childList: true,
-            subtree: true,
-            attributes: true,
-            attributeFilter: ['class']
-        });
-
-        // Wait for initial compilation
-        await initialCompilation;
-
+        await this.compile();
         this.hasInitialized = true;
     } catch (error) {
         console.error('Error starting Tailwind compiler:', error);

package/package.json

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