css-conflict-inspector/esm/analyze.js

Find potential conflict in your CSS files - to avoid surprises when used in the context of Micro Frontends.

import { transform } from 'lightningcss';
import { inspect } from './inspect';
import { stringify } from './stringify';
function sum(penalties) {
    return Math.ceil(penalties.reduce((s, p) => s + p, 0));
}
export function analyzeCss(content, options = {}) {
    const conflicts = [];
    const selectors = [];
    const result = transform({
        code: Buffer.from(content, 'utf8'),
        filename: 'style.css',
        analyzeDependencies: true,
        errorRecovery: true,
        visitor: {
            Selector(selector) {
                const violations = [];
                inspect(selector, violations, options);
                const conflict = violations
                    .filter((v) => v.penalty)
                    .reduce((p, c) => {
                    if (p && p.penalty < c.penalty) {
                        return {
                            ...c,
                            penalty: p.penalty,
                        };
                    }
                    return c;
                }, undefined);
                if (conflict) {
                    conflicts.push(conflict);
                }
                selectors.push(stringify(selector));
            },
        },
    });
    const penalties = conflicts.map((c) => c.penalty);
    const totalPenalty = sum(penalties);
    const topThree = penalties.sort((a, b) => b - a).filter((_, i) => i < 3);
    const maxPenalty = Math.ceil(conflicts.reduce((p, c) => Math.max(p, c.penalty), 0));
    const score = Math.max(0, 100 - sum(topThree));
    return {
        selectors,
        conflicts,
        warnings: result.warnings,
        dependencies: result.dependencies,
        totalPenalty,
        maxPenalty,
        score,
    };
}
//# sourceMappingURL=analyze.js.map