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

Strange naming of css files #7469

Closed
1 task
niklasgrewe opened this issue Jun 24, 2023 · 15 comments · Fixed by #8754
Closed
1 task

Strange naming of css files #7469

niklasgrewe opened this issue Jun 24, 2023 · 15 comments · Fixed by #8754
Assignees
@bluwy
Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: styling Related to styles (scope)

Comments

@niklasgrewe
Copy link

niklasgrewe commented Jun 24, 2023 •
edited
Loading

What version of astro are you using?

2.6.6

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

i use a global.css file in my layout base.astro like this:

---
import '../styles/global.css'
---

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <slot></slot>
</body>
</html>

i use this base layout in my two pages index.astro and about.astro like this:

---
import Base from '../layouts/Base.astro'
---

<Base>
  <h1>Home page</h1>
</Base>

<style>
  h1 {
    color: red;
  }
</style>
---
import Base from '../layouts/Base.astro'
---

<Base>
  <h1>About page</h1>
</Base>

<style>
  h1 {
    color: black;
  }
</style>

when i build my simple site, i get the following css files:

  • index.[hash].css - homepage styles
  • about.[hash].css - styles from global.css file, imported in base.astro
  • about.[hash].css - about page styles

it is a bit strange that i have two about.[hash].css files.

What's the expected result?

i like that the css files are named according to the pages, but why are imported css files, like my global.css file not named according to their file name or the layout file name?

i wan to get the following css files:

  • index.[hash].css - homepage styles
  • global.[hash].css or base.[hash].css - styles from global.css file, imported in base.astro
  • about.[hash].css - about page styles

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wgxcan?file=src%2Fpages%2Fabout.astro

Participation

  • I am willing to submit a pull request for this issue.
@bluwy
Copy link
Member

bluwy commented Jun 25, 2023

This is currently expected. We derive the CSS file name by the first name of a list of pages that uses it, e.g. if both index and about uses it, the first (sorted alphabetically) page - about - would be the name.

I think it's somewhat possible to use the original file name, e.g. global.css, as the main name though, so will leave this open for now for investigation.

@bluwy bluwy added feat: styling Related to styles (scope) - P2: nice to have Not breaking anything but nice to have (priority) labels Jun 25, 2023
@andywwright
Copy link

andywwright commented Jul 6, 2023 •
edited
Loading

For now this is the only thing that feels wrong about Astro. This naming is very misleading and took me a while to investigate.

Why would anyone want to call xxx something that describes yyy? If it is used in most pages - just call it global. If you don't like to call it global - ​it is better to give it no name (a random string) rather than giving a misleading one forcing us to guess from a crystal ball that about.css actually means global.css

The same issue was simply closed as if it does not matter #5787

@Princesseuh Princesseuh mentioned this issue Jul 18, 2023
Closed
1 task
@jljorgenson18
Copy link

I agree. I thought something was broken since my css file was named after some random page despite being a global css file. It seems like it should ideally just be called the same name as the original file name (with a hash) or else it could confuse people.

@lilnasy
Copy link
Contributor

lilnasy commented Aug 31, 2023

I agree the naming could be made better. However, it can't be the original file name because a chunk is often made by combining multiple files and sources.

@do-web
Copy link

do-web commented Sep 2, 2023

Please fix it, cause it feels so wrong and broken.

@Princesseuh Princesseuh mentioned this issue Sep 14, 2023
Closed
1 task
@bluwy bluwy self-assigned this Oct 2, 2023
@bluwy bluwy mentioned this issue Oct 5, 2023
Merged
@Michael0520 Michael0520 mentioned this issue Dec 17, 2023
Closed
1 task
@Michael0520
Copy link

Has this issue been fixed correctly?
Because I still have the same problem

@karesztrk
Copy link

Has this issue been fixed correctly? Because I still have the same problem

Same. So far, I'm aware of Rollup assetfilenames. But its cumbersome.

@Kirshach
Copy link

Just encountered the same issue, if I may call it so, in Astro 4.5.2, was thinking I was doing something wrong. Would be good to somehow name the output file more appropriately by default

@faizananwerali
Copy link

same thing happend to me, it shouldn't merge them into one, keep them seperate chunks for each page to avoid Eliminate render-blocking resources issue.

@drag0n-app
Copy link

same issue :(

@mschoeffmann mschoeffmann mentioned this issue Jul 22, 2024
Closed
1 task
@mschoeffmann
Copy link

mschoeffmann commented Aug 3, 2024 •
edited
Loading

I just created an integration for this: https://www.npmjs.com/package/astro-generic-build-filenames

@cmnstmntmn
Copy link

same issue after so long time. any updates?

@olliefwilliams
Copy link

I just got confused by this issue. Would appreciate any of the suggestions made above.

@florian-lefebvre florian-lefebvre marked this as a duplicate of #13132 Feb 4, 2025
@pippaine
Copy link

pippaine commented Feb 4, 2025

The current naming scheme is quite confusing when debugging style issues - I was chasing down a rabbit hole for a full day because of this. PR #8754 addressed some confusion (like "404" names), but the core issue of misnamed layout styles remains. Reproduction case of the current behavior in #13132.

Thanks to @mschoeffmann - your integration improves the confusing names, but I also see from #334 that it should prevent deployment headaches on cloudflare. Might have saved me from running into that wall later.

Since this naming problem continues to confuse new developers, it might be worth reconsidering closing issues when core problems remain unresolved.

@niconiahi
Copy link

I agree with the naming. It's totally unexpected behaviour in my opinion. The production files should just fingerprint the .css files while maintaining the name.

it's the only weird thing about astro for now

https://discord.com/channels/830184174198718474/1337533512391331982

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bluwy bluwy

Labels
- P2: nice to have Not breaking anything but nice to have (priority) feat: styling Related to styles (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Make CSS chunk names less confusing withastro/astro