Skip to content

[vite-url-rewrite] messes up url(), when the url contains a single function call with Scss #10473

@Leginiel

Description

@Leginiel

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

Used Package Manager

pnpm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: cssp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions