Combined CSS File


#1

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


#3

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.


#4

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


#5

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


#6

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

All of the buttons like this:
56

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

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

Trudi


#7

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


#8

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


#9

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!


#10

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


#11

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.


#12

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


#13

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


#14

@ryantbrown, your portal should be disabled now.


#15