fix(css): resolve url aliases with fragments (fix: #17690) (#17691)

Co-authored-by: Stanislav Lashmanov <slashmanov@gitlab.com>

Author: CyberAP

packages/vite/src/node/plugins/css.ts

@@ -336,8 +336,10 @@ export function cssPlugin(config: ResolvedConfig): Plugin {
             return joinUrlSegments(config.base, decodedUrl)
           }
         }
-        const resolved = await resolveUrl(decodedUrl, importer)
+        const [id, fragment] = decodedUrl.split('#')
+        let resolved = await resolveUrl(id, importer)
         if (resolved) {
+          if (fragment) resolved += '#' + fragment
           return fileToUrl(resolved, config, this)
         }
         if (config.command === 'build') {

playground/assets/__tests__/assets.spec.ts

@@ -358,6 +358,12 @@ describe('svg fragments', () => {
         : /svg#icon-heart-view$/,
     )
   })
+
+  test('url with an alias', async () => {
+    expect(await getBg('.icon-clock-alias')).toMatch(
+      /\.svg#icon-clock-view"\)$/,
+    )
+  })
 })
 
 test('Unknown extension assets import', async () => {

playground/assets/css/icons.css

@@ -20,3 +20,7 @@ img {
 .icon-arrow-right {
   background: url(../nested/fragment-bg.svg#icon-arrow-right-view) no-repeat;
 }
+
+.icon-clock-alias {
+  background: url('fragment#icon-clock-view') no-repeat;
+}

playground/assets/index.html

@@ -213,6 +213,7 @@ <h2>SVG Fragments via CSS background url</h2>
   <span class="icon icon-clock"></span>
   <span class="icon icon-heart"></span>
   <span class="icon icon-arrow-right"></span>
+  <span class="icon icon-clock-alias"></span>
 </div>
 
 <h2>SVG Fragments via JS Import</h2>

playground/assets/vite.config.js

@@ -7,6 +7,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, 'nested'),
+      fragment: path.resolve(__dirname, 'nested/fragment-bg.svg'),
     },
   },
   assetsInclude: ['**/*.unknown'],