Script Loader: Use original stylesheet URL for sourceURL when inlined.

For inline styles which had been inlined from registered external stylesheets via `wp_maybe_inline_styles()`, this defers to using the original stylesheet URL for the `sourceURL` as opposed to fabricating one from the stylesheet handle. This makes the `sourceURL` much more useful for debugging, as it indicates where the stylesheet is located. This allows a developer to make a change to the CSS more easily.

Developed in #10177.

Follow-up to [50836].

Props westonruter, mukesh27, gziolo.
See #50328, #52620.
Fixes #63887.


git-svn-id: https://develop.svn.wordpress.org/trunk@60920 602fd350-edb4-49c9-b593-d223f7449a82

Author: westonruter

src/wp-includes/class-wp-styles.php

@@ -333,14 +333,27 @@ public function add_inline_style( $handle, $code ) {
 	public function print_inline_style( $handle, $display = true ) {
 		$output = $this->get_data( $handle, 'after' );
 
-		if ( empty( $output ) ) {
+		if ( empty( $output ) || ! is_array( $output ) ) {
 			return false;
 		}
 
 		if ( ! $this->do_concat ) {
+
+			// Obtain the original `src` for a stylesheet possibly inlined by wp_maybe_inline_styles().
+			$inlined_src = $this->get_data( $handle, 'inlined_src' );
+
+			// If there's only one `after` inline style, and that inline style had been inlined, then use the $inlined_src
+			// as the sourceURL. Otherwise, if there is more than one inline `after` style associated with the handle,
+			// then resort to using the handle to construct the sourceURL since there isn't a single source.
+			if ( count( $output ) === 1 && is_string( $inlined_src ) && strlen( $inlined_src ) > 0 ) {
+				$source_url = esc_url_raw( $inlined_src );
+			} else {
+				$source_url = rawurlencode( "{$handle}-inline-css" );
+			}
+
 			$output[] = sprintf(
 				'/*# sourceURL=%s */',
-				rawurlencode( "{$handle}-inline-css" )
+				$source_url
 			);
 		}
 

src/wp-includes/script-loader.php

@@ -3116,6 +3116,9 @@ static function ( $a, $b ) {
 			 */
 			$style['css'] = _wp_normalize_relative_css_links( $style['css'], $style['src'] );
 
+			// Keep track of the original `src` for the style that was inlined so that the `sourceURL` comment can be added.
+			$wp_styles->add_data( $style['handle'], 'inlined_src', $style['src'] );
+
 			// Set `src` to `false` and add styles inline.
 			$wp_styles->registered[ $style['handle'] ]->src = false;
 			if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) {

tests/phpunit/tests/dependencies/styles.php

@@ -524,21 +524,117 @@ public function test_block_styles_for_viewing_with_split_styles() {
 
 	/**
 	 * @ticket 58394
+	 * @ticket 63887
 	 *
 	 * @covers ::wp_maybe_inline_styles
+	 * @covers ::wp_add_inline_style
+	 * @covers ::wp_print_styles
+	 * @covers WP_Styles::do_items
+	 * @covers WP_Styles::do_item
+	 * @covers WP_Styles::print_inline_style
+	 *
+	 * @dataProvider data_provider_test_wp_maybe_inline_styles
 	 */
-	public function test_wp_maybe_inline_styles() {
-		wp_register_style( 'test-handle', '/' . WPINC . '/css/classic-themes.css' );
-		wp_style_add_data( 'test-handle', 'path', ABSPATH . WPINC . '/css/classic-themes.css' );
-
-		wp_enqueue_style( 'test-handle' );
+	public function test_wp_maybe_inline_styles( ?string $additional_inline_style, ?int $styles_inline_size_limit ) {
+		$rel_path = 'css/classic-themes.css';
+		$src_url  = includes_url( $rel_path );
+		$src_path = ABSPATH . WPINC . '/' . $rel_path;
+		$css      = file_get_contents( $src_path );
+		$handle   = 'test-handle';
+
+		if ( isset( $styles_inline_size_limit ) ) {
+			add_filter(
+				'styles_inline_size_limit',
+				static function () use ( $styles_inline_size_limit ): int {
+					return $styles_inline_size_limit;
+				}
+			);
+		}
+		wp_register_style( $handle, $src_url, array(), null );
+		wp_style_add_data( $handle, 'path', $src_path );
+		if ( isset( $additional_inline_style ) ) {
+			wp_add_inline_style( $handle, $additional_inline_style );
+		}
+		wp_enqueue_style( $handle );
 
 		wp_maybe_inline_styles();
 
-		$this->assertFalse( $GLOBALS['wp_styles']->registered['test-handle']->src, 'Source of style should be reset to false' );
+		$expected_after = array();
+		if ( ! isset( $styles_inline_size_limit ) || strlen( $css ) <= $styles_inline_size_limit ) {
+			$expected_after[] = $css;
+			$this->assertFalse( wp_styles()->registered[ $handle ]->src, 'Source of style should be reset to false' );
+			$this->assertArrayHasKey( 'inlined_src', wp_styles()->registered[ $handle ]->extra );
+			$this->assertSame( $src_url, wp_styles()->registered[ $handle ]->extra['inlined_src'] );
+		} else {
+			$this->assertArrayNotHasKey( 'inlined_src', wp_styles()->registered[ $handle ]->extra );
+		}
+
+		if ( isset( $additional_inline_style ) ) {
+			$expected_after[] = $additional_inline_style;
+		}
 
-		$css = file_get_contents( ABSPATH . WPINC . '/css/classic-themes.css' );
-		$this->assertSameSets( $GLOBALS['wp_styles']->registered['test-handle']->extra['after'], array( $css ), 'Source of style should set to after property' );
+		$after = wp_styles()->get_data( $handle, 'after' );
+		if ( false === $after ) {
+			$after = array();
+		}
+		$this->assertSameSets( $after, $expected_after, 'Source of style should set to after property' );
+
+		$printed_styles = get_echo( 'wp_print_styles', array( $handle ) );
+		$processor      = new WP_HTML_Tag_Processor( $printed_styles );
+
+		if ( isset( $styles_inline_size_limit ) && strlen( $css ) > $styles_inline_size_limit ) {
+			$this->assertTrue( $processor->next_tag() );
+			$this->assertSame( 'LINK', $processor->get_tag() );
+			$this->assertSame( 'stylesheet', $processor->get_attribute( 'rel' ) );
+			$this->assertSame( $src_url, $processor->get_attribute( 'href' ) );
+		}
+
+		if ( count( $expected_after ) > 0 ) {
+			$this->assertTrue( $processor->next_tag() );
+			$this->assertSame( 'STYLE', $processor->get_tag() );
+			$this->assertSame( $handle . '-inline-css', $processor->get_attribute( 'id' ) );
+			$this->assertSame( 'text/css', $processor->get_attribute( 'type' ) );
+
+			$expected_inline_styles = $expected_after;
+			if ( isset( $additional_inline_style ) ) {
+				$source_url = $handle . '-inline-css';
+			} else {
+				$source_url = $src_url;
+			}
+			$expected_inline_styles[] = "/*# sourceURL=$source_url */";
+
+			$expected_text = "\n" . implode( "\n", $expected_inline_styles ) . "\n";
+			$this->assertSame( $expected_text, $processor->get_modifiable_text() );
+		}
+
+		$this->assertFalse( $processor->next_tag() );
+	}
+
+	/**
+	 * Data provider for test_wp_maybe_inline_styles.
+	 *
+	 * @see self::test_wp_maybe_inline_styles()
+	 * @return array<string, array{additional_inline_style: string|null, styles_inline_size_limit: int|null}>
+	 */
+	public static function data_provider_test_wp_maybe_inline_styles(): array {
+		return array(
+			'regular_limit_without_additional_inline_styles' => array(
+				'additional_inline_style'  => null,
+				'styles_inline_size_limit' => null,
+			),
+			'regular_limit_with_additional_inline_style' => array(
+				'additional_inline_style'  => '/* additional inline style */',
+				'styles_inline_size_limit' => null,
+			),
+			'zero_limit_without_additional_inline_style' => array(
+				'additional_inline_style'  => null,
+				'styles_inline_size_limit' => 0,
+			),
+			'zero_limit_with_additional_inline_style'    => array(
+				'additional_inline_style'  => '/* additional inline style */',
+				'styles_inline_size_limit' => 0,
+			),
+		);
 	}
 
 	/**