Prioritize stylesheets to decide which are concatenated and which are excluded #2322
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
While stylesheets are being concatenated together for
style[amp-custom], as soon as the the total reaches 50KB then all subsequent stylesheets are excluded. Each excluded stylesheet raises anexcessive_cssvalidation error.This is wrong, and it leads to a very bad user experiences. Case in point is when the admin bar is being displayed on AMP pages, as the CSS for dashicons and admin bar get added before the CSS for the theme's stylesheet. Since the
admin-bar.cssis huge, this often results in the theme's ownstyle.cssbeing excluded, leading to completely broken templates. This is a big reason for why this admin-bar toggle exists in the first place:For example, on Twenty Nineteen with Jetpack running and the admin bar shown, the scripts added are:
On an AMP page, the result is:
The most important stylesheet of all is the one being excluded!
At least the admin bar looks good! 😕
So what is needed is to introduce a sense of priority weights for the stylesheets as they are selected for concatenation.
Given the stylesheets loaded above:
The priority order should be something like:
So the prioritized categories:
style.css) which haveall/screenmediastyle.css) which haveall/screenmediawp-block-libraryandwp-block-library-theme), including the ones included by Gutenbergall/screenmedia)styleelements and attributesprintmediaThis should greatly reduce the frequency of templates appearing completely broken when CSS is being excluded.
The prioritization could be indicated when displaying the manifest of the stylesheets in
style[amp-custom](including on validated URL admin screen: #2169).Bonus: once we get to the admin bar CSS and we determine it cannot be loaded, then we can automatically remove the admin bar from the page. (Which is an alternative to #1921.)
The text was updated successfully, but these errors were encountered: