@wordpress/style-engine 1.33.1 → 1.34.0

package/class-wp-style-engine-css-rules-store.php

@@ -7,138 +7,146 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
-	return;
-}
-
-/**
- * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
- *
- * @access private
- */
-class WP_Style_Engine_CSS_Rules_Store {
-
-	/**
-	 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
-	 *
-	 * @static
-	 *
-	 * @var WP_Style_Engine_CSS_Rules_Store[]
-	 */
-	protected static $stores = array();
-
-	/**
-	 * The store name.
-	 *
-	 * @var string
-	 */
-	protected $name = '';
-
-	/**
-	 * An array of CSS Rules objects assigned to the store.
-	 *
-	 * @var WP_Style_Engine_CSS_Rule[]
-	 */
-	protected $rules = array();
+if ( ! class_exists( 'WP_Style_Engine_CSS_Rules_Store' ) ) {
 
 	/**
-	 * Gets an instance of the store.
-	 *
-	 * @param string $store_name The name of the store.
+	 * Holds, sanitizes, processes and prints CSS declarations for the Style Engine.
 	 *
-	 * @return WP_Style_Engine_CSS_Rules_Store|void
+	 * @access private
 	 */
-	public static function get_store( $store_name = 'default' ) {
-		if ( ! is_string( $store_name ) || empty( $store_name ) ) {
-			return;
+	class WP_Style_Engine_CSS_Rules_Store {
+
+		/**
+		 * An array of named WP_Style_Engine_CSS_Rules_Store objects.
+		 *
+		 * @static
+		 *
+		 * @var WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		protected static $stores = array();
+
+		/**
+		 * The store name.
+		 *
+		 * @var string
+		 */
+		protected $name = '';
+
+		/**
+		 * An array of CSS Rules objects assigned to the store.
+		 *
+		 * @var WP_Style_Engine_CSS_Rule[]
+		 */
+		protected $rules = array();
+
+		/**
+		 * Gets an instance of the store.
+		 *
+		 * @param string $store_name The name of the store.
+		 *
+		 * @return WP_Style_Engine_CSS_Rules_Store|void
+		 */
+		public static function get_store( $store_name = 'default' ) {
+			if ( ! is_string( $store_name ) || empty( $store_name ) ) {
+				return;
+			}
+			if ( ! isset( static::$stores[ $store_name ] ) ) {
+				static::$stores[ $store_name ] = new static();
+				// Set the store name.
+				static::$stores[ $store_name ]->set_name( $store_name );
+			}
+			return static::$stores[ $store_name ];
 		}
-		if ( ! isset( static::$stores[ $store_name ] ) ) {
-			static::$stores[ $store_name ] = new static();
-			// Set the store name.
-			static::$stores[ $store_name ]->set_name( $store_name );
-		}
-		return static::$stores[ $store_name ];
-	}
 
-	/**
-	 * Gets an array of all available stores.
-	 *
-	 * @return WP_Style_Engine_CSS_Rules_Store[]
-	 */
-	public static function get_stores() {
-		return static::$stores;
-	}
-
-	/**
-	 * Clears all stores from static::$stores.
-	 *
-	 * @return void
-	 */
-	public static function remove_all_stores() {
-		static::$stores = array();
-	}
-
-	/**
-	 * Sets the store name.
-	 *
-	 * @param string $name The store name.
-	 *
-	 * @return void
-	 */
-	public function set_name( $name ) {
-		$this->name = $name;
-	}
-
-	/**
-	 * Gets the store name.
-	 *
-	 * @return string
-	 */
-	public function get_name() {
-		return $this->name;
-	}
+		/**
+		 * Gets an array of all available stores.
+		 *
+		 * @return WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		public static function get_stores() {
+			return static::$stores;
+		}
 
-	/**
-	 * Gets an array of all rules.
-	 *
-	 * @return WP_Style_Engine_CSS_Rule[]
-	 */
-	public function get_all_rules() {
-		return $this->rules;
-	}
+		/**
+		 * Clears all stores from static::$stores.
+		 *
+		 * @return void
+		 */
+		public static function remove_all_stores() {
+			static::$stores = array();
+		}
 
-	/**
-	 * Gets a WP_Style_Engine_CSS_Rule object by its selector.
-	 * If the rule does not exist, it will be created.
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @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 ) {
-		$selector = trim( $selector );
+		/**
+		 * Sets the store name.
+		 *
+		 * @param string $name The store name.
+		 *
+		 * @return void
+		 */
+		public function set_name( $name ) {
+			$this->name = $name;
+		}
 
-		// Bail early if there is no selector.
-		if ( empty( $selector ) ) {
-			return;
+		/**
+		 * Gets the store name.
+		 *
+		 * @return string
+		 */
+		public function get_name() {
+			return $this->name;
 		}
 
-		// Create the rule if it doesn't exist.
-		if ( empty( $this->rules[ $selector ] ) ) {
-			$this->rules[ $selector ] = new WP_Style_Engine_CSS_Rule( $selector );
+		/**
+		 * Gets an array of all rules.
+		 *
+		 * @return WP_Style_Engine_CSS_Rule[]
+		 */
+		public function get_all_rules() {
+			return $this->rules;
 		}
 
-		return $this->rules[ $selector ];
-	}
+		/**
+		 * Gets a WP_Style_Engine_CSS_Rule object by its selector.
+		 * 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 = '' ) {
+			$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 );
+			}
+
+			return $this->rules[ $selector ];
+		}
 
-	/**
-	 * Removes a selector from the store.
-	 *
-	 * @param string $selector The CSS selector.
-	 *
-	 * @return void
-	 */
-	public function remove_rule( $selector ) {
-		unset( $this->rules[ $selector ] );
+		/**
+		 * Removes a selector from the store.
+		 *
+		 * @param string $selector The CSS selector.
+		 *
+		 * @return void
+		 */
+		public function remove_rule( $selector ) {
+			unset( $this->rules[ $selector ] );
+		}
 	}
 }

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

@@ -7,151 +7,167 @@
  * @package Gutenberg
  */
 
-if ( class_exists( 'WP_Style_Engine_Processor' ) ) {
-	return;
-}
-
-/**
- * Compiles styles from stores or collection of CSS rules.
- *
- * @access private
- */
-class WP_Style_Engine_Processor {
+if ( ! class_exists( 'WP_Style_Engine_Processor' ) ) {
 
 	/**
-	 * A collection of Style Engine Store objects.
+	 * Compiles styles from stores or collection of CSS rules.
 	 *
-	 * @var WP_Style_Engine_CSS_Rules_Store[]
+	 * @access private
 	 */
-	protected $stores = array();
+	class WP_Style_Engine_Processor {
+
+		/**
+		 * A collection of Style Engine Store objects.
+		 *
+		 * @var WP_Style_Engine_CSS_Rules_Store[]
+		 */
+		protected $stores = array();
+
+		/**
+		 * The set of CSS rules that this processor will work on.
+		 *
+		 * @var WP_Style_Engine_CSS_Rule[]
+		 */
+		protected $css_rules = array();
+
+		/**
+		 * Add a store to the processor.
+		 *
+		 * @param WP_Style_Engine_CSS_Rules_Store $store The store to add.
+		 *
+		 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
+		 */
+		public function add_store( $store ) {
+			if ( ! $store instanceof WP_Style_Engine_CSS_Rules_Store ) {
+				_doing_it_wrong(
+					__METHOD__,
+					__( '$store must be an instance of WP_Style_Engine_CSS_Rules_Store', 'default' ),
+					'6.1.0'
+				);
+				return $this;
+			}
 
-	/**
-	 * The set of CSS rules that this processor will work on.
-	 *
-	 * @var WP_Style_Engine_CSS_Rule[]
-	 */
-	protected $css_rules = array();
+			$this->stores[ $store->get_name() ] = $store;
 
-	/**
-	 * Add a store to the processor.
-	 *
-	 * @param WP_Style_Engine_CSS_Rules_Store $store The store to add.
-	 *
-	 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
-	 */
-	public function add_store( $store ) {
-		if ( ! $store instanceof WP_Style_Engine_CSS_Rules_Store ) {
-			_doing_it_wrong(
-				__METHOD__,
-				__( '$store must be an instance of WP_Style_Engine_CSS_Rules_Store', 'default' ),
-				'6.1.0'
-			);
 			return $this;
 		}
 
-		$this->stores[ $store->get_name() ] = $store;
-
-		return $this;
-	}
-
-	/**
-	 * Adds rules to be processed.
-	 *
-	 * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise.
-	 *
-	 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
-	 */
-	public function add_rules( $css_rules ) {
-		if ( ! is_array( $css_rules ) ) {
-			$css_rules = array( $css_rules );
-		}
+		/**
+		 * Adds rules to be processed.
+		 *
+		 * @param WP_Style_Engine_CSS_Rule|WP_Style_Engine_CSS_Rule[] $css_rules A single, or an array of, WP_Style_Engine_CSS_Rule objects from a store or otherwise.
+		 *
+		 * @return WP_Style_Engine_Processor Returns the object to allow chaining methods.
+		 */
+		public function add_rules( $css_rules ) {
+			if ( ! is_array( $css_rules ) ) {
+				$css_rules = array( $css_rules );
+			}
 
-		foreach ( $css_rules as $rule ) {
-			$selector = $rule->get_selector();
-			if ( isset( $this->css_rules[ $selector ] ) ) {
-				$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
-				continue;
+			foreach ( $css_rules as $rule ) {
+				$selector = $rule->get_selector();
+				$at_rule  = $rule->get_at_rule();
+
+				/**
+				 * If there is an at_rule and it already exists in the css_rules array,
+				 * add the rule to it.
+				 * Otherwise, create a new entry for the at_rule
+				 */
+				if ( ! empty( $at_rule ) ) {
+					if ( isset( $this->css_rules[ "$at_rule $selector" ] ) ) {
+						$this->css_rules[ "$at_rule $selector" ]->add_declarations( $rule->get_declarations() );
+						continue;
+					}
+					$this->css_rules[ "$at_rule $selector" ] = $rule;
+					continue;
+				}
+
+				// If the selector already exists, add the declarations to it.
+				if ( isset( $this->css_rules[ $selector ] ) ) {
+					$this->css_rules[ $selector ]->add_declarations( $rule->get_declarations() );
+					continue;
+				}
+				$this->css_rules[ $rule->get_selector() ] = $rule;
 			}
-			$this->css_rules[ $rule->get_selector() ] = $rule;
+			return $this;
 		}
 
-		return $this;
-	}
-
-	/**
-	 * Get the CSS rules as a string.
-	 *
-	 * Since 6.4.0 Optimization is no longer the default.
-	 *
-	 * @param array $options   {
-	 *     Optional. An array of options. Default empty array.
-	 *
-	 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
-	 *     @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
-	 * }
-	 *
-	 * @return string The computed CSS.
-	 */
-	public function get_css( $options = array() ) {
-		$defaults = array(
-			'optimize' => false,
-			'prettify' => SCRIPT_DEBUG,
-		);
-		$options  = wp_parse_args( $options, $defaults );
-
-		// If we have stores, get the rules from them.
-		foreach ( $this->stores as $store ) {
-			$this->add_rules( $store->get_all_rules() );
-		}
+		/**
+		 * Get the CSS rules as a string.
+		 *
+		 * Since 6.4.0 Optimization is no longer the default.
+		 *
+		 * @param array $options   {
+		 *     Optional. An array of options. Default empty array.
+		 *
+		 *     @type bool $optimize Whether to optimize the CSS output, e.g., combine rules. Default is `false`.
+		 *     @type bool $prettify Whether to add new lines and indents to output. Default is to inherit the value of the global constant `SCRIPT_DEBUG`, if it is defined.
+		 * }
+		 *
+		 * @return string The computed CSS.
+		 */
+		public function get_css( $options = array() ) {
+			$defaults = array(
+				'optimize' => false,
+				'prettify' => SCRIPT_DEBUG,
+			);
+			$options  = wp_parse_args( $options, $defaults );
 
-		// Combine CSS selectors that have identical declarations.
-		if ( true === $options['optimize'] ) {
-			$this->combine_rules_selectors();
-		}
+			// If we have stores, get the rules from them.
+			foreach ( $this->stores as $store ) {
+				$this->add_rules( $store->get_all_rules() );
+			}
 
-		// Build the CSS.
-		$css = '';
-		foreach ( $this->css_rules as $rule ) {
-			$css .= $rule->get_css( $options['prettify'] );
-			$css .= $options['prettify'] ? "\n" : '';
-		}
-		return $css;
-	}
+			// Combine CSS selectors that have identical declarations.
+			if ( true === $options['optimize'] ) {
+				$this->combine_rules_selectors();
+			}
 
-	/**
-	 * Combines selectors from the rules store when they have the same styles.
-	 *
-	 * @return void
-	 */
-	private function combine_rules_selectors() {
-		// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
-		$selectors_json = array();
-		foreach ( $this->css_rules as $rule ) {
-			$declarations = $rule->get_declarations()->get_declarations();
-			ksort( $declarations );
-			$selectors_json[ $rule->get_selector() ] = wp_json_encode( $declarations );
+			// Build the CSS.
+			$css = '';
+			foreach ( $this->css_rules as $rule ) {
+				// See class WP_Style_Engine_CSS_Rule for the get_css method.
+				$css .= $rule->get_css( $options['prettify'] );
+				$css .= $options['prettify'] ? "\n" : '';
+			}
+			return $css;
 		}
 
-		// Combine selectors that have the same styles.
-		foreach ( $selectors_json as $selector => $json ) {
-			// Get selectors that use the same styles.
-			$duplicates = array_keys( $selectors_json, $json, true );
-			// Skip if there are no duplicates.
-			if ( 1 >= count( $duplicates ) ) {
-				continue;
+		/**
+		 * Combines selectors from the rules store when they have the same styles.
+		 *
+		 * @return void
+		 */
+		private function combine_rules_selectors() {
+			// Build an array of selectors along with the JSON-ified styles to make comparisons easier.
+			$selectors_json = array();
+			foreach ( $this->css_rules as $rule ) {
+				$declarations = $rule->get_declarations()->get_declarations();
+				ksort( $declarations );
+				$selectors_json[ $rule->get_selector() ] = wp_json_encode( $declarations );
 			}
 
-			$declarations = $this->css_rules[ $selector ]->get_declarations();
-
-			foreach ( $duplicates as $key ) {
-				// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
-				unset( $selectors_json[ $key ] );
-				// Remove the rules from the rules collection.
-				unset( $this->css_rules[ $key ] );
+			// Combine selectors that have the same styles.
+			foreach ( $selectors_json as $selector => $json ) {
+				// Get selectors that use the same styles.
+				$duplicates = array_keys( $selectors_json, $json, true );
+				// Skip if there are no duplicates.
+				if ( 1 >= count( $duplicates ) ) {
+					continue;
+				}
+
+				$declarations = $this->css_rules[ $selector ]->get_declarations();
+
+				foreach ( $duplicates as $key ) {
+					// Unset the duplicates from the $selectors_json array to avoid looping through them as well.
+					unset( $selectors_json[ $key ] );
+					// Remove the rules from the rules collection.
+					unset( $this->css_rules[ $key ] );
+				}
+				// Create a new rule with the combined selectors.
+				$duplicate_selectors                     = implode( ',', $duplicates );
+				$this->css_rules[ $duplicate_selectors ] = new WP_Style_Engine_CSS_Rule( $duplicate_selectors, $declarations );
 			}
-			// Create a new rule with the combined selectors.
-			$duplicate_selectors                     = implode( ',', $duplicates );
-			$this->css_rules[ $duplicate_selectors ] = new WP_Style_Engine_CSS_Rule( $duplicate_selectors, $declarations );
 		}
 	}
 }