Force direct linking with explicit ?url import

[Boldewyn]

Describe the bug

I encountered a problem with a discrepancy between the dev and build states of my app with regards to linking to stylesheets from within JS. Use case: Using style sheet URLs inside web components to link to shared styles.

The problem is the conversion to a data: URI for a small stylesheet in this case:

// main.js
import SmallCSS from './small.css?url';

document.head.insertAdjacentHTML('beforeend', `<link rel="stylesheet" href="${SmallCSS}">`);

/* small.css */
@import "./very_large.css";

With small.css being under the threshold of assetsInlineLimit it will be included as a data: URI. However, without any additional tooling, very_large.css will not be present in the final build. This leads to a reference error.

In my concrete case I handle the CSS import with postcss-import and mention small.css explicitly in vite.config.js. However, this file will not get picked up because of the data: URI conversion that is not aware of the final small.css being actually quite large.

My suggested solution is: Ignore assetsInlineLimit if the ?url specifier is set for a given import, or introduce a new specifier that allows for this behaviour.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qdaqvk?file=small.css,referenced.css,main.js&terminal=dev

Steps to reproduce

No response

System Info

Vite 4.1.0.

Used Package Manager

npm

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 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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-qdaqvk (Open reproduction)

[Boldewyn]

Small addendum: When assetsInlineLimit is set to 0, the current behaviour is to handle small.css twice, once running it through the postcss pipeline (due to being referenced in vite.config.js) and once unchanged with the @import still intact, ending up with two files like small-571f6575.css and small-ce6b3471.css.

The unchanged one is linked to via the import code in JS.

That means, the actual bug is, that the CSS file referenced via import ?url in a JS file is not run through postcss at all and handled twice in that case. Vite should detect that this is the same file as referenced on other places and either way give it the same postcss treatment.

[sapphi-red]

Duplicate of #2522, #7842