mnfst 0.5.21 → 0.5.22

package/dist/manifest.utilities.js

@@ -489,6 +489,7 @@ class TailwindCompiler {
         this.styleElement = document.createElement('style');
         this.styleElement.id = 'utility-styles';
         document.head.appendChild(this.styleElement);
+        this.setupUtilityStylesOrderObserver();
 
         // Initialize properties
         this.tailwindLink = null;
@@ -1028,6 +1029,7 @@ TailwindCompiler.prototype.generateSynchronousUtilities = function () {
                 } else {
                     this.styleElement.textContent = finalCss;
                 }
+                this.ensureUtilityStylesLast();
 
                 // Clear critical styles once we have generated utilities
                 if (this.criticalStyleElement && generated.trim()) {
@@ -1116,6 +1118,8 @@ TailwindCompiler.prototype.loadAndApplyCache = function () {
             if (cacheToUse && cacheToUse.css) {
                 const applyCacheStart = performance.now();
                 this.styleElement.textContent = cacheToUse.css;
+                this.ensureUtilityStylesLast();
+                this.scheduleEnsureUtilityStylesLast();
                 this.lastThemeHash = cacheToUse.themeHash;
 
                 // Also apply cache to critical style element
@@ -1192,6 +1196,38 @@ TailwindCompiler.prototype.cleanupCache = function () {
 // Helper methods
 // Utility functions for extracting, parsing, and processing CSS and classes
 
+// Ensure #utility-styles is last in head so our responsive/variant rules win over Tailwind and any later-injected styles
+TailwindCompiler.prototype.ensureUtilityStylesLast = function () {
+    if (this.styleElement && this.styleElement.parentNode && document.head.lastElementChild !== this.styleElement) {
+        document.head.appendChild(this.styleElement);
+    }
+};
+
+// When any element is added to head after ours, move #utility-styles to end. Handles CDN load order (e.g. Tailwind injecting after we run).
+TailwindCompiler.prototype.setupUtilityStylesOrderObserver = function () {
+    if (!document.head || !this.styleElement) return;
+    const self = this;
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type !== 'childList' || !mutation.addedNodes.length) continue;
+            for (const node of mutation.addedNodes) {
+                if (node.nodeType !== Node.ELEMENT_NODE || node === self.styleElement) continue;
+                self.ensureUtilityStylesLast();
+                break;
+            }
+        }
+    });
+    observer.observe(document.head, { childList: true, subtree: false });
+};
+
+// Schedule ensureUtilityStylesLast at 0ms, 100ms, 500ms so we win when Tailwind (or other scripts) inject styles later (e.g. CDN).
+TailwindCompiler.prototype.scheduleEnsureUtilityStylesLast = function () {
+    const self = this;
+    [0, 100, 500].forEach((ms) => {
+        setTimeout(() => self.ensureUtilityStylesLast(), ms);
+    });
+};
+
 // Discover CSS files from stylesheets and imports
 TailwindCompiler.prototype.discoverCssFiles = function () {
     try {
@@ -2981,6 +3017,8 @@ TailwindCompiler.prototype.compile = async function () {
                     const finalCss = `@layer utilities {\n${allUtilities}\n}`;
 
                     this.styleElement.textContent = finalCss;
+                    this.ensureUtilityStylesLast();
+                    this.scheduleEnsureUtilityStylesLast();
 
                     // Remove critical style element entirely after compilation
                     // Use requestAnimationFrame to ensure styles are painted before removing
@@ -2991,6 +3029,7 @@ TailwindCompiler.prototype.compile = async function () {
                                 this.criticalStyleElement.parentNode.removeChild(this.criticalStyleElement);
                                 this.criticalStyleElement = null;
                             }
+                            this.ensureUtilityStylesLast();
                         });
                     });
                     this.lastClassesHash = staticUsedData.classes.sort().join(',');
@@ -3060,6 +3099,8 @@ TailwindCompiler.prototype.compile = async function () {
                     const finalCss = `@layer utilities {\n${allUtilities}\n}`;
 
                     this.styleElement.textContent = finalCss;
+                    this.ensureUtilityStylesLast();
+                    this.scheduleEnsureUtilityStylesLast();
 
                     // Remove critical style element entirely after compilation
                     // Use requestAnimationFrame to ensure styles are painted before removing
@@ -3070,6 +3111,7 @@ TailwindCompiler.prototype.compile = async function () {
                                 this.criticalStyleElement.parentNode.removeChild(this.criticalStyleElement);
                                 this.criticalStyleElement = null;
                             }
+                            this.ensureUtilityStylesLast();
                         });
                     });
                     this.lastClassesHash = dynamicClassesHash;

package/package.json

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