[Assets Optimisation] Stylesheet preload : invalid character

Hey!

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.

Hey @ekrz,

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.

2 Likes

Hello,

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”.

Best,
Chris

you can definitely try disabling post-processing and see if that helps - that option is available in the UI.

Do let us know, and we’ll definitely be in touch as soon as anything changes with this on our end.

1 Like

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. :slight_smile: I’ll definitely keep an eye out for an announcement around this, thank you kindly!

The workaround, for anyone interested:

<link rel="stylesheet" href="/path/to/my.css" media="print" id="async-css">
<script>document.getElementById('async-css').onload=function(){this.media='all'}</script>
<noscript><link rel="stylesheet" href="/path/to/my.css" media="all"></noscript>
1 Like