fix: Replace asset references in CSS returned to JS

[Artur-]

Description

Replace __VITE__ASSET__XYZ in CSS when imported into JS
Fixes #5599

---

What is the purpose of this pull request?

• Bug fix

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[patak-dev]

Would you add a test case for #5599 in one of the playgrounds so we avoid future regressions?

[Artur-]

Sure, any pointers where to add it and how as it needs to use the production/built version?

[Artur-]

Ok, I think I figured it out. Now there is a test but what's up with the quotes?

In my real project, I get url("..."), running the test locally I get url('...') and the build here fails because there are no quotes url(...)

[Artur-]

Well, now it deals with all possible quoting

[Shinigami92]

Cannot find it currently, but in one of the PRs we introduce a util function isQuoted. Maybe it is also helpful here 🤔

[Artur-]

Seems like the approach here is wrong as it doesn't associate assets with chunks as shown by other tests. I am starting to think that this is actually ONLY a quoting issue

In the css plugin the url is transformed as

./ok.png  ->  url('__VITE_ASSET__5aa0ddc0__')

At the end of transform the output contains

  background: url('__VITE_ASSET__5aa0ddc0__');

However when it gets to renderChunk in asset it has become

var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";

and thus the regexp trying to find "__VITE_ASSET does not match anything

[Artur-]

aha, there is a minifyCSS that minifies

.inlined {
  color: green;
  background: url('__VITE_ASSET__5aa0ddc0__');
}

to

.inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}

[Artur-]

I might understand just a little bit better now how the code works...

There are two cases:

URLs added in JS

imgElement.src="somefile.png"

URLs added through CSS imported in JS

import styles from 'some.css?inline`

In the JS case, the code is like

imgElement.src="__VITE_ASSET__X_Y__"

and in the CSS import case it is like (because CSS is run through a minifier)

var inlined = ".inlined{color:green;background:url(__VITE_ASSET__5aa0ddc0__)}\n";

In both cases, it seems like proper quoting should already be in place and it is fine to only replace the placeholders

[Artur-]

Just to be clear: This should now be done. Old and new test pass

[patak-dev]

Thanks for the fix, and adding the test 🙌