Extracting file

# Clean up after rebase Clean up after rebase
WordPress · Feb 9, 2024 · 975eb35 · 975eb35
1 parent ec322a6
commit 975eb35
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 143 deletions.
diff --git a/lib/load.php b/lib/load.php
@@ -194,6 +194,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 
 // Copied package PHP files.
 if ( is_dir( __DIR__ . '/../build/style-engine' ) ) {
+	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-container-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-declarations-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rule-gutenberg.php';
 	require_once __DIR__ . '/../build/style-engine/class-wp-style-engine-css-rules-store-gutenberg.php';

diff --git a/packages/style-engine/class-wp-style-engine-css-rule.php b/packages/style-engine/class-wp-style-engine-css-rule.php
@@ -15,7 +15,6 @@
 	 * @access private
 	 */
 	class WP_Style_Engine_CSS_Rule {
-
 		/**
 		 * The selector.
 		 *
@@ -24,7 +23,7 @@ class WP_Style_Engine_CSS_Rule {
 		protected $selector;
 
 		/**
-		 * The container.
+		 * A CSS selector or CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
 		 *
 		 * @var string
 		 */
@@ -39,27 +38,16 @@ class WP_Style_Engine_CSS_Rule {
 		 */
 		protected $declarations;
 
-		/**
-		 * The CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
-		 *
-		 * @var string
-		 */
-		protected $at_rule;
-
-
 		/**
 		 * Constructor
 		 *
 		 * @param string                                    $selector     The CSS selector.
 		 * @param string[]|WP_Style_Engine_CSS_Declarations $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ),
 		 *                                                                or a WP_Style_Engine_CSS_Declarations object.
-		 * @param string                                    $at_rule      A CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
-		 *
 		 */
-		public function __construct( $selector = '', $declarations = array(), $at_rule = '' ) {
+		public function __construct( $selector = '', $declarations = array() ) {
 			$this->set_selector( $selector );
 			$this->add_declarations( $declarations );
-			$this->set_at_rule( $at_rule );
 		}
 
 		/**
@@ -77,7 +65,7 @@ public function set_selector( $selector ) {
 		/**
 		 * Sets the container.
 		 *
-		 * @param string $container The CSS selector.
+		 * @param string $container The CSS container selector or a CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
 		 *
 		 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
 		 */
@@ -122,18 +110,6 @@ public function add_declarations( $declarations ) {
 			return $this;
 		}
 
-		/**
-		 * Sets the at_rule.
-		 *
-		 * @param string $at_rule A CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
-		 *
-		 * @return WP_Style_Engine_CSS_Rule Returns the object to allow chaining of methods.
-		 */
-		public function set_at_rule( $at_rule ) {
-			$this->at_rule = $at_rule;
-			return $this;
-		}
-
 		/**
 		 * Gets the declarations object.
 		 *
@@ -152,15 +128,6 @@ public function get_selector() {
 			return $this->selector;
 		}
 
-		/**
-		 * Gets the at_rule.
-		 *
-		 * @return string
-		 */
-		public function get_at_rule() {
-			return $this->at_rule;
-		}
-
 		/**
 		 * Gets the CSS.
 		 *
@@ -170,28 +137,19 @@ public function get_at_rule() {
 		 * @return string
 		 */
 		public function get_css( $should_prettify = false, $indent_count = 0 ) {
-			$rule_indent                = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
-			$nested_rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count + 1 ) : '';
-			$declarations_indent        = $should_prettify ? $indent_count + 1 : 0;
-			$nested_declarations_indent = $should_prettify ? $indent_count + 2 : 0;
-			$suffix                     = $should_prettify ? "\n" : '';
-			$spacer                     = $should_prettify ? ' ' : '';
+			$rule_indent         = $should_prettify ? str_repeat( "\t", $indent_count ) : '';
+			$declarations_indent = $should_prettify ? $indent_count + 1 : 0;
+			$suffix              = $should_prettify ? "\n" : '';
+			$spacer              = $should_prettify ? ' ' : '';
 			// Trims any multiple selectors strings.
 			$selector         = $should_prettify ? implode( ',', array_map( 'trim', explode( ',', $this->get_selector() ) ) ) : $this->get_selector();
 			$selector         = $should_prettify ? str_replace( array( ',' ), ",\n", $selector ) : $selector;
-			$at_rule          = $this->get_at_rule();
-			$has_at_rule      = ! empty( $at_rule );
-			$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $has_at_rule ? $nested_declarations_indent : $declarations_indent );
+			$css_declarations = $this->declarations->get_declarations_string( $should_prettify, $declarations_indent );
 
 			if ( empty( $css_declarations ) ) {
 				return '';
 			}
 
-			if ( $has_at_rule ) {
-				$selector = "{$rule_indent}{$at_rule}{$spacer}{{$suffix}{$nested_rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$nested_rule_indent}}{$suffix}{$rule_indent}}";
-				return $selector;
-			}
-
 			return "{$rule_indent}{$selector}{$spacer}{{$suffix}{$css_declarations}{$suffix}{$rule_indent}}";
 		}
 	}

diff --git a/packages/style-engine/class-wp-style-engine-css-rules-container.php b/packages/style-engine/class-wp-style-engine-css-rules-container.php
@@ -0,0 +1,69 @@
+<?php
+/**
+ * WP_Style_Engine_CSS_Rules_Container
+ *
+ * A container for WP_Style_Engine_CSS_Rule objects.
+ *
+ * @package Gutenberg
+ */
+// @TODO new file and tests
+// Should have same/similar interface to WP_Style_Engine_CSS_Rule or maybe even part of it?
+class WP_Style_Engine_CSS_Rules_Container {
+	protected $container;
+	protected $rules = array();
+
+	public function __construct( $container = '', $rule ) {
+		$this->set_container( $container );
+		// @TODO should be able to add multiple rules.
+		// @TODO check for instance of WP_Style_Engine_CSS_Rule
+		$this->add_rule( $rule );
+	}
+
+	public function set_container( $container ) {
+		$this->container = $container;
+		return $this;
+	}
+
+	public function get_container() {
+		return $this->container;
+	}
+
+	public function get_rules() {
+		return $this->rules;
+	}
+
+	public function get_rule( $selector ) {
+		return $this->rules[ $selector ] ?? null;
+	}
+
+	public function add_rule( $rule ) {
+		// @TODO should be able to add multiple rules.
+		// @TODO should be able to return a rule and update its selectors
+		// @TODO check for instance of WP_Style_Engine_CSS_Rule
+		$selector = $rule->get_selector();
+
+		if ( isset( $this->rules[ $selector ] ) ) {
+			$this->rules[ $selector ]->add_declarations( $rule->get_declarations() );
+		} else {
+			$this->rules[ $selector ] = $rule;
+		}
+		return $this;
+	}
+
+	public function get_css( $should_prettify = false, $indent_count = 0 ) {
+		$css                 = '';
+		$indent_count         = $should_prettify ? $indent_count + 1 : $indent_count;
+		$new_line            = $should_prettify ? "\n" : '';
+		$spacer              = $should_prettify ? ' ' : '';
+		foreach ( $this->rules as $rule ) {
+			$css .= $rule->get_css( $should_prettify, $indent_count );
+			$css .= $should_prettify ? "\n" : '';
+		}
+
+		if ( empty( $css ) ) {
+			return '';
+		}
+
+		return "{$this->container}{$spacer}{{$new_line}{$css}}";
+	}
+}
diff --git a/packages/style-engine/class-wp-style-engine-css-rules-store.php b/packages/style-engine/class-wp-style-engine-css-rules-store.php
@@ -110,26 +110,17 @@ public function get_all_rules() {
 		 * If the rule does not exist, it will be created.
 		 *
 		 * @param string $selector The CSS selector.
-		 * @param string $at_rule  The CSS nested @rule, such as `@media (min-width: 80rem)` or `@layer module`.
 		 *
 		 * @return WP_Style_Engine_CSS_Rule|void Returns a WP_Style_Engine_CSS_Rule object, or null if the selector is empty.
 		 */
-		public function add_rule( $selector, $at_rule = '' ) {
+		public function add_rule( $selector ) {
 			$selector = trim( $selector );
-			$at_rule  = trim( $at_rule );
 
 			// Bail early if there is no selector.
 			if ( empty( $selector ) ) {
 				return;
 			}
 
-			if ( ! empty( $at_rule ) ) {
-				if ( empty( $this->rules[ "$at_rule $selector" ] ) ) {
-					$this->rules[ "$at_rule $selector" ] = new WP_Style_Engine_CSS_Rule( $selector, array(), $at_rule );
-				}
-				return $this->rules[ "$at_rule $selector" ];
-			}
-
 			// Create the rule if it doesn't exist.
 			if ( empty( $this->rules[ $selector ] ) ) {
 				$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );

diff --git a/packages/style-engine/class-wp-style-engine-processor.php b/packages/style-engine/class-wp-style-engine-processor.php
@@ -30,6 +30,14 @@ class WP_Style_Engine_Processor {
 		 */
 		protected $css_rules = array();
 
+		/**
+		 * The set of nested CSS rules that this processor will work on.
+		 *
+		 * @var WP_Style_Engine_CSS_Rules_Container[]
+		 */
+		protected $css_containers = array();
+
+
 		/**
 		 * Add a store to the processor.
 		 *
@@ -69,20 +77,20 @@ public function add_rules( $css_rules ) {
 				$container = $rule->get_container();
 				$selector  = $rule->get_selector();
 
-				if ( ! empty( $selector ) && empty( $container ) ) {
-					if ( isset( $this->css_rules[ $selector ] ) ) {
-						$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
+				if ( ! empty( $container ) ) {
+					if ( isset( $this->css_containers[ $container ] ) ) {
+						$this->css_containers[ $container ]->add_rule( $rule );
 					} else {
-						$this->css_rules[ $rule->get_selector() ] = $rule;
+						$this->css_containers[ $container ] = new WP_Style_Engine_CSS_Rules_Container( $container, $rule );
 					}
 					continue;
 				}
 
-				if ( ! empty( $container ) ) {
-					if ( isset( $this->css_rules[ $container ] ) ) {
-						$this->css_rules[ $container ]->add_rule( $rule );
+				if ( ! empty( $selector ) ) {
+					if ( isset( $this->css_rules[ $selector ] ) ) {
+						$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
 					} else {
-						$this->css_rules[ $container ] = new WP_Style_Engine_CSS_Rules_Container( $container, $rule );
+						$this->css_rules[ $rule->get_selector() ] = $rule;
 					}
 				}
 			}
@@ -123,10 +131,14 @@ public function get_css( $options = array() ) {
 
 			// Build the CSS.
 			$css = '';
-			foreach ( $this->css_rules as $rule ) {
+			// Merge the rules and containers. Containers come last.
+			$merged_rules = array_merge( $this->css_rules, $this->css_containers );
+
+			foreach ( $merged_rules as $rule ) {
 				$css .= $rule->get_css( $options['prettify'] );
 				$css .= $options['prettify'] ? "\n" : '';
 			}
+
 			return $css;
 		}
 
@@ -168,61 +180,3 @@ private function combine_rules_selectors() {
 		}
 	}
 }
-
-
-// @TODO new file and tests
-// Should have same/similar interface to WP_Style_Engine_CSS_Rule or maybe even part of it?
-class WP_Style_Engine_CSS_Rules_Container {
-	protected $container;
-	protected $rules = array();
-
-	public function __construct( $container = '', $rule ) {
-		$this->set_container( $container );
-		// @TODO should be able to add multiple rules.
-		// @TODO check for instance of WP_Style_Engine_CSS_Rule
-		$this->add_rule( $rule );
-	}
-
-	public function set_container( $container ) {
-		$this->container = $container;
-		return $this;
-	}
-
-	public function get_container() {
-		return $this->container;
-	}
-
-	public function get_rules() {
-		return $this->rules;
-	}
-
-	public function add_rule( $rule ) {
-		// @TODO should be able to add multiple rules.
-		// @TODO check for instance of WP_Style_Engine_CSS_Rule
-		$selector = $rule->get_selector();
-
-		if ( isset( $this->rules[ $selector ] ) ) {
-			$this->rules[ $selector ]->add_declarations( $rule->get_declarations() );
-		} else {
-			$this->rules[ $selector ] = $rule;
-		}
-		return $this;
-	}
-
-	public function get_css( $should_prettify = false, $indent_count = 0 ) {
-		$css                 = '';
-		$indent_count         = $should_prettify ? $indent_count + 1 : $indent_count;
-		$new_line            = $should_prettify ? "\n" : '';
-		$spacer              = $should_prettify ? ' ' : '';
-		foreach ( $this->rules as $rule ) {
-			$css .= $rule->get_css( $should_prettify, $indent_count );
-			$css .= $should_prettify ? "\n" : '';
-		}
-
-		if ( empty( $css ) ) {
-			return '';
-		}
-
-		return "{$this->container}{$spacer}{{$new_line}{$css}}";
-	}
-}
diff --git a/packages/style-engine/class-wp-style-engine.php b/packages/style-engine/class-wp-style-engine.php
@@ -358,11 +358,11 @@ protected static function is_valid_style_value( $style_value ) {
 		 *
 		 * @return void.
 		 */
-		public static function store_css_rule( $store_name, $css_selector, $css_declarations, $css_at_rule = '' ) {
+		public static function store_css_rule( $store_name, $css_selector, $css_declarations ) {
 			if ( empty( $store_name ) || empty( $css_selector ) || empty( $css_declarations ) ) {
 				return;
 			}
-			static::get_store( $store_name )->add_rule( $css_selector, $css_at_rule )->add_declarations( $css_declarations );
+			static::get_store( $store_name )->add_rule( $css_selector )->add_declarations( $css_declarations );
 		}
 
 		/**