JSFiddle - React, Tailwind, and code Playground

by brandondurham

HTML

<p class="size__60 leading__120 tracking__0 alignment__left font__Surveyor--1284">Engraved maps use a characteristic form of lettering that’s unmistakable as <span class="tracking__120"><span id="anything" class="tracking__20">anything</span></span> else. We celebrate this style with Surveyor, a monumental family of typefaces designed for print and screen, and for sizes large and small.</p>

<pre id="theResults" style="height: 400px;width: 100%;"></pre>

JavaScript

function getRequiredClassesFromParentEls(childElement) {
	const theFeatures = ['alignment__', 'font__', 'leading__', 'size__', 'tracking__', 'features__'];
	let theElement = childElement;
	let theClasses = [];

	for (; theElement && theElement !== document; theElement = theElement.parentNode) {
		const elClasslist = theElement.classList;
		elClasslist.forEach((className) => {
			const theClass = className.split('__');
			const thePrefix = `${theClass[0]}__`;
			if (theFeatures.indexOf(thePrefix) > -1) {
				_.pull(theFeatures, thePrefix);
				theClasses.push(className);
			}
		});

		if (theFeatures.length === 0 || theElement.nodeName.toLowerCase() === 'p') {
			return theClasses;
		}
	}
	return false;
}

const theResults = document.getElementById('theResults');
const child = document.getElementById('anything');
const theClasses = getRequiredClassesFromParentEls(child);
theResults.innerText = theClasses;