?url imports should be ignored as well

packages/astro/src/vite-plugin-build-css/index.ts

@@ -48,7 +48,7 @@ function isPageStyleVirtualModule(id: string) {
 }
 
 function isRawOrUrlModule(id: string) {
-	return id.match(/(\?|\&)([^=]+)(raw)/gm)
+	return id.match(/(\?|\&)([^=]+)(raw|url)/gm)
 }
 
 interface PluginOptions {

packages/astro/test/astro-css-bundling-import.test.js

@@ -49,7 +49,7 @@ describe('CSS Bundling (ESM import)', () => {
 		}
 	});
 
-	it('?raw CSS imports are ignored', async () => {
+	it('?raw and ?url CSS imports are ignored', async () => {
 		// note: this test is a little confusing as well, but the main idea is that
 		// page-3.astro should have site.css imported as an ESM in InlineLayout.astro
 		// as well as the styles from page-3.css as an inline <style>.
@@ -67,11 +67,13 @@ describe('CSS Bundling (ESM import)', () => {
 		// test 1: insure green is included (site.css)
 		expect(css.indexOf('p{color:red}')).to.be.greaterThanOrEqual(0);
 
-		// test 2: insure yellow is not included as an import (page-3.css)
-		expect(css.indexOf('p{color:yellow}')).to.be.lessThan(0);
+		// test 2: insure purple is not included as an import (page-3.css)
+		// this makes sure the styles imported with ?raw and ?url weren't bundled
+		expect(css.indexOf('p{color:purple}')).to.be.lessThan(0);
 
-		// test 3: insure yellow was inlined (page-3.css inlined with set:html)
+		// test 3: insure purple was inlined (page-3.css inlined with set:html)
+		// this makes sure the styles imported with ?url were inlined
 		let inlineCss = $('style').html().replace(/\s/g, '').replace('/n', '');
-		expect(inlineCss.indexOf('p{color:yellow;}')).to.be.greaterThanOrEqual(0);
+		expect(inlineCss.indexOf('p{color:purple;}')).to.be.greaterThanOrEqual(0);
 	})
 });

packages/astro/test/fixtures/astro-css-bundling-import/src/layouts/InlineLayout.astro

@@ -17,7 +17,7 @@ const {title} = Astro.props;
 	<ul>
 		<li><a href="/page-1">Page 1</a></li>
 		<li><a href="/page-2">Page 2</a></li>
-        <li><a href="/page-3">Page3</a></li>
+        <li><a href="/page-3">Page 3</a></li>
 		<!-- <li><a href="/page-2-reduced-layout">Page 2 reduced layout</a></li> -->
 	</ul>
 	<main id="page">

packages/astro/test/fixtures/astro-css-bundling-import/src/pages/page-3.astro

@@ -1,15 +1,12 @@
 ---
 import PageLayout from "../layouts/InlineLayout.astro"
 import styles from "../styles/page-three.css?raw"
+import stylesUrl from "../styles/page-one.css?url"
 ---
 
 <PageLayout title="Page 3">
   <style set:html={styles}></style>
 
-  <h1>Page 2</h1>
-  <p>This text should be green, because we want <code>page-2.css</code> to override <code>site.css</code></p>
-  <p>This works in the dev-server. However in the prod build, the text is blue. Execute <code>npm run build</code> and then execute <code>npx http-server dist/</code>.</p>
-  <p>We can view the built html at <a href="https://github-qoihup--8080.local.webcontainer.io/page-2/">https://github-qoihup--8080.local.webcontainer.io/page-2/</a>. The color there is blue.</p>
-
-  <p>If it helps debug the issue, rename the <code>page-1.astro</code> file to <code>page-1.astro.bak</code>. Build the prod site and view it. This time the color is green.</p>
+  <h1>Page 3</h1>
+  <p>This text should be purple, because we want the inlined <code>page-3.css</code> to override <code>site.css</code></p>
 </PageLayout>

packages/astro/test/fixtures/astro-css-bundling-import/src/styles/page-three.css

@@ -1,3 +1,3 @@
 p {
-  color: yellow;
+  color: purple;
 }