Changeset 60920

Timestamp:

10/10/2025 04:17:22 AM (5 weeks ago)

Author:

westonruter

Message:

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 ​https://github.com/WordPress/wordpress-develop/pull/10177.

Follow-up to [50836].

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

Location:

trunk

Files:

• src/wp-includes/class-wp-styles.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/phpunit/tests/dependencies/styles.php (modified) (1 diff)

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

@@ -334 +334 @@
         $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
             );
         }

trunk/src/wp-includes/script-loader.php

@@ -3117 +3117 @@
             $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;

trunk/tests/phpunit/tests/dependencies/styles.php

@@ -525 +525 @@
     /**
      * @ticket 58394
+     * @ticket 63887
      *
      * @covers ::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' );
+     * @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( ?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' );
-
-        $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' );
+        $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;
+        }
+
+        $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,
+            ),
+        );
     }