Inline css issues

[madsmoller]

Our sites have CSS inlined in the source code instead of generating a link to the css file. Our theme uses the following to add the css as a link.

{{ require_css(get_asset_url('../css/main.css')) }}

How do I change this behaviour?
We would like all those css lines in a css file and cached by CDN.


We have talked with the Theme Developer and they told us that its an issues in Hubspot for some of their clients.

[Anton · Accepted solution]

Hi @madsmoller, 

yes. This is currently happening for several people in several portals. @TomM2 noticed this a few days ago. 
Let's include a few other devs from the community to this so they can check their portals @Jnix284, @Teun, @melindagreen. 

Two things I've tested the last couple of days:

{{ require_css(get_asset_url('../css/main.css')) }}
{# or theme-override.css #}

are getting "inlined" with this method. 

• Renaming it to something that is not main.css or theme-overrides.css(like combined-styles.css or customization.css) might help but I don't suggest to do this unless you really know every file of your theme
• I'm loading my css files differently on my website that's why I was very surprised when @TomM2 mentioned that in a chat...

For anyone wondering how I'm loading my CSS:

<link rel="preload" href="{{ (get_asset_url("../../css/main.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/main.css")) }}">
</noscript>

<link rel="preload" href="{{ (get_asset_url("../../css/theme.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/theme.css")) }}">
</noscript>

My recommendation:

Since this seems to be a bug/hickup that affects quite a lot of portals - HubSpot might be already working on a bug-fix. Therefore I wouldn't change anything in the next couple of days/September.

best, 

Anton

Edit:
I'm also tagging a few dev-community moderators. Maybe they have some insights on this or can help forward this issue towards HubSpot. 
@Jaycee_Lewis, @kennedyp 

[melindagreen · Accepted solution]

I'm not seeing it happen, even when I recompile my CSS files to the "possibly offending" filenames, but I have a fairly custom setup in the first place -- almost all of my theme builds are 100% bespoke and I've ripped out all of the theme overrides and theme options because our agency builds each theme for a single brand.

So at least this indicates that the problem is not 100% based on file name.......

[Jnix284 · Accepted solution]

@Anton for child themes, I change the require_css to:

    {% set overwrite_child_css_path = '../../child.css' %}

which forces the child.css to have the highest precedent in the theme and this is how it's showing now:

All of the theme CSS are either inline or like the above, with a few exceptions:

I know without doubt that this was not the case previously and something has changed, this was flagged in Lighthouse and wasn't an issue before:

[melindagreen · Accepted solution]

I'm not seeing it happen, even when I recompile my CSS files to the "possibly offending" filenames, but I have a fairly custom setup in the first place -- almost all of my theme builds are 100% bespoke and I've ripped out all of the theme overrides and theme options because our agency builds each theme for a single brand.

So at least this indicates that the problem is not 100% based on file name.......

[Anton · Accepted solution]

Hi @madsmoller, 

yes. This is currently happening for several people in several portals. @TomM2 noticed this a few days ago. 
Let's include a few other devs from the community to this so they can check their portals @Jnix284, @Teun, @melindagreen. 

Two things I've tested the last couple of days:

{{ require_css(get_asset_url('../css/main.css')) }}
{# or theme-override.css #}

are getting "inlined" with this method. 

• Renaming it to something that is not main.css or theme-overrides.css(like combined-styles.css or customization.css) might help but I don't suggest to do this unless you really know every file of your theme
• I'm loading my css files differently on my website that's why I was very surprised when @TomM2 mentioned that in a chat...

For anyone wondering how I'm loading my CSS:

<link rel="preload" href="{{ (get_asset_url("../../css/main.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/main.css")) }}">
</noscript>

<link rel="preload" href="{{ (get_asset_url("../../css/theme.css")) }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript>
   <link rel="stylesheet" href="{{ (get_asset_url("../../css/theme.css")) }}">
</noscript>

My recommendation:

Since this seems to be a bug/hickup that affects quite a lot of portals - HubSpot might be already working on a bug-fix. Therefore I wouldn't change anything in the next couple of days/September.

best, 

Anton

Edit:
I'm also tagging a few dev-community moderators. Maybe they have some insights on this or can help forward this issue towards HubSpot. 
@Jaycee_Lewis, @kennedyp 

[TomM2 · Accepted solution]

Thanks for the tag @Anton ! 

Just confirming from a theme developer who is experiencing this there have been no changes to the theme. 

There are other people not using this theme who seem to be experiencing this. 

I've seen this happen on marketing hub pro, content hub pro, content starter, and legacy marketing ent portals. 

I'd say I first noticed it around last week (probablt Aug 26 at the earliest). 

[Jnix284 · Accepted solution]

@Anton for child themes, I change the require_css to:

    {% set overwrite_child_css_path = '../../child.css' %}

which forces the child.css to have the highest precedent in the theme and this is how it's showing now:

All of the theme CSS are either inline or like the above, with a few exceptions:

I know without doubt that this was not the case previously and something has changed, this was flagged in Lighthouse and wasn't an issue before: