Macros that load custom CSS are not properly synchronized

Macros are often loading their own CSS styles. Without these styles the macro output looks bad. Take for instance this Velocity macro:

{{velocity}}
{{html clean="false"}}
$xwiki.ssfx.use('uicomponents/pagination/pagination.css', true)
<div>
  Pagination
  <span class="controlPagination">
    <a title="Previous Page" class="noPrevPagination" href="#"><span class="hidden">Previous Page</span></a>
    <a title="Next Page" class="noNextPagination" href="#"><span class="hidden">Next Page</span></a>
  </span>
</div>
{{/html}}
{{/velocity}}

Without the styles the previous and next page buttons are not properly displayed. The problem is that these styles are loaded from the HTML page head which is currently not synchronized by the realtime WYSIWYG editor. So when one user inserts such a macro the other users will receive the HTML output of the macro but not the CSS styles, so the macro won't be displayed correctly for them.