Force all processed CSS and Google Fonts to use font-display:swap (PR #…

…3445) * Revise apply_font_display_swap() to replace attr val * Force google fonts to use font-display:swap * Update CSSTrait testcase fixture * Add testcase for gf-optimizeV2
wp-media · Jan 4, 2021 · d1e429b · d1e429b
1 parent e93feae
commit d1e429b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 16 deletions.
diff --git a/inc/Engine/Optimization/CSSTrait.php b/inc/Engine/Optimization/CSSTrait.php
@@ -204,14 +204,16 @@ private function apply_font_display_swap( $css_file_content ) {
 		$css_file_content = (string) $css_file_content;
 
 		return preg_replace_callback(
-			'/(?:@font-face)\s*{(?<value>[^}]+)}/',
+			'/(?:@font-face)\s*{(?<value>[^}]+)}/i',
 			function ( $matches ) {
-				if ( false !== strpos( $matches['value'], 'font-display' ) ) {
-					return $matches[0];
+				if ( preg_match( '/font-display:\s*(?<swap_value>\w*);?/i', $matches['value'], $attribute ) ) {
+					return 'swap' === strtolower( $attribute['swap_value'] )
+						? $matches[0]
+						: str_replace( $attribute['swap_value'], 'swap', $matches[0] );
+				} else {
+					$swap = "font-display:swap;{$matches['value']}";
 				}
 
-				$swap = "font-display:swap;{$matches['value']}";
-
 				return str_replace( $matches['value'], $swap, $matches[0] );
 			},
 			$css_file_content

diff --git a/inc/Engine/Optimization/GoogleFonts/AbstractGFOptimization.php b/inc/Engine/Optimization/GoogleFonts/AbstractGFOptimization.php
@@ -46,11 +46,10 @@ protected function get_font_with_display( array $font ) {
 			return $font[0];
 		}
 
-		$display     = $this->get_font_display_value();
 		$parsed_font = wp_parse_args( $query );
 		$font_url    = ! empty( $parsed_font['display'] )
-			? str_replace( "&display={$parsed_font['display']}", "&display={$display}", $font_url )
-			: "{$font_url}&display={$display}";
+			? str_replace( "&display={$parsed_font['display']}", '&display=swap', $font_url )
+			: "{$font_url}&display=swap";
 
 		return str_replace( $font['url'], esc_url( $font_url ), $font[0] );
 	}

diff --git a/inc/Engine/Optimization/GoogleFonts/Combine.php b/inc/Engine/Optimization/GoogleFonts/Combine.php
@@ -141,11 +141,9 @@ private function parse( array $matches ) {
 	 * @return string
 	 */
 	private function get_combine_tag() {
-		$display = $this->get_font_display_value();
-
 		return sprintf(
 			'<link rel="stylesheet" href="%s" />', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
-			esc_url( "https://fonts.googleapis.com/css?family={$this->fonts}{$this->subsets}&display={$display}" )
+			esc_url( "https://fonts.googleapis.com/css?family={$this->fonts}{$this->subsets}&display=swap" )
 		);
 	}
 }
diff --git a/inc/Engine/Optimization/GoogleFonts/CombineV2.php b/inc/Engine/Optimization/GoogleFonts/CombineV2.php
@@ -139,10 +139,9 @@ protected function parse( array $tag ) {
 	 * @return string
 	 */
 	protected function get_combine_tag( array $families ): string {
-		$display = $this->get_font_display_value();
 		return sprintf(
 			'<link rel="stylesheet" href="%s" />', // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
-			esc_url( "https://fonts.googleapis.com/css2{$this->get_concatenated_families( $families )}&display={$display}" )
+			esc_url( "https://fonts.googleapis.com/css2{$this->get_concatenated_families( $families )}&display=swap" )
 		);
 	}
 

diff --git a/tests/Fixtures/inc/Engine/Optimization/CSSTraitApplyFontDisplaySwap.php b/tests/Fixtures/inc/Engine/Optimization/CSSTraitApplyFontDisplaySwap.php
@@ -46,7 +46,7 @@
 CSS
 		],
 
-		'shouldNotChangeFontDisplayAttributeWhenAlreadySetInRule' => [
+		'shouldChangeFontDisplayAttributeWhenAlreadySetInRule' => [
 			'css'      => <<<CSS
 @font-face {
 	font-family: 'ETmodules';
@@ -66,7 +66,7 @@
 	src: url("core/admin/fonts/modules.eot#iefix")
 	format("woff"), url("core/admin/fonts/modules.svg#ETModules");
 	font-weight: normal;
-	font-display: auto;
+	font-display: swap;
 	font-style: normal;
 }
 CSS

diff --git a/tests/Fixtures/inc/Engine/Optimization/GoogleFonts/CombineV2/optimize.php b/tests/Fixtures/inc/Engine/Optimization/GoogleFonts/CombineV2/optimize.php
@@ -124,4 +124,30 @@
 				'</body>' .
 			'</html>'
 	],
-];
+	'shouldReplaceAnotherFontDisplayValueWithSwap' => [
+		'given' =>
+			'<!doctype html>' .
+			'<html>' .
+			'<head>' .
+			'<title>Sample Page</title>' .
+			'<link rel="preconnect" href="https://fonts.gstatic.com">' .
+			'<link href="https://fonts.googleapis.com/css2?family=Goldman:wght@700&family=Roboto:ital,wght@0,100;0,400;0,500;1,500;1,900&display=auto" rel="stylesheet">' .
+			'<link rel="stylesheet" id="dt-more-fonts-css" href="https://fonts.googleapis.com/css2?family=Comfortaa" type="text/css" media="all" />' .
+			'</head>' .
+			'<body>' .
+			'</body>' .
+			'</html>'
+		,
+		'expected' =>
+			'<!doctype html>' .
+			'<html>' .
+			'<head>' .
+			'<title>Sample Page</title>' .
+			'<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Goldman:wght@700&#038;family=Roboto:ital,wght@0,100;0,400;0,500;1,500;1,900&#038;family=Comfortaa&#038;display=swap" />' .
+			'<link rel="preconnect" href="https://fonts.gstatic.com">' .
+			'</head>' .
+			'<body>' .
+			'</body>' .
+			'</html>'
+	],
+];