web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
9.44k stars 548 forks source link

[Bug]: Fonts are no longer bundld #7080

Closed kaisellgren closed 3 months ago

kaisellgren commented 3 months ago

System Info

System: OS: Linux 6.8 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat) CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor Memory: 39.17 GB / 61.94 GB Container: Yes Shell: 5.9 - /bin/zsh Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm Browsers: Chrome: 125.0.6422.112

Details

Everything worked in 0.6.5, but broke in 0.7.0, and is still broken in alpha-2 version.

Given the following CSS file contents:

@font-face {
    font-family: Chevin;
    src: url(fonts/chevin-thin.woff2) format("woff2"), url(fonts/chevin-thin.woff) format("woff"), url(fonts/chevin-thin.ttf) format("truetype");
    font-weight: 100;
    font-style: normal
}

Asset defined:

        {
          test: /\.(gif|png|jpe?g|svg|webp|ttf|woff|woff2|docx|pdf|crt|key)$/,
          type: 'asset/resource',
        },

Importing the CSS file via TypeScript code:

import 'some.css'

The output folder does not include any of those font files from the CSS:

image

With the older 0.6.5 version or Webpack, the fonts appear correctly. Here's an example with Webpack:

image

The compiled Rspack CSS file shows "file not found" error, because the fonts aren't copied to target folder:

image

I have not yet figured out how to make a simple repro case. When I create a simple case it works, but not in our codebase, but worked in 0.6.5 and works in Webpack.

Do you have suggestions what I could try to do?

EDIT: Looks like the fonts end up in assets folder instead:

image

ahabhgk commented 3 months ago

Have you enable experiments.css = true? Rspack disabled it by default since v1.0.0-alpha.0

kaisellgren commented 3 months ago

Sorry I think this is probably my mistake. I'm not sure what happened, but now the font files are properly generated and the outputted CSS code points to them correctly. Perhaps I had Webpack leftover files, or browser caching old CSS files, but now it seems to work.

Sorry for the interruption, this can be closed :)