CMS Development

madsmoller
Membro

Inline css issues

resolver

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.


4 Solução aceitas
Anton
Solução
Autoridade no assunto | Parceiro
Autoridade no assunto | Parceiro

Inline css issues

resolver

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 

Anton Bujanowski Signature

Exibir solução no post original

melindagreen
Solução
Top colaborador(a) | Parceiro Platinum
Top colaborador(a) | Parceiro Platinum

Inline css issues

resolver

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

Exibir solução no post original

Jnix284
Solução
Membro do Hall da Fama

Inline css issues

resolver

@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:

Jnix284_0-1725637292714.png

 

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

Jnix284_1-1725637363186.png

 

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:

Jnix284_2-1725637496065.png

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon

Exibir solução no post original

TomM2
Solução
Autoridade no assunto | Parceiro Platinum
Autoridade no assunto | Parceiro Platinum

Inline css issues

resolver

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

Tom Mahon
Technical Consultant | Solutions Engineer | Community Champion
Baskey Digitial

Book a consultation

Did my post help answer your query? Help the community (and me) by marking it as a solution.


Exibir solução no post original

4 Respostas 4
melindagreen
Solução
Top colaborador(a) | Parceiro Platinum
Top colaborador(a) | Parceiro Platinum

Inline css issues

resolver

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
Solução
Autoridade no assunto | Parceiro
Autoridade no assunto | Parceiro

Inline css issues

resolver

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 

Anton Bujanowski Signature
TomM2
Solução
Autoridade no assunto | Parceiro Platinum
Autoridade no assunto | Parceiro Platinum

Inline css issues

resolver

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

Tom Mahon
Technical Consultant | Solutions Engineer | Community Champion
Baskey Digitial

Book a consultation

Did my post help answer your query? Help the community (and me) by marking it as a solution.


Jnix284
Solução
Membro do Hall da Fama

Inline css issues

resolver

@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:

Jnix284_0-1725637292714.png

 

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

Jnix284_1-1725637363186.png

 

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:

Jnix284_2-1725637496065.png

 


If my reply answered your question please mark it as a solution to make it easier for others to find.


Jennifer Nixon