fix: no asset plugin w/ img is imported with query (#8353)

* fix: no asset plugin w/ img is imported with query

* add changeset

* add test for the new feature

* remove exp

* use removeQueryString instead of `includes('?')`

it's more explicit

---------

Co-authored-by: Erika <[email protected]>

.changeset/disable-asset-with-query.md

@@ -0,0 +1,13 @@
+---
+'astro': patch
+---
+
+Astro will now skip asset optimization when there is a query in the import. Instead, it will let vite deal with it using plugins.
+
+```vue
+<script>
+// This will not return an optimized asset
+import Component from './Component.vue?component'
+</script>
+```
+

packages/astro/src/assets/vite-plugin-assets.ts

@@ -14,9 +14,6 @@ import { hashTransform, propsToFilename } from './utils/transformToPath.js';
 
 const resolvedVirtualModuleId = '\0' + VIRTUAL_MODULE_ID;
 
-const rawRE = /(?:\?|&)raw(?:&|$)/;
-const urlRE = /(\?|&)url(?:&|$)/;
-
 export default function assets({
 	settings,
 	mode,
@@ -119,13 +116,12 @@ export default function assets({
 				resolvedConfig = viteConfig;
 			},
 			async load(id) {
-				// If our import has the `?raw` or `?url` Vite query params, we'll let Vite handle it
-				if (rawRE.test(id) || urlRE.test(id)) {
+				// If our import has any query params, we'll let Vite handle it
+				// See https://github.com/withastro/astro/issues/8333
+				if (id !== removeQueryString(id)) {
 					return;
 				}
-
-				const cleanedUrl = removeQueryString(id);
-				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(cleanedUrl)) {
+				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(id)) {
 					const meta = await emitESMImage(id, this.meta.watchMode, this.emitFile);
 					return `export default ${JSON.stringify(meta)}`;
 				}

packages/integrations/vue/test/app-entrypoint.test.js

@@ -30,4 +30,12 @@ describe('App Entrypoint', () => {
 		const js = await fixture.readFile(client);
 		expect(js).to.match(/\w+\.component\(\"Bar\"/gm);
 	});
+
+	it('loads svg components without transforming them to assets', async () => {
+		const data = await fixture.readFile('/index.html');
+		const { document } = parseHTML(data);
+		const client = document.querySelector('astro-island svg');
+
+		expect(client).not.to.be.undefined;
+	});
 });

packages/integrations/vue/test/fixtures/app-entrypoint/astro.config.mjs

@@ -1,8 +1,14 @@
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
+import ViteSvgLoader from 'vite-svg-loader'
 
 export default defineConfig({
   integrations: [vue({
 		appEntrypoint: '/src/pages/_app'
-	})]
+	})],
+	vite: {
+    plugins: [
+      ViteSvgLoader(),
+    ],
+	},
 })

packages/integrations/vue/test/fixtures/app-entrypoint/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "astro": "workspace:*",
-    "@astrojs/vue": "workspace:*"
+    "@astrojs/vue": "workspace:*",
+    "vite-svg-loader": "4.0.0"
   }
-}
+}

packages/integrations/vue/test/fixtures/app-entrypoint/src/components/Foo.vue

@@ -1,5 +1,10 @@
+<script setup>
+import Circle from './Circle.svg?component'
+</script>
+
 <template>
 	<div id="foo">
 		<Bar />
+		<Circle/>
 	</div>
 </template>