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>