Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

unused data-astro-image styles #12868

Open
1 task
phelix3948 opened this issue Dec 31, 2024 · 4 comments
Open
1 task

unused data-astro-image styles #12868

phelix3948 opened this issue Dec 31, 2024 · 4 comments
Labels
needs triage Issue needs to be triaged

Comments

@phelix3948
Copy link

phelix3948 commented Dec 31, 2024 •
edited
Loading

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.

Screenshot from 2024-12-31 19-49-04

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 github-actions bot added the needs triage Issue needs to be triaged label Dec 31, 2024
@florian-lefebvre florian-lefebvre added the needs repro Issue needs a reproduction label Jan 1, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jan 1, 2025

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.

@github-actions github-actions bot removed the needs triage Issue needs to be triaged label Jan 1, 2025
@my-astro
Copy link

my-astro commented Jan 2, 2025

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);
}

@my-astro
Copy link

my-astro commented Jan 4, 2025 •
edited
Loading

@florian-lefebvre Hi Florian! I’ve accidentally reproduced the error on my working project. Please inspect my repo https://github.com/my-astro/double-style-tags

Here is a deployed page, please note that the <head> has two <style> tags, one of which is inlined despite I’ve specified inlineStylesheets: "never”,.

For context: both style tags are the same, but one of them has comments, I’ve met such comments in experimental features (I do not use any), might be a hint.

Also if it will help, depending on what integrations you use the file can be named:
index.CVYE6UPY.css – on a fresh project
generic.CVYE6UPY.css – when you have netlify adapter
image.CVYE6UPY.css – when you use content collection with an image helper function

Here is the one that is located in file dist/_astro/image.CVYE6UPY.css:

[data-astro-image] {
  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);
}

And here is the one that is inlined:

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

P.s. to create a project I use npm create astro@latest PROJECT_NAME -- --template minimal --yes —yes. And if get it correctly, the standard CLI does not give you “minimal” option anymore, but you still can create that template through the command.

@my-astro
Copy link

my-astro commented Jan 4, 2025

@florian-lefebvre some more testings. I’ve created fresh project (this time without flags -- --template minimal --yes —yes, there was no difference. But I made a repo on the stage were I did add mdx and content collection, but did not add Astro DB. So on that stage I have one file in the path dist/_astro/image.CVYE6UPY.css

[data-astro-image] {
  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);
}

On build I have weird files with the same names, but one of them has backwards slash in the name:

<link
  rel="stylesheet"
  href="https://static-2.pages.dev/_astro/image.CVYE6UPY.css"
/><link
  rel="stylesheet"
  href="/https://static-2.pages.dev/_astro/image.CVYE6UPY.css"
/>

I think the problem might be in assetsPrefix: “PLACEHOLDER“ configuration. Cause when I deployed this version, I am seeing this error in the console Did not parse stylesheet at 'https://static-2.pages.dev/https://static-2.pages.dev/_astro/image.CVYE6UPY.css' because non CSS MIME types are not allowed in strict mode., Like it uses two urls in a row.

I’ve tested the build without assetsPrefix, and everything renders without duplication:

<!doctype html><link rel="stylesheet" href="/_astro/image.CVYE6UPY.css" />
<p>Hubpage: Category 1</p>
<h1 id="one">One</h1>
<img
  src="/_astro/post.CozdapGj_16SI0C.webp"
  alt="One"
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

@florian-lefebvre florian-lefebvre added needs triage Issue needs to be triaged and removed needs repro Issue needs a reproduction labels Jan 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs triage Issue needs to be triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@florian-lefebvre @my-astro @phelix3948