getTargetVariantsToAdd = (
	targetVariants,
	variantProps,
	media,
	isCompoundVariant,
) => {
	
	const targetVariantsToAdd = []

	targetVariants: for (let [vMatch, vStyle, vEmpty] of targetVariants) {
		// skip empty variants
		if (vEmpty) continue

		/** Position the variant should be inserted into. */
		let vOrder = 0

		let vName

		let isResponsive = false
		for (vName in vMatch) {
			const vPair = vMatch[vName]

			let pPair = variantProps[vName]

			// exact matches
			if (pPair === vPair) continue
			// responsive matches
			else if (typeof pPair === 'object' && pPair) {
				/** @type {boolean} Whether the responsive variant is matched. */
				let didMatch

				let qOrder = 0
				// media queries matching the same variant
				let matchedQueries
				for (const query in pPair) {
					if (vPair === String(pPair[query])) {
						if (query !== '@initial') {
							// check if the cleanQuery is in the media config and then we push the resulting media query to the matchedQueries array, 
							// if not, we remove the @media from the beginning and push it to the matched queries which then will be resolved a few lines down
							// when we finish working on this variant and want wrap the vStyles with the matchedQueries
							const cleanQuery = query.slice(1);
							(matchedQueries = matchedQueries || []).push(cleanQuery in media ? media[cleanQuery] : query.replace(/^@media ?/, ''))
							isResponsive = true
						}

						vOrder += qOrder
						didMatch = true
					}

					++qOrder
				}
				if (matchedQueries && matchedQueries.length) {
					vStyle = {
						['@media ' + matchedQueries.join(', ')]: vStyle,
					}
				}

				if (!didMatch) continue targetVariants
			}

			// non-matches
			else continue targetVariants
		}
		(targetVariantsToAdd[vOrder] = targetVariantsToAdd[vOrder] || []).push([isCompoundVariant ? `cv` : `${vName}-${vMatch[vName]}`, vStyle, isResponsive])
	}

	return targetVariantsToAdd
}
@type {UndefinedVariants} List of variant names that can have an "undefined" pairing.