new URL("./**.css", import.meta.url) returns a Base 64 string as pathname after building

[AlexW00]

Describe the bug

I am trying to import a CSS file dynamically. To do so, I create a new URL object like so:

const cssUrl = new URL("./example.css", import.meta.url)

When I run vite (dev preview), cssUrl.pathname returns the pathname of the css file.
When I run vite build and vite preview, cssUrl.pathname returns:
text/css;base64,cCB7CiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICBjb2xvcjogcmdiKDI1NSwgMTM1LCAzMCk7Cn0KCi5yZWQgewogICAgY29sb3I6IHJlZDsKfQ==

Currently I fixed the issue with the following code:

if (this.cssUrl.pathname.startsWith("text/css;base64")) {
  const base64Container = this.cssUrl.pathname;
  const base64 = base64Container.split(",")[1]; // remove the other stuff
  css = atob(base64); // parse the Base64 string
} else {
  const selfUrl = new URL("./", import.meta.url);
  const relativeCssUrl = new URL(this.cssUrl.pathname, selfUrl);
  const cssImport = await import(relativeCssUrl.pathname);
  css = cssImport.default;
}

Is this behavior intended? How can I dynamically import CSS files without the above (hacky) code?

Reproduction

https://github.com/AlexW00/component-test

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 131.35 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.6.1 - /usr/local/bin/node
    Yarn: 1.22.15 - /usr/local/bin/yarn
    npm: 7.20.3 - /usr/local/bin/npm
  Browsers:
    Firefox: 102.0.1
    Safari: 15.5

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.

[bluwy]

It's because CSS is considered an asset, and if it's within the build.assetsInlineLimit number, it gets base64-ed. It's technically still a URL so it should work if you need to load it. For finer-grain configuration. perhaps you want to look into #8717, but so far this is working as intended.

[seivan]

I don't think this should be closed. Not being able to decide what's bundled and not, is inherently a bug, though a case could be made that it's also "lacking feature". Not being able to distinguish between bundled assets and "loaded assets at build time might not be a major blocker, but it is going to cause issues like this.

Using size a static size gives little to zero control to the point that it it might have been a boolean.
Either all assets are bundled or no assets are bundled.
The size itself, is moot, since you could be hit by a thousand files and growing the bundle since the size is static.