fix (responsive breakpoint): now working properly in preview in some styles

For example, this wasn't working in column widths for tablet/mobile when previewing

Author: [email protected]

src/dynamic-breakpoints.php

@@ -163,11 +163,19 @@ public function adjust_breakpoints( $css ) {
 				return $css;
 			}
 
-			if ( ! empty( $new_tablet ) && ( strpos( $css, 'width:1024px)' ) !== false || strpos( $css, 'width:1023px)' ) !== false ) ) {
+			// Handle CSS optimized values where there are no spaces between the
+			// colon and the value and if there is a space between the colon and
+			// the value.
+			if ( ! empty( $new_tablet ) &&
+			     ( strpos( $css, 'width:1024px)' ) !== false || strpos( $css, 'width:1023px)' ) !== false ||
+				   strpos( $css, 'width: 1024px)' ) !== false || strpos( $css, 'width: 1023px)' ) !== false )
+			) {
 
 				// Check if the style generated contains new breakpoints
-				$has_new_tablet = strpos( $css, 'width:' . $new_tablet . 'px)' ) !== false;
-				$has_new_tablet_minus_1 = strpos( $css, 'width:' . ( $new_tablet - 1 ) . 'px)' ) !== false;
+				$has_new_tablet = strpos( $css, 'width: ' . $new_tablet . 'px)' ) !== false ||
+				                  strpos( $css, 'width:' . $new_tablet . 'px)' ) !== false;
+				$has_new_tablet_minus_1 = strpos( $css, 'width: ' . ( $new_tablet - 1 ) . 'px)' ) !== false ||
+				                          strpos( $css, 'width:' . ( $new_tablet - 1 ) . 'px)' ) !== false;
 
 				if ( ! $has_new_tablet ) {
 					$css = preg_replace( "/(@media[^{]+)width:\s*1024px/", "$1width:" . $new_tablet . "px", $css );
@@ -179,10 +187,15 @@ public function adjust_breakpoints( $css ) {
 			}
 
 			// Mobile version
-			if ( ! empty( $new_mobile ) && ( strpos( $css, 'width:768px)' ) !== false || strpos( $css, 'width:767px)' ) !== false ) ) {
-
-				$has_new_mobile = strpos( $css, 'width:' . $new_mobile . 'px)' ) !== false;
-				$has_new_mobile_minus_1 = strpos( $css, 'width:' . ( $new_mobile - 1 ) . 'px)' ) !== false;
+			if ( ! empty( $new_mobile ) &&
+			     ( strpos( $css, 'width:768px)' ) !== false || strpos( $css, 'width:767px)' ) !== false ||
+				   strpos( $css, 'width: 768px)' ) !== false || strpos( $css, 'width: 767px)' ) !== false )
+			) {
+
+				$has_new_mobile = strpos( $css, 'width:' . $new_mobile . 'px)' ) !== false ||
+				                  strpos( $css, 'width: ' . $new_mobile . 'px)' ) !== false;
+				$has_new_mobile_minus_1 = strpos( $css, 'width:' . ( $new_mobile - 1 ) . 'px)' ) !== false ||
+				                          strpos( $css, 'width: ' . ( $new_mobile - 1 ) . 'px)' ) !== false;
 
 				if ( ! $has_new_mobile ) {
 					$css = preg_replace( "/(@media[^{]+)width:\s*768px/", "$1width:" . $new_mobile . "px", $css );