[vite] warning - dev: Default and named imports from CSS files are deprecated - 'ant-design-vue'

haiting commented 1 year ago

Describe the bug

It will show below warning when I run pnpm dev:

[vite] warning: 
/node_modules/.vite/deps/ant-design-vue_lib_message_style.js
15 |    default: () => default2
16 |  });
17 |  import { default as default2 } from "/node_modules/.pnpm/ant-design-vue@3.2.15_vue@3.2.45/node_modules/ant-design-vue/lib/message/style/index.less";
   |                                       ^
18 |  import * as style_star from "/node_modules/.pnpm/ant-design-vue@3.2.15_vue@3.2.45/node_modules/ant-design-vue/lib/message/style/index.less";
19 |  var init_style = __esm({
Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import { default as default2 } from "/node_modules/.pnpm/ant-design-vue@3.2.15_vue@3.2.45/node_modules/ant-design-vue/lib/message/style/index.less?inline"
  Plugin: vite:import-analysis
  File: /node_modules/.vite/deps/ant-design-vue_lib_message_style.js?v=a001af09

Reproduction

none

Steps to reproduce

No response

System Info

"vite": "^4.0.0",
"ant-design-vue": "^3.2.11"

Used Package Manager

pnpm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

github-actions[bot] commented 1 year ago

Hello @haiting. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

alveshelio commented 1 year ago

Hi,

I'm getting the same warning. I have "antd": "4.23.6" and "vite": "4.0.1" I've updated all my imports to 'antd/es' and 'antd/es/component'

I've created a simple vite app: https://github.com/alveshelio/vite-antD, Here in CodeSandbox but I'm unable to reproduce the same warnings. My app is quite big and is a private repo so I can't use it as a producible repo :(

*[vite] warning: /node_modules/.vite/deps/antd_lib_calendar_style.js 17 | default: () => default2 18 | }); 19 | import { default as default2 } from "/node_modules/antd/lib/calendar/style/index.less"; | ^ 20 | import as style_star from "/node_modules/antd/lib/calendar/style/index.less"; 21 | var init_style = __esm({ Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import { default as default2 } from "/node_modules/antd/lib/calendar/style/index.less?inline" Plugin: vite:import-analysis File: /node_modules/.vite/deps/antd_lib_calendar_style.js?v=d665c8da 3:56:15 p.m. [vite] warning: /node_modules/.vite/deps/antd_lib_calendar_style.js 18 | }); 19 | import { default as default2 } from "/node_modules/antd/lib/calendar/style/index.less"; 20 | import as style_star from "/node_modules/antd/lib/calendar/style/index.less"; | ^ 21 | var init_style = __esm({ 22 | "vite:dep-pre-bundle:external-conversion:/node_modules/antd/lib/calendar/style/index.less"() { Default and named imports from CSS files are deprecated. Use the ?inline query instead. For example: import as style_star from "/node_modules/antd/lib/calendar/style/index.less?inline" Plugin: vite:import-analysis File: /node_modules/.vite/deps/antd_lib_calendar_style.js?v=d665c8da 3:56:15 p.m. [vite] warning: /node_modules/.vite/deps/antd_lib_calendar_style.js 30 | default: () => default3 31 | }); 32 | import { default as default3 } from "/node_modules/antd/lib/radio/style/index.less";**

This goes on for all of the components where AntD imports less files.

froko commented 1 year ago

I can provide a reproduction example: https://github.com/froko/lit-tailwind-cypress-storybook In my case I'm using lit together with tailwind.

Here's the code which causes the warning:

import { adoptStyles, LitElement, unsafeCSS } from 'lit';

import style from './tailwind.css';

export class TwLitElement extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    if (this.shadowRoot) {
      adoptStyles(this.shadowRoot, [unsafeCSS(style)]);
    }
  }
}

oliveryasuna commented 1 year ago

The following removes the warning for me:

declare module '*.scss?inline' {
  import {CSSResult} from 'lit';
  const styles: CSSResult;
  export default styles;
}

import style from './tailwind.css?inline';

froko commented 1 year ago

@oliveryasuna Thank you for your input. Your solution worked for me as well. There is one addition I had to make in my project: import './tailwind.css'; in main.ts in order to get the fonts right. Previously this was not required.

oliveryasuna commented 1 year ago

@froko

You're welcome. You'll probably get the same warning without appending ?inline to your import.

vitejs / vite