CMS Development

madsmoller
Member

Inline css issues

SOLVE

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 Accepted solutions
Anton
Solution
Thought Leader | Partner
Thought Leader | Partner

Inline css issues

SOLVE

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

View solution in original post

melindagreen
Solution
Contributor | Platinum Partner
Contributor | Platinum Partner

Inline css issues

SOLVE

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

View solution in original post

Jnix284
Solution
Hall of Famer

Inline css issues

SOLVE

@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

View solution in original post

TomM2
Solution
Thought Leader | Platinum Partner
Thought Leader | Platinum Partner

Inline css issues

SOLVE

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.


View solution in original post

4 Replies 4
melindagreen
Solution
Contributor | Platinum Partner
Contributor | Platinum Partner

Inline css issues

SOLVE

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
Solution
Thought Leader | Partner
Thought Leader | Partner

Inline css issues

SOLVE

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
Solution
Thought Leader | Platinum Partner
Thought Leader | Platinum Partner

Inline css issues

SOLVE

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
Solution
Hall of Famer

Inline css issues

SOLVE

@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