test(css): add test for #20520 by Copilot · Pull Request #20541 · vitejs/vite

Copilot · 2025-08-05T08:40:01Z

Problem

After commit d59efd8, users encountered false warnings when building CSS files containing image-set() with url() functions, especially when processed through preprocessors like LESS or SCSS:

__VITE_ASSET__BgDL8UKD__ referenced in __VITE_ASSET__BgDL8UKD__ didn't resolve at build time, it will remain unchanged to be resolved at runtime

This occurred with CSS like:

.image-from-set(@prop; @path-1x) {
    @{prop}: image-set(@path-1x 1x);
}

.test {
    .image-from-set(background-image, url("./img.png"));
}

Root Cause

The issue was introduced by the sequential processing logic in UrlRewritePostcssPlugin when both isCssUrl and isCssImageSet are true:

rewriteCssUrls() processes the CSS and replaces URLs with __VITE_ASSET__ tokens
rewriteCssImageSet() then processes the result, which contains the asset tokens
Inside rewriteCssImageSet(), the logic detects url(__VITE_ASSET__xxx__) patterns and attempts to process them again via rewriteCssUrls()
This double processing causes the resolver to try resolving the __VITE_ASSET__ token as a file path, which fails and generates the warning

Solution

Enhanced the existing skipUrlReplacer() function to detect and skip asset tokens using simple startsWith checks:

function skipUrlReplacer(unquotedUrl: string) {
  return (
    isExternalUrl(unquotedUrl) ||
    isDataUrl(unquotedUrl) ||
    unquotedUrl[0] === '#' ||
    functionCallRE.test(unquotedUrl) ||
    unquotedUrl.startsWith('__VITE_ASSET__') ||
    unquotedUrl.startsWith('__VITE_PUBLIC_ASSET__')
  )
}

This approach prevents double processing of URLs that already contain asset tokens across all URL processing functions, eliminating false warnings while maintaining correct asset resolution and final CSS output. The solution covers both regular and public asset tokens with a more readable and performant implementation than the previous regex approach.

Testing

The fix resolves the warning in:

Original reproduction case with LESS preprocessing
Assets playground test case with image-set() and url() combinations
Maintains correct asset transformation and final CSS output

Added integration test playground/assets/__tests__/image-set-warning.spec.ts that verifies no __VITE_ASSET__ warnings are generated during build, preventing regression of this issue.

refs #20520

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

vite.dev
- Triggering command: /home/REDACTED/.cache/playwright-bin/chromium_headless_shell-1181/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameLoading,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --force-color-profile=srgb --metrics-recording-only --no-first-run --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --disable-search-engine-choice-screen --unsafely-disable-devtools-self-xss-warnings --edge-skip-compat-layer-relaunch --enable-automation --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --no-sandbox --disable-setuid-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-Urgqdd --remote-debugging-pipe --no-startup-window (dns block)
- Triggering command: /home/REDACTED/.cache/playwright-bin/chromium_headless_shell-1181/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameLoading,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --force-color-profile=srgb --metrics-recording-only --no-first-run --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --disable-search-engine-choice-screen --unsafely-disable-devtools-self-xss-warnings --edge-skip-compat-layer-relaunch --enable-automation --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --no-sandbox --disable-setuid-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-e2Bt8D --remote-debugging-pipe --no-startup-window (dns block)
- Triggering command: /home/REDACTED/.cache/playwright-bin/chromium_headless_shell-1181/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameLoading,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,AutoDeElevate --allow-pre-commit-input --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --force-color-profile=srgb --metrics-recording-only --no-first-run --password-store=basic --use-mock-keychain --no-service-autorun --export-tagged-pdf --disable-search-engine-choice-screen --unsafely-disable-devtools-self-xss-warnings --edge-skip-compat-layer-relaunch --enable-automation --headless --hide-scrollbars --mute-audio --blink-settings=primaryHoverType=2,availableHoverTypes=2,primaryPointerType=4,availablePointerTypes=4 --no-sandbox --no-sandbox --disable-setuid-sandbox --user-data-dir=/tmp/playwright_chromiumdev_profile-QFcRPl --remote-debugging-pipe --no-startup-window (dns block)
workers.cloudflare.com
- Triggering command: node (vitest 3) (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

…tokens and add test Co-authored-by: sapphi-red <[email protected]>

playground/assets/__tests__/image-set-warning.spec.ts

Co-authored-by: sapphi-red <[email protected]>

Initial plan

e2d3f78

Copilot AI assigned Copilot and sapphi-red Aug 5, 2025

Copilot started work on behalf of sapphi-red August 5, 2025 08:40 View session

fix(css): avoid warnings for image-set containing __VITE_ASSET__ …

a5d25ea

…tokens and add test Co-authored-by: sapphi-red <[email protected]>

Copilot AI requested a review from sapphi-red August 5, 2025 09:01

Copilot finished work on behalf of sapphi-red August 5, 2025 09:01

sapphi-red reviewed Aug 6, 2025

View reviewed changes

playground/assets/__tests__/image-set-warning.spec.ts Outdated Show resolved Hide resolved

Copilot started work on behalf of sapphi-red August 6, 2025 01:34 View session

refactor: move image-set warning test to assets.spec.ts

e4965b5

Co-authored-by: sapphi-red <[email protected]>

Copilot AI requested a review from sapphi-red August 6, 2025 01:39

Copilot finished work on behalf of sapphi-red August 6, 2025 01:39

test: improve test

274dc69

sapphi-red marked this pull request as ready for review August 6, 2025 02:02

sapphi-red changed the title ~~fix(css): avoid warnings for image-set containing __VITE_ASSET__ tokens~~ test(css): add test for #20520 Aug 6, 2025

sapphi-red added p1-chore Doesn't change code behavior (priority) test labels Aug 6, 2025

sapphi-red merged commit 8d31eea into main Aug 6, 2025
22 checks passed

sapphi-red deleted the copilot/fix-bfb212b2-8126-4d48-9ce4-5440ec1417ac branch August 6, 2025 02:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Comments

test(css): add test for #20520#20541

test(css): add test for #20520#20541
sapphi-red merged 4 commits intomainfrom
copilot/fix-bfb212b2-8126-4d48-9ce4-5440ec1417ac

Copilot AI commented Aug 5, 2025 •

edited by sapphi-red

Loading

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Comments

Conversation

Copilot AI commented Aug 5, 2025 • edited by sapphi-red Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Root Cause

Solution

Testing

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Aug 5, 2025 •

edited by sapphi-red

Loading