walk = (
		/** @type {Style} Set of CSS styles */ style,
		/** @type {string[]} Selectors that define the elements to which a set of CSS styles apply. */ selectors,
		/** @type {string[]} Conditions that define the queries to which a set of CSS styles apply. */ conditions,
	) => {
		/** @type {keyof style} Represents the left-side "name" for the property (the at-rule prelude, style-rule selector, or declaration name). */
		let name

		/** @type {style[keyof style]} Represents the right-side "data" for the property (the rule block, or declaration value). */
		let data

		const each = (style) => {
			for (name in style) {
				/** Whether the current name represents an at-rule. */
				const isAtRuleLike = name.charCodeAt(0) === 64

				const datas = isAtRuleLike && Array.isArray(style[name]) ? style[name] : [style[name]]

				for (data of datas) {
					const camelName = toCamelCase(name)
					
					/** Whether the current data represents a nesting rule, which is a plain object whose key is not already a util. */
					const isRuleLike = typeof data === 'object' && data && data.toString === toStringOfObject && (!config.utils[camelName] || !selectors.length)

					// if the left-hand "name" matches a configured utility
					// conditionally transform the current data using the configured utility
					if (camelName in config.utils && !isRuleLike) {
						const util = config.utils[camelName]

						if (util !== lastUtil) {
							lastUtil = util

							each(util(data))

							lastUtil = null

							continue
						}
					}
					// otherwise, if the left-hand "name" matches a configured polyfill
					// conditionally transform the current data using the polyfill
					else if (camelName in toPolyfilledValue) {
						const poly = toPolyfilledValue[camelName]

						if (poly !== lastPoly) {
							lastPoly = poly

							each(poly(data))

							lastPoly = null

							continue
						}
					}

					// if the left-hand "name" matches a configured at-rule
					if (isAtRuleLike) {
						// transform the current name with the configured media at-rule prelude
						name = toResolvedMediaQueryRanges(name.slice(1) in config.media ? '@media ' + config.media[name.slice(1)] : name)
					}

					if (isRuleLike) {
						/** Next conditions, which may include one new condition (if this is an at-rule). */
						const nextConditions = isAtRuleLike ? conditions.concat(name) : [...conditions]

						/** Next selectors, which may include one new selector (if this is not an at-rule). */
						const nextSelections = isAtRuleLike ? [...selectors] : toResolvedSelectors(selectors, name.split(comma))

						if (currentRule !== undefined) {
							onCssText(toCssString(...currentRule))
						}

						currentRule = undefined

						walk(data, nextSelections, nextConditions)
					} else {
						if (currentRule === undefined) currentRule = [[], selectors, conditions]

						/** CSS left-hand side value, which may be a specially-formatted custom property. */
						name = !isAtRuleLike && name.charCodeAt(0) === 36 ? `--${toTailDashed(config.prefix)}${name.slice(1).replace(/\$/g, '-')}` : name

						/** CSS right-hand side value, which may be a specially-formatted custom property. */
						data = (
							// preserve object-like data
							isRuleLike ? data
							// replace all non-unitless props that are not custom properties with pixel versions
							: typeof data === 'number'
								? data && !(camelName in unitlessProps) && !(name.charCodeAt(0) === 45)
									? String(data) + 'px'
								: String(data)
							// replace tokens with stringified primitive values
							: toTokenizedValue(
								toSizingValue(camelName, data == null ? '' : data),
								config.prefix,
								config.themeMap[camelName]
							)
						)

						currentRule[0].push(`${isAtRuleLike ? `${name} ` : `${toHyphenCase(name)}:`}${data}`)
					}
				}
			}
		}

		each(style)

		if (currentRule !== undefined) {
			onCssText(toCssString(...currentRule))
		}
		currentRule = undefined
	}
Walks CSS styles and converts them into CSSOM-compatible rules.