Use the style-engine in global styles

lib/compat/wordpress-6.2/get-global-styles-and-settings.php

@@ -165,7 +165,15 @@ function gutenberg_get_global_stylesheet( $types = array() ) {
 	if ( $can_use_cached ) {
 		wp_cache_set( $cache_key, $stylesheet, $cache_group );
 	}
-	return $stylesheet;
+
+	$processor = new WP_Style_Engine_Processor_Gutenberg();
+	$processor->add_css_string( $stylesheet );
+
+	return $processor->get_css(
+		array(
+			'prettify' => defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG,
+		)
+	);
 }
 
 /**

packages/style-engine/class-wp-style-engine-css-declarations.php

@@ -180,11 +180,16 @@ public function get_declarations_string( $should_prettify = false, $indent_count
 		$spacer              = $should_prettify ? ' ' : '';
 
 		foreach ( $declarations_array as $property => $value ) {
+			if ( 0 === strpos( $property, '--' ) ) { // Account for CSS variables.
+				$declarations_output .= "{$indent}{$property}:{$spacer}{$value};$suffix";
+				continue;
+			}
 			$filtered_declaration = static::filter_declaration( $property, $value, $spacer );
 			if ( $filtered_declaration ) {
 				$declarations_output .= "{$indent}{$filtered_declaration};$suffix";
 			}
 		}
+
 		return rtrim( $declarations_output );
 	}
 

packages/style-engine/class-wp-style-engine-processor.php

@@ -78,6 +78,51 @@ public function add_rules( $css_rules ) {
 		return $this;
 	}
 
+	/**
+	 * Adds rules from a plain CSS string.
+	 *
+	 * @param string $css_string The CSS string to add.
+	 */
+	public function add_css_string( $css_string ) {
+		$css_array = array();
+		// Split CSS by rules.
+		$css_rules = explode( '}', $css_string );
+
+		foreach ( $css_rules as $css_rule ) {
+			$rule_parts = explode( '{', $css_rule );
+			if ( 2 !== count( $rule_parts ) ) {
+				continue;
+			}
+			// Get the selector.
+			$selector = trim( $rule_parts[0] );
+			if ( empty( $selector ) ) {
+				continue;
+			}
+
+			// Create the rule object.
+			if ( ! isset( $css_array[ $selector ] ) ) {
+				$css_array[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+			}
+
+			// Get the declarations.
+			$declarations       = explode( ';', $rule_parts[1] );
+			$declarations_array = array();
+			foreach ( $declarations as $declaration ) {
+				$declaration_parts = explode( ':', $declaration );
+				if ( 2 !== count( $declaration_parts ) ) {
+					continue;
+				}
+				$declarations_array[ $declaration_parts[0] ] = $declaration_parts[1];
+			}
+
+			// Add the declarations to the rule.
+			$css_array[ $selector ]->add_declarations( $declarations_array );
+		}
+
+		// Add the rules to the processor.
+		$this->add_rules( $css_array );
+	}
+
 	/**
 	 * Get the CSS rules as a string.
 	 *