nudge-ui 0.2.0

package/dist/inspector/tokens/resolution/cssomCollector.js

@@ -0,0 +1,528 @@
+import { computeSpecificityCore } from "./selectorSemantics.js";
+const revisionRecords = new WeakMap();
+const ruleSnapshots = new WeakMap();
+const documentResolutionSessions = new WeakMap();
+const documentResolutionReferences = new WeakMap();
+const registeredElements = new WeakSet();
+const documentRevisionListeners = new WeakMap();
+function isCurrentDocumentResolutionSession(doc, session) {
+    return session.active && documentResolutionSessions.get(doc) === session;
+}
+function notifyDocumentRevision(doc) {
+    const revisions = documentRevisions(doc);
+    documentRevisionListeners.get(doc)?.forEach((cb) => cb({ ...revisions }));
+}
+/**
+ * Subscribes to cascade revisions for one document. This is the narrow
+ * document-scoped seam used by the browser inspection Module.
+ */
+export function subscribeDocumentRevision(doc, cb) {
+    let listeners = documentRevisionListeners.get(doc);
+    if (!listeners) {
+        listeners = new Set();
+        documentRevisionListeners.set(doc, listeners);
+    }
+    listeners.add(cb);
+    return () => {
+        listeners.delete(cb);
+        if (listeners.size === 0 && documentRevisionListeners.get(doc) === listeners) {
+            documentRevisionListeners.delete(doc);
+        }
+    };
+}
+/**
+ * Elements whose attribute changes can affect a cached cascade outcome. The
+ * observer only counts attribute mutations against registered elements so
+ * unrelated host churn (React commits, hover states, animations) cannot bump
+ * the element revision. Registration is idempotent.
+ */
+export function registerResolutionElement(el) {
+    registeredElements.add(el);
+}
+/** Releases the observer, listener, and cached state owned by one document. */
+export function disposeDocumentResolution(doc) {
+    const session = documentResolutionSessions.get(doc);
+    if (session) {
+        session.active = false;
+        session.observer?.disconnect();
+        if (session.view && session.resizeListener) {
+            session.view.removeEventListener("resize", session.resizeListener);
+        }
+        session.observer = null;
+        session.resizeListener = null;
+        documentResolutionSessions.delete(doc);
+    }
+    documentResolutionReferences.delete(doc);
+    // Keep revision counters monotonic per Document. Resetting them to (0,0)
+    // resurrects stale revision-keyed caches in tokens/resolution.ts
+    // (stableTokenCache, stateResolutionSnapshots, tokenEntriesCache,
+    // concreteElementMatchCaches, sourceSiteMatchCaches): an entry written at
+    // (0,0) before disposal matches immediately after disposal at (0,0), even
+    // though the CSSOM changed while no observer was attached. Bump instead so
+    // every pre-disposal cache entry misses, then let the next
+    // documentRevisions() observe from the bumped baseline. Only bump when a
+    // session was actually torn down so repeated disposes stay idempotent.
+    if (session) {
+        const record = revisionRecords.get(doc);
+        if (record) {
+            record.element += 1;
+            record.stylesheet += 1;
+        }
+    }
+    ruleSnapshots.delete(doc);
+    documentRevisionListeners.get(doc)?.clear();
+    documentRevisionListeners.delete(doc);
+}
+/** Keeps one document's CSSOM observer alive for a browser inspection owner. */
+export function retainDocumentResolution(doc) {
+    documentRevisions(doc);
+    const session = documentResolutionSessions.get(doc);
+    if (!session)
+        return () => undefined;
+    const existing = documentResolutionReferences.get(doc);
+    const reference = existing?.session === session
+        ? existing
+        : { session, count: 0 };
+    reference.count += 1;
+    documentResolutionReferences.set(doc, reference);
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        const current = documentResolutionReferences.get(doc);
+        if (!current || current.session !== session)
+            return;
+        current.count -= 1;
+        if (current.count === 0)
+            disposeDocumentResolution(doc);
+    };
+}
+function isStylesheetNode(node) {
+    if (!node || node.nodeType !== node.ELEMENT_NODE)
+        return false;
+    const tag = node.tagName.toLowerCase();
+    return tag === "style" || tag === "link";
+}
+function changesStylesheet(record) {
+    if (record.type === "attributes")
+        return isStylesheetNode(record.target);
+    if (record.type === "characterData")
+        return isStylesheetNode(record.target.parentElement);
+    return isStylesheetNode(record.target)
+        || Array.from(record.addedNodes).some(isStylesheetNode)
+        || Array.from(record.removedNodes).some(isStylesheetNode);
+}
+/** A node that is, or lives inside, one of the tool's own probe elements. */
+function isProbeNode(node) {
+    let current = node;
+    while (current && current.nodeType !== current.DOCUMENT_NODE) {
+        if (current.nodeType === current.ELEMENT_NODE && current.hasAttribute("data-nudge-ui"))
+            return true;
+        current = current.parentNode;
+    }
+    return false;
+}
+const CONTAINER_PROBE_MARKER = /^data-container-probe-/;
+const MANAGED_SHEET_ID = "nudge-ui-styles";
+function isManagedStylesheetNode(node) {
+    return isStylesheetNode(node) && node.id === MANAGED_SHEET_ID;
+}
+/**
+ * Records that cannot affect cascade outcomes are skipped: mutations made by
+ * the tool's own probes (attribution, container-query, and value), attribute
+ * churn on elements outside the resolution registry, and the container-query
+ * marker attribute set on registered elements. Managed stylesheet text is
+ * intentionally observed because it is a real cascade input.
+ */
+function isProbeMutation(record) {
+    if (record.type === "attributes") {
+        const target = record.target;
+        // Stylesheet attributes change which rules are present or active even when
+        // the stylesheet element has never been registered as a resolution target.
+        // Handle them before the generic unregistered-element fast path.
+        if (isStylesheetNode(target)) {
+            const name = record.attributeName ?? "";
+            if (isManagedStylesheetNode(target))
+                return name !== "data-nudge-ui";
+            return name.startsWith("data-nudge-ui");
+        }
+        const name = record.attributeName ?? "";
+        // Renderer-owned IDs are lookup metadata, not authored cascade inputs.
+        // Ignore them before the registry check so hovering an unregistered canvas
+        // node does not invalidate the selected element's resolution snapshot.
+        if (name === "data-renderer-id")
+            return true;
+        if (!registeredElements.has(target))
+            return true;
+        return name.startsWith("data-nudge-ui")
+            || CONTAINER_PROBE_MARKER.test(name);
+    }
+    if (record.type === "characterData") {
+        return isProbeNode(record.target) && !isManagedStylesheetNode(record.target.parentElement);
+    }
+    if (isProbeNode(record.target) && !isManagedStylesheetNode(record.target))
+        return true;
+    // Removed nodes are already disconnected, so their ancestor chain is gone;
+    // check the record's target subtree and the nodes themselves instead.
+    const nodes = [...record.addedNodes, ...record.removedNodes];
+    if (nodes.some(isManagedStylesheetNode))
+        return false;
+    return nodes.length > 0 && nodes.every((node) => node.nodeType === node.ELEMENT_NODE && node.hasAttribute("data-nudge-ui"));
+}
+export function documentRevisions(doc) {
+    let record = revisionRecords.get(doc);
+    if (!record) {
+        record = { element: 0, stylesheet: 0 };
+        revisionRecords.set(doc, record);
+    }
+    // A disposed document keeps its monotonic record (see
+    // disposeDocumentResolution) but loses its observer session. Recreate the
+    // session so later mutations are observed from the bumped baseline instead
+    // of silently freezing the counters.
+    if (documentResolutionSessions.get(doc))
+        return record;
+    const session = {
+        active: true,
+        observer: null,
+        view: doc.defaultView,
+        resizeListener: null,
+    };
+    documentResolutionSessions.set(doc, session);
+    // MutationObserver is a global constructor of the document realm, but it is
+    // not a property in every TypeScript Window declaration used by consumers.
+    // Keep the cast local so the observer and its callback remain document-local.
+    const viewWithObserver = session.view;
+    const Observer = viewWithObserver?.MutationObserver
+        ?? (typeof MutationObserver !== "undefined" ? MutationObserver : undefined);
+    const root = doc.documentElement;
+    if (Observer && root) {
+        const observer = new Observer((records) => {
+            if (!isCurrentDocumentResolutionSession(doc, session))
+                return;
+            const relevant = records.filter((entry) => !isProbeMutation(entry));
+            if (relevant.length === 0)
+                return;
+            record.element++;
+            if (relevant.some(changesStylesheet))
+                record.stylesheet++;
+            notifyDocumentRevision(doc);
+        });
+        session.observer = observer;
+        observer.observe(root, {
+            attributes: true,
+            childList: true,
+            characterData: true,
+            subtree: true,
+        });
+        const resizeListener = () => {
+            if (!isCurrentDocumentResolutionSession(doc, session))
+                return;
+            record.element++;
+            record.stylesheet++;
+            notifyDocumentRevision(doc);
+        };
+        session.resizeListener = resizeListener;
+        session.view?.addEventListener("resize", resizeListener);
+    }
+    return record;
+}
+function stylesheetRevision(doc) {
+    return documentRevisions(doc).stylesheet;
+}
+/** Invalidates CSSOM-derived snapshots after programmatic stylesheet edits. */
+export function invalidateStyleResolutionCache(doc = document) {
+    const record = documentRevisions(doc);
+    record.element++;
+    record.stylesheet++;
+    ruleSnapshots.delete(doc);
+    notifyDocumentRevision(doc);
+}
+function isStyleRuleInDocument(rule, doc) {
+    const StyleRule = doc.defaultView?.CSSStyleRule;
+    if (StyleRule && rule instanceof StyleRule)
+        return true;
+    return rule.type === (doc.defaultView?.CSSRule.STYLE_RULE ?? 1)
+        && "selectorText" in rule && "style" in rule;
+}
+/**
+ * Reads the declarations the browser accepted for a style rule. This is the
+ * semantic source for authored values; it intentionally does not inspect the
+ * stylesheet element's original text. CSSOM may expose a shorthand as empty
+ * longhand entries through indexed enumeration, so prefer its serialized
+ * declaration block and use enumeration as a compatibility fallback.
+ */
+export function declarationsFromCssom(style) {
+    const declarations = parseCssomDeclarations(style.cssText);
+    const seen = new Set(declarations.map((declaration) => declaration.property));
+    for (let index = 0; index < style.length; index++) {
+        const property = typeof style.item === "function" ? style.item(index) : style[index] ?? "";
+        if (!property || seen.has(property))
+            continue;
+        const value = style.getPropertyValue(property);
+        if (!value)
+            continue;
+        declarations.push({
+            property,
+            value,
+            important: style.getPropertyPriority(property) === "important",
+        });
+    }
+    return declarations;
+}
+function parseCssomDeclarations(cssText) {
+    const declarations = [];
+    let start = 0;
+    let parenDepth = 0;
+    let bracketDepth = 0;
+    let braceDepth = 0;
+    let quote = null;
+    let escaped = false;
+    const append = (part) => {
+        const colon = findTopLevelColon(part);
+        if (colon < 0)
+            return;
+        const property = part.slice(0, colon).trim();
+        let value = part.slice(colon + 1).trim();
+        if (!property || !value)
+            return;
+        const important = /!\s*important\s*$/i.test(value);
+        if (important)
+            value = value.replace(/!\s*important\s*$/i, "").trim();
+        declarations.push({ property, value, important });
+    };
+    for (let index = 0; index < cssText.length; index++) {
+        const char = cssText[index];
+        if (quote) {
+            if (escaped)
+                escaped = false;
+            else if (char === "\\")
+                escaped = true;
+            else if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === "\"" || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === "(")
+            parenDepth++;
+        else if (char === ")")
+            parenDepth = Math.max(0, parenDepth - 1);
+        else if (char === "[")
+            bracketDepth++;
+        else if (char === "]")
+            bracketDepth = Math.max(0, bracketDepth - 1);
+        else if (char === "{")
+            braceDepth++;
+        else if (char === "}")
+            braceDepth = Math.max(0, braceDepth - 1);
+        else if (char === ";" && parenDepth === 0 && bracketDepth === 0 && braceDepth === 0) {
+            append(cssText.slice(start, index));
+            start = index + 1;
+        }
+    }
+    append(cssText.slice(start));
+    return declarations;
+}
+function findTopLevelColon(value) {
+    let parenDepth = 0;
+    let bracketDepth = 0;
+    let braceDepth = 0;
+    let quote = null;
+    let escaped = false;
+    for (let index = 0; index < value.length; index++) {
+        const char = value[index];
+        if (quote) {
+            if (escaped)
+                escaped = false;
+            else if (char === "\\")
+                escaped = true;
+            else if (char === quote)
+                quote = null;
+            continue;
+        }
+        if (char === "\"" || char === "'") {
+            quote = char;
+            continue;
+        }
+        if (char === "(")
+            parenDepth++;
+        else if (char === ")")
+            parenDepth = Math.max(0, parenDepth - 1);
+        else if (char === "[")
+            bracketDepth++;
+        else if (char === "]")
+            bracketDepth = Math.max(0, bracketDepth - 1);
+        else if (char === "{")
+            braceDepth++;
+        else if (char === "}")
+            braceDepth = Math.max(0, braceDepth - 1);
+        else if (char === ":" && parenDepth === 0 && bracketDepth === 0 && braceDepth === 0)
+            return index;
+    }
+    return -1;
+}
+function atRuleParams(cssText, name) {
+    const match = new RegExp(`^\\s*@${name}\\s+([\\s\\S]*?)\\s*\\{`, "i").exec(cssText);
+    return match?.[1]?.trim() ?? "";
+}
+function contextForRule(cssText, record) {
+    if (/^\s*@media\b/i.test(cssText)) {
+        const params = record.conditionText?.trim() || atRuleParams(cssText, "media");
+        return params ? { kind: "media", params } : null;
+    }
+    if (/^\s*@container\b/i.test(cssText)) {
+        // CSSContainerRule exposes `conditionText` and `containerName` in modern
+        // engines. Fall back to the serialised prelude so named, style, and newer
+        // container queries remain presentable without hand-parsing their grammar.
+        const containerName = record.containerName?.trim();
+        const fromInterfaces = [containerName && containerName !== "none" ? containerName : undefined, record.conditionText?.trim()]
+            .filter((part) => Boolean(part))
+            .join(" ");
+        const params = fromInterfaces || atRuleParams(cssText, "container");
+        return params ? { kind: "container", params } : null;
+    }
+    if (/^\s*@supports\b/i.test(cssText)) {
+        const params = record.conditionText?.trim() || atRuleParams(cssText, "supports");
+        return params ? { kind: "supports", params } : null;
+    }
+    return null;
+}
+function isNestedDeclarations(rule, doc) {
+    if (isStyleRuleInDocument(rule, doc) || !("style" in rule) || "selectorText" in rule)
+        return false;
+    // Chromium represents declarations nested in a style rule's @supports /
+    // @media block as CSSNestedDeclarations. Its public type is not yet in
+    // lib.dom, so identify its declaration-only CSSOM shape conservatively.
+    return !/^\s*@/.test(rule.cssText ?? "") && typeof rule.style === "object";
+}
+export function collectRules(doc) {
+    const revision = stylesheetRevision(doc);
+    const cached = ruleSnapshots.get(doc);
+    if (cached?.revision === revision) {
+        return {
+            rules: cached.rules,
+            layerOrder: cached.layerOrder,
+            inaccessible: cached.inaccessible,
+        };
+    }
+    const out = [];
+    const layerOrder = new Map();
+    let inaccessible = false;
+    let sourceOrder = 0;
+    const registerLayer = (name) => {
+        const normalized = name.trim();
+        if (!normalized)
+            return undefined;
+        if (!layerOrder.has(normalized))
+            layerOrder.set(normalized, layerOrder.size);
+        return normalized;
+    };
+    const nestedLayerName = (parent, child) => {
+        const normalized = child.trim();
+        if (!normalized)
+            return parent;
+        return registerLayer(parent ? `${parent}.${normalized}` : normalized);
+    };
+    const walkRules = (rules, active = true, layer, atRules = [], inheritedSelector, source) => {
+        for (const rule of Array.from(rules)) {
+            const serializedRule = rule.cssText ?? "";
+            const layerStatement = /^\s*@layer\s+([^;{]+)\s*;/i.exec(serializedRule);
+            if (layerStatement && !("cssRules" in rule)) {
+                layerStatement[1].split(",").forEach((name) => nestedLayerName(layer, name));
+                continue;
+            }
+            if (isStyleRuleInDocument(rule, doc)) {
+                try {
+                    out.push({
+                        selectorText: rule.selectorText,
+                        specificity: computeSpecificityCore(rule.selectorText),
+                        declarations: declarationsFromCssom(rule.style),
+                        source,
+                        sourceOrder: sourceOrder++,
+                        active,
+                        layer,
+                        layerOrder: layer ? layerOrder.get(layer) : undefined,
+                        atRules: atRules.length > 0 ? atRules : undefined,
+                    });
+                    const nested = rule.cssRules;
+                    if (nested?.length)
+                        walkRules(nested, active, layer, atRules, rule.selectorText, source);
+                }
+                catch {
+                    continue;
+                }
+            }
+            else if (isNestedDeclarations(rule, doc)) {
+                if (!inheritedSelector)
+                    continue;
+                try {
+                    out.push({
+                        selectorText: inheritedSelector,
+                        specificity: computeSpecificityCore(inheritedSelector),
+                        declarations: declarationsFromCssom(rule.style),
+                        source,
+                        sourceOrder: sourceOrder++,
+                        active,
+                        layer,
+                        layerOrder: layer ? layerOrder.get(layer) : undefined,
+                        atRules: atRules.length > 0 ? atRules : undefined,
+                    });
+                }
+                catch {
+                    continue;
+                }
+            }
+            else if ("cssRules" in rule) {
+                try {
+                    const record = rule;
+                    let childActive = active;
+                    const cssText = rule.cssText ?? "";
+                    const isMedia = /^\s*@media\b/i.test(cssText);
+                    const isSupports = /^\s*@supports\b/i.test(cssText);
+                    const isLayer = /^\s*@layer\b/i.test(cssText);
+                    const view = doc.defaultView;
+                    if (isMedia && record.conditionText)
+                        childActive = active && (view ? view.matchMedia(record.conditionText).matches : false);
+                    else if (isSupports && record.conditionText)
+                        childActive = active && (doc.defaultView?.CSS?.supports(record.conditionText) ?? false);
+                    // A container query is evaluated relative to the styled element, so
+                    // it cannot be answered while walking a document-level stylesheet.
+                    // Resolution evaluates its retained context against the selected
+                    // element using a harmless browser probe.
+                    const context = contextForRule(cssText, record);
+                    const childLayer = isLayer
+                        ? nestedLayerName(layer, record.name ?? cssText.slice(6, cssText.indexOf("{")).trim())
+                        : layer;
+                    walkRules(record.cssRules, childActive, childLayer, context ? [...atRules, context] : atRules, inheritedSelector, source);
+                }
+                catch {
+                    continue;
+                }
+            }
+        }
+    };
+    const stylesheetNodes = Array.from(doc.querySelectorAll('style, link[rel~="stylesheet"]'));
+    for (const [index, sheet] of Array.from(doc.styleSheets).entries()) {
+        try {
+            // jsdom does not currently expose CSSStyleSheet.ownerNode; the document
+            // stylesheet list and stylesheet element list retain the same order.
+            const owner = sheet.ownerNode ?? stylesheetNodes[index] ?? null;
+            const source = owner?.dataset?.viteDevId
+                ?? sheet.href
+                ?? (owner?.id ? `#${owner.id}` : `stylesheet:${index + 1}`);
+            walkRules(sheet.cssRules, true, undefined, [], undefined, source);
+        }
+        catch {
+            inaccessible = true;
+        }
+    }
+    const snapshot = { revision, rules: out, layerOrder, inaccessible };
+    ruleSnapshots.set(doc, snapshot);
+    return snapshot;
+}
+export function cascadeLayerOrder(doc, name) {
+    return collectRules(doc).layerOrder.get(name);
+}

package/dist/inspector/tokens/resolution/selectorSemantics.d.ts

@@ -0,0 +1,12 @@
+/** Number of unique selector strings actually computed (for tests). */
+export declare function specificityComputationCount(): number;
+/** Clears the specificity memo (for tests). */
+export declare function resetSpecificityMemo(): void;
+/**
+ * Computes the cascade weight for a selector without asking the DOM to match
+ * it. Results are memoized per selector string for the resolution paths that
+ * still recompute branch specificity (multi-branch selectors).
+ */
+export declare function computeSpecificity(selectorText: string): number;
+/** The unmemoized implementation, exposed for equivalence tests. */
+export declare function computeSpecificityCore(selectorText: string): number;

package/dist/inspector/tokens/resolution/selectorSemantics.js

@@ -0,0 +1,106 @@
+function extractParenContent(source, openIndex) {
+    let depth = 0;
+    let index = openIndex;
+    while (index < source.length && source[index] !== "(")
+        index++;
+    if (index >= source.length)
+        return { content: "", end: openIndex };
+    depth = 1;
+    const start = index + 1;
+    index++;
+    while (index < source.length && depth > 0) {
+        if (source[index] === "(")
+            depth++;
+        else if (source[index] === ")")
+            depth--;
+        index++;
+    }
+    return { content: source.slice(start, index - 1).trim(), end: index };
+}
+function splitSelectorAtTopLevel(selector, separator) {
+    const parts = [];
+    let depth = 0;
+    let start = 0;
+    for (let index = 0; index < selector.length; index++) {
+        if (selector[index] === "(")
+            depth++;
+        else if (selector[index] === ")")
+            depth--;
+        else if (depth === 0 && separator && selector[index] === separator) {
+            parts.push(selector.slice(start, index));
+            start = index + 1;
+        }
+        else if (depth === 0 && !separator && (selector[index] === " " || selector[index] === ">" || selector[index] === "+" || selector[index] === "~")) {
+            if (index > start)
+                parts.push(selector.slice(start, index).trim());
+            start = index + 1;
+        }
+    }
+    const last = selector.slice(start).trim();
+    if (last)
+        parts.push(last);
+    return parts;
+}
+const SPECIFICITY_MEMO_LIMIT = 10_000;
+const specificityMemo = new Map();
+let specificityComputations = 0;
+/** Number of unique selector strings actually computed (for tests). */
+export function specificityComputationCount() {
+    return specificityComputations;
+}
+/** Clears the specificity memo (for tests). */
+export function resetSpecificityMemo() {
+    specificityMemo.clear();
+    specificityComputations = 0;
+}
+/**
+ * Computes the cascade weight for a selector without asking the DOM to match
+ * it. Results are memoized per selector string for the resolution paths that
+ * still recompute branch specificity (multi-branch selectors).
+ */
+export function computeSpecificity(selectorText) {
+    const cached = specificityMemo.get(selectorText);
+    if (cached !== undefined)
+        return cached;
+    specificityComputations++;
+    const result = computeSpecificityCore(selectorText);
+    if (specificityMemo.size >= SPECIFICITY_MEMO_LIMIT)
+        specificityMemo.clear();
+    specificityMemo.set(selectorText, result);
+    return result;
+}
+/** The unmemoized implementation, exposed for equivalence tests. */
+export function computeSpecificityCore(selectorText) {
+    const selector = selectorText.trim();
+    const commaParts = splitSelectorAtTopLevel(selector, ",");
+    if (commaParts.length > 1) {
+        return Math.max(...commaParts.map(computeSpecificity));
+    }
+    let idCount = 0;
+    let classCount = 0;
+    let elementCount = 0;
+    for (const compound of splitSelectorAtTopLevel(selector)) {
+        let current = compound;
+        const pseudoFunction = /:(not|is|has|where)\(/g;
+        let match;
+        while ((match = pseudoFunction.exec(current)) !== null) {
+            const name = match[1];
+            const { content, end } = extractParenContent(current, match.index + match[0].length - 1);
+            const argumentSpecificity = content ? computeSpecificity(content) : 0;
+            if (name !== "where") {
+                idCount += Math.floor(argumentSpecificity / 1000000);
+                classCount += Math.floor(argumentSpecificity / 10000) % 100;
+                elementCount += Math.floor(argumentSpecificity / 100) % 100;
+            }
+            current = current.slice(0, match.index) + " " + current.slice(end);
+            pseudoFunction.lastIndex = match.index + 1;
+        }
+        current = current.replace(/#[\w-]+/g, () => { idCount++; return " "; });
+        current = current.replace(/\.[\w-]+/g, () => { classCount++; return " "; });
+        current = current.replace(/\[[^\]]*\]/g, () => { classCount++; return " "; });
+        current = current.replace(/::[\w-]+/g, () => { elementCount++; return " "; });
+        current = current.replace(/:(?!:)[\w-]+/g, () => { classCount++; return " "; });
+        elementCount += current.split(/[\s>+~]+/).filter((word) => word && word !== "*" && word !== "&").length;
+    }
+    return idCount * 1000000 + classCount * 10000 + elementCount * 100;
+}