Combined CSS File

[tmorris]

Hello,

I've been implementing a site which uses the blogging functionality of Hubspot. However it pulls the site styles, navigation and footer from the main site (which use Statamic as its CMS).

This was all working perfectly, however I now have the following CSS file being included on the Blog archive page:

hs-fs/css/4504015/hub_generated/template_assets/1539478910704/combined-css-eabcbab22fa581af0685d7a7bdcdcdca.css

My CSS is being included in the blog archive page using the require_css function but is being stripped out and being replaced with the file above. This is causing my styles to be out of date and makes development incredibly frustrating.

Does anybody know why this is happening and how I can stop it?

Kind Regards,

Trudi

[tmorris]

Hi @Connor_Barley

Please could we go with option 3. We will minify and cache our own css on our side. The performance benefit is negligible compared to the cost of not seeing our external CSS update.

As a side note this wasn't an issue when we started developing the site and only became an issue at the beginning of this week (though we have had annual leave etc in the office so it may have occurred a week or so earlier than us noticing).

Kind regards

Trudi

[cbarley]

Hi @tmorris,

It likely wasn't an issue at first because the combination tool takes a bit of time to take effect. If there are any changes to the HubSpot hosted CSS files that are being combined, the stylesheets will uncombine, then attempt to recombine later. It's likely when you were developing previously, your stylesheets might not have been combined yet, but that's just my educated guess.

I just reached out to our team to re-gate your portal for combination. Shouldn't be very long before you see that change.

[#4]

Hey Connor, I am running into this same issue. We are hosting assets on CloudFront and do not have any Hubspot CSS files to update and re-combine automatically. Can we disable combination for our site as well?

Also, the reason we are using AWS is that we can use the CLI to sync our assets to S3, is there a similar way to sync folders from a local machine to Hubspot? We might be able to use Hubspot's CDN if that can be automated.

Our Hubspot ID is 3834260 and the website is https://www.grin.co

Thanks,
Ryan

[cbarley · Accepted solution]

Hey @ryantbrown, let me see if we can get that disabled for you.

For others running into the same problem, please open up a new thread. We want to be able to track how many people run into this issue and sometimes replies on old threads can get lost.

Ryan, for your question on connecting folders from a local machine to HubSpot, you can use FTP: https://designers.hubspot.com/docs/tools/hubspot-ftp. You can also use the Files API to upload files to your File Manager: https://developers.hubspot.com/docs/methods/files/post_files

[cbarley]

@ryantbrown, your portal should be disabled now.

[tmorris]

Hi @cbarley 

Sorry to go back to this old thread but this is continuing to happen and it is making my development work on the site extremely frustrating.

We do not have any hubspot hosted CSS files to update and the cached version of my CSS is overriding my externally hosted CSS. I can refresh the page, clear the cache, work in incognito mode and use the hsDebug flag and I still see this file overriding my CSS with outdated code:

https://blog.wearepathfinder.com/hs-fs/hub/4504015/hub_generated/template_assets/1548765373161/Pathf...

We are hosting our CSS externally because it is used to style all of our non-hubspot pages as well and I don't want the file having to be maintained in two places. We are using Tailwind and need to be able to regenerate the CSS.

Could you investigate this issue for me? It is massively slowing down my development and causing a lot of frustration.

Kind Regards

Trudi

[cbarley]

Hi @tmorris . Apologies for the frustrations here! Checking on your page here: https://blog.wearepathfinder.com/, I'm not seeing that the CSS files are combined, so it doesn't look like that's the issue. I confirmed that we disabled combination on your account (4504015) so our combination tool shouldn't be causing any errors.

The caching times are a different story. To confirm, are you editing this CSS file inside HubSpot and seeing that the changes aren't showing up immediately? These changes should be close to immediate. I wonder if the massive size of the CSS file is causing the issue. 

We can't turn this off on our end, but I have one workaround method I use to force the uncached version. What I'll do is make a change in the stylesheet, publish, then refresh the page. If the style I'm expecting doesn't show, I'll add in a random query parameter to the URL, which should serve the uncached version. However, if I make another change, and refresh that same URL, that particular version when I first added the query param will be cached on that particular URL, so if the URL was www.example.com/?123, I'll make a change and then update the url to www.example.com/?1234. And so on. I'd try doing this in your development flow. It's definitely a workaround though, and I've already passed along feedback to our product team about it.

[tmorris]

Hi

Sorry I added the pathfinder.css file in to see if I could force the correct styling. We do not want any HubSpot hosted CSS files but as you say editing this file and saving it does correct our styling issues. I've now set it to:

body {
}

And saving it does clear the combined files. But I don't want to have to do this every time I want to change our external CSS. I'll use it as a workaround for now as its preferrable to adding a query param. 

Trudi

[tmorris]

Hi @Connor_Barley,

The CSS on our live site hasn't updated for over 24 hours now. This seems like an abnormally long time to cache the CSS for.

Adding ?hsDebug=True to the domain allows me to see the changes but if we have a CSS issue on our production site we don't want to wait this long for clients to see the change.

Is there any way I can force it to refresh? The CSS is changing on our Statamic side just fine and all of our CSS is combined in to a single stylesheet and minified anyway so only one request would be needed. We don't actually want or need any of the hubspot styling on the site, all of our styles come from within the Statamic site.

Kind regards,

Trudi

[cbarley]

Interesting, something cached for that long doesn't sound right. Usually the cache will clear within 5-10 seconds or less. There's no way to force the refresh on your end. And just as a clarifying point, the combined CSS doesnt add any styles, it just combines your stylesheets. There are default hubspot stylesheets that get included on every hubspot hosted site (very basic/global styles) that will also get combined with the rest of your styles, but it shouldn't affect what you see on your site.

Can you send me a page where this is happening, and what you're seeing / what we should be seeing instead? If possible, a couple screenshots would help

[tmorris]

Thank you for your reply. The site we're seeing this issue on is here:

Nordhaugr Ltd t/a Pathfinder.

Inbound Marketing Blog | Pathfinder

Pathfinder's inbound marketing blog shares the tips that help ambitions marketers nail inbound marketing.

All of the buttons like this:

What we should be seeing (and I do see when adding ?hsDebug=True) is:

We are seeing this issue even when using an Incognito Window (we're using Chrome).

Trudi

[cbarley]

Hey @tmorris, definitely unexpected. Reached out to our developers asking for clarification, or if we can turn of CSS combination on a portal-wide basis. Will reach out when I have more info

[tmorris]

Thank you very much for you help, I look forward to hearing back.

I'll use the hsDebug method for now when making changes

Kind regards

Trudi

[cbarley]

Hi @tmorris, working with our development team I got some clarification on a few things here. The CSS combining service does not listen for changes to externally hosted stylesheets, so if changes are made in an external stylesheet, we do not know to re-combine CSS which is why you're seeing this. We have one of three options, with 1 and 2 being more highly recommended than #3:

1. Host all of your CSS in HubSpot, do not worry about externally hosted stuff, and combined CSS will just work
2. When they update an external CSS file, also update a HubSpot hosted one to purge the combined-css cache, and trigger a re-combination -- so earlier when I said that we cannot manually disable this, this step would actually act as a way to purge your cache.
3. We can disable combined CSS for this portal, but you'll then miss out on this performance benefit.

Let me know what you'd like to do!

[cbarley]

Hi @tmorris, that's coming from our automatic CSS combination tool. This is automatic and can't be prevented. It's meant to speed up page load speeds by combining your css rules into one file, so that the browser makes only one request rather than several different requests.

If you're developing and seeing that your content is cached, you can add in the query parameter ?hsDebug=True to serve the separated stylesheets.