CSS imported by explicit import with ?url suffix do not have resolved its dependencies

[keeema]

Describe the bug

I need to import files with explicit import and use their url in react useEffect. I use it to dynamically bind themes CSS according to switch.

Unfortunately, CSS imports with suffix ?url do not have resolved its dependencies, so if they contains fonts defined by url(somePath) then suchfonts from somePath are not included in assets in dist.

There is not fully reproducing code in stackblitz because I can't upload fonts... but there is an example code.

Reproduction

https://stackblitz.com/edit/bad-imports-css-url

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) arm64 Apple M1
    Memory: 252.84 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm
    Watchman: 2022.03.07.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 100.0.4896.127
    Edge: 100.0.1185.44
    Safari: 15.4
  npmPackages:
    @vitejs/plugin-legacy: ^1.7.1 => 1.8.0 
    @vitejs/plugin-react-refresh: ^1.3.6 => 1.3.6 
    vite: ^2.8.6 => 2.9.1

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

related: #2522 #5796

Currently .css?url does not go through the css transformation pipeline. This is the reason why this is happening.

[keeema]

Thank you for your reply.
Possible workaround could be to add these fonts as assets.
Unfortunately
assetsInclude: ["/node_modules/primereact/resources/themes/mdc-dark-indigo/**/*"]
neither
assetsInclude: ["/node_modules/primereact/resources/themes/mdc-dark-indigo/fonts"]
do not work and fonts are not in dist/assets. Is this correct usage?
Or is there any other way how to make fonts to be assets with its original name?
CSS is looking for fonts in /assets/fonts/my_font_name.woff.

My current working hack is to put fonts to public/assets/fonts/....
But it is not pretty and it is redundant copy of same content from node_module.

[yarinsa]

I am having the same issues. My company UI library is exporting something like:

// node_modules/UI_library/style.css
@font-face {
  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 300;
  src: url(/assets/fonts/jakarta-plus/plus-jakarta-sans-v2-latin-300.eot);
}

I would expect vite to resolve it to (on serve)

  font-family: Plus Jakarta Sans;
  font-style: normal;
  font-weight: 300;
  src: url(@fs/node_modules/UI_library/assets/fonts/jakarta-plus/plus-jakarta-sans-v2-latin-300.eot);

And on build make sure to copy this asset. Just like @keeema I tried using assetsInclude but that doesn't seem to do the work.

Did anyone else managed to solve this issue?

[drosenzweig]

For what it's worth, I'm running into a similar issue. I'm in a monorepo, declaring a React component which renders a <style> tag with the CSS font declarations in a common components package. eg:

import React from 'react';
import NotoSansRegular from './NotoSans-Regular.ttf';

const Styles = () => (
  <style>
    {`
  @font-face {
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: local('Noto Sans'), local('NotoSans'),
    url(${NotoSansRegular}) format('ttf'),
    url(${NotoSansRegular}) format('woff'),
    url(${NotoSansRegular}) format('woff2');
  }
`}
  </style>
);

export default Styles;

and my consuming application within the monorepo (which I'm converting from Webpack to Vite) renders that via another component in its React tree. In build and preview mode this works just fine, the files are put into the asset folder I specify, they download and the elements that use them, display correctly.

When using the dev server, the urls end up being the full url such as:

http://127.0.0.1:3344/MY-BASE-ROUTE/@fs/Users/me/projects/my-project/packages/package-with-fonts/dist/assets/fonts/NotoSans-Regular.ttf

That seems correct, and putting that URL in the browser attempts to download the font as you would expect. However, the network tab shows it as

http://127.0.0.1:3344/MY-BASE-ROUTE/@fs/Users/me/projects/my-project/packages/package-with-fonts/dist/assets/fonts/NotoSans-Regular.ttf?import, which responds with the contents:

export default "http://127.0.0.1:3344/MY-BASE-ROUTE/@fs/Users/me/projects/my-project/packages/package-with-fonts/dist/assets/fonts/NotoSans-Regular.ttf"

And thus the browser does not use the font.

[visualjeff]

Same issue here. No loader is configured for ".woff" files: node_modules/@fontsource/roboto/files/roboto-all-300-normal.woff

[fgoepel]

Also running into this.

[marcmalerei]

I also have this problem.