I noticed an error when using the optimised assets (specifically stylesheets), whereas the tag generated to load the stylesheet contains a conflicting character :
Here is how it looked when I copy/paste it from my generated build : <link rel="preload" as="style" onload='this.onload=null;this.rel=\'stylesheet\" href="{{ config.stylesheet }}"/>
(Notice this part : this.rel=\'stylesheet\" where the quote is not the appropriate one).
Here is how it “looks” from the DOM : <link rel="preload" as="style" onload='this.onload=null;this.rel=\'stylesheet\'' href="{{ config.stylesheet }}"/>
This error prevents the stylesheet to be loaded appropriately.
So, I’ve checked this out and you’re right, it’s absolutely a bug at our end. I can’t provide you with an ETA but I’ve cross-linked this discussion for you so if/when this is fixed, you’ll be informed.
In the meantime, if this is a truly breaking change and you need optimisation, you may wish to look for a DIY solution. For example, there’s the Gatsby image processor and a plethora of other, more tailored options for you to explore based on what you desire.
Short term (and I recognise this may be a daft suggestion) but not using link refs might be the only way to swerve this.
Glad to hear it’s acknowledged! Is there some workaround, like disabling asset post-processing, that might help in the meantime?
Just to bring some context, I am trying to use Filament Group’s async CSS load, and I get this output: <link rel="stylesheet" media="print" onload="this.media=\" all\''="" href="/path/to/my.css">
My workaround is to attach an id attribute to the tag and run a script right below it that provides the same result; it’s just not as “clean”.
Hey Perry, thanks for your answer! While disabling post-processing didn’t resolve my issue, the workaround will do the trick for now. It’s lightweight enough. I’ll definitely keep an eye out for an announcement around this, thank you kindly!