Description
Currently user added custom CSS (Editor > Styles > Additional CSS) is appended to the global styles in the gutenberg_enqueue_global_styles() function, and then loaded on the front-end via the wp_enqueue_scripts action hook.
This works well most of the time to fill in the gaps of what can be styled using the block controls.
An issue occurs when a third party plugin enqueues a stylesheet via wp_enqueue_scripts without specifying a priority.
In this case the plugin stylesheet is loaded after the outputted global styles containing the user's custom CSS, causing the plugin's stylesheet to take priority and any user added custom CSS will not be able to override the plugin styles without using the !important rule.
I can understand that is is desirable for any plugin to be able to override the global styles, but IMO any user added custom CSS should be abe to override both global styles and the plugin styles.
The user may not be aware that their own custom CSS can only generally override the global styles and not other third party styling, especially if a plugin only enqueues a stylesheet in the front end and not the editor. In this case the custom CSS appears to work in the editor but will not work as expected on the front end.
To accomplish this, wouldn't it make more sense to separate out the custom CSS into it's own function which would then be enqueued after other plugins' enqueued stylesheets?