_name => $el_selector ) {
			$element_selector = array();
			foreach ( $block_selectors as $selector ) {
				if ( $selector === $el_selector ) {
					$element_selector = array( $el_selector );
					break;
				}
				$element_selector[] = static::prepend_to_selector( $el_selector, $selector . ' ' );
			}
			$element_selectors[ $el_name ] = implode( ',', $element_selector );
		}

		return $element_selectors;
	}

	/**
	 * Generates style declarations for a node's features e.g., color, border,
	 * typography etc. that have custom selectors in their related block's
	 * metadata.
	 *
	 * @since 6.3.0
	 *
	 * @param object $metadata The related block metadata containing selectors.
	 * @param object $node     A merged theme.json node for block or variation.
	 *
	 * @return array The style declarations for the node's features with custom
	 * selectors.
	 */
	protected function get_feature_declarations_for_node( $metadata, &$node ) {
		$declarations = array();

		if ( ! isset( $metadata['selectors'] ) ) {
			return $declarations;
		}

		$settings = _wp_array_get( $this->theme_json, array( 'settings' ) );

		foreach ( $metadata['selectors'] as $feature => $feature_selectors ) {
			/*
			 * Skip if this is the block's root selector or the block doesn't
			 * have any styles for the feature.
			 */
			if ( 'root' === $feature || empty( $node[ $feature ] ) ) {
				continue;
			}

			if ( is_array( $feature_selectors ) ) {
				foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
					if ( 'root' === $subfeature || empty( $node[ $feature ][ $subfeature ] ) ) {
						continue;
					}

					/*
					 * Create temporary node containing only the subfeature data
					 * to leverage existing `compute_style_properties` function.
					 */
					$subfeature_node = array(
						$feature => array(
							$subfeature => $node[ $feature ][ $subfeature ],
						),
					);

					// Generate style declarations.
					$new_declarations = static::compute_style_properties( $subfeature_node, $settings, null, $this->theme_json );

					// Merge subfeature declarations into feature declarations.
					if ( isset( $declarations[ $subfeature_selector ] ) ) {
						foreach ( $new_declarations as $new_declaration ) {
							$declarations[ $subfeature_selector ][] = $new_declaration;
						}
					} else {
						$declarations[ $subfeature_selector ] = $new_declarations;
					}

					/*
					 * Remove the subfeature from the block's node now its
					 * styles will be included under its own selector not the
					 * block's.
					 */
					unset( $node[ $feature ][ $subfeature ] );
				}
			}

			/*
			 * Now subfeatures have been processed and removed we can process
			 * feature root selector or simple string selector.
			 */
			if (
				is_string( $feature_selectors ) ||
				( isset( $feature_selectors['root'] ) && $feature_selectors['root'] )
			) {
				$feature_selector = is_string( $feature_selectors ) ? $feature_selectors : $feature_selectors['root'];

				/*
				 * Create temporary node containing only the feature data
				 * to leverage existing `compute_style_properties` function.
				 */
				$feature_node = array( $feature => $node[ $feature ] );

				// Generate the style declarations.
				$new_declarations = static::compute_style_properties( $feature_node, $settings, null, $this->theme_json );

				/*
				 * Merge new declarations with any that already exist for
				 * the feature selector. This may occur when multiple block
				 * support features use the same custom selector.
				 */
				if ( isset( $declarations[ $feature_selector ] ) ) {
					foreach ( $new_declarations as $new_declaration ) {
						$declarations[ $feature_selector ][] = $new_declaration;
					}
				} else {
					$declarations[ $feature_selector ] = $new_declarations;
				}

				/*
				 * Remove the feature from the block's node now its styles
				 * will be included under its own selector not the block's.
				 */
				unset( $node[ $feature ] );
			}
		}

		return $declarations;
	}

	/**
	 * Replaces CSS variables with their values in place.
	 *
	 * @since 6.3.0
	 * @param array $styles CSS declarations to convert.
	 * @param array $values key => value pairs to use for replacement.
	 * @return array
	 */
	private static function convert_variables_to_value( $styles, $values ) {
		foreach ( $styles as $key => $style ) {
			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;
	}

	/**
	 * Resolves the values of CSS variables in the given styles.
	 *
	 * @since 6.3.0
	 * @param WP_Theme_JSON $theme_json The theme json resolver.
	 *
	 * @return WP_Theme_JSON The $theme_json with resolved variables.
	 */
	public static function resolve_variables( $theme_json ) {
		$settings    = $theme_json->get_settings();
		$styles      = $theme_json->get_raw_data()['styles'];
		$preset_vars = static::compute_preset_vars( $settings, static::VALID_ORIGINS );
		$theme_vars  = static::compute_theme_vars( $settings );
		$vars        = array_reduce(
			array_merge( $preset_vars, $theme_vars ),
			function( $carry, $item ) {
				$name                    = $item['name'];
				$carry[ "var({$name})" ] = $item['value'];
				return $carry;
			},
			array()
		);

		$theme_json->theme_json['styles'] = self::convert_variables_to_value( $styles, $vars );
		return $theme_json;
	}
}