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

CSS not included in lazy-loading legacy files in Vite 3.0.0-alpha.1 #8243

Closed
7 tasks done
X-Y opened this issue May 20, 2022 · 1 comment · Fixed by #8654
Closed
7 tasks done

CSS not included in lazy-loading legacy files in Vite 3.0.0-alpha.1 #8243

X-Y opened this issue May 20, 2022 · 1 comment · Fixed by #8654
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority) plugin: legacy regression The issue only appears after a new release
Milestone

Comments

@X-Y
Copy link

X-Y commented May 20, 2022

Describe the bug

When using Vite 3.0.0-alpha.1, Legacy builds of lazy-loaded components don't have css included anymore. @vitejs/plugin-legacy does not seem to be the issue, I have tried both 1.8.2 and 2.0.0-alpha.0, neither would include css. When building with Vite 2.9.9, the css is in.

I include css through a simple import: import './DateSelectLazy.css';

You can see my minimum reproduction code in https://github.com/X-Y/vite-base-path-ie11-problem-demo/tree/cssLostIn3

If you use instead https://github.com/X-Y/vite-base-path-ie11-problem-demo/tree/cssLostIn3-before3 and refresh the dependencies, the builds would have css included.

Reproduction

https://x-y.github.io/vite-base-path-ie11-problem-demo

If you open this page in ie11, and click the button, you can see the revealed text is not red.
If you look at the legacy file: https://x-y.github.io/vite-base-path-ie11-problem-demo/assets/DateSelectLazy-legacy.df3c73b5.js You would see that no css is included.

System Info

System:
    OS: macOS 11.4
    CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
    Memory: 16.93 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.1/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 101.0.4951.64
    Firefox: 100.0
    Safari: 14.1.1
  npmPackages:
    @vitejs/plugin-legacy: 1.8.2 => 1.8.2 
    @vitejs/plugin-react: ^1.3.0 => 1.3.2 
    vite: 3.0.0-alpha.1 => 3.0.0-alpha.1

Used Package Manager

yarn

Logs

No response

Validations

@sapphi-red sapphi-red added feat: css p3-minor-bug An edge case that only affects very specific usage (priority) regression The issue only appears after a new release plugin: legacy and removed pending triage labels May 20, 2022
@sapphi-red
Copy link
Member

It does not happen with 80d113b and it happens with 780b4f5.
So #5902 is affecting this.

@sapphi-red sapphi-red added this to the 3.0 milestone May 28, 2022
patak-dev pushed a commit that referenced this issue Jun 19, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Jul 4, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feat: css p3-minor-bug An edge case that only affects very specific usage (priority) plugin: legacy regression The issue only appears after a new release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants