@master/css-compiler 2.0.0-beta.99 → 2.0.0-rc.70

package/dist/lower-css-directives.mjs

@@ -0,0 +1,969 @@
+import { readCSSDirectiveVariantReference, CSSDirectiveError } from '@master/css-schema/css-directives';
+import { createCompilerCSS, generateAt, parseAt, generateSelector, compareRulePriority, parseSelector } from '@master/css-engine/compiler';
+import { createVariableNameResolver, createMasterCSSManifest } from './master-css-manifest.mjs';
+import { combineStyleSelectors } from './utils/selectors.mjs';
+import wrapAtRules from './utils/wrap-at-rules.mjs';
+import { cssTreeNativeDeclarationMatcher } from './native-declaration.mjs';
+
+const STYLE_AT_FEATURE_REGEX = /\(\s*(width|height|resolution)\s*(>=|<=|>|<)\s*(-?(?:\d+(?:\.\d+)?|\.\d+))([a-z%]*)\s*\)/g;
+const MEDIA_MODE_NAMES = new Set([
+    'light',
+    'dark'
+]);
+const DEFAULT_MODE_NONE = 'none';
+const CONDITION_VARIABLE_NAMESPACES = new Set([
+    'breakpoint',
+    'container'
+]);
+function isCSSDirectiveResult(input) {
+    return 'manifestInput' in input;
+}
+function getDirectiveInput(input) {
+    return isCSSDirectiveResult(input) ? input.manifestInput : input;
+}
+function getStyleDefinitions(input) {
+    return isCSSDirectiveResult(input) ? input.styleDefinitions : undefined;
+}
+function getResolutionManifest(options) {
+    return options.resolutionManifest || options.baseManifest;
+}
+function warn(warnings, options, message) {
+    warnings.push(message);
+    options.onWarning?.(message);
+}
+function isNamedDefaultMode(defaultMode) {
+    return typeof defaultMode === 'string' && defaultMode !== DEFAULT_MODE_NONE;
+}
+function normalizeVariable(variable, resolveVariableName) {
+    const resolved = resolveVariableName(variable);
+    if (variable.mode && resolved.namespace && CONDITION_VARIABLE_NAMESPACES.has(resolved.namespace)) {
+        throw new Error(`${resolved.namespace[0].toUpperCase()}${resolved.namespace.slice(1)} variables cannot be mode-specific: ${resolved.namespace}-${resolved.key}@${variable.mode}`);
+    }
+    if (variable.inline && variable.mode) {
+        throw new Error(`Inline theme variables cannot be mode-specific: ${resolved.name}@${variable.mode}`);
+    }
+    if (variable.inline && variable.static) {
+        throw new Error(`Inline and static theme variables cannot be combined: ${resolved.name}`);
+    }
+    return {
+        name: resolved.name,
+        ...resolved.namespace ? {
+            namespace: resolved.namespace
+        } : {},
+        key: resolved.key,
+        value: variable.value,
+        ...variable.mode ? {
+            mode: variable.mode
+        } : {},
+        ...variable.inline ? {
+            inline: true
+        } : {},
+        ...variable.static ? {
+            static: true
+        } : {}
+    };
+}
+function variableSlot(variable) {
+    return [
+        variable.key ?? variable.name,
+        variable.namespace || '',
+        variable.mode || ''
+    ].join('\0');
+}
+function addVariable(input, variable, resolveVariableName) {
+    const definition = normalizeVariable(variable, resolveVariableName);
+    if (definition.mode) {
+        input.modes ??= [];
+        if (!input.modes.includes(definition.mode)) input.modes.push(definition.mode);
+    }
+    input.variables ??= [];
+    const foundIndex = input.variables.findIndex((existing)=>variableSlot(existing) === variableSlot(definition));
+    if (foundIndex !== -1) input.variables.splice(foundIndex, 1);
+    input.variables.push(definition);
+}
+function cloneUtilityRule(rule) {
+    return {
+        declarations: {
+            ...rule.declarations
+        },
+        ...rule.selector ? {
+            selector: rule.selector
+        } : {},
+        ...rule.atRules?.length ? {
+            atRules: [
+                ...rule.atRules
+            ]
+        } : {}
+    };
+}
+function cloneUtility(definition) {
+    return {
+        ...definition,
+        type: definition.type || 'static',
+        ...definition.pattern ? {
+            pattern: {
+                prefix: definition.pattern.prefix,
+                values: [
+                    ...definition.pattern.values
+                ]
+            }
+        } : {},
+        ...definition.dynamic ? {
+            dynamic: {
+                key: definition.dynamic.key,
+                ...definition.dynamic.variableAliasRefs?.length ? {
+                    variableAliasRefs: [
+                        ...definition.dynamic.variableAliasRefs
+                    ]
+                } : {},
+                ...definition.dynamic.kind ? {
+                    kind: definition.dynamic.kind
+                } : {},
+                ...definition.dynamic.values?.length ? {
+                    values: [
+                        ...definition.dynamic.values
+                    ]
+                } : {},
+                ...definition.dynamic.arbitrary ? {
+                    arbitrary: true
+                } : {}
+            }
+        } : {},
+        ...definition.declarations ? {
+            declarations: {
+                ...definition.declarations
+            }
+        } : {},
+        ...definition.atRules?.length ? {
+            atRules: [
+                ...definition.atRules
+            ]
+        } : {},
+        ...definition.rules?.length ? {
+            rules: definition.rules.map(cloneUtilityRule)
+        } : {}
+    };
+}
+function normalizeDirectiveInput(input = {}, options = {}) {
+    const source = getDirectiveInput(input);
+    const resolveVariableName = createVariableNameResolver(source, {
+        baseManifest: getResolutionManifest(options)
+    });
+    const normalized = {};
+    if (source.rootSize !== undefined) normalized.rootSize = source.rootSize;
+    if (source.baseUnit !== undefined) normalized.baseUnit = source.baseUnit;
+    if (source.defaultMode !== undefined) normalized.defaultMode = source.defaultMode;
+    if (source.modeTrigger !== undefined) normalized.modeTrigger = source.modeTrigger;
+    if (source.scope !== undefined) normalized.scope = source.scope;
+    if (source.important !== undefined) normalized.important = source.important;
+    if (source.variants?.length) normalized.variants = source.variants.map((variant)=>({
+            token: variant.token,
+            branches: variant.branches.map((branch)=>({
+                    ...branch,
+                    ...branch.atRules?.length ? {
+                        atRules: [
+                            ...branch.atRules
+                        ]
+                    } : {}
+                }))
+        }));
+    if (source.animations) normalized.animations = {
+        ...source.animations
+    };
+    if (source.animationOptions) normalized.animationOptions = {
+        ...source.animationOptions
+    };
+    if (source.utilities?.length) normalized.utilities = source.utilities.map(cloneUtility);
+    for (const mode of source.modes || []){
+        normalized.modes ??= [];
+        if (!normalized.modes.includes(mode)) normalized.modes.push(mode);
+    }
+    for (const variable of source.variables || []){
+        addVariable(normalized, variable, resolveVariableName);
+    }
+    return normalized;
+}
+function collectModeNames(input) {
+    const modes = new Set(input.modes || []);
+    if (isNamedDefaultMode(input.defaultMode)) modes.add(input.defaultMode);
+    return modes;
+}
+function collectVariablesByNamespace(input, namespace, resolveVariableName) {
+    return new Set((input.variables || []).map(resolveVariableName).filter((variable)=>variable.namespace === namespace).map((variable)=>variable.key).filter((key)=>Boolean(key)));
+}
+function validateTokenConflicts(input, resolveVariableName) {
+    const modes = collectModeNames(input);
+    const breakpoints = collectVariablesByNamespace(input, 'breakpoint', resolveVariableName);
+    const containers = collectVariablesByNamespace(input, 'container', resolveVariableName);
+    for (const mode of modes){
+        if (breakpoints.has(mode)) {
+            throw new Error(`Mode "${mode}" conflicts with breakpoint variable "--breakpoint-${mode}"`);
+        }
+    }
+    for (const breakpoint of breakpoints){
+        if (modes.has(breakpoint)) {
+            throw new Error(`Breakpoint variable "--breakpoint-${breakpoint}" conflicts with mode "${breakpoint}"`);
+        }
+    }
+    const variantNames = (input.variants || []).filter((variant)=>variant.token.startsWith('@')).map((variant)=>variant.token.slice(1));
+    for (const token of variantNames){
+        if (modes.has(token)) {
+            throw new Error(`Variant "${token}" conflicts with mode "${token}"`);
+        }
+        if (breakpoints.has(token)) {
+            throw new Error(`Variant "${token}" conflicts with breakpoint variable "--breakpoint-${token}"`);
+        }
+        if (containers.has(token)) {
+            throw new Error(`Variant "${token}" conflicts with container variable "--container-${token}"`);
+        }
+    }
+}
+function warnUnsupportedMediaModes(input, options, warnings) {
+    if (input.modeTrigger !== 'media') return;
+    const customModes = new Set((input.modes || []).filter((mode)=>!MEDIA_MODE_NAMES.has(mode)));
+    if (isNamedDefaultMode(input.defaultMode) && !MEDIA_MODE_NAMES.has(input.defaultMode)) {
+        customModes.add(input.defaultMode);
+    }
+    if (!customModes.size) return;
+    const modeList = [
+        ...customModes
+    ].map((mode)=>`"${mode}"`).join(', ');
+    const subject = customModes.size === 1 ? 'mode' : 'modes';
+    warn(warnings, options, `Custom ${subject} ${modeList} will not work with mode-trigger: media. Browsers only support light and dark prefers-color-scheme values; use mode-trigger: class or host for custom modes.`);
+}
+function createDirectiveCSS(input, options) {
+    return createCompilerCSS(createMasterCSSManifest(input, {
+        baseManifest: getResolutionManifest(options)
+    }), undefined, {
+        nativeDeclarationMatcher: cssTreeNativeDeclarationMatcher
+    });
+}
+function getUtilityAtRuleDefinitions(utility) {
+    const atRules = [];
+    if (utility.atRules) {
+        for (const id of [
+            'container',
+            'starting-style',
+            'supports',
+            'media',
+            'layer'
+        ]){
+            const nodes = utility.atRules[id];
+            if (!nodes) continue;
+            if (id === 'layer' && utility.explicitLayerName) continue;
+            atRules.push(generateAt({
+                id,
+                nodes
+            }));
+        }
+    }
+    return atRules;
+}
+function getComposedUtilitySelector(utility, css) {
+    let selector = utility.selectorTemplate ? '&' : utility.selectorNodes ? generateSelector(utility.selectorNodes, '&') : '&';
+    if (utility.selectorTemplate) {
+        selector = utility.selectorTemplate.replace(/&/g, selector);
+    }
+    if (utility.mode && css.settings.modeTrigger !== 'media') {
+        const modeSelector = css.getModeSelector(utility.mode);
+        if (modeSelector) selector = `${modeSelector} ${selector}`;
+    }
+    return selector;
+}
+function cloneDeclarations(declarations, important) {
+    const result = {};
+    for(const propertyName in declarations){
+        const propertyValue = declarations[propertyName];
+        const value = String(propertyValue);
+        result[propertyName] = important && !value.endsWith('!important') ? `${value}!important` : value;
+    }
+    return result;
+}
+function createStyleDefinitionsFromCompose(definition, css) {
+    const utilities = css.createRules(definition.className);
+    if (!utilities.length) {
+        throw new CSSDirectiveError('invalid-compose-class', `Invalid @compose class: ${definition.className}`, definition.source || definition.directiveSource);
+    }
+    return utilities.flatMap((utility)=>{
+        const selector = getComposedUtilitySelector(utility, css);
+        const layer = utility.explicitLayerName;
+        const utilityAtRules = getUtilityAtRuleDefinitions(utility);
+        const declarationRules = utility.declarationRules || (utility.declarations ? [
+            {
+                declarations: utility.declarations
+            }
+        ] : []);
+        return declarationRules.map(({ declarations, atRules, selector: ruleSelector })=>({
+                utility,
+                selector: ruleSelector ? combineStyleSelectors(selector, ruleSelector) : selector,
+                declarations: cloneDeclarations(declarations, utility.important),
+                ...layer ? {
+                    layer
+                } : {},
+                ...[
+                    ...utilityAtRules,
+                    ...atRules || []
+                ].length ? {
+                    atRules: [
+                        ...utilityAtRules,
+                        ...atRules || []
+                    ]
+                } : {}
+            }));
+    });
+}
+function combineSelectorWrapper(selector, wrapper) {
+    return wrapper.replace(/&/g, selector);
+}
+function mergeResolvedVariantReferenceBranch(branch, resolved, token) {
+    const nextLayer = resolved.layer || branch.layer;
+    if (branch.layer && resolved.layer && branch.layer !== resolved.layer) {
+        throw new Error(`@variant ${token} cannot assign multiple layers`);
+    }
+    return {
+        selector: resolved.selector ? combineSelectorWrapper(branch.selector || '&', resolved.selector) : branch.selector,
+        atRules: [
+            ...branch.atRules || [],
+            ...resolved.atRules || []
+        ],
+        ...nextLayer ? {
+            layer: nextLayer
+        } : {}
+    };
+}
+function cloneConfiguredVariantBranches(token, css) {
+    const configuredVariant = css.resolveVariant(token);
+    if (configuredVariant) {
+        return configuredVariant.map((branch)=>({
+                ...branch.selector ? {
+                    selector: branch.selector
+                } : {},
+                ...branch.atRules?.length ? {
+                    atRules: [
+                        ...branch.atRules
+                    ]
+                } : {},
+                ...branch.layer ? {
+                    layer: branch.layer
+                } : {}
+            }));
+    }
+}
+function findClosingParen(value, start) {
+    let depth = 0;
+    let quote = '';
+    for(let index = start; index < value.length; index++){
+        const char = value[index];
+        if (quote) {
+            if (char === '\\') {
+                index++;
+            } else if (char === quote) {
+                quote = '';
+            }
+            continue;
+        }
+        if (char === '"' || char === '\'') {
+            quote = char;
+            continue;
+        }
+        if (char === '(') depth++;
+        if (char === ')') {
+            depth--;
+            if (depth === 0) return index;
+        }
+    }
+    return -1;
+}
+function resolveSelectorVariantStack(selectorStack, css, token) {
+    let branches = [
+        {}
+    ];
+    const selectorVariantTokens = [
+        ...css.variants.keys()
+    ].filter((variantToken)=>variantToken.startsWith(':')).sort((a, b)=>b.length - a.length);
+    let index = 0;
+    let raw = '';
+    const flushRaw = ()=>{
+        if (!raw) return;
+        const selector = generateSelector(parseSelector(raw, css), '&');
+        branches = branches.map((branch)=>mergeResolvedVariantReferenceBranch(branch, {
+                selector
+            }, token));
+        raw = '';
+    };
+    while(index < selectorStack.length){
+        const matchedToken = selectorVariantTokens.find((variantToken)=>{
+            if (!selectorStack.startsWith(variantToken, index)) return false;
+            const next = selectorStack[index + variantToken.length];
+            return next === undefined || next === '(' || !/[-_a-zA-Z0-9]/.test(next);
+        });
+        if (!matchedToken) {
+            raw += selectorStack[index++];
+            continue;
+        }
+        const configuredBranches = cloneConfiguredVariantBranches(matchedToken, css);
+        if (!configuredBranches) {
+            raw += selectorStack[index++];
+            continue;
+        }
+        flushRaw();
+        index += matchedToken.length;
+        let suffix = '';
+        if (selectorStack[index] === '(') {
+            const end = findClosingParen(selectorStack, index);
+            if (end !== -1) {
+                suffix = selectorStack.slice(index, end + 1);
+                index = end + 1;
+            }
+        }
+        branches = branches.flatMap((branch)=>configuredBranches.map((configuredBranch)=>{
+                const selector = configuredBranch.selector && suffix ? configuredBranch.selector + suffix : configuredBranch.selector;
+                return mergeResolvedVariantReferenceBranch(branch, {
+                    ...configuredBranch,
+                    ...selector ? {
+                        selector
+                    } : {}
+                }, token);
+            }));
+    }
+    flushRaw();
+    return branches;
+}
+function resolveAtVariantReference(token, css) {
+    const configuredVariant = cloneConfiguredVariantBranches(token, css);
+    if (configuredVariant) return configuredVariant;
+    const atToken = token.slice(1);
+    if (css.modes.includes(atToken)) {
+        const modeSelector = css.getModeSelector(atToken);
+        return modeSelector ? [
+            {
+                selector: `${modeSelector} &`
+            }
+        ] : [
+            {
+                atRules: [
+                    `@media (prefers-color-scheme:${atToken})`
+                ]
+            }
+        ];
+    }
+    if (/^-?[_a-zA-Z][-_a-zA-Z0-9]*$/.test(atToken) && !css.atRules.has(atToken)) {
+        throw new Error(`Unknown @variant token: ${token}`);
+    }
+    return [
+        {
+            atRules: [
+                generateAt(parseAt(atToken, css))
+            ]
+        }
+    ];
+}
+function resolveMasterVariantReference(token, css) {
+    if (!token.startsWith(':') && !token.startsWith('@')) {
+        throw new Error(`@variant requires a full variant token: ${token}`);
+    }
+    const [selectorStack = '', ...conditionStacks] = token.split('@');
+    let branches = selectorStack ? resolveSelectorVariantStack(selectorStack, css, token) : [
+        {}
+    ];
+    for (const conditionStack of conditionStacks){
+        if (!conditionStack) continue;
+        const resolvedBranches = resolveAtVariantReference(`@${conditionStack}`, css);
+        branches = branches.flatMap((branch)=>resolvedBranches.map((resolved)=>mergeResolvedVariantReferenceBranch(branch, resolved, token)));
+    }
+    return branches;
+}
+function resolveConfiguredBranches(atRules, css, selector = '&', layer) {
+    let branches = [
+        {
+            selector,
+            ...layer ? {
+                layer
+            } : {}
+        }
+    ];
+    if (!atRules?.length) return branches;
+    for (const atRule of atRules){
+        const token = readCSSDirectiveVariantReference(atRule);
+        if (!token) {
+            branches = branches.map((branch)=>({
+                    ...branch,
+                    atRules: [
+                        ...branch.atRules || [],
+                        atRule
+                    ]
+                }));
+            continue;
+        }
+        const resolvedBranches = resolveMasterVariantReference(token, css);
+        branches = branches.flatMap((branch)=>resolvedBranches.map((resolved)=>{
+                const nextLayer = resolved.layer || branch.layer;
+                if (branch.layer && resolved.layer && branch.layer !== resolved.layer) {
+                    throw new Error(`@variant ${token} cannot assign multiple layers`);
+                }
+                return {
+                    selector: resolved.selector ? combineSelectorWrapper(branch.selector, resolved.selector) : branch.selector,
+                    atRules: [
+                        ...branch.atRules || [],
+                        ...resolved.atRules || []
+                    ],
+                    ...nextLayer ? {
+                        layer: nextLayer
+                    } : {}
+                };
+            }));
+    }
+    return branches.map((branch)=>({
+            selector: branch.selector,
+            ...branch.atRules?.length ? {
+                atRules: branch.atRules
+            } : {},
+            ...branch.layer ? {
+                layer: branch.layer
+            } : {}
+        }));
+}
+function ensureUtilityRules(definition) {
+    if (!definition.declarations) return;
+    const declarations = definition.declarations;
+    delete definition.declarations;
+    const atRules = definition.atRules;
+    delete definition.atRules;
+    definition.rules ??= [];
+    definition.rules.push({
+        ...atRules?.length ? {
+            atRules: [
+                ...atRules
+            ]
+        } : {},
+        declarations
+    });
+}
+function finalizeUtilityDefinitions(input, css) {
+    const utilities = input.utilities;
+    if (!utilities?.length) return;
+    for (const definition of utilities){
+        if (definition.atRules?.some(readCSSDirectiveVariantReference)) {
+            const resolvedBranches = resolveConfiguredBranches(definition.atRules, css);
+            delete definition.atRules;
+            if (definition.declarations) {
+                definition.rules ??= [];
+                for (const resolved of resolvedBranches){
+                    definition.rules.push({
+                        declarations: definition.declarations,
+                        ...resolved.selector !== '&' ? {
+                            selector: resolved.selector
+                        } : {},
+                        ...resolved.atRules?.length ? {
+                            atRules: resolved.atRules
+                        } : {}
+                    });
+                }
+                delete definition.declarations;
+            }
+        }
+        if (!definition.rules?.length) continue;
+        definition.rules = definition.rules.flatMap((rule)=>{
+            const resolvedBranches = resolveConfiguredBranches(rule.atRules, css, rule.selector || '&');
+            return resolvedBranches.map((resolved)=>({
+                    declarations: rule.declarations,
+                    ...resolved.selector !== '&' ? {
+                        selector: resolved.selector
+                    } : {},
+                    ...resolved.atRules?.length ? {
+                        atRules: resolved.atRules
+                    } : {}
+                }));
+        });
+    }
+}
+function getStyleMergeBucketKey(selector, atRules, layer) {
+    return JSON.stringify([
+        layer || '',
+        selector,
+        atRules || []
+    ]);
+}
+function pushStyleMergeEvent(buckets, selector, atRules, layer, event) {
+    const key = getStyleMergeBucketKey(selector, atRules, layer);
+    const bucket = buckets.get(key) || {
+        selector,
+        ...atRules?.length ? {
+            atRules
+        } : {},
+        ...layer ? {
+            layer
+        } : {},
+        order: event.order,
+        events: []
+    };
+    bucket.order = Math.min(bucket.order, event.order);
+    bucket.events.push(event);
+    buckets.set(key, bucket);
+}
+function isImportantStyleDeclarationValue(value) {
+    return String(value).trim().endsWith('!important');
+}
+function applyStyleDeclaration(declarations, propertyName, value) {
+    const key = propertyName;
+    const currentValue = declarations[key];
+    if (currentValue !== undefined && isImportantStyleDeclarationValue(currentValue) && !isImportantStyleDeclarationValue(value)) {
+        return;
+    }
+    delete declarations[key];
+    declarations[key] = value;
+}
+function applyStyleDeclarations(declarations, incomingDeclarations) {
+    for(const propertyName in incomingDeclarations){
+        applyStyleDeclaration(declarations, propertyName, incomingDeclarations[propertyName]);
+    }
+}
+function createMergedStyleDefinition(bucket) {
+    const declarations = {};
+    const composeBatch = [];
+    const flushComposeBatch = ()=>{
+        composeBatch.sort((a, b)=>compareRulePriority(a.utility, b.utility) || a.order - b.order);
+        for (const event of composeBatch){
+            applyStyleDeclarations(declarations, event.declarations);
+        }
+        composeBatch.length = 0;
+    };
+    for (const event of [
+        ...bucket.events
+    ].sort((a, b)=>a.order - b.order)){
+        if (event.type === 'compose') {
+            composeBatch.push(event);
+            continue;
+        }
+        flushComposeBatch();
+        applyStyleDeclarations(declarations, event.declarations);
+    }
+    flushComposeBatch();
+    if (!Object.keys(declarations).length) return;
+    return {
+        selector: bucket.selector,
+        declarations,
+        ...bucket.atRules?.length ? {
+            atRules: bucket.atRules
+        } : {},
+        ...bucket.layer ? {
+            layer: bucket.layer
+        } : {}
+    };
+}
+function normalizeStyleAtFeatureValue(value, unit, rootSize) {
+    if (unit === 'px') return value / rootSize;
+    return value;
+}
+function getStyleAtRuleFeatures(atRules, rootSize) {
+    const featureMap = new Map();
+    for (const atRule of atRules || []){
+        for (const match of atRule.matchAll(STYLE_AT_FEATURE_REGEX)){
+            const [, name, operator, rawValue, unit] = match;
+            const value = normalizeStyleAtFeatureValue(Number(rawValue), unit, rootSize);
+            const entry = featureMap.get(name) ?? {};
+            switch(operator){
+                case '>':
+                    entry.min = value + 0.02;
+                    break;
+                case '>=':
+                    entry.min = value;
+                    break;
+                case '<':
+                    entry.max = value - 0.02;
+                    break;
+                case '<=':
+                    entry.max = value;
+                    break;
+            }
+            featureMap.set(name, entry);
+        }
+    }
+    return [
+        ...featureMap.entries()
+    ].map(([name, entry])=>[
+            name,
+            entry.min ?? 0,
+            entry.max ?? Number.MAX_SAFE_INTEGER
+        ]).sort(([a], [b])=>a.localeCompare(b, undefined, {
+            numeric: true
+        }));
+}
+function compareStyleAtRuleFeatures(a, b) {
+    const len = Math.max(a.length, b.length);
+    for(let index = 0; index < len; index++){
+        const left = a[index];
+        const right = b[index];
+        if (!left) return -1;
+        if (!right) return 1;
+        const [nameA, minA, maxA] = left;
+        const [nameB, minB, maxB] = right;
+        const nameCompare = nameA.localeCompare(nameB, undefined, {
+            numeric: true
+        });
+        if (nameCompare !== 0) return nameCompare;
+        const rangeA = maxA - minA;
+        const rangeB = maxB - minB;
+        if (rangeA !== rangeB) return rangeB - rangeA;
+        if (minA !== minB) return minB - minA;
+        if (maxA !== maxB) return maxB - maxA;
+    }
+    return 0;
+}
+function compareStyleMergeBuckets(a, b, rootSize) {
+    const layerA = a.layer || 'components';
+    const layerB = b.layer || 'components';
+    if (layerA === layerB && a.selector === b.selector) {
+        const atRuleStateA = a.atRules?.length ? 1 : 0;
+        const atRuleStateB = b.atRules?.length ? 1 : 0;
+        if (atRuleStateA !== atRuleStateB) return atRuleStateA - atRuleStateB;
+        if (atRuleStateA && atRuleStateB) {
+            const featuresA = getStyleAtRuleFeatures(a.atRules, rootSize);
+            const featuresB = getStyleAtRuleFeatures(b.atRules, rootSize);
+            if (featuresA.length && featuresB.length) {
+                const featureCompare = compareStyleAtRuleFeatures(featuresA, featuresB);
+                if (featureCompare !== 0) return featureCompare;
+            }
+        }
+    }
+    return a.order - b.order;
+}
+function createMergedStyleDefinitions(definitions, css, targetLayer) {
+    const buckets = new Map();
+    for (const definition of definitions){
+        if (definition.type === 'compose') {
+            const composedDefinitions = createStyleDefinitionsFromCompose(definition, css);
+            for (const composedDefinition of composedDefinitions){
+                const { atRules: composedAtRules, ...composedDefinitionWithoutAtRules } = composedDefinition;
+                const selector = combineStyleSelectors(definition.selector, composedDefinition.selector);
+                const resolvedBranches = resolveConfiguredBranches([
+                    ...definition.atRules || [],
+                    ...composedAtRules || []
+                ], css, selector, targetLayer || composedDefinitionWithoutAtRules.layer);
+                for (const resolved of resolvedBranches){
+                    pushStyleMergeEvent(buckets, resolved.selector, resolved.atRules, resolved.layer, {
+                        type: 'compose',
+                        order: definition.order,
+                        utility: composedDefinitionWithoutAtRules.utility,
+                        declarations: composedDefinitionWithoutAtRules.declarations
+                    });
+                }
+            }
+        } else {
+            const resolvedBranches = resolveConfiguredBranches(definition.atRules, css, definition.selector, targetLayer || definition.layer);
+            for (const resolved of resolvedBranches){
+                pushStyleMergeEvent(buckets, resolved.selector, resolved.atRules, resolved.layer, {
+                    type: 'native',
+                    order: definition.order,
+                    declarations: definition.declarations
+                });
+            }
+        }
+    }
+    const rootSize = css.settings.rootSize || 16;
+    return [
+        ...buckets.values()
+    ].sort((a, b)=>compareStyleMergeBuckets(a, b, rootSize)).flatMap((bucket)=>{
+        const definition = createMergedStyleDefinition(bucket);
+        return definition ? [
+            definition
+        ] : [];
+    });
+}
+function isManagedStyleDefinition(definition) {
+    return Boolean(definition.name);
+}
+function getManagedStyleDefinitionLayer(definition) {
+    return definition.layer || 'components';
+}
+function getManagedStyleDefinitionKey(definition) {
+    return `${definition.name}\0${getManagedStyleDefinitionLayer(definition)}`;
+}
+function splitManagedStyleDefinitionKey(key) {
+    const [name, layer] = key.split('\0');
+    return {
+        name,
+        layer: layer
+    };
+}
+function getManagedComposeDependencyName(className, names) {
+    const sortedNames = [
+        ...names
+    ].sort((a, b)=>b.length - a.length);
+    for (const name of sortedNames){
+        if (className === name) return name;
+        const next = className[name.length];
+        if (className.startsWith(name) && (next === ':' || next === '@' || next === '!')) {
+            return name;
+        }
+    }
+}
+function sortManagedStyleDefinitionKeys(groups, keysByName) {
+    const names = new Set(keysByName.keys());
+    const dependencies = new Map();
+    const dependencyDefinitions = new Map();
+    for (const [key, definitions] of groups){
+        const keyDependencies = new Set();
+        for (const definition of definitions){
+            if (definition.type !== 'compose') continue;
+            const dependencyName = getManagedComposeDependencyName(definition.className, names);
+            if (!dependencyName) continue;
+            for (const dependencyKey of keysByName.get(dependencyName) || []){
+                keyDependencies.add(dependencyKey);
+                dependencyDefinitions.set(`${key}\0${dependencyKey}`, definition);
+            }
+        }
+        dependencies.set(key, keyDependencies);
+    }
+    const sorted = [];
+    const seen = new Set();
+    const visiting = new Set();
+    const path = [];
+    function visit(key) {
+        if (seen.has(key)) return;
+        if (visiting.has(key)) {
+            const cycleKeys = [
+                ...path.slice(path.indexOf(key)),
+                key
+            ];
+            const cycle = cycleKeys.map((cycleKey)=>splitManagedStyleDefinitionKey(cycleKey).name).join(' -> ');
+            const related = cycleKeys.slice(0, -1).flatMap((cycleKey, index)=>{
+                const nextKey = cycleKeys[index + 1];
+                const definition = dependencyDefinitions.get(`${cycleKey}\0${nextKey}`);
+                const source = definition?.source || definition?.directiveSource;
+                return source ? [
+                    {
+                        message: `${splitManagedStyleDefinitionKey(cycleKey).name} composes ${definition.className}`,
+                        source
+                    }
+                ] : [];
+            });
+            throw new CSSDirectiveError('circular-compose-dependency', `Circular @compose dependency detected: ${cycle}`, related[0]?.source, related);
+        }
+        visiting.add(key);
+        path.push(key);
+        for (const dependency of dependencies.get(key) || []){
+            visit(dependency);
+        }
+        path.pop();
+        visiting.delete(key);
+        seen.add(key);
+        sorted.push(key);
+    }
+    for (const key of groups.keys()){
+        visit(key);
+    }
+    return sorted;
+}
+function renderStyleDefinitions(definitions) {
+    return definitions.map((definition)=>{
+        const body = Object.entries(definition.declarations).map(([propertyName, value])=>`${propertyName}:${value}`).join(';');
+        return wrapAtRules(`${definition.selector}{${body}}`, definition.atRules);
+    }).join('');
+}
+function getStaticUtilityDefinition(input, name, layer) {
+    input.utilities ??= [];
+    const existing = input.utilities.find((utility)=>utility.name === name && (utility.layer || 'utilities') === layer);
+    if (existing) {
+        existing.type = 'static';
+        existing.layer = layer;
+        return existing;
+    }
+    const utility = {
+        name,
+        type: 'static',
+        layer
+    };
+    input.utilities.push(utility);
+    return utility;
+}
+function pushStaticUtilityStyleRule(definition, styleDefinition) {
+    const rule = {
+        declarations: styleDefinition.declarations,
+        ...styleDefinition.selector !== '&' ? {
+            selector: styleDefinition.selector
+        } : {},
+        ...styleDefinition.atRules?.length ? {
+            atRules: styleDefinition.atRules
+        } : {}
+    };
+    if (!definition.declarations && !definition.rules?.length && !rule.selector && !rule.atRules?.length) {
+        definition.declarations = rule.declarations;
+        return;
+    }
+    ensureUtilityRules(definition);
+    definition.rules ??= [];
+    definition.rules.push(rule);
+}
+function finalizeStyleDefinitions(input, styleDefinitions, css, options) {
+    if (!styleDefinitions?.length) return '';
+    const managedGroups = new Map();
+    const keysByName = new Map();
+    const nativeDefinitions = [];
+    for (const definition of styleDefinitions){
+        if (!isManagedStyleDefinition(definition)) {
+            nativeDefinitions.push(definition);
+            continue;
+        }
+        const key = getManagedStyleDefinitionKey(definition);
+        const group = managedGroups.get(key);
+        if (group) {
+            group.push(definition);
+        } else {
+            managedGroups.set(key, [
+                definition
+            ]);
+        }
+        const nameKeys = keysByName.get(definition.name);
+        if (nameKeys) {
+            nameKeys.add(key);
+        } else {
+            keysByName.set(definition.name, new Set([
+                key
+            ]));
+        }
+    }
+    for (const key of sortManagedStyleDefinitionKeys(managedGroups, keysByName)){
+        const definitions = managedGroups.get(key);
+        if (!definitions) continue;
+        const { name, layer } = splitManagedStyleDefinitionKey(key);
+        const mergedDefinitions = createMergedStyleDefinitions(definitions, css, layer);
+        for (const definition of mergedDefinitions){
+            const utilityDefinition = getStaticUtilityDefinition(input, name, layer);
+            pushStaticUtilityStyleRule(utilityDefinition, definition);
+        }
+        css.refresh(createMasterCSSManifest(input, {
+            baseManifest: getResolutionManifest(options)
+        }));
+    }
+    if (!nativeDefinitions.length) return '';
+    return renderStyleDefinitions(createMergedStyleDefinitions(nativeDefinitions, css));
+}
+function lowerCSSDirectives(input, options = {}) {
+    const directiveInput = normalizeDirectiveInput(input, options);
+    const resolveVariableName = createVariableNameResolver(directiveInput, {
+        baseManifest: getResolutionManifest(options)
+    });
+    const warnings = isCSSDirectiveResult(input) ? [
+        ...input.warnings
+    ] : [];
+    validateTokenConflicts(directiveInput, resolveVariableName);
+    warnUnsupportedMediaModes(directiveInput, options, warnings);
+    const css = createDirectiveCSS(directiveInput, options);
+    finalizeUtilityDefinitions(directiveInput, css);
+    css.refresh(createMasterCSSManifest(directiveInput, {
+        baseManifest: getResolutionManifest(options)
+    }));
+    const generatedCSS = finalizeStyleDefinitions(directiveInput, getStyleDefinitions(input), css, options);
+    const manifest = createMasterCSSManifest(directiveInput, {
+        baseManifest: options.baseManifest
+    });
+    return {
+        input: directiveInput,
+        manifest,
+        warnings,
+        generatedCSS
+    };
+}
+
+export { lowerCSSDirectives as default };