@mui/docs 9.0.0-alpha.1 → 9.0.0-alpha.2

package/useLazyCSS/useLazyCSS.mjs

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { loadCSS } from 'fg-loadcss';
+
+/**
+ * Enhanced lazy CSS loader that wraps CSS in a layer using fetch to avoid CORS issues
+ * @param {string} href - URL of the CSS file to load
+ * @param {string} before - CSS selector to insert before
+ * @param {object} options - Additional options
+ * @param {string} options.layer - Optional CSS layer name to wrap the CSS in
+ * @returns {() => void} cleanup function
+ */
+export default function useLazyCSS(href, before, options = {}) {
+  React.useEffect(() => {
+    // If no layer is specified, add style and clean it on unmount
+    if (!options.layer) {
+      const link = loadCSS(href, document.querySelector(before));
+      return () => {
+        link.parentElement?.removeChild(link);
+      };
+    }
+
+    // With layer option, we need to fetch the CSS content and wrap it
+    let styleElement = null;
+    const abortController = new AbortController();
+
+    // Fetch the CSS content directly to avoid CORS issues with cssRules
+    fetch(href, {
+      signal: abortController.signal
+    }).then(response => {
+      if (!response.ok) {
+        throw new Error(`Failed to fetch CSS: ${response.statusText}`);
+      }
+      return response.text();
+    }).then(cssText => {
+      // Create a style element with the CSS wrapped in the specified layer
+      styleElement = document.createElement('style');
+      styleElement.setAttribute('data-href', href);
+      styleElement.textContent = `@layer ${options.layer} {\n${cssText}\n}`;
+
+      // Insert at the specified position
+      const beforeElement = document.querySelector(before);
+      if (beforeElement?.parentNode) {
+        beforeElement.parentNode.insertBefore(styleElement, beforeElement);
+      } else {
+        document.head.appendChild(styleElement);
+      }
+    }).catch(error => {
+      // Ignore abort errors, log others
+      if (error !== 'useEffect' && error.name !== 'AbortError') {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('Error loading CSS with layer:', error);
+        }
+
+        // Fall back to regular link element if fetch fails
+        styleElement = loadCSS(href, document.querySelector(before));
+      }
+    });
+
+    // Cleanup function
+    return () => {
+      // Cancel any pending fetch
+      abortController.abort('useEffect');
+
+      // Remove the style element if it was created
+      if (styleElement && styleElement.parentElement) {
+        styleElement.parentElement.removeChild(styleElement);
+      }
+    };
+  }, [href, before, options.layer]);
+}