fix (css optimization): media queries with nested CSS are not optimiz…

…ed correctly gambitph#2571 (gambitph#2572)

src/css-optimize.php

@@ -114,7 +114,7 @@ public function generate_optimied_css_for_post( $post_id, $post, $update ) {
 
 			// Go through and gather all the styles.
 			$styles = array(); // Holds unique ids and styles from blocks.
-			$this->parse_blocks( $blocks, $styles );
+			self::parse_blocks( $blocks, $styles );
 
 			// Generate the optimized CSS.
 			$styles_only = array();
@@ -123,7 +123,7 @@ public function generate_optimied_css_for_post( $post_id, $post, $update ) {
 					$styles_only[] = $block_style[1];
 				}
 			}
-			$optimized_css = $this->generate_css( $styles_only );
+			$optimized_css = self::generate_css( $styles_only );
 
 			// Save the optimized CSS to the post.
 			update_post_meta( $post_id, 'stackable_optimized_css', $optimized_css );
@@ -138,14 +138,14 @@ public function generate_optimied_css_for_post( $post_id, $post, $update ) {
 		 *
 		 * @return void
 		 */
-		public function parse_blocks( $blocks, &$style_arr ) {
+		public static function parse_blocks( $blocks, &$style_arr ) {
 			foreach ( $blocks as $block ) {
 				$block_name = isset( $block['blockName'] ) ? $block['blockName'] : '';
 				if ( stripos( $block_name, 'stackable/' ) !== false ) {
-					$this->parse_block_style( $block, $style_arr );
+					self::parse_block_style( $block, $style_arr );
 				}
 
-				$this->parse_blocks( $block['innerBlocks'], $style_arr );
+				self::parse_blocks( $block['innerBlocks'], $style_arr );
 			}
 		}
 
@@ -157,7 +157,7 @@ public function parse_blocks( $blocks, &$style_arr ) {
 		 *
 		 * @return void
 		 */
-		public function parse_block_style( $block, &$style_arr ) {
+		public static function parse_block_style( $block, &$style_arr ) {
 			$block_content = $block['innerHTML'];
 			if ( stripos( $block_content, '<style' ) !== false ) {
 
@@ -234,7 +234,7 @@ public function print_optimized_styles() {
 		 *
 		 * @return int -1, 0, 1 to reorder the array
 		 */
-		public function selector_sort( $a, $b ) {
+		public static function selector_sort( $a, $b ) {
 			if ( stripos( $a, '/* */' ) !== false && stripos( $b, '/* */' ) !== false ) {
 				return 0;
 			} else if ( stripos( $a, '/* */' ) !== false ) {
@@ -293,7 +293,7 @@ public function strip_optimized_block_styles( $block_content, $block ) {
 		 * @param Array $selectors
 		 * @return Array Combined selectors
 		 */
-		public function combine_selectors( $selectors ) {
+		public static function combine_selectors( $selectors ) {
 			$new_selectors = array();
 			$classes_to_combine = array();
 			foreach( $selectors as $selector ) {
@@ -342,7 +342,7 @@ public function combine_selectors( $selectors ) {
 		 *
 		 * @return String The optimized CSS.
 		 */
-		public function generate_css( $styles ) {
+		public static function generate_css( $styles ) {
 			// This contains styles as keys and selectors as values for easy
 			// lookups.
 			$all_style_rules = array();
@@ -355,6 +355,13 @@ public function generate_css( $styles ) {
 			//     - selector 2
 			//     - ...
 			foreach ( $styles as $style ) {
+				// Spread all media queries.
+				// The CSS generated by blocks can have media queries with multiple selectors & rules inside.
+				// To make optimization easier, we'll spread them out so we can sort the selectors per media queries.
+				$style = preg_replace_callback( '#((@media[^\{]+\{)(.*?)\}})#', function( $style_matches ) {
+					return preg_replace( '#\}([^\}])#', '}}' . $style_matches[2] . '$1', $style_matches[0] );
+				}, $style );
+
 				// Extract all media queries, selectors and rules for optimization.
 				preg_match_all( '#(@\w+.*?\{)?(.*?)(\{[^\}]+\})\}?#', $style, $style_matches );
 				// $style_matches contains:
@@ -418,7 +425,7 @@ public function generate_css( $styles ) {
 
 				// HOVER STYLES HACK (3/4): Reorder the selectors so hover
 				// styles are put last.
-				uksort( $styles, array( $this, 'selector_sort' ) );
+				uksort( $styles, array( 'Stackable_CSS_Optimize', 'selector_sort' ) );
 
 				// Combine the selectors.
 				foreach ( $styles as $style_rules => $selector_arr ) {
@@ -428,7 +435,7 @@ public function generate_css( $styles ) {
 					$style_rules = str_replace( '/* */', '', $style_rules );
 
 					// Optimize selectors by combining similar ones.
-					$selector_arr = $this->combine_selectors( $selector_arr );
+					$selector_arr = self::combine_selectors( $selector_arr );
 
 					$css .= implode( ',', $selector_arr ) . $style_rules;
 				}