Repository: sveltejs/kit (JavaScript)

Issue:
Sveltekit Static Asset import ...css?url failure
### Describe the bug

Sveltekit  is assuming on a CSS file that is JS and throwing errors on trying to preprocess the file


### Reproduction

I have a basic sveltekit v1.16.3 project with a css file like this

````css
.mdc-image-list__image-aspect-container {
    padding-bottom: calc(100% / 1);
}
````
i have a svelte Component like this with [Explicit URL Imports](https://vitejs.dev/guide/assets.html#explicit-url-imports)

````svelte
<script lang="ts">
    import testCSS from './test.css?url'
    console.log(testCSS)
</script>
<svelte:head>
    <link rel="stylesheet" href="{testCSS}">
</svelte:head>
````

why dose vite preprocess the css at all? 
why is it trying to process the css as js?

i made a [Stackblitz](https://stackblitz.com/edit/github-azacgn?file=src%2Froutes%2F%2Bpage.svelte)

from my understanding the issue is because i made a `import testCSS from './test.css?url'` and sveltkit adds a query pram `import testCSS from './test.css?url=&inline='` to it 

i tried to make a plain vite ts project if i add `&inline=` it happens the same issue so i think that sveltekit should stop to add inline query on assists let vite do the job

### Logs

```Shell
when i run i am getting this error


/src/routes/test.css
Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .css?url=&inline= file format, or if it's an asset, add "**/*.css?url=&inline=" to `assetsInclude` in your configuration.
  Plugin: vite:import-analysis
  File: /home/projects/parilmppm.github/src/routes/test.css?url=&inline=:2:36
  1  |  .mdc-image-list__image-aspect-container {
  2  |      padding-bottom: calc(100% / 1);
     |                                     ^
  3  |  }
```


### System Info

```Shell
I reproduced it in StackBlit Results from StackBlit
success Install finished in 1.002s


  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.1 => 2.0.1 
    @sveltejs/kit: ^1.16.3 => 1.16.3 
    svelte: ^3.59.1 => 3.59.1 
    vite: ^4.3.5 => 4.3.5
```


### Severity

blocking all usage of SvelteKit

### Additional Information

_No response_


Discussion:
this is an image 
![image](https://github.com/sveltejs/kit/assets/34663972/531e1dd8-6231-4e57-925c-f662835e1fab)




Patch:
diff --git a/.changeset/eleven-ravens-turn.md b/.changeset/eleven-ravens-turn.md
new file mode 100644
index 000000000000..0c0315069f61
--- /dev/null
+++ b/.changeset/eleven-ravens-turn.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': patch
+---
+
+fix: avoid trying to inline raw or url css imports
diff --git a/packages/kit/src/exports/vite/dev/index.js b/packages/kit/src/exports/vite/dev/index.js
index b77c163d9aca..cfa237b0fb73 100644
--- a/packages/kit/src/exports/vite/dev/index.js
+++ b/packages/kit/src/exports/vite/dev/index.js
@@ -176,20 +176,17 @@ export async function dev(vite, vite_config, svelte_config) {
 							const styles = {};
 
 							for (const dep of deps) {
-								const url = new URL(dep.url, 'http://localhost/');
+								const url = new URL(dep.url, 'dummy:/');
 								const query = url.searchParams;
 
 								if (
-									isCSSRequest(dep.file) ||
-									(query.has('svelte') && query.get('type') === 'style')
+									(isCSSRequest(dep.file) ||
+										(query.has('svelte') && query.get('type') === 'style')) &&
+									!(query.has('raw') || query.has('url') || query.has('inline'))
 								) {
-									// setting `?inline` to load CSS modules as css string
-									query.set('inline', '');
-
 									try {
-										const mod = await loud_ssr_load_module(
-											`${url.pathname}${url.search}${url.hash}`
-										);
+										query.set('inline', '');
+										const mod = await vite.ssrLoadModule(`${url.pathname}${url.search}${url.hash}`);
 										styles[dep.url] = mod.default;
 									} catch {
 										// this can happen with dynamically imported modules, I think


Test patch:
diff --git a/packages/kit/test/apps/basics/src/routes/css/+page.svelte b/packages/kit/test/apps/basics/src/routes/css/+page.svelte
index 45074c38b15c..fca01c864628 100644
--- a/packages/kit/test/apps/basics/src/routes/css/+page.svelte
+++ b/packages/kit/test/apps/basics/src/routes/css/+page.svelte
@@ -1,18 +1,17 @@
 <script>
 	import './_styles.css';
+	import './_manual.css?url';
+	import './_manual.css?raw';
+	import './_manual.css?inline';
 </script>
 
-<div class="styled">
-	this text is red
-</div>
+<div class="styled">this text is red</div>
 
-<div class="also-styled">
-	this text is blue
-</div>
+<div class="also-styled">this text is blue</div>
 
-<div class="overridden">
-	this text is green
-</div>
+<div class="overridden">this text is green</div>
+
+<div class="not">this text is black</div>
 
 <a href="/css/other">other</a>
 
diff --git a/packages/kit/test/apps/basics/src/routes/css/_manual.css b/packages/kit/test/apps/basics/src/routes/css/_manual.css
new file mode 100644
index 000000000000..a800732cbe85
--- /dev/null
+++ b/packages/kit/test/apps/basics/src/routes/css/_manual.css
@@ -0,0 +1,3 @@
+.not {
+	color: blue;
+}
diff --git a/packages/kit/test/apps/basics/test/cross-platform/test.js b/packages/kit/test/apps/basics/test/cross-platform/test.js
index 1c34b889e302..11f2fb270823 100644
--- a/packages/kit/test/apps/basics/test/cross-platform/test.js
+++ b/packages/kit/test/apps/basics/test/cross-platform/test.js
@@ -6,29 +6,28 @@ import { test } from '../../../../utils.js';
 test.describe.configure({ mode: 'parallel' });
 
 test.describe('CSS', () => {
-	test('applies imported styles', async ({ page, get_computed_style }) => {
+	test('applies styles correctly', async ({ page, get_computed_style }) => {
 		await page.goto('/css');
 
-		expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
-	});
-
-	test('applies layout styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
-
-		expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
-	});
+		test.step('applies imported styles', async () => {
+			expect(await get_computed_style('.styled', 'color')).toBe('rgb(255, 0, 0)');
+		});
 
-	test('applies local styles', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies imported styles in the correct order', async () => {
+			expect(await get_computed_style('.overridden', 'color')).toBe('rgb(0, 128, 0)');
+		});
 
-		expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
-	});
+		test.step('applies layout styles', async () => {
+			expect(await get_computed_style('footer', 'color')).toBe('rgb(128, 0, 128)');
+		});
 
-	test('applies imported styles in the correct order', async ({ page, get_computed_style }) => {
-		await page.goto('/css');
+		test.step('applies local styles', async () => {
+			expect(await get_computed_style('.also-styled', 'color')).toBe('rgb(0, 0, 255)');
+		});
 
-		const color = await get_computed_style('.overridden', 'color');
-		expect(color).toBe('rgb(0, 128, 0)');
+		test.step('does not apply raw and url', async () => {
+			expect(await get_computed_style('.not', 'color')).toBe('rgb(0, 0, 0)');
+		});
 	});
 });