@burger-editor/client 4.0.0-alpha.60 → 4.0.0-alpha.61

package/dist/client.js

@@ -3344,9 +3344,14 @@ function getCustomProperties(scope, containerType) {
                 : newDefaultValue);
         }
     });
+    // Filter out disabled properties declared with empty value (e.g. `--prop: ;`)
+    // CSSOM getPropertyValue() returns ' ' for `--prop: ;`, which becomes '' after trim().
+    // Note: `--prop:;` (no space) is dropped by current browsers (parse error).
+    // @see https://drafts.csswg.org/css-variables-2/#defining-variables
+    // @see https://github.com/w3c/csswg-drafts/issues/774
     for (const propList of categories.values()) {
         for (const [key, customProperty] of propList.properties.entries()) {
-            if (customProperty.value.trim().toLowerCase() === 'null') {
+            if (customProperty.value.trim() === '') {
                 propList.properties.delete(key);
             }
         }
@@ -3386,15 +3391,77 @@ function getCustomProperty(scope, property) {
     });
     return resultValue;
 }
+/**
+ * Collect the global top-level layer order across all stylesheets in the document.
+ *
+ * CSS cascade layers are ordered globally across the entire document, not per-stylesheet.
+ * This function mirrors the browser's layer ordering algorithm:
+ * - Pass 1: Collect layers declared in `@layer` statement rules (first-occurrence wins)
+ * - Pass 2: Append layers that appear only in `@layer` block rules
+ *
+ * Cross-origin stylesheets that throw `SecurityError` are silently skipped.
+ * @see {@link https://www.w3.org/TR/css-cascade-5/#layer-ordering CSS Cascading and Inheritance Level 5 §6.4.3 Layer Ordering}
+ * > "Cascade layers are sorted by the order in which they first are declared,
+ * > with nested layers grouped within their parent layers before any unlayered rules."
+ * @see {@link https://www.w3.org/TR/css-cascade-5/#layer-empty CSS Cascading and Inheritance Level 5 §6.4.4.2 Declaring Without Styles}
+ * @param scope - Document to scan
+ * @returns Ordered array of top-level layer names
+ */
+function collectGlobalTopLevelLayerOrder(scope) {
+    const CSSLayerStatementRule = scope.defaultView?.CSSLayerStatementRule;
+    const CSSLayerBlockRule = scope.defaultView?.CSSLayerBlockRule;
+    if (CSSLayerStatementRule === undefined || CSSLayerBlockRule === undefined) {
+        return [];
+    }
+    const allLayerNames = [];
+    // Pass 1: Collect layers declared in @layer statements (explicit order takes precedence)
+    for (const styleSheet of scope.styleSheets) {
+        try {
+            for (const rule of styleSheet.cssRules) {
+                if (rule instanceof CSSLayerStatementRule) {
+                    for (const name of rule.nameList) {
+                        if (!allLayerNames.includes(name)) {
+                            allLayerNames.push(name);
+                        }
+                    }
+                }
+            }
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'SecurityError') {
+                continue;
+            }
+            throw error;
+        }
+    }
+    // Pass 2: Append layers that appear only in @layer block rules (first-occurrence after statements)
+    for (const styleSheet of scope.styleSheets) {
+        try {
+            for (const rule of styleSheet.cssRules) {
+                if (rule instanceof CSSLayerBlockRule && !allLayerNames.includes(rule.name)) {
+                    allLayerNames.push(rule.name);
+                }
+            }
+        }
+        catch (error) {
+            if (error instanceof Error && error.name === 'SecurityError') {
+                continue;
+            }
+            throw error;
+        }
+    }
+    return allLayerNames;
+}
 /**
  * Get all CSSStyleRule from CSSRule array recursively
  * @param rules - CSSRule array
  * @param layers
  * @param scope - Document
  * @param scopeRoot
+ * @param topLevelLayerOrder - Global layer order from collectGlobalTopLevelLayerOrder (top-level calls only)
  * @returns CSSStyleRule array
  */
-function getStyleRules(rules, layers, scope, scopeRoot = null) {
+function getStyleRules(rules, layers, scope, scopeRoot = null, topLevelLayerOrder) {
     const CSSStyleRule = scope.defaultView?.CSSStyleRule;
     if (CSSStyleRule === undefined) {
         throw new Error('CSSStyleRule is not available');
@@ -3408,14 +3475,18 @@ function getStyleRules(rules, layers, scope, scopeRoot = null) {
         throw new Error('CSSLayerStatementRule is not available');
     }
     const CSSScopeRule = scope.defaultView?.CSSScopeRule;
-    // Build unified layer order from CSSLayerStatementRules and CSSLayerBlockRules (first-occurrence order per CSS spec)
-    // Pass 1: Collect layers declared in @layer statements (explicit order takes precedence)
-    const allLayerNames = [];
-    for (const rule of rules) {
-        if (rule instanceof CSSLayerStatementRule) {
-            for (const name of rule.nameList) {
-                if (!allLayerNames.includes(name)) {
-                    allLayerNames.push(name);
+    // Build unified layer order:
+    // - When topLevelLayerOrder is provided (top-level call), use it as the base and append any local-only names
+    // - When not provided (recursive call for nested layers), compute locally from this rule list
+    const allLayerNames = topLevelLayerOrder ? [...topLevelLayerOrder] : [];
+    if (!topLevelLayerOrder) {
+        // Pass 1: Collect layers declared in @layer statements (explicit order takes precedence)
+        for (const rule of rules) {
+            if (rule instanceof CSSLayerStatementRule) {
+                for (const name of rule.nameList) {
+                    if (!allLayerNames.includes(name)) {
+                        allLayerNames.push(name);
+                    }
                 }
             }
         }
@@ -3462,9 +3533,10 @@ function getStyleRules(rules, layers, scope, scopeRoot = null) {
  * @param found
  */
 function searchCustomProperty(scope, found) {
+    const globalLayerOrder = collectGlobalTopLevelLayerOrder(scope);
     for (const styleSheet of scope.styleSheets) {
         try {
-            const styleRules = getStyleRules(styleSheet.cssRules, [], scope);
+            const styleRules = getStyleRules(styleSheet.cssRules, [], scope, null, globalLayerOrder);
             for (const cssRule of styleRules) {
                 const selector = cssRule.rule.selectorText.trim().replace(/^&/, '').trim();
                 if (selector === BLOCK_OPTION_SCOPE_SELECTOR ||
@@ -45044,7 +45116,7 @@ function parseConfig(config) {
   }
 }
 
-const version = "4.0.0-alpha.59";
+const version = "4.0.0-alpha.60";
 function attachDraftSwitcher(engine) {
   if (engine.hasDraft()) {
     const container = document.createElement("div");