Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Prioritize stylesheets to decide which are concatenated and which are excluded #2322
While stylesheets are being concatenated together for
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
For example, on Twenty Nineteen with Jetpack running and the admin bar shown, the scripts added are:
<link rel='stylesheet' id='twentynineteen-jetpack-css' href='https://wordpressdev.lndo.site/content/plugins/jetpack/modules/theme-tools/compat/twentynineteen.css?ver=1557447387' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://wordpressdev.lndo.site/core-dev/src/wp-includes/css/dashicons.css?ver=5.3-alpha-45282-src' type='text/css' media='all' /> <link rel='stylesheet' id='admin-bar-css' href='https://wordpressdev.lndo.site/core-dev/src/wp-includes/css/admin-bar.css?ver=5.3-alpha-45282-src' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://wordpressdev.lndo.site/content/plugins/gutenberg/build/block-library/style.css?ver=1557873353' type='text/css' media='all' /> <link rel='stylesheet' id='wp-block-library-theme-css' href='https://wordpressdev.lndo.site/content/plugins/gutenberg/build/block-library/theme.css?ver=1557873353' type='text/css' media='all' /> <link rel='stylesheet' id='twentynineteen-style-css' href='https://wordpressdev.lndo.site/core-dev/src/wp-content/themes/twentynineteen/style.css?ver=1.4' type='text/css' media='all' /> <link rel='stylesheet' id='twentynineteen-print-style-css' href='https://wordpressdev.lndo.site/core-dev/src/wp-content/themes/twentynineteen/print.css?ver=1.4' type='text/css' media='print' />
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:
This 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
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.)