@cube-dev/ui-kit 0.0.0-canary-9ec284f → 0.0.0-canary-949985c

package/es/tasty/pipeline/materialize.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-9ec284f
+ * @cube-dev/ui-kit v0.0.0-canary-949985c
  * Released under the MIT license.
  */
 
@@ -48,11 +48,13 @@ export function clearConditionCache() {
  */
 function emptyVariant() {
     return {
-        modifierSelectors: [],
-        ownSelectors: [],
+        modifierConditions: [],
+        pseudoConditions: [],
+        ownConditions: [],
         mediaConditions: [],
         containerConditions: [],
         supportsConditions: [],
+        rootConditions: [],
         startingStyle: false,
     };
 }
@@ -109,10 +111,10 @@ function stateToCSS(state) {
             const variant = emptyVariant();
             switch (state.type) {
                 case 'modifier':
-                    variant.modifierSelectors.push(modifierToCSS(state));
+                    variant.modifierConditions.push(modifierToParsed(state));
                     break;
                 case 'pseudo':
-                    variant.modifierSelectors.push(pseudoToCSS(state));
+                    variant.pseudoConditions.push(pseudoToParsed(state));
                     break;
                 case 'container':
                     variant.containerConditions.push(containerToParsed(state));
@@ -121,10 +123,10 @@ function stateToCSS(state) {
                     variant.supportsConditions.push(supportsToParsed(state));
                     break;
                 case 'root':
-                    variant.rootPrefix = rootToCSS(state);
+                    variant.rootConditions.push(rootToParsed(state));
                     break;
                 case 'own':
-                    variant.ownSelectors.push(...ownToCSS(state));
+                    variant.ownConditions.push(...ownToParsed(state));
                     break;
                 case 'starting':
                     variant.startingStyle = !state.negated;
@@ -138,37 +140,57 @@ function stateToCSS(state) {
     }
 }
 /**
- * Convert modifier condition to CSS selector
+ * Convert modifier condition to parsed structure
  */
-function modifierToCSS(state) {
+function modifierToParsed(state) {
+    return {
+        attribute: state.attribute,
+        value: state.value,
+        operator: state.operator,
+        negated: state.negated ?? false,
+    };
+}
+/**
+ * Convert parsed modifier to CSS selector string (for final output)
+ */
+export function modifierToCSS(mod) {
     let selector;
-    if (state.value !== undefined) {
+    if (mod.value !== undefined) {
         // Value attribute: [data-attr="value"]
-        const op = state.operator || '=';
-        selector = `[${state.attribute}${op}"${state.value}"]`;
+        const op = mod.operator || '=';
+        selector = `[${mod.attribute}${op}"${mod.value}"]`;
     }
     else {
         // Boolean attribute: [data-attr]
-        selector = `[${state.attribute}]`;
+        selector = `[${mod.attribute}]`;
     }
-    if (state.negated) {
+    if (mod.negated) {
         return `:not(${selector})`;
     }
     return selector;
 }
 /**
- * Convert pseudo condition to CSS selector
+ * Convert pseudo condition to parsed structure
  */
-function pseudoToCSS(state) {
-    if (state.negated) {
+function pseudoToParsed(state) {
+    return {
+        pseudo: state.pseudo,
+        negated: state.negated ?? false,
+    };
+}
+/**
+ * Convert parsed pseudo to CSS selector string (for final output)
+ */
+export function pseudoToCSS(pseudo) {
+    if (pseudo.negated) {
         // Wrap in :not() if not already
-        if (state.pseudo.startsWith(':not(')) {
+        if (pseudo.pseudo.startsWith(':not(')) {
             // Double negation - remove :not()
-            return state.pseudo.slice(5, -1);
+            return pseudo.pseudo.slice(5, -1);
         }
-        return `:not(${state.pseudo})`;
+        return `:not(${pseudo.pseudo})`;
     }
-    return state.pseudo;
+    return pseudo.pseudo;
 }
 /**
  * Convert media condition to parsed structure(s)
@@ -306,49 +328,208 @@ function supportsToParsed(state) {
     };
 }
 /**
- * Convert root condition to CSS selector prefix
+ * Convert root condition to parsed structure
+ */
+function rootToParsed(state) {
+    return {
+        selector: state.selector,
+        negated: state.negated ?? false,
+    };
+}
+/**
+ * Convert parsed root conditions to CSS selector prefix (for final output)
  */
-function rootToCSS(state) {
-    if (state.negated) {
-        return `:root:not(${state.selector})`;
+export function rootConditionsToCSS(roots) {
+    if (roots.length === 0)
+        return undefined;
+    // Combine all root conditions into a single :root prefix
+    // e.g., :root[data-theme="dark"]:not([data-mode="light"])
+    let prefix = ':root';
+    for (const root of roots) {
+        if (root.negated) {
+            prefix += `:not(${root.selector})`;
+        }
+        else {
+            prefix += root.selector;
+        }
     }
-    return `:root${state.selector}`;
+    return prefix;
 }
 /**
- * Convert own condition to CSS selectors for sub-element
+ * Convert own condition to parsed structures for sub-element
  */
-function ownToCSS(state) {
+function ownToParsed(state) {
     const innerCSS = conditionToCSS(state.innerCondition);
     if (innerCSS.isImpossible || innerCSS.variants.length === 0) {
         return [];
     }
-    // Collect all modifier selectors from all variants
-    // (For @own, we typically expect simple conditions, so usually just one variant)
-    const allSelectors = [];
+    // Collect all modifier/pseudo conditions from all variants
+    const allConditions = [];
     for (const variant of innerCSS.variants) {
-        allSelectors.push(...variant.modifierSelectors);
-    }
-    if (state.negated) {
-        // Negate all selectors
-        return allSelectors.map((s) => {
-            if (s.startsWith(':not(')) {
-                // Double negation - remove :not()
-                return s.slice(5, -1);
-            }
-            return `:not(${s})`;
-        });
+        for (const mod of variant.modifierConditions) {
+            // Apply outer negation
+            allConditions.push({
+                ...mod,
+                negated: state.negated ? !mod.negated : mod.negated,
+            });
+        }
+        for (const pseudo of variant.pseudoConditions) {
+            // Apply outer negation
+            allConditions.push({
+                ...pseudo,
+                negated: state.negated ? !pseudo.negated : pseudo.negated,
+            });
+        }
+    }
+    return allConditions;
+}
+/**
+ * Get unique key for a modifier condition
+ */
+function getModifierKey(mod) {
+    const base = mod.value
+        ? `${mod.attribute}${mod.operator || '='}${mod.value}`
+        : mod.attribute;
+    return mod.negated ? `!${base}` : base;
+}
+/**
+ * Get unique key for a pseudo condition
+ */
+function getPseudoKey(pseudo) {
+    return pseudo.negated ? `!${pseudo.pseudo}` : pseudo.pseudo;
+}
+/**
+ * Get unique key for a root condition
+ */
+function getRootKey(root) {
+    return root.negated ? `!${root.selector}` : root.selector;
+}
+/**
+ * Deduplicate modifier conditions
+ */
+function dedupeModifierConditions(conditions) {
+    const seen = new Set();
+    const result = [];
+    for (const c of conditions) {
+        const key = getModifierKey(c);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(c);
+        }
+    }
+    return result;
+}
+/**
+ * Deduplicate pseudo conditions
+ */
+function dedupePseudoConditions(conditions) {
+    const seen = new Set();
+    const result = [];
+    for (const c of conditions) {
+        const key = getPseudoKey(c);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(c);
+        }
+    }
+    return result;
+}
+/**
+ * Deduplicate root conditions
+ */
+function dedupeRootConditions(conditions) {
+    const seen = new Set();
+    const result = [];
+    for (const c of conditions) {
+        const key = getRootKey(c);
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(c);
+        }
+    }
+    return result;
+}
+/**
+ * Deduplicate own conditions (modifiers or pseudos)
+ */
+function dedupeOwnConditions(conditions) {
+    const seen = new Set();
+    const result = [];
+    for (const c of conditions) {
+        const key = 'attribute' in c
+            ? `mod:${getModifierKey(c)}`
+            : `pseudo:${getPseudoKey(c)}`;
+        if (!seen.has(key)) {
+            seen.add(key);
+            result.push(c);
+        }
     }
-    return allSelectors;
+    return result;
 }
 /**
- * Deduplicate an array while preserving order
+ * Check for modifier contradiction: same attribute with opposite negation
  */
-function dedupeArray(arr) {
-    return [...new Set(arr)];
+function hasModifierContradiction(conditions) {
+    const byKey = new Map(); // base key -> isPositive
+    for (const mod of conditions) {
+        const baseKey = mod.value
+            ? `${mod.attribute}${mod.operator || '='}${mod.value}`
+            : mod.attribute;
+        const existing = byKey.get(baseKey);
+        if (existing !== undefined && existing !== !mod.negated) {
+            return true; // Same attribute with opposite negation
+        }
+        byKey.set(baseKey, !mod.negated);
+    }
+    return false;
+}
+/**
+ * Check for pseudo contradiction: same pseudo with opposite negation
+ */
+function hasPseudoContradiction(conditions) {
+    const byKey = new Map(); // pseudo -> isPositive
+    for (const pseudo of conditions) {
+        const existing = byKey.get(pseudo.pseudo);
+        if (existing !== undefined && existing !== !pseudo.negated) {
+            return true; // Same pseudo with opposite negation
+        }
+        byKey.set(pseudo.pseudo, !pseudo.negated);
+    }
+    return false;
+}
+/**
+ * Check for root condition contradiction: same selector with opposite negation
+ */
+function hasRootContradiction(conditions) {
+    const byKey = new Map(); // selector -> isPositive
+    for (const root of conditions) {
+        const existing = byKey.get(root.selector);
+        if (existing !== undefined && existing !== !root.negated) {
+            return true; // Same selector with opposite negation
+        }
+        byKey.set(root.selector, !root.negated);
+    }
+    return false;
+}
+/**
+ * Check for own condition contradiction
+ */
+function hasOwnConditionContradiction(conditions) {
+    const modifiers = [];
+    const pseudos = [];
+    for (const c of conditions) {
+        if ('attribute' in c) {
+            modifiers.push(c);
+        }
+        else {
+            pseudos.push(c);
+        }
+    }
+    return hasModifierContradiction(modifiers) || hasPseudoContradiction(pseudos);
 }
 /**
  * Merge two selector variants (AND operation)
- * Deduplicates selectors to avoid `.foo:not([x]):not([x])` repetition
+ * Deduplicates conditions and checks for contradictions
  */
 function mergeVariants(a, b) {
     // Merge media conditions and check for contradictions
@@ -359,19 +540,38 @@ function mergeVariants(a, b) {
     if (hasMediaContradiction(mergedMedia)) {
         return null; // Impossible variant
     }
-    // Combine root prefixes and check for contradictions
-    const combinedRoot = combineRootPrefixes(a.rootPrefix, b.rootPrefix);
-    if (combinedRoot && hasRootPrefixContradiction(combinedRoot)) {
+    // Merge root conditions and check for contradictions
+    const mergedRoots = dedupeRootConditions([
+        ...a.rootConditions,
+        ...b.rootConditions,
+    ]);
+    if (hasRootContradiction(mergedRoots)) {
         return null; // Impossible variant
     }
-    // Merge modifier selectors and check for contradictions
-    const mergedModifiers = dedupeArray([
-        ...a.modifierSelectors,
-        ...b.modifierSelectors,
+    // Merge modifier conditions and check for contradictions
+    const mergedModifiers = dedupeModifierConditions([
+        ...a.modifierConditions,
+        ...b.modifierConditions,
     ]);
     if (hasModifierContradiction(mergedModifiers)) {
         return null; // Impossible variant
     }
+    // Merge pseudo conditions and check for contradictions
+    const mergedPseudos = dedupePseudoConditions([
+        ...a.pseudoConditions,
+        ...b.pseudoConditions,
+    ]);
+    if (hasPseudoContradiction(mergedPseudos)) {
+        return null; // Impossible variant
+    }
+    // Merge own conditions and check for contradictions
+    const mergedOwn = dedupeOwnConditions([
+        ...a.ownConditions,
+        ...b.ownConditions,
+    ]);
+    if (hasOwnConditionContradiction(mergedOwn)) {
+        return null; // Impossible variant
+    }
     // Merge container conditions and check for contradictions
     const mergedContainers = dedupeContainerConditions([
         ...a.containerConditions,
@@ -389,12 +589,13 @@ function mergeVariants(a, b) {
         return null; // Impossible variant
     }
     return {
-        modifierSelectors: mergedModifiers,
-        ownSelectors: dedupeArray([...a.ownSelectors, ...b.ownSelectors]),
+        modifierConditions: mergedModifiers,
+        pseudoConditions: mergedPseudos,
+        ownConditions: mergedOwn,
         mediaConditions: mergedMedia,
         containerConditions: mergedContainers,
         supportsConditions: mergedSupports,
-        rootPrefix: combinedRoot,
+        rootConditions: mergedRoots,
         startingStyle: a.startingStyle || b.startingStyle,
     };
 }
@@ -533,48 +734,6 @@ function hasMediaContradiction(conditions) {
     }
     return false;
 }
-/**
- * Check if a root prefix contains contradictions
- * e.g., ":root:not([data-x="y"])[data-x="y"]" is a contradiction
- */
-function hasRootPrefixContradiction(rootPrefix) {
-    return hasSelectorStringContradiction(rootPrefix);
-}
-/**
- * Check if modifier selectors contain contradictions
- * e.g., "[data-selected]" and ":not([data-selected])" together
- */
-function hasModifierContradiction(modifiers) {
-    const combined = modifiers.join('');
-    return hasSelectorStringContradiction(combined);
-}
-/**
- * Check if a selector string contains contradictions
- * e.g., "[data-x]:not([data-x])" or "[data-x="y"]:not([data-x="y"])"
- */
-function hasSelectorStringContradiction(selector) {
-    const positiveAttrs = [];
-    const negativeAttrs = [];
-    // Match :not([attr]) or :not([attr="value"])
-    const notPattern = /:not\(\[([^\]]+)\]\)/g;
-    let match;
-    while ((match = notPattern.exec(selector)) !== null) {
-        negativeAttrs.push(match[1]);
-    }
-    // Match [attr] or [attr="value"] (not inside :not())
-    // The lookbehind (?<!...) ensures we don't match attributes inside :not()
-    const attrPattern = /(?<!:not\()\[([^\]]+)\]/g;
-    while ((match = attrPattern.exec(selector)) !== null) {
-        positiveAttrs.push(match[1]);
-    }
-    // Check for contradictions
-    for (const neg of negativeAttrs) {
-        if (positiveAttrs.includes(neg)) {
-            return true;
-        }
-    }
-    return false;
-}
 /**
  * Check if container conditions contain contradictions in style queries
  * e.g., style(--variant: danger) and style(--variant: success) together
@@ -639,21 +798,18 @@ function hasContainerStyleContradiction(conditions) {
     }
     return false;
 }
-/**
- * Combine two root prefixes
- */
-function combineRootPrefixes(a, b) {
-    if (!a)
-        return b;
-    if (!b)
-        return a;
-    // Combine: :root[x] + :root[y] → :root[x][y]
-    return `${a}${b.replace(':root', '')}`;
-}
 /**
  * Get a unique key for a variant (for deduplication)
  */
 function getVariantKey(v) {
+    const modifierKey = v.modifierConditions.map(getModifierKey).sort().join('|');
+    const pseudoKey = v.pseudoConditions.map(getPseudoKey).sort().join('|');
+    const ownKey = v.ownConditions
+        .map((c) => 'attribute' in c
+        ? `mod:${getModifierKey(c)}`
+        : `pseudo:${getPseudoKey(c)}`)
+        .sort()
+        .join('|');
     const containerKey = v.containerConditions
         .map((c) => `${c.name ?? ''}:${c.negated ? '!' : ''}${c.condition}`)
         .sort()
@@ -666,13 +822,15 @@ function getVariantKey(v) {
         .map((c) => `${c.subtype}:${c.negated ? '!' : ''}${c.condition}`)
         .sort()
         .join('|');
+    const rootKey = v.rootConditions.map(getRootKey).sort().join('|');
     return [
-        v.modifierSelectors.slice().sort().join('|'),
-        v.ownSelectors.slice().sort().join('|'),
+        modifierKey,
+        pseudoKey,
+        ownKey,
         mediaKey,
         containerKey,
         supportsKey,
-        v.rootPrefix || '',
+        rootKey,
         v.startingStyle ? '1' : '0',
     ].join('###');
 }
@@ -688,11 +846,12 @@ function getVariantKey(v) {
  *   A is a superset of B, so A is redundant when B exists.
  */
 function isVariantSuperset(a, b) {
-    // Must have same context (root prefix, at-rules, etc.)
-    if (a.rootPrefix !== b.rootPrefix)
-        return false;
+    // Must have same context
     if (a.startingStyle !== b.startingStyle)
         return false;
+    // Check if a.rootConditions is superset of b.rootConditions
+    if (!isRootConditionsSuperset(a.rootConditions, b.rootConditions))
+        return false;
     // Check if a.mediaConditions is superset of b.mediaConditions
     if (!isMediaConditionsSuperset(a.mediaConditions, b.mediaConditions))
         return false;
@@ -702,24 +861,31 @@ function isVariantSuperset(a, b) {
     // Check if a.supportsConditions is superset of b.supportsConditions
     if (!isSupportsConditionsSuperset(a.supportsConditions, b.supportsConditions))
         return false;
-    // Check if a.modifierSelectors is superset of b.modifierSelectors
-    if (!isArraySuperset(a.modifierSelectors, b.modifierSelectors))
+    // Check if a.modifierConditions is superset of b.modifierConditions
+    if (!isModifierConditionsSuperset(a.modifierConditions, b.modifierConditions))
         return false;
-    // Check if a.ownSelectors is superset of b.ownSelectors
-    if (!isArraySuperset(a.ownSelectors, b.ownSelectors))
+    // Check if a.pseudoConditions is superset of b.pseudoConditions
+    if (!isPseudoConditionsSuperset(a.pseudoConditions, b.pseudoConditions))
+        return false;
+    // Check if a.ownConditions is superset of b.ownConditions
+    if (!isOwnConditionsSuperset(a.ownConditions, b.ownConditions))
         return false;
     // A is a superset if it has all of B's items (possibly more)
     // and at least one category has strictly more items
     const aTotal = a.mediaConditions.length +
         a.containerConditions.length +
         a.supportsConditions.length +
-        a.modifierSelectors.length +
-        a.ownSelectors.length;
+        a.modifierConditions.length +
+        a.pseudoConditions.length +
+        a.rootConditions.length +
+        a.ownConditions.length;
     const bTotal = b.mediaConditions.length +
         b.containerConditions.length +
         b.supportsConditions.length +
-        b.modifierSelectors.length +
-        b.ownSelectors.length;
+        b.modifierConditions.length +
+        b.pseudoConditions.length +
+        b.rootConditions.length +
+        b.ownConditions.length;
     return aTotal > bTotal;
 }
 /**
@@ -759,12 +925,50 @@ function isSupportsConditionsSuperset(a, b) {
     return true;
 }
 /**
- * Check if array A contains all elements of array B (superset)
+ * Check if modifier conditions A is a superset of B
+ */
+function isModifierConditionsSuperset(a, b) {
+    const aKeys = new Set(a.map(getModifierKey));
+    for (const c of b) {
+        if (!aKeys.has(getModifierKey(c)))
+            return false;
+    }
+    return true;
+}
+/**
+ * Check if pseudo conditions A is a superset of B
  */
-function isArraySuperset(a, b) {
-    const setA = new Set(a);
-    for (const item of b) {
-        if (!setA.has(item))
+function isPseudoConditionsSuperset(a, b) {
+    const aKeys = new Set(a.map(getPseudoKey));
+    for (const c of b) {
+        if (!aKeys.has(getPseudoKey(c)))
+            return false;
+    }
+    return true;
+}
+/**
+ * Check if root conditions A is a superset of B
+ */
+function isRootConditionsSuperset(a, b) {
+    const aKeys = new Set(a.map(getRootKey));
+    for (const c of b) {
+        if (!aKeys.has(getRootKey(c)))
+            return false;
+    }
+    return true;
+}
+/**
+ * Check if own conditions A is a superset of B
+ */
+function isOwnConditionsSuperset(a, b) {
+    const aKeys = new Set(a.map((c) => 'attribute' in c
+        ? `mod:${getModifierKey(c)}`
+        : `pseudo:${getPseudoKey(c)}`));
+    for (const c of b) {
+        const key = 'attribute' in c
+            ? `mod:${getModifierKey(c)}`
+            : `pseudo:${getPseudoKey(c)}`;
+        if (!aKeys.has(key))
             return false;
     }
     return true;
@@ -788,18 +992,22 @@ function dedupeVariants(variants) {
         }
     }
     // Second pass: remove supersets (more restrictive variants)
-    // Sort by total selector count (fewer selectors = less restrictive = keep)
+    // Sort by total condition count (fewer conditions = less restrictive = keep)
     result.sort((a, b) => {
-        const aCount = a.modifierSelectors.length +
-            a.ownSelectors.length +
+        const aCount = a.modifierConditions.length +
+            a.pseudoConditions.length +
+            a.ownConditions.length +
             a.mediaConditions.length +
             a.containerConditions.length +
-            a.supportsConditions.length;
-        const bCount = b.modifierSelectors.length +
-            b.ownSelectors.length +
+            a.supportsConditions.length +
+            a.rootConditions.length;
+        const bCount = b.modifierConditions.length +
+            b.pseudoConditions.length +
+            b.ownConditions.length +
             b.mediaConditions.length +
             b.containerConditions.length +
-            b.supportsConditions.length;
+            b.supportsConditions.length +
+            b.rootConditions.length;
         return aCount - bCount;
     });
     // Remove variants that are supersets of earlier (less restrictive) variants
@@ -907,18 +1115,32 @@ function getConditionKey(node) {
 /**
  * Build a complete CSS selector from a single variant
  */
-export function buildCSSSelectorFromVariant(className, variant, selectorSuffix = '') {
+function buildCSSSelectorFromVariant(className, variant, selectorSuffix = '') {
     // Start with base class (doubled for specificity)
     let selector = `.${className}.${className}`;
     // Add modifier selectors
-    selector += variant.modifierSelectors.join('');
+    for (const mod of variant.modifierConditions) {
+        selector += modifierToCSS(mod);
+    }
+    // Add pseudo selectors
+    for (const pseudo of variant.pseudoConditions) {
+        selector += pseudoToCSS(pseudo);
+    }
     // Add selector suffix (e.g., ' [data-element="Label"]')
     selector += selectorSuffix;
     // Add own selectors (after sub-element)
-    selector += variant.ownSelectors.join('');
+    for (const own of variant.ownConditions) {
+        if ('attribute' in own) {
+            selector += modifierToCSS(own);
+        }
+        else {
+            selector += pseudoToCSS(own);
+        }
+    }
     // Add root prefix if present
-    if (variant.rootPrefix) {
-        selector = `${variant.rootPrefix} ${selector}`;
+    const rootPrefix = rootConditionsToCSS(variant.rootConditions);
+    if (rootPrefix) {
+        selector = `${rootPrefix} ${selector}`;
     }
     return selector;
 }
@@ -996,7 +1218,7 @@ function getAtRulesKey(variant) {
  * Returns an array of CSSRules because OR conditions may require multiple rules
  * (when different branches have different at-rules)
  */
-export function materializeRule(condition, declarations, selectorSuffix, className) {
+function materializeRule(condition, declarations, selectorSuffix, className) {
     const components = conditionToCSS(condition);
     if (components.isImpossible || components.variants.length === 0) {
         return [];
@@ -1026,8 +1248,9 @@ export function materializeRule(condition, declarations, selectorSuffix, classNa
         if (atRules.length > 0) {
             rule.atRules = atRules;
         }
-        if (variants[0].rootPrefix) {
-            rule.rootPrefix = variants[0].rootPrefix;
+        const rootPrefix = rootConditionsToCSS(variants[0].rootConditions);
+        if (rootPrefix) {
+            rule.rootPrefix = rootPrefix;
         }
         rules.push(rule);
     }