[wp-trac] [WordPress Trac] #63908: Style concatenation may duplicate inline styles

[WordPress Trac]

#63908: Style concatenation may duplicate inline styles
---------------------------+-----------------------------
 Reporter:  jonsurrell     |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Script Loader  |    Version:
 Severity:  normal         |   Keywords:
  Focuses:  css            |
---------------------------+-----------------------------
 When styles are concatenated with `/wp-admin/load-styles.php` in multiple
 batches, inline styles are duplicated across batches.

 For example, with this snippet adds inline styles to some core styles:

 {{{#!php
 <?php
 add_action(
         'wp_default_styles',
         function ( $s ) {
                 wp_add_inline_style( 'revisions', 'wp-example { content:
 "inline:revisions" }' );
                 wp_add_inline_style( 'dashicons', 'wp-example { content:
 "inline:dashicons" }' );
                 wp_add_inline_style( 'editor-buttons', 'wp-example {
 content: "inline:editor-buttons" }' );
                 return $s;
         }
 );
 }}}

 I visit `/wp-admin/customize.php` with the Twenty Twenty theme and
 `SCRIPT_DEBUG` set to false (script concatenation is enabled).

 Multiple concatenated styles are used. First is a concatenation using `wp-
 admin/load-styles.php` for these styles:

 {{{
 dashicons, common, forms, admin-menu, dashboard, list-tables,
 edit, revisions, media, themes, about, nav-menus, wp-pointer,
 widgets, site-icon, l10n, buttons, customize-controls,
 customize-widgets, wp-block-library, classic-theme-styles,
 wp-components, wp-widgets, wp-preferences, wp-block-editor,
 wp-reusable-blocks, wp-patterns, wp-editor, wp-reset-editor-styles,
 wp-block-editor-content, wp-editor-classic-layout-styles,
 wp-edit-blocks, wp-customize-widgets, wp-block-directory,
 wp-format-library, customize-nav-menus, media-views,
 wp-color-picker, code-editor
 }}}

 {{{#!xml
 <link rel='stylesheet' href='…' media='all' />
 <style>
 wp-example { content: "inline:dashicons" }wp-example { content:
 "inline:revisions" }
 </style>
 }}}

 The inline styles associated with the styles are output after the
 stylesheet link.

 Later, there is another concatenated styles, oddly this is _only_ for
 `editor-buttons`:

 {{{#!xml
 <link rel='stylesheet' href='…' media='all' />
 <style>
 wp-example { content: "inline:dashicons" }wp-example { content:
 "inline:revisions" }wp-example { content: "inline:editor-buttons" }
 </style>
 }}}

 Notice that the inline styles from the previous concatenated script is
 included here, plus the additional `editor-buttons` inline style.

 **The concatenated inline styles should not be repeated in this block.**

 Even if `editor-button` does not have inline styles, the original
 concatenated inline styles will be output again after the `editor-buttons`
 concatenated style link.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63908>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform