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.

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

fix: allow css to be written for systemjs output #5902

Merged
merged 2 commits into from
May 10, 2022
Merged

Conversation

shir0u
Copy link
Contributor

@shir0u shir0u commented Nov 30, 2021

Description

According to https://vitejs.dev/guide/features.html#css-code-splitting

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it. The CSS file is automatically loaded via a tag when the associated async chunk is loaded, and the async chunk is guaranteed to only be evaluated after the CSS is loaded to avoid FOUC.

However, when building to systemjs output, this feature seems to be ignored. This PR fixes #5901

Additional context


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 Commit 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.

@shir0u shir0u changed the title feat: allow css to be written for systemjs output fix: allow css to be written for systemjs output Nov 30, 2021
@shir0u shir0u force-pushed the patch-3 branch 2 times, most recently from c76c636 to 432515a Compare November 30, 2021 05:57
@Shinigami92 Shinigami92 added p2-nice-to-have Not breaking anything but nice to have (priority) feat: css labels Nov 30, 2021
@Shinigami92
Copy link
Member

@patak-js is this wanted?

@shir0u
Copy link
Contributor Author

shir0u commented Dec 11, 2021

Hi @Shinigami92 @patak-dev

Really appreciate your time and please consider merging this PR, I strongly believe it's not a matter of "wanted" or not. It is actually a missing feature as it should work as stated from the docs description:

Vite automatically extracts the CSS used by modules in an async chunk and generates a separate file for it. The CSS file is automatically loaded via a tag when the associated async chunk is loaded, and the async chunk is guaranteed to only be evaluated after the CSS is loaded to avoid FOUC.

If people don't want it, they can use the already available cssCodeSplit option as intended. Looking forward to your response. Many thanks.

@shir0u
Copy link
Contributor Author

shir0u commented Dec 25, 2021

Sorry for keep pushing @Shinigami92 @patak-dev

But we really need this merged, appreciate your time if you can facilitate the merge and release that would be ideal, otherwise, if you can respond with a reason for the rejection would also be appreciated and what we can do or change to make it fit with your envision. Many thanks.

@Shinigami92
Copy link
Member

I think it's not a thing of approve or reject, but current capacity of vite team over the winter holidays.
I will bring it to @patak-dev cause I cannot approve it without his answer on my question.

@patak-dev
Copy link
Member

Hey @shir0u, sorry for the delay, we missed this one in our previous team meeting. I don't know why system wasn't included here, we'll discuss it in the next meeting. If this PR is blocking you, I recommend that you vendor or fork Vite until this gets resolved upstream.

@shir0u
Copy link
Contributor Author

shir0u commented Jan 12, 2022

Thanks @patak-dev I've created a fork already on npm which is fine for now, but needs to rebase every now and then. Was wondering if you guys had your meeting yet?

@patak-dev
Copy link
Member

@shir0u we talked about the PR in our last team meeting, and we are good to go if we can test before that it doesn't break plugin-legacy. Would it be possible to add a test for dynamic CSS chuncks in legacy playground so we make sure that there won't be a regression?

@shir0u
Copy link
Contributor Author

shir0u commented Jan 16, 2022

Hi @patak-dev this current PR has passed all current tests, as for adding new tests, looks like it's beyond my expertise, would you or your team be able to give me a hand with this? Many thanks, much appreciated.

@shir0u shir0u force-pushed the patch-3 branch 2 times, most recently from 2e18a9c to 46f0a53 Compare April 19, 2022 13:38
@shir0u
Copy link
Contributor Author

shir0u commented Apr 19, 2022

Hi @patak-dev I have attempted to add that dynamic CSS config, not sure where else to do it. Please let me know if I am missing something. Thanks. Very keen to get this merged as soon as possible.

@shir0u
Copy link
Contributor Author

shir0u commented Apr 28, 2022

Hi @patak-dev have rebased and all tests seem to have passed. Please review at your earliest convenience. Many thanks.

@sapphi-red
Copy link
Member

sapphi-red commented May 23, 2022

This PR broke plugin-legacy (#8243).
If I change build.cssCodeSplit to true in playground\legacy\vite.config.js, tests fails.

Also does this PR work as intended?
If I set build.rollupOptions.output.format to 'systemjs', import points to the pure css dynamic imported module which is removed from dist.
https://stackblitz.com/edit/vitejs-vite-gwpbea?terminal=dev

@sapphi-red
Copy link
Member

sapphi-red commented May 23, 2022

Looks like this PR works with build.cssCodeSplit=false but not with true.
But this PR only changes code around build.cssCodeSplit=true. 🤔

sapphi-red added a commit to sapphi-red/vite that referenced this pull request Jun 19, 2022
@sapphi-red sapphi-red mentioned this pull request Jun 19, 2022
9 tasks
patak-dev pushed a commit that referenced this pull request Jun 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

css is not being extracted for systemjs
4 participants