feat(css): build assets with the entry name when it is an entry point #11578

aleen42 · 2023-01-04T02:23:45Z

How can we use the entry name to construct two files with the name L.css and X.css when specifying an entry like this:

export default {
    build : {
        rollupOptions : {
            input : {
                L : 'login/index.less',
                X : 'X/index.less'
            }
        }
    }
};

Inside the assetFileNames hook, we cannot distinguish two assets with the same name index.css.

In comparison with Webpack, it will use the entry name as the asset name when using the plugin, mini-css-extract-plugin.

Description

To resolve the problem mentioned above, I hope that Vite can use the entry name as the asset name.

fix #9877
close #9485

What is the purpose of this pull request?

Bug fix
New Feature
Documentation update
Other

Before submitting the PR, please make sure you do the following

Read the Contributing Guidelines.
Read the Pull Request Guidelines and follow the PR Title Convention.
Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
Ideally, include relevant tests that fail without this PR but pass with it.

Maxim-Mazurok · 2023-05-15T03:00:08Z

We need this feature as we have multiple pages that act as independent apps. Perhaps @patak-dev could have a review/merge this please?

patak-dev · 2023-05-15T08:42:50Z

packages/vite/src/node/plugins/css.ts

 const lang = path.extname(cssAssetName).slice(1)
- const cssFileName = ensureFileExt(cssAssetName, '.css')
+ const cssFileName = ensureFileExt(
+ isEntry ? chunk.name : cssAssetName,


I think we should have this condition directly in line 552.

patak-dev · 2023-05-15T08:44:50Z

This looks good to me, but modifying the naming could be a breaking change. I added it to the Vite 5 milestone (to be released in September). @Maxim-Mazurok, in the meantime, I recommend you maintain a patch for Vite in your repo so you aren't blocked by Vite's release process.

Maxim-Mazurok · 2023-05-20T02:59:56Z

Thank you, we've decided to have two separate vite configs for now that extend a common one, seems to work fine for us for now

sapphi-red · 2023-06-04T06:27:03Z

IIUC this will fix #9877 and close #9485.

sapphi-red · 2023-06-04T06:28:46Z

playground/backend-integration/__tests__/backend-integration.spec.ts

@@ -37,7 +37,6 @@ describe.runIf(isBuild)('build', () => {
 const cssAssetEntry = manifest['global.css']
 const scssAssetEntry = manifest['nested/blue.scss']
 const imgAssetEntry = manifest['../images/logo.png']
- const dirFooAssetEntry = manifest['../../dir/foo.css'] // '\\' should not be used even on windows


Do you have a reason to remove this test? I think we shouldn't remove this one.

Because the behaviour has broken and used the chunk name as the name of the assets, so should test manifest['bar.css'] and manifest['foo.css']. The case has not actually been removed.

Isn't that because you changed this line?
https://github.com/vitejs/vite/pull/11578/files#diff-4fdf9a690fa55c7c730e03a900f729ce1afb886d64b4280cd4ce0f32d5844074L22-R22
I guess it would work if you revert that change.
I think you can append another entry point for the new test.

Even if I revert the change, the chunk name has been used as the CSS asset name, instead of the path before, because this is an entry.

REF: vitejs#4863 (comment)

aleen42

@sapphi-red Due to these changes, the asset name has used chunk.name instead of the path, which has broken the test case.

sapphi-red · 2023-06-13T08:24:40Z

I restored the test for #9353 by adding a dynamic import chunk. Also I found that the Windows test was failing and fixed that as well.

sapphi-red · 2023-08-19T15:39:20Z

/ecosystem-ci run

vite-ecosystem-ci · 2023-08-19T15:39:44Z

📝 Ran ecosystem CI: Open

suite	result
analogjs	✅ success
astro	✅ success
histoire	❌ failure
ladle	✅ success
laravel	✅ success
marko	✅ success
nuxt	✅ success
nx	✅ success
previewjs	✅ success
qwik	✅ success
rakkas	✅ success
sveltekit	✅ success
unocss	❌ failure
vite-plugin-pwa	✅ success
vite-plugin-ssr	✅ success
vite-plugin-react	✅ success
vite-plugin-react-pages	❌ failure
vite-plugin-react-swc	✅ success
vite-plugin-svelte	✅ success
vite-plugin-vue	✅ success
vite-setup-catalogue	✅ success
vitepress	❌ failure
vitest	✅ success

sapphi-red · 2023-08-19T16:21:30Z

histoire: faling with using yarn in packageManager field with pnpm (not related to this PR)
unocss: failing with type error not related to this PR
vite-plugin-react-pages: seems to be failing with HMR tests but given that this PR only changes renderChunk hook and that hook doesn't run in dev, I guess it's not related
vitepress: failing because of the change in #13646 (this PR's branch is a bit old)

lubomirblazekcz · 2023-11-10T12:44:17Z

@patak-dev @sapphi-red @aleen42

This actually led to bad entry being added into manifest.json, say you have a entry point src/styles/main.css, in manifest it will be main.css, which is wrong. Vite v4.5 has src/styles/main.css, which is correct and excepted.

Should I open new issue to this? I've noticed this is happening when I was testing v5 beta.

patak-dev · 2023-11-10T13:05:12Z

@lubomirblazekcz could you create an issue with a minimal reproduction so we can better evaluate if this is expected or not?

lubomirblazekcz · 2023-11-10T13:34:50Z

@patak-dev sure, here - #14943

…ry point (#11578)" This reverts commit fd9a2cc.

aleen42 force-pushed the entry-asset branch from e2fec1f to 5c7e98c Compare January 4, 2023 02:39

aleen42 changed the title ~~breaking: build assets with the entry name when it is an entry point~~ chore: build assets with the entry name when it is an entry point Jan 4, 2023

aleen42 force-pushed the entry-asset branch 3 times, most recently from 2b21f7d to 79777fc Compare January 6, 2023 05:41

amirgalor-gong approved these changes Jan 10, 2023

View reviewed changes

bluwy added feat: css p2-nice-to-have Not breaking anything but nice to have (priority) labels Apr 1, 2023

bluwy changed the title ~~chore: build assets with the entry name when it is an entry point~~ feat(css): build assets with the entry name when it is an entry point Apr 1, 2023

patak-dev reviewed May 15, 2023

View reviewed changes

patak-dev added this to the 5.0 milestone May 15, 2023

sapphi-red reviewed Jun 4, 2023

View reviewed changes

aleen42 added 2 commits June 7, 2023 09:43

chore: build assets with the entry name when it is an entry point

ad70c53

REF: vitejs#4863 (comment)

review: use chunk.name to assign cssAssetName directly

fec0bee

aleen42 force-pushed the entry-asset branch from 7d75bed to fec0bee Compare June 7, 2023 01:43

aleen42 commented Jun 8, 2023

View reviewed changes

sapphi-red added 2 commits June 13, 2023 17:21

fix: windows test

b6367ba

test: restore test for vitejs#9353

795e054

patak-dev approved these changes Aug 15, 2023

View reviewed changes

sapphi-red approved these changes Aug 19, 2023

View reviewed changes

sapphi-red merged commit fd9a2cc into vitejs:main Aug 19, 2023
14 checks passed

lubomirblazekcz mentioned this pull request Nov 10, 2023

Incorrect manifest.json path for css entrypoint files (v5.0.0-beta.17) #14943

Closed

7 tasks

patak-dev added a commit that referenced this pull request Nov 10, 2023

Revert "feat(css): build assets with the entry name when it is an ent…

fe09296

…ry point (#11578)" This reverts commit fd9a2cc.

patak-dev mentioned this pull request Nov 10, 2023

revert: build assets with the entry name when it is an entry point (#11578) #14944

Closed

4 tasks

sapphi-red mentioned this pull request Nov 10, 2023

fix(css): correctly set manifest source name and emit CSS file #14945

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(css): build assets with the entry name when it is an entry point #11578

feat(css): build assets with the entry name when it is an entry point #11578

aleen42 commented Jan 4, 2023 •

edited by sapphi-red

Maxim-Mazurok commented May 15, 2023

patak-dev May 15, 2023

patak-dev commented May 15, 2023

Maxim-Mazurok commented May 20, 2023

sapphi-red commented Jun 4, 2023

sapphi-red Jun 4, 2023

aleen42 Jun 7, 2023 •

edited

sapphi-red Jun 7, 2023

aleen42 Jun 12, 2023

aleen42 left a comment •

edited

sapphi-red commented Jun 13, 2023

sapphi-red commented Aug 19, 2023

vite-ecosystem-ci bot commented Aug 19, 2023 •

edited

sapphi-red commented Aug 19, 2023

lubomirblazekcz commented Nov 10, 2023

patak-dev commented Nov 10, 2023

lubomirblazekcz commented Nov 10, 2023

feat(css): build assets with the entry name when it is an entry point #11578

feat(css): build assets with the entry name when it is an entry point #11578

Conversation

aleen42 commented Jan 4, 2023 • edited by sapphi-red

Description

What is the purpose of this pull request?

Before submitting the PR, please make sure you do the following

Maxim-Mazurok commented May 15, 2023

patak-dev May 15, 2023

Choose a reason for hiding this comment

patak-dev commented May 15, 2023

Maxim-Mazurok commented May 20, 2023

sapphi-red commented Jun 4, 2023

sapphi-red Jun 4, 2023

Choose a reason for hiding this comment

aleen42 Jun 7, 2023 • edited

Choose a reason for hiding this comment

sapphi-red Jun 7, 2023

Choose a reason for hiding this comment

aleen42 Jun 12, 2023

Choose a reason for hiding this comment

aleen42 left a comment • edited

Choose a reason for hiding this comment

sapphi-red commented Jun 13, 2023

sapphi-red commented Aug 19, 2023

vite-ecosystem-ci bot commented Aug 19, 2023 • edited

sapphi-red commented Aug 19, 2023

lubomirblazekcz commented Nov 10, 2023

patak-dev commented Nov 10, 2023

lubomirblazekcz commented Nov 10, 2023

aleen42 commented Jan 4, 2023 •

edited by sapphi-red

aleen42 Jun 7, 2023 •

edited

aleen42 left a comment •

edited

vite-ecosystem-ci bot commented Aug 19, 2023 •

edited