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

Dynamic css imports + css @import statements result in spurious warnings #5323

Closed
7 tasks done
Tracked by #3219
SohumB opened this issue Oct 17, 2021 · 0 comments · Fixed by #8022
Closed
7 tasks done
Tracked by #3219

Dynamic css imports + css @import statements result in spurious warnings #5323

SohumB opened this issue Oct 17, 2021 · 0 comments · Fixed by #8022

Comments

@SohumB
Copy link

SohumB commented Oct 17, 2021

Describe the bug

When css is dynamically imported (such as, for instance, when dynamically importing a .svelte file) and combined with any css with @import statements, a warning that is sprurious to the user is displayed. I think this only occurs in library mode, or perhaps when cssCodeSplit is false.

vite.config.js:

export default config = {
  build: {
    lib: {
      entry: 'index.js',
      formats: ['es'],
    }
  }
};

index.js:

import './index.css';
export default async function foo() {
  await import('./dyn.css');
  return "foo";
}

index.css:

@import "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialdesignicons.min.css";
.index-is-included { font-size: 42px }

dyn.css:

.dyn-is-included { font-size: 42px; }

Building this results in the following warning:

vite v2.6.7 building for production...
✓ 3 modules transformed.
rendering chunks (2)...warnings when minifying css:
 > <stdin>:2:0: warning: All "@import" rules must come first
    2 │ @import "https://cdn.jsdelivr.net/npm/@mdi/font@5.9.55/css/materialde...
      ╵ ~~~~~~~
   <stdin>:1:0: note: This rule cannot come before an "@import" rule
    1 │ .dyn-is-included { font-size: 42px; }
      ╵ ^

This is the same repro as #4625, just a much less urgent bug.

Reproduction

https://github.com/SohumB/vite-dynamic-import-css-bug

System Info

System:
    OS: Linux 5.14 Debian GNU/Linux bookworm/sid
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 89.36 GB / 125.43 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.18.1 - /usr/bin/node
    Yarn: 1.22.15 - ~/.local/bin/yarn
    npm: 6.14.15 - /usr/bin/npm
  Browsers:
    Chromium: 93.0.4577.82
    Firefox: 93.0
  npmPackages:
    vite: ^2.6.7 => 2.6.7

Used Package Manager

npm

Logs

No response

Validations

@SohumB SohumB changed the title Dynamic imports that result in css being added result in spurious warnings Dynamic css imports + css @import statements result in spurious warnings Oct 17, 2021
@github-actions github-actions bot locked and limited conversation to collaborators May 21, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants