[wp-trac] [WordPress Trac] #63887: Add sourceURL to inline scripts and styles

[WordPress Trac]

#63887: Add sourceURL to inline scripts and styles
--------------------------------------+------------------------------
 Reporter:  jonsurrell                |       Owner:  jonsurrell
     Type:  enhancement               |      Status:  reopened
 Priority:  normal                    |   Milestone:  6.9
Component:  Script Loader             |     Version:
 Severity:  normal                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:  javascript, css
--------------------------------------+------------------------------
Changes (by westonruter):

 * status:  closed => reopened
 * resolution:  fixed =>


Comment:

 @jonsurrell I have another follow-up for you in
 https://github.com/WordPress/wordpress-develop/pull/9955

 Namely, what hasn't been accounted for yet are scripts being constructed
 with `wp_get_inline_script_tag()` or `wp_print_inline_script_tag()`, or
 scripts still being manually printed with `<script>` tags for that matter.
 My PR tackles that for scripts in `wp-includes`, but not `wp-admin` or in
 bundled themes. For themes, I think this can be done as part of #63806.

 Something else which comes to mind is that the current implementation for
 inline styles isn't ideal for `wp_maybe_inline_styles()`, because the
 `sourceURL` isn't pointing to the available actual URL for the stylesheet,
 and instead it is using the handle. For example, with #63007 I want to
 allow the block theme stylesheets to be able to be inlined. This can be
 done simply with:

 {{{#!php
 <?php
 wp_style_add_data(
         'twentytwentyfive-style',
         'path',
         get_parent_theme_file_path( 'style.css' )
 );
 }}}

 However, this results in the following inline style being printed to the
 page:

 {{{
 <style id='twentytwentyfive-style-inline-css'>
 *SNIP*

 /*# sourceURL=twentytwentyfive-style-inline-css */
 </style>
 }}}

 The `sourceURL` comment here is not ideal. It should rather use the
 stylesheet's actual URL which it already knows:

 {{{
 /*# sourceURL=http://localhost:8000/wp-
 content/themes/twentytwentyfive/style.css */
 }}}

 This would be particularly helpful for theme developers wanting to modify
 CSS as it would show them directly where the file is located for
 modification.

 However, I realize this won't necessarily always be feasible to include
 since there could be inline styles added in addition to the maybe-inlined
 styles. Since those inline styles all end up getting concatenated together
 into one `STYLE`, it wouldn't be correct in that case to use the URL. (But
 otherwise, it would be helpful to append a comment with the URL for the
 maybe-inlined CSS.)

 One way to deal with this would be to honor whatever `sourceURL` is
 provided already in the inlined CSS/JS. For example:

 {{{#!diff
 diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-
 loader.php
 index fc4165009e..39ff3bf8f2 100644
 --- a/src/wp-includes/script-loader.php
 +++ b/src/wp-includes/script-loader.php
 @@ -3116,6 +3116,8 @@ function wp_maybe_inline_styles() {
                          */
                         $style['css'] = _wp_normalize_relative_css_links(
 $style['css'], $style['src'] );

 +                       $style['css'] .= sprintf( "\n/*# sourceURL=%s
 */\n", $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'] ) ) {
 }}}

 With this in place, `WP_Styles::print_inline_style()` should be updated to
 check if the CSS being printed already contains a `sourceURL` comment at
 the end, and if so, avoid generating one. If more than one inline style is
 being printed, then it should go ahead and append a handle-generated
 `sourceURL` comment. Alternatively, we could just discontinue
 concatenating all inline scripts and styles into one tag, but this would
 probably break existing.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63887#comment:43>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform