Fix inline block styles minification issues with calc() (#29554)

* fixes #29518 * Add test for calc() * cs * add more tests * Add test for css-vars/calc combo * cs
WordPress · Mar 8, 2021 · a81afe8 · a81afe8
1 parent 16e4bcc
commit a81afe8
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -291,10 +291,9 @@ function( $a, $b ) {
  */
 function gutenberg_get_minified_styles( $styles ) {
 	$re1 = '(?sx)("(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')|/\\* (?> .*? \\*/ )';
-	$re2 = '(?six)("(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')|\\s*+ ; \\s*+ ( } ) \\s*+|\\s*+ ( [*$~^|]?+= | [{};,>~+-] | !important\\b ) \\s*+|( [[(:] ) \\s++|\\s++ ( [])] )|\\s++ ( : ) \\s*+(?!(?>[^{}"\']++|"(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')*+{)|^ \\s++ | \\s++ \\z|(\\s)\\s+';
+	$re2 = '(?six)("(?:[^"\\\\]++|\\\\.)*+"|\'(?:[^\'\\\\]++|\\\\.)*+\')|\\s*+ ; \\s*+ ( } ) \\s*+|\\s*+ ( [*$~^|]?+= | [{};,>~] | !important\\b ) \\s*+|\\s*([+-])\\s*(?=[^}]*{)|( [[(:] ) \\s++|\\s++ ( [])] )|\\s+(:)(?![^\\}]*\\{)|^ \\s++ | \\s++ \\z|(\\s)\\s+';
 
-	$styles = preg_replace( "%$re1%", '$1', $styles );
-	return preg_replace( "%$re2%", '$1$2$3$4$5$6$7', $styles );
+	return preg_replace( array( "%{$re1}%", "%{$re2}%" ), array( '$1', '$1$2$3$4$5$6$7$8' ), $styles );
 }
 
 /**

diff --git a/phpunit/class-gutenberg-utils-test.php b/phpunit/class-gutenberg-utils-test.php
@@ -149,6 +149,26 @@ public function test_gutenberg_get_minified_styles() {
 				  }',
 				'out' => '#foo{content:" ";bar:0}',
 			),
+			array(
+				'in'  => '.foo { width: calc(50% - .625em) }',
+				'out' => '.foo{width:calc(50% - .625em)}', // Preserve spaces inside calc().
+			),
+			array(
+				'in'  => '@supports (-webkit-overflow-scrolling: touch) { .foo { background-attachment: scroll; } }',
+				'out' => '@supports (-webkit-overflow-scrolling:touch){.foo{background-attachment:scroll}}',
+			),
+			array(
+				'in'  => '@media (prefers-reduced-motion: reduce) { .foo { background: linear-gradient(-135deg, #7adcb4 0%, #00d082 100%); background-attachment: scroll; animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s; } }',
+				'out' => '@media (prefers-reduced-motion:reduce){.foo{background:linear-gradient(-135deg,#7adcb4 0%,#00d082 100%);background-attachment:scroll;animation:components-animate__appear-animation 0.1s cubic-bezier(0,0,0.2,1) 0s}}',
+			),
+			array(
+				'in'  => '@keyframes components-animate__appear-animation { from { transform: translateY(-2em) scaleY(0) scaleX(0); } to { transform: translateY(0%) scaleY(1) scaleX(1); } }',
+				'out' => '@keyframes components-animate__appear-animation{from{transform:translateY(-2em) scaleY(0) scaleX(0)}to{transform:translateY(0%) scaleY(1) scaleX(1)}}',
+			),
+			array(
+				'in'  => '.selector { --foo: calc( var(--bar, calc(1em - 10px ) ); }',
+				'out' => '.selector{--foo:calc(var(--bar,calc(1em - 10px))}',
+			),
 		);
 
 		foreach ( $cases as $case ) {