VITE_ASSET and `rollup-replace` plugin

SufyanDahalan commented 5 months ago

Describe the bug

I am using rollup-replace plugin for statically replace arbitrary strings in my css and js files. It works fine and as expected in js files, however, it does not work at all in css files, specifically in url() statements. The code passed to the rollup-replace plugin has replaced the content of the css url() statements with VITE_ASSET placeholders, which is the reason for the plugin not working.

I needed to use the experimental renderBuiltUrl feature to get my work done. I think that the behaviour or the code sent to the plugin.

Expected behaviour is that the plugin is called with the original code, uncensored by any placeholders, so that the replacements can take place correctly. As far as I was able to test, this issue is specific to query parameters in css url() statements.

Reproduction

https://replit.com/join/aadchyhrjx-sufyandahalan

Steps to reproduce

npm run build
dist/index-[hash].css does not have the correct parameter placeholder replaced, contrary to the case while using npm run dev.

System Info

System:
    OS: Linux 6.5 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 AMD EPYC 7B13
    Memory: 53.43 GB / 62.79 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.15.0 - /nix/store/amm5j0ag985nh49n096a78q1dfs2xsfn-nodejs-16.15.0/bin/node
    Yarn: 1.22.18 - /nix/store/n7d0ibna8751b6kfj6i4fkanbdix8h7a-yarn-1.22.18/bin/yarn
    npm: 8.5.5 - /nix/store/amm5j0ag985nh49n096a78q1dfs2xsfn-nodejs-16.15.0/bin/npm
  npmPackages:
    @vitejs/plugin-react-swc: ^3.7.0 => 3.7.0 
    vite: ^5.3.1 => 5.3.1

Used Package Manager

npm

Logs

~/rollup-replace-plugin-VITEASSET-Bug-Reproduction$ npm run build --debug

whichbowedqueryplan@0.0.0 build vite build

vite v5.3.1 building for production... [plugin:replace] [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to true, as the next major version will default this option to true. ✓ 12 modules transformed. dist/index.html 0.46 kB │ gzip: 0.30 kB dist/assets/index-BBMnZTiw.css 1.30 kB │ gzip: 0.70 kB dist/assets/index-CwLExNcl.js 19.96 kB │ gzip: 8.04 kB ✓ built in 1.48s

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

wmertens commented 3 months ago

Try reordering the plugin? Also, doesn't config.defines work instead of this plugin?

SufyanDahalan commented 3 months ago

Reordering the plugins did not have any affect. config.defines replaces occurances only in javascript, thus leaving occurances in css files unchanged.

vitejs / vite