WP_Theme_JSON::convert_variables_to_value( array $styles, array $values ): array

In this article

This function’s access is marked private. This means it is not intended for use by plugin or theme developers, only by core. It is listed here for completeness.

Replaces CSS variables with their values in place.

Parameters

$stylesarrayrequired
CSS declarations to convert.
$valuesarrayrequired
key => value pairs to use for replacement.

Return

array

Source

private static function convert_variables_to_value( $styles, $values ) {
	foreach ( $styles as $key => $style ) {
		if ( empty( $style ) ) {
			continue;
		}

		if ( is_array( $style ) ) {
			$styles[ $key ] = self::convert_variables_to_value( $style, $values );
			continue;
		}

		if ( 0 <= strpos( $style, 'var(' ) ) {
			// find all the variables in the string in the form of var(--variable-name, fallback), with fallback in the second capture group.

			$has_matches = preg_match_all( '/var\(([^),]+)?,?\s?(\S+)?\)/', $style, $var_parts );

			if ( $has_matches ) {
				$resolved_style = $styles[ $key ];
				foreach ( $var_parts[1] as $index => $var_part ) {
					$key_in_values   = 'var(' . $var_part . ')';
					$rule_to_replace = $var_parts[0][ $index ]; // the css rule to replace e.g. var(--wp--preset--color--vivid-green-cyan).
					$fallback        = $var_parts[2][ $index ]; // the fallback value.
					$resolved_style  = str_replace(
						array(
							$rule_to_replace,
							$fallback,
						),
						array(
							isset( $values[ $key_in_values ] ) ? $values[ $key_in_values ] : $rule_to_replace,
							isset( $values[ $fallback ] ) ? $values[ $fallback ] : $fallback,
						),
						$resolved_style
					);
				}
				$styles[ $key ] = $resolved_style;
			}
		}
	}

	return $styles;
}

Changelog

VersionDescription
6.5.0Check for empty style before processing its value.
6.3.0Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.