Product
Enterprise
Solutions
DocumentationPricing
Resources
Book a DemoSign InGet Started
Product
Solutions
Solutions
Blog |Fixing ad blockers breaking CSS Styling in Astro

Fixing ad blockers breaking CSS Styling in Astro

API Governance  |  Mar 9, 2023  |  7 min read  |  By Treblle Staff

Summarize with
Fixing ad blockers breaking CSS Styling in Astro image

In this article, I show how I resolved an issue in the Treblle Docs built with Astro where the CSS styles were not being applied for some visitors of the docs because they had ad blockers on.

Ever had one of those "It works on my machine" moments? Well, I had one of those quite recently; in all fairness, it also worked on other people's machines but it didn't work on others.

After deploying the Treblle Docs in time for Treblle 2.0 release, everything was all fun and good as I used one of my favorite technologies lately - Astro - to build the docs in record time.

However, fast-forward a couple of months and one Treblle user mentioned that the docs were broken for him.

So Instead of this 👇🏾

Beautifully styled Treblle docs 😌

This was what he was seeing 👇🏾

Unstyled Treblle docs 😢

You can imagine my horror as I have so much pride in those docs - why shouldn't I? it's super good in my opinion.

I did some probing and asking around and someone mentioned asking the user if he has an ad blocker on, I hesitated thinking "how can an ad blocker cause such mayhem? 🤔"

Well, I did ask the user, and good enough he did have an ad blocker on. I proceeded feeling good telling them to turn it off. Can you see the problem already?

Asking a user to turn off their ad blocker just to use your docs doesn't sound good at all. That's too much overhead if you ask me. But at the time, I decided to shrug it off as a one-off (how dare they use an adblocker, I thought 😅)

A couple of more days passed, and I shared the Treblle docs Integrations page in a Discord community I am a part of, someone in there also complained about the CSS styling being broken, and sure enough, he had an ad blocker on 😏.

Well at this point I was irritated and very much perplexed. I couldn't figure out for the life of me why ad blockers will be blocking CSS styling on a page. I had questions:

  • Is the Treblle Docs perceived as an ad by these blockers?
  • Was there a bug in Astro that's responsible for this?
  • Am I going to have to switch the docs from Astro? (I know right, I was paranoid at this point 😅t)

Anyways, I went on improving the docs while having this problem at the back of my mind. As I made some more updates like incrementally migrating the styling of the docs to Tailwind CSS.

I think folks don't know quite grasp how @tailwindcss makes your workflow super easy and lets you move quickly.

My God! I have been dragging my feet implementing responsiveness on a section of the @treblleapi docs website because the template used CSS files and I have to go… https://t.co/jUaLO177Q9 pic.twitter.com/iWdEA2xYBn

— K.O.O (@Dominus_Kelvin) March 8, 2023

I decided to ask in the Astro discord if anyone else has encountered this issue. I shared the link to the Treblle docs and within moments we figured it out and it was those "wtf?" moments.

API Analytics is breaking the docs.

I have noticed that the CSS files in the link elements on the pages head section when Astro builds the docs for production were named api-analytics.[hash].css, I didn't pay it any mind because that was a page on the docs - but it sorts of felt curious but I didn't think much of it, to be honest.

Generated CSS files having api-analytics in the filenames

So, this is why this was happening: When Vite uses Rollup to build the Astro project for production, it uses the name of the first file it bundles as the name for your assets so in the case of the Treblle docs, the first file (which can be a component or a Markdown file) was api-analytics.md

It turns out that part of how ad blockers work is to look for resources being downloaded in a page request and block the download of resources that have the words analytics, ad, advertisement, etc. Well, I didn't know this because I hadn't used an ad blocker before so that was a learning moment for me.

How do we fix this?

The first obvious fix for this was to rename the offending file - api-analytics.md and this was suggested in the Astro Discord.

The problem with that is, the file in question is explaining a core feature of Treblle and I wasn't about to rename it as the name of the file is also going to be used as part of the URL to that feature explanation on the docs. So yeah, that wasn't an option.

So how can this be resolved in a way that doesn't involve Treblle losing a feature? 😅

Customizing how Astro output filenames

So, while we were brainstorming on the Astro Discord how to turn off the output of the CSS file being api-analytics.[hash].css, someone mentioned:

The file generation can be changed.

I thought: "ah, you took the words out of my mouth" but how?

As it turns out, Astro - having exceptional docs - has already mentioned how to customize the output filenames for the exact scenario I was having. Here is what the Astro docs said:

For code that Astro processes, like imported JavaScript or CSS files, you can customise output filenames using entryFileNames, chunkFileNames, and assetFileNames in a vite.build.rollupOptions entry in your astro.config.* file.

It went further to say the reason why this might be helpful:

This can be helpful if you have scripts with names that might be impacted by ad blockers (e.g. ads.js or google-tag-manager.js).

OMG! That makes perfect sense, right? Yeah, I know. Now the obvious choice was to just customize the output name for the *.css files but I felt that was shortsighted as probably this might still crop up in the future for perhaps *.js files.

I opted to customize the entire asset output and this is how I did it:

I edited the Astro config file in the Treblle docs project - astro.config.mjs and added the following config as suggested by the Astro docs

import { defineConfig } from 'astro/config'
 
export default defineConfig({
  vite: {
    build: {
      rollupOptions: {
        output: {
          entryFileNames: 'entry.[hash].js',
          chunkFileNames: 'chunks/chunk.[hash].js',
          assetFileNames: 'assets/asset.[hash][extname]',
        },
      },
    },
  },
})

The part of the config we are interested in, is this bit 👇🏾

rollupOptions: {
    output: {
        entryFileNames: 'entry.[hash].js',
        chunkFileNames: 'chunks/chunk.[hash].js',
        assetFileNames: 'assets/asset.[hash][extname]',
    },
 }

So what's happening? We are telling Rollup that when it outputs entryFileNames it should prefix them with the word "entry" followed by a "period" and a hash rollup will generate before the ".js" extension.

For chunks, we follow the convention chunks/chunk.[hash].js - you may already see the pattern that [hash] is the only unique bit here.

Lastly and the part which directly solves the problem with the CSS styling not loading on the Treblle docs is this bit: assetFileNames: 'assets/asset.[hash][extname]'

You may notice it wasn't assets/asset.[hash].[extname] as you may expect(I did too), this is because extname also has the . separator so it will output like .css for example.

So, after making the changes described above, I rebuilt the Treblle docs in production and sure enough, the problem was fixed as the filename for the CSS files was no longer api-analytics.[hash].css but now as we specified, it was now asset.[hash].css.

CSS files using asset.[hash].css as filenames

Conclusion

This issue was indeed a learning moment as I got to understand a bit of how ad blockers work and how they might have unintended consequences. Plus I got to learn a little bit about how Vite uses Rollup to build assets in Astro works.

I hope this helps you if you ever have such an issue with your Astro websites; it won't take you as long as it took me to fix it 😀.

I've got to also thank the Astro community for being so helpful.

Oh, by the way, you can now turn on your ad blocker if you have one and visit the Treblle docs and you can be sure not to see an unstyled page! 😁

Related Articles

How AI Can Help Automate API Governance and Compliance coverAPI Governance

How AI Can Help Automate API Governance and Compliance

Managing APIs at scale is harder than ever. Manual governance can’t keep up with growing complexity, compliance demands, and security risks. In this article, we explore how AI can transform API governance—making it smarter, faster, and fit for modern teams.

Saving Millions with API Governance coverAPI Governance

Saving Millions with API Governance

APIs are the backbone of modern systems—but without governance, they can become your biggest liability. In this guide, we break down how engineering and product teams can avoid costly breaches by building API governance into every stage of the lifecycle.

What’s new in Treblle 3.0: WSO2 Integration coverAPI Governance

What’s new in Treblle 3.0: WSO2 Integration

Observability is key to optimizing APIs. With Treblle 3.0’s integration with WSO2 API Manager, you gain real-time insights and streamline workflows. This powerful pairing simplifies API tracking, enhances visibility, and helps you spot issues faster—taking your API performance to the next level.

© 2025 Treblle. All Rights Reserved.
GDPR BadgeSOC2 BadgeISO BadgeHIPAA Badge