WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
08/28/2025 07:54:21 AM (2 months ago)
Author:
jonsurrell
Message:

Script Loader: Add sourceURL to inline scripts and styles.

Improve the source locations referenced by developer tooling in supporting browsers. Inline source locations are named like inline:handle-js-after and appear in the developer tools "sources" panel.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/9628.

Props jonsurrell, swissspidy, alshakero, westonruter.
Fixes #63887.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r58932 r60685  
    151151        $expected .= "<style id='handle-inline-css' type='text/css'>\n";
    152152        $expected .= "$style\n";
     153        $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
    153154        $expected .= "</style>\n";
    154155
    … …  
    180181        $expected .= "<style id='handle-inline-css' type='text/css'>\n";
    181182        $expected .= "$style\n";
     183        $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
    182184        $expected .= "</style>\n";
    183185
    … …  
    275277        $expected .= "$style1\n";
    276278        $expected .= "$style2\n";
     279        $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
    277280        $expected .= "</style>\n";
    278281
    … …  
    293296    public function test_plugin_doing_inline_styles_wrong() {
    294297
    295         $style  = "<style id='handle-inline-css' type='text/css'>\n";
    296         $style .= ".thing {\n";
     298        $style  = ".thing {\n";
    297299        $style .= "\tbackground: red;\n";
    298         $style .= "}\n";
    299         $style .= '</style>';
     300        $style .= '}';
    300301
    301302        $expected  = "<link rel='stylesheet' id='handle-css' href='http://example.com?ver=1' type='text/css' media='all' />\n";
     303        $expected .= "<style id='handle-inline-css' type='text/css'>\n";
    302304        $expected .= "$style\n";
     305        $expected .= "/*# sourceURL=inline:handle-inline-css */\n";
     306        $expected .= "</style>\n";
    303307
    304308        wp_enqueue_style( 'handle', 'http://example.com', array(), 1 );
    305309
    306         wp_add_inline_style( 'handle', $style );
     310        wp_add_inline_style( 'handle', "<style>{$style}</style>" );
    307311
    308312        $this->assertSame( $expected, get_echo( 'wp_print_styles' ) );
    … …  
    333337<style id='handle-inline-css' type='text/css'>
    334338a { color: blue; }
     339/*# sourceURL=inline:handle-inline-css */
    335340</style>
    336341<![endif]-->
    … …  
    364369        $expected .= "<style id='handle-three-inline-css' type='text/css'>\n";
    365370        $expected .= "$style\n";
     371        $expected .= "/*# sourceURL=inline:handle-three-inline-css */\n";
    366372        $expected .= "</style>\n";
    367373
    … …  
    633639        $this->assertSame( $GLOBALS['wp_styles']->registered['test-handle']->src, $url );
    634640    }
     641
     642    /**
     643     * @ticket 63887
     644     */
     645    public function test_source_url_encoding() {
     646        $handle = '# test/</style> #';
     647        wp_enqueue_style( $handle, '/example.css', array(), '0.0' );
     648        wp_add_inline_style( $handle, 'custom-el { content: "ok"; }' );
     649
     650        $expected = <<<HTML
     651<link rel='stylesheet' href="/example.css?ver=0.0" id="# test/</style> #-css" media="all" type="text/css">
     652<style id="# test/</style> #-inline-css" type="text/css">
     653custom-el { content: "ok"; }
     654/*# sourceURL=inline:%23%20test%2F%3C%2Fstyle%3E%20%23-inline-css */
     655</style>
     656
     657HTML;
     658
     659        $this->assertEqualHTML( $expected, get_echo( 'wp_print_styles' ) );
     660    }
    635661}
Note: See TracChangeset for help on using the changeset viewer.