-
-
Notifications
You must be signed in to change notification settings - Fork 7.9k
Description
Describe the bug
When using url containing a function within a scss file, the content will be rewritten by the internal vite-url-rewrite.
Input:
background-image: url(map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img));
Output:
background-image: url('node_modules/@progress/kendo-theme-default/dist/map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img'));
This can't be parsed by the sass compiler and resulting finally in a error message:
[plugin:vite:css] [sass] expected ";". ╷ 31443 │ background-image: url('node_modules/@progress/kendo-theme-default/dist/map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img'));
After looking around the vite source code, it seems that the cssUrlRE, that is used in the css plugin is matching the input above and, therefore the contents of the url function is rewritten.
Reproduction
https://stackblitz.com/edit/vitejs-vite-3jtmhf?file=app.scss
Steps to reproduce
No response
System Info
System:
OS: Windows 11 11.0.22621.382
CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K
Memory: 19.70 GB / 31.78 GB
Binaries:
Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.674.0), Chromium (106.0.1370.42)
Internet Explorer: 11.0.22621.1
Firefox: 105.0.3
npmPackages:
@vitejs/plugin-react: ^2.1.0 => 2.1.0
vite: ^3.1.8 => 3.1.8Used Package Manager
pnpm
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.