Reference IDs containing $$ fail to be resolved with LightningCSS #16297
Description
Describe the bug
When using LightningCSS and building with Vite, URLs can be replaced with a reference ID containing $$ (e.g. gbjdc$$i / __VITE_ASSET__gbjdc$$i__).
When the generated URLs are then replaced with the built asset URLs, it searches for the asset using an incorrect ID, replacing $$ with $ (e.g. gbjdc$i).
Reproduction
https://stackblitz.com/edit/vitejs-vite-aaxr6p
Steps to reproduce
Run npm install followed by npm run build.
System Info
System:
OS: Linux 6.8 Arch Linux
CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
Memory: 10.70 GB / 31.05 GB
Container: Yes
Shell: 3.7.0 - /usr/bin/fish
Binaries:
Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
Yarn: 4.1.1 - ~/.yarn/bin/yarn
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
pnpm: 8.15.2 - /usr/bin/pnpm
npmPackages:
@vitejs/plugin-react-swc: ^3.6.0 => 3.6.0
vite: ^5.2.6 => 5.2.6Used Package Manager
yarn
Logs
Click to expand!
Compiling message catalogs…
Done!
[sentry-vite-plugin] Info: Using environment variables configured in ".env.sentry-build-plugin".
(node:570047) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
vite v5.2.6 building for production...
node_modules/@tanstack/react-query/build/modern/useSuspenseQuery.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/@tanstack/react-query/build/modern/useBaseQuery.js (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
[plugin:vite:resolve] [plugin vite:resolve] Module "fs" has been externalized for browser compatibility, imported by "/home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/tiny-xlsx/src/index.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
[plugin:vite:resolve] [plugin vite:resolve] Module "stream" has been externalized for browser compatibility, imported by "/home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/tiny-xlsx/node_modules/jszip/lib/readable-stream-browser.js". See https://vitejs.dev/guide/troubleshooting.html#module-externalized-for-browser-compatibility for more details.
✓ 1904 modules transformed.
x Build failed in 9.48s
✨ [vite-plugin-robots]:
✓ Copied: .robots.production.txt -> dist/robots.txt
error during build:
RollupError: [vite:css-post] Plugin error - Unable to get file name for unknown file "gbjdc$i".
at getRollupError (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/rollup/dist/es/shared/parseAst.js:376:41)
at error (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at FileEmitter.getFileName (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/rollup/dist/es/shared/node-entry.js:19083:24)
at file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31702:43
at String.replace (<anonymous>)
at resolveAssetUrlsInCss (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31701:37)
at Object.renderChunk (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31784:36)
at async transformChunk (file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/rollup/dist/es/shared/node-entry.js:17723:16)
at async file:///home/jackwakefield/workspace/apps/web/also-asked-frontend/node_modules/rollup/dist/es/shared/node-entry.js:17797:17
at async Promise.all (index 0)
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.