23s2s

✏️ Editing: variant-classes.js

/**
 * Utility functions for patching variant classes in HTML.
 * Handles class patterns like "is-style-outline--N" and "is-style-ext-preset--...--N"
 * that WordPress may reorder when parsing blocks.
 */

// escape for regex building
export const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

export const getVariantNumbersInTree = (rootEl, base) => {
	if (!rootEl) return [];
	// Match classes ending with --{number}
	const re = new RegExp(`^${esc(base)}.*--(\\d+)$`, 'i');
	const out = [];
	const seen = new Set();
	// include root + descendants
	const all = [rootEl, ...rootEl.querySelectorAll(`[class*="${base}"]`)];
	for (const el of all) {
		for (const cls of el.classList) {
			const m = cls.match(re);
			if (!m) continue;

const n = Number(m[1]);
			if (seen.has(n)) continue;

seen.add(n);
			out.push(n);
		}
	}
	return out;
};

/**
 * Extracts variant class info as { prefix, number } pairs.
 * prefix = everything before the final --N (used for matching element types)
 */
export const getVariantClassInfo = (rootEl, base) => {
	if (!rootEl) return [];
	const re = new RegExp(`^(${esc(base)}.*)--(\\d+)$`, 'i');
	const out = [];
	const seenNumbers = new Set();
	const all = [rootEl, ...rootEl.querySelectorAll(`[class*="${base}"]`)];
	for (const el of all) {
		for (const cls of el.classList) {
			const m = cls.match(re);
			if (!m) continue;
			const prefix = m[1];
			const number = Number(m[2]);
			// Skip duplicate numbers (same variant on multiple elements)
			if (seenNumbers.has(number)) continue;
			seenNumbers.add(number);
			out.push({ prefix, number });
		}
	}
	return out;
};

export const getVariantClassInfoFromHtml = (html, base) => {
	const wrapper = document.createElement('div');
	wrapper.innerHTML = html;
	return getVariantClassInfo(wrapper, base);
};

export const getVariantNumbersInHtml = (html, base) => {
	const wrapper = document.createElement('div');
	wrapper.innerHTML = html;
	return getVariantNumbersInTree(wrapper, base);
};

export const applyVariantNumberMapToHtml = (html, base, numberMap) => {
	if (!numberMap || !numberMap.size) return html;
	const wrapper = document.createElement('div');
	wrapper.innerHTML = html;

// Match classes ending with --{number}
	const reToken = new RegExp(`^${esc(base)}.*--(\\d+)$`, 'i');

// target every element that *could* contain the class
	const els = wrapper.querySelectorAll(`[class*="${base}"]`);
	for (const el of els) {
		const classes = Array.from(el.classList);
		let changed = false;

for (const [i, cls] of classes.entries()) {
			const m = cls.match(reToken);
			if (!m) continue;

const oldN = Number(m[1]);
			if (!numberMap.has(oldN)) continue;

const newN = numberMap.get(oldN);
			// Replace the variant number at the end
			const nextCls = cls.replace(/--(\d+)$/, `--${newN}`);
			if (nextCls === cls) continue;

classes[i] = nextCls;
			changed = true;
		}

// keep the base style class too
		if (!classes.includes(base)) {
			classes.push(base);
			changed = true;
		}

if (changed) el.className = classes.join(' ');
	}

return wrapper.innerHTML;
};

/**
 * Patches variant classes in HTML to match the DOM element's numbering.
 * Handles patterns like "is-style-outline--N" and "is-style-ext-preset--...--N"
 * Note that that variant numbers are globally unique in each page and are autogenerated by WP.
 */
export const patchVariantClasses = (html, el, bases) => {
	let patchedHtml = html;
	for (const base of bases) {
		// Get variant info with prefixes for matching by element type
		const targetInfo = getVariantClassInfo(el, base);
		const currentInfo = getVariantClassInfoFromHtml(patchedHtml, base);

if (!targetInfo.length || !currentInfo.length) continue;

// Group by prefix - allows matching by type, with position-based fallback
		// for multiple elements of the same type
		const targetByPrefix = new Map();
		for (const { prefix, number } of targetInfo) {
			if (!targetByPrefix.has(prefix)) targetByPrefix.set(prefix, []);
			targetByPrefix.get(prefix).push(number);
		}

const currentByPrefix = new Map();
		for (const { prefix, number } of currentInfo) {
			if (!currentByPrefix.has(prefix)) currentByPrefix.set(prefix, []);
			currentByPrefix.get(prefix).push(number);
		}

// Map by matching prefixes, then by position within each prefix group
		const map = new Map();
		for (const [prefix, currentNums] of currentByPrefix) {
			const targetNums = targetByPrefix.get(prefix);
			if (!targetNums) continue;

const count = Math.min(currentNums.length, targetNums.length);
			for (const [i, cur] of currentNums.entries()) {
				if (i >= count) break;
				if (cur === targetNums[i]) continue;
				map.set(cur, targetNums[i]);
			}
		}

if (!map.size) continue;

patchedHtml = applyVariantNumberMapToHtml(patchedHtml, base, map);
	}
	return patchedHtml;
};

Sid Gifari From Gifari Industries - BD Cyber Security Team