unused data-astro-image styles

[phelix3948]

Astro Info

Astro                    v5.1.1
Node                     v20.18.1
System                   Linux (x64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/tailwind
                         astro-icon
                         @astrojs/sitemap

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I see it generates some data-astro-image styles that are not used by me.

i just use <img tags to link images from public folder.
but how to disable these unused styles inserted on top of each page?
I've tried this, but it won't work:

astro config:

experimental: {
    responsiveImages: false
  },

What's the expected result?

no data-astro-image styes inserted anywhere, because I am not using any <Image, <Picture. I just use <img

Link to Minimal Reproducible Example

Participation

• I am willing to submit a pull request for this issue.

[github-actions]

Hello @phelix3948. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[my-astro]

I was going to create the same issue.

So:

Netlify adapter creates two duplicate inline <style> tags OP listed. This style might be called either generic.CVYE6UPY.css or image.CVYE6UPY.css (I’ve noticed that it is called image... in my current project and generic… in the demo for reproduction. Sadly I can not create a repro cause my project has too many integrations to isolate the problem.

The problem with those styles is that Astro can add multiple instances of the same <style> tag and if you have configured inlineStylesheets: “never” , one of the <style> tags will ignore it. That leads to being open to XSS-attacks and also mess up my strict CSP rule (cause by default CSP blocks all inline styling.

I’ve tested it with Cloudflare adapter and no styles were created.

How the code looks on almost empty project:

  width: 100%;
  height: auto;
  object-fit: var(--fit);
  object-position: var(--pos);
  aspect-ratio: var(--w) / var(--h);
}
[data-astro-image="responsive"] {
  max-width: calc(var(--w) * 1px);
  max-height: calc(var(--h) * 1px);
}
[data-astro-image="fixed"] {
  width: calc(var(--w) * 1px);
  height: calc(var(--h) * 1px);
}