Relative URLs in cached CSS files are not properly resolved

[DAreRodz]

I've found that we cannot simply convert <link rel="stylesheet"> elements to <style> ones, which is what we currently do in our router (see this call and the fetchScriptOrStyle function).

The issue is that relative URLs present in the CSS document are relative to the CSS document, e.g.:

CSS document: /wp-content/plugins/my-plugin/assets/css/styles.css
Relative URL: ../fonts/my-font.woff
Final URL: /wp-content/plugins/my-plugin/assets/fonts/my-font.woff

However, if we simply extract the CSS code and place it inside a <style> tag, we lose the CSS document URL, so it uses the current page URL instead.

HTML document: /2023/03/my-post/
Relative URL: ../fonts/my-font.woff
Final URL: /2023/03/fonts/my-font.woff

That misses the file completely. 😅

[gziolo]

This bug looks familiar to what happened in WordPress core after Block-styles loading enhancements in WordPress 5.8 were added. In particular, the feature that inlines small assets. You can check the bug report here. Here is the fix WordPress/wordpress-develop#1752 applied to WordPress core.

You can also compare how assets are dynamically loaded for blocks registered with the inserter integrated with Block Directory. It's a very interesting use case because it works pretty similar to the client-side navigation, and in addition to that, it installs the plugin behind the scenes:

https://github.com/WordPress/gutenberg/blob/trunk/packages/block-directory/src/store/load-assets.js

[luisherranz]

I'm going to close this issue as part of the migration to the Gutenberg repository.

This task was added to the Roadmap and we'll reopen an issue/discussion once it's time to start working on this again.