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 <3019731+Princesseuh@users.noreply.github.com>

.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 our import has any query params, we'll let Vite handle it
-				if (rawRE.test(id) || urlRE.test(id)) {
+				// See https://github.com/withastro/astro/issues/8333
+				if (id !== removeQueryString(id)) {
 					return;
 				}
-
+				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(id)) {
-				const cleanedUrl = removeQueryString(id);
-				if (/\.(jpeg|jpg|png|tiff|webp|gif|svg)$/.test(cleanedUrl)) {
 					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/Circle.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
+</svg>

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>

pnpm-lock.yaml

@@ -4888,6 +4888,9 @@ importers:
       astro:
         specifier: workspace:*
         version: link:../../../../../astro
+      vite-svg-loader:
+        specifier: 4.0.0
+        version: 4.0.0
 
   packages/internal-helpers:
     devDependencies:
@@ -8589,6 +8592,11 @@ packages:
     engines: {node: '>= 10'}
     dev: true
 
+  /@trysound/sax@0.2.0:
+    resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
+    engines: {node: '>=10.13.0'}
+    dev: false
+
   /@ts-morph/common@0.20.0:
     resolution: {integrity: sha512-7uKjByfbPpwuzkstL3L5MQyuXPSKdoNG93Fmi2JoDcTf3pEP731JdRFAduRVkOs8oqxPsXKA+ScrWkdQ8t/I+Q==}
     dependencies:
@@ -10402,6 +10410,11 @@ packages:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
 
+  /commander@7.2.0:
+    resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
+    engines: {node: '>= 10'}
+    dev: false
+
   /commander@8.3.0:
     resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
     engines: {node: '>= 12'}
@@ -10541,7 +10554,6 @@ packages:
       domhandler: 5.0.3
       domutils: 3.1.0
       nth-check: 2.1.1
-    dev: true
 
   /css-selector-parser@1.4.1:
     resolution: {integrity: sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==}
@@ -10551,6 +10563,14 @@ packages:
     resolution: {integrity: sha512-JjnG6/pdLJh3iqipq7kteNVtbIczsU2A1cNxb+VAiniSuNmrB/NI3us4rSCfArvlwRXYly+jZhUUfEoInSH9Qg==}
     dev: false
 
+  /css-tree@2.2.1:
+    resolution: {integrity: sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      mdn-data: 2.0.28
+      source-map-js: 1.0.2
+    dev: false
+
   /css-tree@2.3.1:
     resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
     engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
@@ -10561,7 +10581,6 @@ packages:
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /cssdb@7.7.1:
     resolution: {integrity: sha512-kM+Fs0BFyhJNeE6wbOrlnRsugRdL6vn7QcON0aBDZ7XRd7RI2pMlk+nxoHuTb4Et+aBobXgK0I+6NGLA0LLgTw==}
@@ -10572,6 +10591,13 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  /csso@5.0.5:
+    resolution: {integrity: sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0, npm: '>=7.0.0'}
+    dependencies:
+      css-tree: 2.2.1
+    dev: false
+
   /cssom@0.3.8:
     resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
     dev: true
@@ -13482,6 +13508,10 @@ packages:
       unist-util-visit: 4.1.2
     dev: true
 
+  /mdn-data@2.0.28:
+    resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
+    dev: false
+
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
@@ -16617,6 +16647,19 @@ packages:
     resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
     dev: false
 
+  /svgo@3.0.2:
+    resolution: {integrity: sha512-Z706C1U2pb1+JGP48fbazf3KxHrWOsLme6Rv7imFBn5EnuanDW1GPaA/P1/dvObE670JDePC3mnj0k0B7P0jjQ==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@trysound/sax': 0.2.0
+      commander: 7.2.0
+      css-select: 5.1.0
+      css-tree: 2.3.1
+      csso: 5.0.5
+      picocolors: 1.0.0
+    dev: false
+
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true
@@ -17505,6 +17548,13 @@ packages:
       - supports-color
     dev: false
 
+  /vite-svg-loader@4.0.0:
+    resolution: {integrity: sha512-0MMf1yzzSYlV4MGePsLVAOqXsbF5IVxbn4EEzqRnWxTQl8BJg/cfwIzfQNmNQxZp5XXwd4kyRKF1LytuHZTnqA==}
+    dependencies:
+      '@vue/compiler-sfc': 3.3.4
+      svgo: 3.0.2
+    dev: false
+
   /vite@4.4.9(@types/node@18.17.8)(sass@1.66.1):
     resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}