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

CSS output name will change when import large css from node_modules #12256

Closed
7 tasks done
guoyunhe opened this issue Mar 2, 2023 · 4 comments
Closed
7 tasks done

CSS output name will change when import large css from node_modules #12256

guoyunhe opened this issue Mar 2, 2023 · 4 comments
Labels
duplicate This issue or pull request already exists

Comments

@guoyunhe
Copy link

guoyunhe commented Mar 2, 2023 •
edited

Describe the bug

In my case, HTML and assets are from different servers. So I configured vite to always generate build/index.css. When doing code spliting, Vite will nicely output:

build/index.css <- the entry
build/index2.css
build/index3.css

However, when I imported some large css, like this:

import 'bootstrap/dist/css/bootstrap.css';

...

The css output changed to:

build/index.css
build/index2.css
build/index3.css <- the entry

HTML output:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/index.js"></script>
    <link rel="stylesheet" href="/index3.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Reproduction

https://stackblitz.com/edit/vitejs-vite-dxxltr?file=build/index.html

Steps to reproduce

  1. Run npm run build and check build/index.html. It imports build/index3.css.
  2. Remove line import 'bootstrap/dist/css/bootstrap.css'; from main.js.
  3. Run npm run build and check build/index.html. It imports build/index.css.

System Info

System:
    OS: macOS 13.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 760.54 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 9.3.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 110.0.5481.177
    Edge: 110.0.1587.57
    Firefox: 110.0
    Safari: 16.2
  npmPackages:
    @vitejs/plugin-react-swc: ^3.0.1 => 3.2.0 
    vite: ^4.0.4 => 4.1.4

Used Package Manager

npm

Logs

No response

Validations
@stackblitz
Copy link

stackblitz bot commented Mar 2, 2023

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@guoyunhe guoyunhe changed the title CSS output name will change when import styles from node_modules CSS output name will change when import large styles from node_modules Mar 2, 2023
@guoyunhe guoyunhe changed the title CSS output name will change when import large styles from node_modules CSS output name will change when import large css from node_modules Mar 2, 2023
@sun0day
Copy link
Member

sun0day commented Mar 2, 2023 •
edited

I found another problem: similar to #11911, this reprodution will generate non-deterministic css files in a certain chance due to the parallel renderChunk of css-post plugin. Would it be possible to change the renderChunk from parallel to sequential? @bluwy @sapphi-red

@guoyunhe
Copy link
Author

guoyunhe commented Mar 2, 2023

I know, people like to use index.ts everywhere:

src/index.ts
src/pages/home/index.ts
src/pages/about/index.ts
src/pages/login/index.ts

That is why we encounter this issue.

Rollup's chunk name config option gives only name and type, not original file path. So we cannot name those chunks based on their parent directory.

Ideally, Vite or rollup can do first-come-first-take. If index has been taken by a chunk, next trunk have to check for parent directory for a different name. As a result:

build/index.js
build/home.js
build/about.js
build/login.js

Much better than:

build/index.js
build/index2.js
build/index3.js
build/index4.js

@sapphi-red sapphi-red mentioned this issue Mar 17, 2023
Closed
@sapphi-red
Copy link
Member

I'll close this issue as a duplicate of #11911 and rollup/rollup#4858.

@sapphi-red sapphi-red closed this as not planned Won't fix, can't repro, duplicate, stale Mar 21, 2023
@sapphi-red sapphi-red added duplicate This issue or pull request already exists and removed pending triage labels Mar 21, 2023
@github-actions github-actions bot locked and limited conversation to collaborators Apr 5, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
duplicate This issue or pull request already exists
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@guoyunhe @sapphi-red @sun0day