imported inline svg files are missing after build

[yotam-faye]

Describe the bug

imported tiny ( > build.assetsInlineLimit) svg files as url, are not added to css url() function and in fact cause the entire property to be removed from the minified code after build

I import a small svg file as url:

import pencil from "assets/pencil.vg?url";

and use it inside a url function:

export const Div = styled.div`
   width: 100px;
   height: 100px;
   background: url(${PencilIcon}) 50% 50% / cover no-repeat;
`;

the pencil is being displayed on dev but after I build the app, the minified build is missing the entire background: url(""data:image/svg+xml,{SVG_STRING}") 50% 50% / cover no-repeat; property

Reproduction

https://stackblitz.com/edit/vitejs-vite-i46sj7?file=src%2Findex.css,src%2FApp.jsx,src%2FApp.style.ts&terminal=dev

Steps to reproduce

• run npm run dev
• verify that the pencil icon is displayed
• run npm run build
• run npm run preview
• see that the pencil icon is not displayed

You can inspect dist/index{hash}.css and see that the inline rule is there but when you inspect the div, the entire background property is missing

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.10.5 - /usr/local/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.2.1 => 4.2.1 
    vite: ^5.0.8 => 5.0.10

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-i46sj7 (Open reproduction)

[chaejunlee]

Since #14643, if you want to pass the SVG string to a manually constructed url() through a JS framework, in this case StyledComponent, you have to wrap the url with double quotes.

Here is the link to that PR and comment regarding it.

https:/vitejs/vite/pull/14643/files#r1376533432

[chaejunlee]

Here is a link to the working example if you want to check it yourself.

https://stackblitz.com/edit/vitejs-vite-fkptr2?file=src%2FApp.style.ts

There was another issue (#15378) having problem when inlining svg with url() css function.

It seems this is something that can't be handled by vite.

Unless there is a fix, I think this specific use case should be documented. My guess is to mention svg inline within Static Asset Handling or Building for Production. Mentioning it within build.assetInlineLimit looks right as well.

P.S. If we see this as a problem caused by mismatch of dev and build, maybe we can fix this by breaking dev when using url() in an incorrect way instead of trying to make build work like dev.

[yotam-faye]

Thanks @chaejunlee I'm closing this bug because wrapping the url with double quotes solves the problem.
I searched for this issue online and couldn't find info so this bug documentation could help others.