diff --git a/.changeset/fresh-papayas-change.md b/.changeset/fresh-papayas-change.md
new file mode 100644
index 000000000..33271b0bf
--- /dev/null
+++ b/.changeset/fresh-papayas-change.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': patch
+---
+
+ensure sources paths in sourcemaps are not absolute file paths
diff --git a/.changeset/giant-tools-hunt.md b/.changeset/giant-tools-hunt.md
new file mode 100644
index 000000000..dbad90906
--- /dev/null
+++ b/.changeset/giant-tools-hunt.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+support `&direct` and `&raw` query parameters for svelte requests
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 000000000..6313b56c5
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md
new file mode 100644
index 000000000..9e9906351
--- /dev/null
+++ b/docs/advanced-usage.md
@@ -0,0 +1,125 @@
+# Advanced usage
+
+> **HERE BE DRAGONS**
+>
+> The features described here are not meant to be used in regular libraries or end-user applications.
+> They can be useful for frameworks, documentation sites or in special situations, but you are responsible for applying them correctly.
+>
+> **Proceed with caution!**
+
+## custom queries
+
+Vite supports using query parameters to request different outcomes for the same file.
+
+The following schemes are supported by vite-plugin-svelte:
+
+### raw
+
+```js
+//get .svelte file content as a string
+import content from 'File.svelte?raw';
+```
+
+### experimental
+
+In addition to the plain .svelte source content, you can use special svelte queries.
+
+> These svelte subqueries are experimental, availability, syntax and output format may change
+
+#### raw&svelte
+
+```js
+//get output of svelte.preprocess code as string
+import preprocessed from 'File.svelte?raw&svelte&type=preprocessed';
+```
+
+```js
+//get output of svelte.compile js.code as string
+import script from 'File.svelte?raw&svelte&type=script';
+```
+
+```js
+//get output of svelte.compile css.code as string
+import style from 'File.svelte?raw&svelte&type=style';
+```
+
+##### detail exports
+
+raw&svelte exports code string as default export, but also offers named exports if you need details
+
+```js
+//get output of svelte.preprocess
+import { code, map, dependencies } from 'File.svelte?raw&svelte&type=preprocessed';
+```
+
+```js
+//get output of svelte.compile js
+import { code, map, dependencies } from 'File.svelte?raw&svelte&type=script';
+```
+
+```js
+//get output of svelte.compile css
+import { code, map, dependencies } from 'File.svelte?raw&svelte&type=style';
+```
+
+```js
+//get everything in one go
+import * as all from 'File.svelte?raw&svelte&type=all';
+import {
+  source,
+  preprocessed,
+  dependencies,
+  js,
+  css,
+  ast,
+  normalizedFilename,
+  ssr,
+  lang,
+  warnings,
+  stats
+} from 'File.svelte?raw&svelte&type=all';
+```
+
+#### direct&svelte
+
+```html
+<!-- load and execute component script -->
+<script type="application/javascript" src="File.svelte?direct&svelte&type=script&lang.js" />
+<!-- embed component style as css -->
+<link rel="stylesheet" type="text/css" href="File.svelte?direct&svelte&type=style&lang.css" />
+```
+
+#### sourcemap
+
+add `&sourcemap` to `?(raw|direct)&svelte&type=(script|style|all)` queries to include sourcemaps (inline for direct)
+
+#### compilerOptions
+
+?raw and ?direct use default compilerOptions, even if you have different values in your svelte.config.js:
+
+```js
+const compilerOptions = {
+  dev: false,
+  generate: 'dom',
+  css: false,
+  hydratable: false,
+  enableSourcemap: false // or {js: true} or {css:true} if sourcemap query is set
+};
+```
+
+to get output with different compilerOptions, append them as json like this:
+
+```js
+//get ssr output of svelte.compile js as {code, map, dependencies}
+import script from 'File.svelte?raw&svelte&type=script&compilerOptions={generate:"ssr"}';
+```
+
+only a subset of compilerOptions is supported
+
+- generate
+- dev
+- css
+- hydratable
+- customElement
+- immutable
+- enableSourcemap
diff --git a/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap
new file mode 100644
index 000000000..6c016de89
--- /dev/null
+++ b/packages/e2e-tests/import-queries/__tests__/__snapshots__/import-queries.spec.ts.snap
@@ -0,0 +1,1118 @@
+// Vitest Snapshot v1
+
+exports[`direct > Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js 1`] = `
+"/* src/Dummy.svelte generated by Svelte vXXX */
+import {
+	SvelteComponent as SvelteComponent$,
+	append as append$,
+	attr as attr$,
+	detach as detach$,
+	element as element$,
+	init as init$,
+	insert as insert$,
+	listen as listen$,
+	noop as noop$,
+	safe_not_equal as safe_not_equal$,
+	set_data as set_data$,
+	text as text$
+} from \\"/node_modules/.vite/deps/svelte_internal.js?v=XXX\\";
+
+function create_fragment(ctx) {
+	let button$;
+	let t0$;
+	let t1$;
+	let t2$;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button$ = element$(\\"button\\");
+			t0$ = text$(/*name*/ ctx[0]);
+			t1$ = text$(\\" clicks: \\");
+			t2$ = text$(/*clicks*/ ctx[1]);
+			attr$(button$, \\"class\\", \\"svelte-d8vj6a\\");
+		},
+		m(target, anchor) {
+			insert$(target, button$, anchor);
+			append$(button$, t0$);
+			append$(button$, t1$);
+			append$(button$, t2$);
+
+			if (!mounted) {
+				dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);
+			if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);
+		},
+		i: noop$,
+		o: noop$,
+		d(detaching) {
+			if (detaching) detach$(button$);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let clicks = 0;
+
+	const click_handler$ = () => {
+		$$invalidate(1, clicks++, clicks);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	return [name, clicks, click_handler$];
+}
+
+class Dummy$ extends SvelteComponent$ {
+	constructor(options) {
+		super();
+		init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });
+	}
+}
+
+export default Dummy$;
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O3dCQVFLLEdBQUk7ZUFBQyxXQUFTOzBCQUFDLEdBQU07Ozs7R0FIMUIsT0FJQTs7Ozs7Ozs7Ozs7bURBREssR0FBSTt1REFBVyxHQUFNOzs7Ozs7Ozs7Ozs7O09BUGQsSUFBQTtLQUNQLE1BQUEsR0FBUyxDQUFBOzs7a0JBS1osTUFBTTs7Ozs7Ozs7Ozs7Ozs7Ozs7IiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIkR1bW15LnN2ZWx0ZSJdfQ==
+"
+`;
+
+exports[`direct > Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css 1`] = `
+"button.svelte-d8vj6a{color:#000099}
+
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiRHVtbXkuc3ZlbHRlIiwibWFwcGluZ3MiOiJBQVdrQixNQUFBLGNBQUEsQ0FBQSxjQUtsQiIsIm5hbWVzIjpbXSwic291cmNlcyI6WyJEdW1teS5zdmVsdGUiXX0= */
+"
+`;
+
+exports[`raw > Dummy.svelte?raw 1`] = `
+"<script lang=\\"ts\\">
+	export let name: string;
+	let clicks = 0;
+</script>
+
+<button
+	on:click={() => {
+		clicks++;
+	}}>{name} clicks: {clicks}</button
+>
+
+<style lang=\\"scss\\">
+	$blue: blue;
+	button {
+		color: darken($blue, 20);
+	}
+</style>
+"
+`;
+
+exports[`raw > Dummy.svelte?raw&svelte&type=all&sourcemap 1`] = `
+"{
+  \\"ast\\": {
+    \\"html\\": {
+      \\"start\\": 62,
+      \\"end\\": 138,
+      \\"type\\": \\"Fragment\\",
+      \\"children\\": [
+        {
+          \\"start\\": 60,
+          \\"end\\": 62,
+          \\"type\\": \\"Text\\",
+          \\"raw\\": \\"\\\\n\\\\n\\",
+          \\"data\\": \\"\\\\n\\\\n\\"
+        },
+        {
+          \\"start\\": 62,
+          \\"end\\": 138,
+          \\"type\\": \\"Element\\",
+          \\"name\\": \\"button\\",
+          \\"attributes\\": [
+            {
+              \\"start\\": 71,
+              \\"end\\": 104,
+              \\"type\\": \\"EventHandler\\",
+              \\"name\\": \\"click\\",
+              \\"modifiers\\": [],
+              \\"expression\\": {
+                \\"type\\": \\"ArrowFunctionExpression\\",
+                \\"start\\": 81,
+                \\"end\\": 103,
+                \\"loc\\": {
+                  \\"start\\": {
+                    \\"line\\": 6,
+                    \\"column\\": 11
+                  },
+                  \\"end\\": {
+                    \\"line\\": 8,
+                    \\"column\\": 2
+                  }
+                },
+                \\"id\\": null,
+                \\"expression\\": false,
+                \\"generator\\": false,
+                \\"async\\": false,
+                \\"params\\": [],
+                \\"body\\": {
+                  \\"type\\": \\"BlockStatement\\",
+                  \\"start\\": 87,
+                  \\"end\\": 103,
+                  \\"loc\\": {
+                    \\"start\\": {
+                      \\"line\\": 6,
+                      \\"column\\": 17
+                    },
+                    \\"end\\": {
+                      \\"line\\": 8,
+                      \\"column\\": 2
+                    }
+                  },
+                  \\"body\\": [
+                    {
+                      \\"type\\": \\"ExpressionStatement\\",
+                      \\"start\\": 91,
+                      \\"end\\": 100,
+                      \\"loc\\": {
+                        \\"start\\": {
+                          \\"line\\": 7,
+                          \\"column\\": 2
+                        },
+                        \\"end\\": {
+                          \\"line\\": 7,
+                          \\"column\\": 11
+                        }
+                      },
+                      \\"expression\\": {
+                        \\"type\\": \\"UpdateExpression\\",
+                        \\"start\\": 91,
+                        \\"end\\": 99,
+                        \\"loc\\": {
+                          \\"start\\": {
+                            \\"line\\": 7,
+                            \\"column\\": 2
+                          },
+                          \\"end\\": {
+                            \\"line\\": 7,
+                            \\"column\\": 10
+                          }
+                        },
+                        \\"operator\\": \\"++\\",
+                        \\"prefix\\": false,
+                        \\"argument\\": {
+                          \\"type\\": \\"Identifier\\",
+                          \\"start\\": 91,
+                          \\"end\\": 97,
+                          \\"loc\\": {
+                            \\"start\\": {
+                              \\"line\\": 7,
+                              \\"column\\": 2
+                            },
+                            \\"end\\": {
+                              \\"line\\": 7,
+                              \\"column\\": 8
+                            }
+                          },
+                          \\"name\\": \\"clicks\\"
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ],
+          \\"children\\": [
+            {
+              \\"start\\": 105,
+              \\"end\\": 111,
+              \\"type\\": \\"MustacheTag\\",
+              \\"expression\\": {
+                \\"type\\": \\"Identifier\\",
+                \\"start\\": 106,
+                \\"end\\": 110,
+                \\"loc\\": {
+                  \\"start\\": {
+                    \\"line\\": 8,
+                    \\"column\\": 5
+                  },
+                  \\"end\\": {
+                    \\"line\\": 8,
+                    \\"column\\": 9
+                  }
+                },
+                \\"name\\": \\"name\\"
+              }
+            },
+            {
+              \\"start\\": 111,
+              \\"end\\": 120,
+              \\"type\\": \\"Text\\",
+              \\"raw\\": \\" clicks: \\",
+              \\"data\\": \\" clicks: \\"
+            },
+            {
+              \\"start\\": 120,
+              \\"end\\": 128,
+              \\"type\\": \\"MustacheTag\\",
+              \\"expression\\": {
+                \\"type\\": \\"Identifier\\",
+                \\"start\\": 121,
+                \\"end\\": 127,
+                \\"loc\\": {
+                  \\"start\\": {
+                    \\"line\\": 8,
+                    \\"column\\": 20
+                  },
+                  \\"end\\": {
+                    \\"line\\": 8,
+                    \\"column\\": 26
+                  }
+                },
+                \\"name\\": \\"clicks\\"
+              }
+            }
+          ]
+        },
+        {
+          \\"start\\": 138,
+          \\"end\\": 140,
+          \\"type\\": \\"Text\\",
+          \\"raw\\": \\"\\\\n\\\\n\\",
+          \\"data\\": \\"\\\\n\\\\n\\"
+        }
+      ]
+    },
+    \\"css\\": {
+      \\"type\\": \\"Style\\",
+      \\"start\\": 140,
+      \\"end\\": 195,
+      \\"attributes\\": [
+        {
+          \\"start\\": 147,
+          \\"end\\": 158,
+          \\"type\\": \\"Attribute\\",
+          \\"name\\": \\"lang\\",
+          \\"value\\": [
+            {
+              \\"start\\": 153,
+              \\"end\\": 157,
+              \\"type\\": \\"Text\\",
+              \\"raw\\": \\"scss\\",
+              \\"data\\": \\"scss\\"
+            }
+          ]
+        }
+      ],
+      \\"children\\": [
+        {
+          \\"type\\": \\"Rule\\",
+          \\"prelude\\": {
+            \\"type\\": \\"SelectorList\\",
+            \\"children\\": [
+              {
+                \\"type\\": \\"Selector\\",
+                \\"children\\": [
+                  {
+                    \\"type\\": \\"TypeSelector\\",
+                    \\"name\\": \\"button\\",
+                    \\"start\\": 159,
+                    \\"end\\": 165
+                  }
+                ],
+                \\"start\\": 159,
+                \\"end\\": 165
+              }
+            ],
+            \\"start\\": 159,
+            \\"end\\": 165
+          },
+          \\"block\\": {
+            \\"type\\": \\"Block\\",
+            \\"children\\": [
+              {
+                \\"type\\": \\"Declaration\\",
+                \\"important\\": false,
+                \\"property\\": \\"color\\",
+                \\"value\\": {
+                  \\"type\\": \\"Value\\",
+                  \\"children\\": [
+                    {
+                      \\"type\\": \\"Hash\\",
+                      \\"value\\": \\"000099\\",
+                      \\"start\\": 177,
+                      \\"end\\": 184
+                    }
+                  ],
+                  \\"start\\": 177,
+                  \\"end\\": 184
+                },
+                \\"start\\": 170,
+                \\"end\\": 184
+              }
+            ],
+            \\"start\\": 166,
+            \\"end\\": 187
+          },
+          \\"start\\": 159,
+          \\"end\\": 187
+        }
+      ],
+      \\"content\\": {
+        \\"start\\": 159,
+        \\"end\\": 187,
+        \\"styles\\": \\"button {\\\\n  color: #000099;\\\\n}\\"
+      }
+    },
+    \\"instance\\": {
+      \\"type\\": \\"Script\\",
+      \\"start\\": 0,
+      \\"end\\": 60,
+      \\"context\\": \\"default\\",
+      \\"content\\": {
+        \\"type\\": \\"Program\\",
+        \\"start\\": 18,
+        \\"end\\": 51,
+        \\"loc\\": {
+          \\"start\\": {
+            \\"line\\": 1,
+            \\"column\\": 0
+          },
+          \\"end\\": {
+            \\"line\\": 3,
+            \\"column\\": 0
+          }
+        },
+        \\"body\\": [
+          {
+            \\"type\\": \\"ExportNamedDeclaration\\",
+            \\"start\\": 18,
+            \\"end\\": 34,
+            \\"loc\\": {
+              \\"start\\": {
+                \\"line\\": 1,
+                \\"column\\": 18
+              },
+              \\"end\\": {
+                \\"line\\": 1,
+                \\"column\\": 34
+              }
+            },
+            \\"declaration\\": {
+              \\"type\\": \\"VariableDeclaration\\",
+              \\"start\\": 25,
+              \\"end\\": 34,
+              \\"loc\\": {
+                \\"start\\": {
+                  \\"line\\": 1,
+                  \\"column\\": 25
+                },
+                \\"end\\": {
+                  \\"line\\": 1,
+                  \\"column\\": 34
+                }
+              },
+              \\"declarations\\": [
+                {
+                  \\"type\\": \\"VariableDeclarator\\",
+                  \\"start\\": 29,
+                  \\"end\\": 33,
+                  \\"loc\\": {
+                    \\"start\\": {
+                      \\"line\\": 1,
+                      \\"column\\": 29
+                    },
+                    \\"end\\": {
+                      \\"line\\": 1,
+                      \\"column\\": 33
+                    }
+                  },
+                  \\"id\\": {
+                    \\"type\\": \\"Identifier\\",
+                    \\"start\\": 29,
+                    \\"end\\": 33,
+                    \\"loc\\": {
+                      \\"start\\": {
+                        \\"line\\": 1,
+                        \\"column\\": 29
+                      },
+                      \\"end\\": {
+                        \\"line\\": 1,
+                        \\"column\\": 33
+                      }
+                    },
+                    \\"name\\": \\"name\\"
+                  },
+                  \\"init\\": null
+                }
+              ],
+              \\"kind\\": \\"let\\"
+            },
+            \\"specifiers\\": [],
+            \\"source\\": null
+          },
+          {
+            \\"type\\": \\"VariableDeclaration\\",
+            \\"start\\": 35,
+            \\"end\\": 50,
+            \\"loc\\": {
+              \\"start\\": {
+                \\"line\\": 2,
+                \\"column\\": 0
+              },
+              \\"end\\": {
+                \\"line\\": 2,
+                \\"column\\": 15
+              }
+            },
+            \\"declarations\\": [
+              {
+                \\"type\\": \\"VariableDeclarator\\",
+                \\"start\\": 39,
+                \\"end\\": 49,
+                \\"loc\\": {
+                  \\"start\\": {
+                    \\"line\\": 2,
+                    \\"column\\": 4
+                  },
+                  \\"end\\": {
+                    \\"line\\": 2,
+                    \\"column\\": 14
+                  }
+                },
+                \\"id\\": {
+                  \\"type\\": \\"Identifier\\",
+                  \\"start\\": 39,
+                  \\"end\\": 45,
+                  \\"loc\\": {
+                    \\"start\\": {
+                      \\"line\\": 2,
+                      \\"column\\": 4
+                    },
+                    \\"end\\": {
+                      \\"line\\": 2,
+                      \\"column\\": 10
+                    }
+                  },
+                  \\"name\\": \\"clicks\\"
+                },
+                \\"init\\": {
+                  \\"type\\": \\"Literal\\",
+                  \\"start\\": 48,
+                  \\"end\\": 49,
+                  \\"loc\\": {
+                    \\"start\\": {
+                      \\"line\\": 2,
+                      \\"column\\": 13
+                    },
+                    \\"end\\": {
+                      \\"line\\": 2,
+                      \\"column\\": 14
+                    }
+                  },
+                  \\"value\\": 0,
+                  \\"raw\\": \\"0\\"
+                }
+              }
+            ],
+            \\"kind\\": \\"let\\"
+          }
+        ],
+        \\"sourceType\\": \\"module\\"
+      }
+    }
+  },
+  \\"css\\": {
+    \\"code\\": \\"button.svelte-d8vj6a{color:#000099}\\",
+    \\"map\\": {
+      \\"version\\": 3,
+      \\"file\\": \\"Dummy.svelte\\",
+      \\"mappings\\": \\"AAWkB,MAAA,cAAA,CAAA,cAKlB\\",
+      \\"names\\": [],
+      \\"sources\\": [
+        \\"Dummy.svelte\\"
+      ]
+    }
+  },
+  \\"dependencies\\": [],
+  \\"js\\": {
+    \\"code\\": \\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",
+    \\"map\\": {
+      \\"version\\": 3,
+      \\"mappings\\": \\";;;;;;;;;;;;;;;;;;;;;;;;;;;wBAQK,GAAI;eAAC,WAAS;0BAAC,GAAM;;;;GAH1B,OAIA;;;;;;;;;;;mDADK,GAAI;uDAAW,GAAM;;;;;;;;;;;;;OAPd,IAAA;KACP,MAAA,GAAS,CAAA;;;kBAKZ,MAAM;;;;;;;;;;;;;;;;;\\",
+      \\"names\\": [],
+      \\"sources\\": [
+        \\"Dummy.svelte\\"
+      ]
+    },
+    \\"dependencies\\": []
+  },
+  \\"lang\\": \\"ts\\",
+  \\"normalizedFilename\\": \\"/src/Dummy.svelte\\",
+  \\"preprocessed\\": {
+    \\"code\\": \\"<script lang=\\\\\\"ts\\\\\\">export let name;\\\\nlet clicks = 0;\\\\n</script>\\\\n\\\\n<button\\\\n\\\\ton:click={() => {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}</button\\\\n>\\\\n\\\\n<style lang=\\\\\\"scss\\\\\\">button {\\\\n  color: #000099;\\\\n}</style>\\\\n\\",
+    \\"dependencies\\": [],
+    \\"map\\": {
+      \\"version\\": 3,
+      \\"mappings\\": \\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",
+      \\"names\\": [],
+      \\"sources\\": [
+        \\"Dummy.svelte\\",
+        \\"Dummy.svelte\\"
+      ]
+    }
+  },
+  \\"source\\": \\"<script lang=\\\\\\"ts\\\\\\">\\\\n\\\\texport let name: string;\\\\n\\\\tlet clicks = 0;\\\\n</script>\\\\n\\\\n<button\\\\n\\\\ton:click={() => {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}</button\\\\n>\\\\n\\\\n<style lang=\\\\\\"scss\\\\\\">\\\\n\\\\t$blue: blue;\\\\n\\\\tbutton {\\\\n\\\\t\\\\tcolor: darken($blue, 20);\\\\n\\\\t}\\\\n</style>\\\\n\\",
+  \\"ssr\\": false,
+  \\"stats\\": {
+    \\"timings\\": {
+      \\"total\\":0.123456789,
+      \\"parse\\": {
+        \\"total\\":0.123456789
+      },
+      \\"create component\\": {
+        \\"total\\":0.123456789
+      }
+    }
+  },
+  \\"vars\\": [
+    {
+      \\"name\\": \\"name\\",
+      \\"export_name\\": \\"name\\",
+      \\"injected\\": false,
+      \\"module\\": false,
+      \\"mutated\\": false,
+      \\"reassigned\\": false,
+      \\"referenced\\": true,
+      \\"writable\\": true,
+      \\"referenced_from_script\\": false
+    },
+    {
+      \\"name\\": \\"clicks\\",
+      \\"export_name\\": null,
+      \\"injected\\": false,
+      \\"module\\": false,
+      \\"mutated\\": false,
+      \\"reassigned\\": true,
+      \\"referenced\\": true,
+      \\"writable\\": true,
+      \\"referenced_from_script\\": false
+    }
+  ],
+  \\"warnings\\": []
+}"
+`;
+
+exports[`raw > Dummy.svelte?raw&svelte&type=preprocessed 1`] = `
+"<script lang=\\"ts\\">export let name;
+let clicks = 0;
+</script>
+
+<button
+	on:click={() => {
+		clicks++;
+	}}>{name} clicks: {clicks}</button
+>
+
+<style lang=\\"scss\\">button {
+  color: #000099;
+}</style>
+"
+`;
+
+exports[`raw > Dummy.svelte?raw&svelte&type=script 1`] = `
+"/* src/Dummy.svelte generated by Svelte vXXX */
+import {
+	SvelteComponent as SvelteComponent$,
+	append as append$,
+	attr as attr$,
+	detach as detach$,
+	element as element$,
+	init as init$,
+	insert as insert$,
+	listen as listen$,
+	noop as noop$,
+	safe_not_equal as safe_not_equal$,
+	set_data as set_data$,
+	text as text$
+} from \\"svelte/internal\\";
+
+function create_fragment(ctx) {
+	let button$;
+	let t0$;
+	let t1$;
+	let t2$;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button$ = element$(\\"button\\");
+			t0$ = text$(/*name*/ ctx[0]);
+			t1$ = text$(\\" clicks: \\");
+			t2$ = text$(/*clicks*/ ctx[1]);
+			attr$(button$, \\"class\\", \\"svelte-d8vj6a\\");
+		},
+		m(target, anchor) {
+			insert$(target, button$, anchor);
+			append$(button$, t0$);
+			append$(button$, t1$);
+			append$(button$, t2$);
+
+			if (!mounted) {
+				dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);
+			if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);
+		},
+		i: noop$,
+		o: noop$,
+		d(detaching) {
+			if (detaching) detach$(button$);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let clicks = 0;
+
+	const click_handler$ = () => {
+		$$invalidate(1, clicks++, clicks);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	return [name, clicks, click_handler$];
+}
+
+class Dummy$ extends SvelteComponent$ {
+	constructor(options) {
+		super();
+		init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });
+	}
+}
+
+export default Dummy$;"
+`;
+
+exports[`raw > Dummy.svelte?raw&svelte&type=script&compilerOptions={"customElement":true} 1`] = `
+"/* src/Dummy.svelte generated by Svelte vXXX */
+import {
+	SvelteElement as SvelteElement$,
+	append as append$,
+	attribute_to_object as attribute_to_object$,
+	detach as detach$,
+	element as element$,
+	flush as flush$,
+	init as init$,
+	insert as insert$,
+	listen as listen$,
+	noop as noop$,
+	safe_not_equal as safe_not_equal$,
+	set_data as set_data$,
+	text as text$
+} from \\"svelte/internal\\";
+
+function create_fragment(ctx) {
+	let button$;
+	let t0$;
+	let t1$;
+	let t2$;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button$ = element$(\\"button\\");
+			t0$ = text$(/*name*/ ctx[0]);
+			t1$ = text$(\\" clicks: \\");
+			t2$ = text$(/*clicks*/ ctx[1]);
+			this.c = noop$;
+		},
+		m(target, anchor) {
+			insert$(target, button$, anchor);
+			append$(button$, t0$);
+			append$(button$, t1$);
+			append$(button$, t2$);
+
+			if (!mounted) {
+				dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);
+			if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);
+		},
+		i: noop$,
+		o: noop$,
+		d(detaching) {
+			if (detaching) detach$(button$);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let clicks = 0;
+
+	const click_handler$ = () => {
+		$$invalidate(1, clicks++, clicks);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	return [name, clicks, click_handler$];
+}
+
+class Dummy$ extends SvelteElement$ {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = \`<style>button{color:#000099}</style>\`;
+
+		init$(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object$(this.attributes),
+				customElement: true
+			},
+			instance$,
+			create_fragment,
+			safe_not_equal$,
+			{ name: 0 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert$(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush$();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [\\"name\\"];
+	}
+
+	get name() {
+		return this.$$.ctx[0];
+	}
+
+	set name(name) {
+		this.$$set({ name });
+		flush$();
+	}
+}
+
+export default Dummy$;"
+`;
+
+exports[`raw > Dummy.svelte?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`;
+
+exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=all 1`] = `
+"export const ast={\\"html\\":{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Fragment\\",\\"children\\":[{\\"start\\":60,\\"end\\":62,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"},{\\"start\\":62,\\"end\\":138,\\"type\\":\\"Element\\",\\"name\\":\\"button\\",\\"attributes\\":[{\\"start\\":71,\\"end\\":104,\\"type\\":\\"EventHandler\\",\\"name\\":\\"click\\",\\"modifiers\\":[],\\"expression\\":{\\"type\\":\\"ArrowFunctionExpression\\",\\"start\\":81,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":11},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"id\\":null,\\"expression\\":false,\\"generator\\":false,\\"async\\":false,\\"params\\":[],\\"body\\":{\\"type\\":\\"BlockStatement\\",\\"start\\":87,\\"end\\":103,\\"loc\\":{\\"start\\":{\\"line\\":6,\\"column\\":17},\\"end\\":{\\"line\\":8,\\"column\\":2}},\\"body\\":[{\\"type\\":\\"ExpressionStatement\\",\\"start\\":91,\\"end\\":100,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":11}},\\"expression\\":{\\"type\\":\\"UpdateExpression\\",\\"start\\":91,\\"end\\":99,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":10}},\\"operator\\":\\"++\\",\\"prefix\\":false,\\"argument\\":{\\"type\\":\\"Identifier\\",\\"start\\":91,\\"end\\":97,\\"loc\\":{\\"start\\":{\\"line\\":7,\\"column\\":2},\\"end\\":{\\"line\\":7,\\"column\\":8}},\\"name\\":\\"clicks\\"}}}]}}}],\\"children\\":[{\\"start\\":105,\\"end\\":111,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":106,\\"end\\":110,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":5},\\"end\\":{\\"line\\":8,\\"column\\":9}},\\"name\\":\\"name\\"}},{\\"start\\":111,\\"end\\":120,\\"type\\":\\"Text\\",\\"raw\\":\\" clicks: \\",\\"data\\":\\" clicks: \\"},{\\"start\\":120,\\"end\\":128,\\"type\\":\\"MustacheTag\\",\\"expression\\":{\\"type\\":\\"Identifier\\",\\"start\\":121,\\"end\\":127,\\"loc\\":{\\"start\\":{\\"line\\":8,\\"column\\":20},\\"end\\":{\\"line\\":8,\\"column\\":26}},\\"name\\":\\"clicks\\"}}]},{\\"start\\":138,\\"end\\":140,\\"type\\":\\"Text\\",\\"raw\\":\\"\\\\n\\\\n\\",\\"data\\":\\"\\\\n\\\\n\\"}]},\\"css\\":{\\"type\\":\\"Style\\",\\"start\\":140,\\"end\\":195,\\"attributes\\":[{\\"start\\":147,\\"end\\":158,\\"type\\":\\"Attribute\\",\\"name\\":\\"lang\\",\\"value\\":[{\\"start\\":153,\\"end\\":157,\\"type\\":\\"Text\\",\\"raw\\":\\"scss\\",\\"data\\":\\"scss\\"}]}],\\"children\\":[{\\"type\\":\\"Rule\\",\\"prelude\\":{\\"type\\":\\"SelectorList\\",\\"children\\":[{\\"type\\":\\"Selector\\",\\"children\\":[{\\"type\\":\\"TypeSelector\\",\\"name\\":\\"button\\",\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165}],\\"start\\":159,\\"end\\":165},\\"block\\":{\\"type\\":\\"Block\\",\\"children\\":[{\\"type\\":\\"Declaration\\",\\"important\\":false,\\"property\\":\\"color\\",\\"value\\":{\\"type\\":\\"Value\\",\\"children\\":[{\\"type\\":\\"Hash\\",\\"value\\":\\"000099\\",\\"start\\":177,\\"end\\":184}],\\"start\\":177,\\"end\\":184},\\"start\\":170,\\"end\\":184}],\\"start\\":166,\\"end\\":187},\\"start\\":159,\\"end\\":187}],\\"content\\":{\\"start\\":159,\\"end\\":187,\\"styles\\":\\"button {\\\\n  color: #000099;\\\\n}\\"}},\\"instance\\":{\\"type\\":\\"Script\\",\\"start\\":0,\\"end\\":60,\\"context\\":\\"default\\",\\"content\\":{\\"type\\":\\"Program\\",\\"start\\":18,\\"end\\":51,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":0},\\"end\\":{\\"line\\":3,\\"column\\":0}},\\"body\\":[{\\"type\\":\\"ExportNamedDeclaration\\",\\"start\\":18,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":18},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declaration\\":{\\"type\\":\\"VariableDeclaration\\",\\"start\\":25,\\"end\\":34,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":25},\\"end\\":{\\"line\\":1,\\"column\\":34}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":29,\\"end\\":33,\\"loc\\":{\\"start\\":{\\"line\\":1,\\"column\\":29},\\"end\\":{\\"line\\":1,\\"column\\":33}},\\"name\\":\\"name\\"},\\"init\\":null}],\\"kind\\":\\"let\\"},\\"specifiers\\":[],\\"source\\":null},{\\"type\\":\\"VariableDeclaration\\",\\"start\\":35,\\"end\\":50,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":0},\\"end\\":{\\"line\\":2,\\"column\\":15}},\\"declarations\\":[{\\"type\\":\\"VariableDeclarator\\",\\"start\\":39,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"id\\":{\\"type\\":\\"Identifier\\",\\"start\\":39,\\"end\\":45,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":4},\\"end\\":{\\"line\\":2,\\"column\\":10}},\\"name\\":\\"clicks\\"},\\"init\\":{\\"type\\":\\"Literal\\",\\"start\\":48,\\"end\\":49,\\"loc\\":{\\"start\\":{\\"line\\":2,\\"column\\":13},\\"end\\":{\\"line\\":2,\\"column\\":14}},\\"value\\":0,\\"raw\\":\\"0\\"}}],\\"kind\\":\\"let\\"}],\\"sourceType\\":\\"module\\"}}}
+export const css={\\"code\\":\\"button.svelte-d8vj6a{color:#000099}\\",\\"map\\":null}
+export const dependencies=[]
+export const js={\\"code\\":\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\",\\"map\\":null,\\"dependencies\\":[]}
+export const lang=\\"ts\\"
+export const normalizedFilename=\\"/src/Dummy.svelte\\"
+export const preprocessed={\\"code\\":\\"<script lang=\\\\\\"ts\\\\\\">export let name;\\\\nlet clicks = 0;\\\\n</script>\\\\n\\\\n<button\\\\n\\\\ton:click={() => {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}</button\\\\n>\\\\n\\\\n<style lang=\\\\\\"scss\\\\\\">button {\\\\n  color: #000099;\\\\n}</style>\\\\n\\",\\"dependencies\\":[],\\"map\\":{\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}}
+export const source=\\"<script lang=\\\\\\"ts\\\\\\">\\\\n\\\\texport let name: string;\\\\n\\\\tlet clicks = 0;\\\\n</script>\\\\n\\\\n<button\\\\n\\\\ton:click={() => {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}</button\\\\n>\\\\n\\\\n<style lang=\\\\\\"scss\\\\\\">\\\\n\\\\t$blue: blue;\\\\n\\\\tbutton {\\\\n\\\\t\\\\tcolor: darken($blue, 20);\\\\n\\\\t}\\\\n</style>\\\\n\\"
+export const ssr=false
+export const stats={\\"timings\\":{\\"total\\":0.123456789,\\"parse\\":{\\"total\\":0.123456789},\\"create component\\":{\\"total\\":0.123456789}}}
+export const vars=[{\\"name\\":\\"name\\",\\"export_name\\":\\"name\\",\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":false,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false},{\\"name\\":\\"clicks\\",\\"export_name\\":null,\\"injected\\":false,\\"module\\":false,\\"mutated\\":false,\\"reassigned\\":true,\\"referenced\\":true,\\"writable\\":true,\\"referenced_from_script\\":false}]
+export const warnings=[]
+"
+`;
+
+exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=preprocessed 1`] = `
+"export const code=\\"<script lang=\\\\\\"ts\\\\\\">export let name;\\\\nlet clicks = 0;\\\\n</script>\\\\n\\\\n<button\\\\n\\\\ton:click={() => {\\\\n\\\\t\\\\tclicks++;\\\\n\\\\t}}>{name} clicks: {clicks}</button\\\\n>\\\\n\\\\n<style lang=\\\\\\"scss\\\\\\">button {\\\\n  color: #000099;\\\\n}</style>\\\\n\\"
+export const dependencies=[]
+export const map={\\"version\\":3,\\"mappings\\":\\"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CCCT,MAAA,CAAA,GAAA,CAAI,IAAA;AACX,GAAA,CAAI,MAAA,CAAA,CAAA,CAAS,CAAA;ADCd,CAAC,CAAC,MAAM;;AAER,CAAC;AACD,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACjB,EAAE,MAAM,CAAC,CAAC;AACV,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B;;AAEA,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;;CAKlB,CAAC,CAAC,KAAK;\\",\\"names\\":[],\\"sources\\":[\\"Dummy.svelte\\",\\"Dummy.svelte\\"]}
+export default code
+"
+`;
+
+exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=script 1`] = `
+"export const code=\\"/* src/Dummy.svelte generated by Svelte vXXX */\\\\nimport {\\\\n\\\\tSvelteComponent as SvelteComponent$,\\\\n\\\\tappend as append$,\\\\n\\\\tattr as attr$,\\\\n\\\\tdetach as detach$,\\\\n\\\\telement as element$,\\\\n\\\\tinit as init$,\\\\n\\\\tinsert as insert$,\\\\n\\\\tlisten as listen$,\\\\n\\\\tnoop as noop$,\\\\n\\\\tsafe_not_equal as safe_not_equal$,\\\\n\\\\tset_data as set_data$,\\\\n\\\\ttext as text$\\\\n} from \\\\\\"svelte/internal\\\\\\";\\\\n\\\\nfunction create_fragment(ctx) {\\\\n\\\\tlet button$;\\\\n\\\\tlet t0$;\\\\n\\\\tlet t1$;\\\\n\\\\tlet t2$;\\\\n\\\\tlet mounted;\\\\n\\\\tlet dispose;\\\\n\\\\n\\\\treturn {\\\\n\\\\t\\\\tc() {\\\\n\\\\t\\\\t\\\\tbutton$ = element$(\\\\\\"button\\\\\\");\\\\n\\\\t\\\\t\\\\tt0$ = text$(/*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tt1$ = text$(\\\\\\" clicks: \\\\\\");\\\\n\\\\t\\\\t\\\\tt2$ = text$(/*clicks*/ ctx[1]);\\\\n\\\\t\\\\t\\\\tattr$(button$, \\\\\\"class\\\\\\", \\\\\\"svelte-d8vj6a\\\\\\");\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tm(target, anchor) {\\\\n\\\\t\\\\t\\\\tinsert$(target, button$, anchor);\\\\n\\\\t\\\\t\\\\tappend$(button$, t0$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t1$);\\\\n\\\\t\\\\t\\\\tappend$(button$, t2$);\\\\n\\\\n\\\\t\\\\t\\\\tif (!mounted) {\\\\n\\\\t\\\\t\\\\t\\\\tdispose = listen$(button$, \\\\\\"click\\\\\\", /*click_handler$*/ ctx[2]);\\\\n\\\\t\\\\t\\\\t\\\\tmounted = true;\\\\n\\\\t\\\\t\\\\t}\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\tp(ctx, [dirty]) {\\\\n\\\\t\\\\t\\\\tif (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);\\\\n\\\\t\\\\t\\\\tif (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);\\\\n\\\\t\\\\t},\\\\n\\\\t\\\\ti: noop$,\\\\n\\\\t\\\\to: noop$,\\\\n\\\\t\\\\td(detaching) {\\\\n\\\\t\\\\t\\\\tif (detaching) detach$(button$);\\\\n\\\\t\\\\t\\\\tmounted = false;\\\\n\\\\t\\\\t\\\\tdispose();\\\\n\\\\t\\\\t}\\\\n\\\\t};\\\\n}\\\\n\\\\nfunction instance$($$self, $$props, $$invalidate) {\\\\n\\\\tlet { name } = $$props;\\\\n\\\\tlet clicks = 0;\\\\n\\\\n\\\\tconst click_handler$ = () => {\\\\n\\\\t\\\\t$$invalidate(1, clicks++, clicks);\\\\n\\\\t};\\\\n\\\\n\\\\t$$self.$$set = $$props => {\\\\n\\\\t\\\\tif ('name' in $$props) $$invalidate(0, name = $$props.name);\\\\n\\\\t};\\\\n\\\\n\\\\treturn [name, clicks, click_handler$];\\\\n}\\\\n\\\\nclass Dummy$ extends SvelteComponent$ {\\\\n\\\\tconstructor(options) {\\\\n\\\\t\\\\tsuper();\\\\n\\\\t\\\\tinit$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });\\\\n\\\\t}\\\\n}\\\\n\\\\nexport default Dummy$;\\"
+export const dependencies=[]
+export const map=null
+export default code
+"
+`;
+
+exports[`raw > mixed exports > Dummy.svelte?raw&svelte&type=style 1`] = `
+"export const code=\\"button.svelte-d8vj6a{color:#000099}\\"
+export const map=null
+export default code
+"
+`;
+
+exports[`ssrLoadModule > ?raw 1`] = `
+"<script lang=\\"ts\\">
+	export let name: string;
+	let clicks = 0;
+</script>
+
+<button
+	on:click={() => {
+		clicks++;
+	}}>{name} clicks: {clicks}</button
+>
+
+<style lang=\\"scss\\">
+	$blue: blue;
+	button {
+		color: darken($blue, 20);
+	}
+</style>
+"
+`;
+
+exports[`ssrLoadModule > ?raw&svelte&type=preprocessed 1`] = `
+"<script lang=\\"ts\\">export let name;
+let clicks = 0;
+</script>
+
+<button
+	on:click={() => {
+		clicks++;
+	}}>{name} clicks: {clicks}</button
+>
+
+<style lang=\\"scss\\">button {
+  color: #000099;
+}</style>
+"
+`;
+
+exports[`ssrLoadModule > ?raw&svelte&type=script 1`] = `
+"/* src/Dummy.svelte generated by Svelte vXXX */
+import {
+	SvelteComponent as SvelteComponent$,
+	append as append$,
+	attr as attr$,
+	detach as detach$,
+	element as element$,
+	init as init$,
+	insert as insert$,
+	listen as listen$,
+	noop as noop$,
+	safe_not_equal as safe_not_equal$,
+	set_data as set_data$,
+	text as text$
+} from \\"svelte/internal\\";
+
+function create_fragment(ctx) {
+	let button$;
+	let t0$;
+	let t1$;
+	let t2$;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button$ = element$(\\"button\\");
+			t0$ = text$(/*name*/ ctx[0]);
+			t1$ = text$(\\" clicks: \\");
+			t2$ = text$(/*clicks*/ ctx[1]);
+			attr$(button$, \\"class\\", \\"svelte-d8vj6a\\");
+		},
+		m(target, anchor) {
+			insert$(target, button$, anchor);
+			append$(button$, t0$);
+			append$(button$, t1$);
+			append$(button$, t2$);
+
+			if (!mounted) {
+				dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);
+			if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);
+		},
+		i: noop$,
+		o: noop$,
+		d(detaching) {
+			if (detaching) detach$(button$);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let clicks = 0;
+
+	const click_handler$ = () => {
+		$$invalidate(1, clicks++, clicks);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	return [name, clicks, click_handler$];
+}
+
+class Dummy$ extends SvelteComponent$ {
+	constructor(options) {
+		super();
+		init$(this, options, instance$, create_fragment, safe_not_equal$, { name: 0 });
+	}
+}
+
+export default Dummy$;"
+`;
+
+exports[`ssrLoadModule > ?raw&svelte&type=script&compilerOptions={"customElement":true} 1`] = `
+"/* src/Dummy.svelte generated by Svelte vXXX */
+import {
+	SvelteElement as SvelteElement$,
+	append as append$,
+	attribute_to_object as attribute_to_object$,
+	detach as detach$,
+	element as element$,
+	flush as flush$,
+	init as init$,
+	insert as insert$,
+	listen as listen$,
+	noop as noop$,
+	safe_not_equal as safe_not_equal$,
+	set_data as set_data$,
+	text as text$
+} from \\"svelte/internal\\";
+
+function create_fragment(ctx) {
+	let button$;
+	let t0$;
+	let t1$;
+	let t2$;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			button$ = element$(\\"button\\");
+			t0$ = text$(/*name*/ ctx[0]);
+			t1$ = text$(\\" clicks: \\");
+			t2$ = text$(/*clicks*/ ctx[1]);
+			this.c = noop$;
+		},
+		m(target, anchor) {
+			insert$(target, button$, anchor);
+			append$(button$, t0$);
+			append$(button$, t1$);
+			append$(button$, t2$);
+
+			if (!mounted) {
+				dispose = listen$(button$, \\"click\\", /*click_handler$*/ ctx[2]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*name*/ 1) set_data$(t0$, /*name*/ ctx[0]);
+			if (dirty & /*clicks*/ 2) set_data$(t2$, /*clicks*/ ctx[1]);
+		},
+		i: noop$,
+		o: noop$,
+		d(detaching) {
+			if (detaching) detach$(button$);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance$($$self, $$props, $$invalidate) {
+	let { name } = $$props;
+	let clicks = 0;
+
+	const click_handler$ = () => {
+		$$invalidate(1, clicks++, clicks);
+	};
+
+	$$self.$$set = $$props => {
+		if ('name' in $$props) $$invalidate(0, name = $$props.name);
+	};
+
+	return [name, clicks, click_handler$];
+}
+
+class Dummy$ extends SvelteElement$ {
+	constructor(options) {
+		super();
+		this.shadowRoot.innerHTML = \`<style>button{color:#000099}</style>\`;
+
+		init$(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object$(this.attributes),
+				customElement: true
+			},
+			instance$,
+			create_fragment,
+			safe_not_equal$,
+			{ name: 0 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert$(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush$();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return [\\"name\\"];
+	}
+
+	get name() {
+		return this.$$.ctx[0];
+	}
+
+	set name(name) {
+		this.$$set({ name });
+		flush$();
+	}
+}
+
+export default Dummy$;"
+`;
+
+exports[`ssrLoadModule > ?raw&svelte&type=style 1`] = `"button.svelte-d8vj6a{color:#000099}"`;
diff --git a/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts
new file mode 100644
index 000000000..27f7c8638
--- /dev/null
+++ b/packages/e2e-tests/import-queries/__tests__/import-queries.spec.ts
@@ -0,0 +1,164 @@
+import { browserLogs, fetchFromPage, getText, isBuild, testDir } from '~utils';
+import { createServer, ViteDevServer } from 'vite';
+
+function normalizeSnapshot(result: string) {
+	// during dev, the import is rewritten but can vary on the v= hash. replace with stable short import
+	return result
+		.replace(/\.js\?v=[0-9a-f]{8}/g, '.js?v=XXX') // vite import analysis import rewrite version query
+		.replace(/generated by Svelte v\d\.\d+\.\d+/g, 'generated by Svelte vXXX') // compiler version comment
+		.replace(/"total": *\d+\.\d+/g, '"total":0.123456789'); // svelte compile stats
+}
+
+describe('raw', () => {
+	test('does not have failed requests', async () => {
+		browserLogs.forEach((msg) => {
+			expect(msg).not.toMatch('404');
+		});
+	});
+
+	test('Dummy.svelte', async () => {
+		expect(await getText('#component button')).toBe('dummy clicks: 0');
+	});
+
+	test('Dummy.svelte?raw', async () => {
+		const result = await getText('#raw');
+		expect(result).toMatchSnapshot();
+	});
+
+	test('Dummy.svelte?raw&svelte&type=preprocessed', async () => {
+		const result = await getText('#preprocessed');
+		expect(result).toMatchSnapshot();
+	});
+
+	test(`Dummy.svelte?raw&svelte&type=script`, async () => {
+		const result = await getText('#script');
+		expect(normalizeSnapshot(result)).toMatchSnapshot();
+	});
+
+	test('Dummy.svelte?raw&svelte&type=script&compilerOptions={"customElement":true}', async () => {
+		const result = await getText('#wcScript');
+		expect(normalizeSnapshot(result)).toMatchSnapshot();
+	});
+
+	test('Dummy.svelte?raw&svelte&type=style', async () => {
+		const result = await getText('#style');
+		expect(result).toMatchSnapshot();
+	});
+
+	test('Dummy.svelte?raw&svelte&type=all&sourcemap', async () => {
+		const result = await getText('#all');
+		expect(normalizeSnapshot(result)).toMatchSnapshot();
+	});
+
+	describe.runIf(!isBuild)('mixed exports', () => {
+		test('Dummy.svelte?raw&svelte&type=preprocessed', async () => {
+			const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=preprocessed').then(
+				(res) => res.text()
+			);
+			expect(normalizeSnapshot(module)).toMatchSnapshot();
+		});
+		test('Dummy.svelte?raw&svelte&type=style', async () => {
+			const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=style').then((res) =>
+				res.text()
+			);
+			expect(normalizeSnapshot(module)).toMatchSnapshot();
+		});
+		test('Dummy.svelte?raw&svelte&type=script', async () => {
+			const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=script').then((res) =>
+				res.text()
+			);
+			expect(normalizeSnapshot(module)).toMatchSnapshot();
+		});
+		test('Dummy.svelte?raw&svelte&type=all', async () => {
+			const module = await fetchFromPage('src/Dummy.svelte?raw&svelte&type=all').then((res) =>
+				res.text()
+			);
+			expect(normalizeSnapshot(module)).toMatchSnapshot();
+		});
+	});
+});
+
+// vitest prints a warning about obsolete snapshots during build tests, ignore it, they are used in dev tests.
+// always regenerate snapshots with `pnpm test:serve import-queries -u` and check the diffs if they are correct
+describe.runIf(isBuild)('snapshots not obsolete warning', async () => {
+	afterAll(() => {
+		console.log(
+			'Ignore the obsolete snapshot warnings for ssrLoadModule snapshots from vitest during test:build, they are used in test:serve'
+		);
+	});
+	test('suite not empty', () => {
+		expect(true).toBe(true);
+	});
+});
+
+describe.runIf(!isBuild)('direct', () => {
+	test('Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css', async () => {
+		const response = await fetchFromPage(
+			'src/Dummy.svelte?direct&svelte&type=style&sourcemap&lang.css',
+			{
+				headers: { Accept: 'text/css' }
+			}
+		);
+		expect(response.ok).toBe(true);
+		expect(response.headers.get('Content-Type')).toBe('text/css');
+		const css = await response.text();
+		expect(css).toMatchSnapshot();
+	});
+	test('Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js', async () => {
+		const response = await fetchFromPage(
+			'src/Dummy.svelte?direct&svelte&type=script&sourcemap&lang.js',
+			{
+				headers: { Accept: 'application/javascript' }
+			}
+		);
+		expect(response.ok).toBe(true);
+		expect(response.headers.get('Content-Type')).toBe('application/javascript');
+		const js = await response.text();
+		expect(normalizeSnapshot(js)).toMatchSnapshot();
+	});
+});
+
+describe.runIf(!isBuild)('ssrLoadModule', () => {
+	let vite: ViteDevServer;
+	let ssrLoadDummy;
+	beforeAll(async () => {
+		vite = await createServer({
+			root: testDir + '/',
+			appType: 'custom',
+			server: { middlewareMode: true, hmr: false }
+		});
+		// needed to init plugins
+		await vite.pluginContainer.buildStart({});
+		ssrLoadDummy = async (query) =>
+			vite
+				.ssrLoadModule('./src/Dummy.svelte' + query, { fixStacktrace: true })
+				.then((m) => m.default?.code ?? m.default);
+	});
+	afterAll(async () => {
+		await vite.close();
+		vite = null;
+		ssrLoadDummy = null;
+	});
+	test('?raw', async () => {
+		const result = await ssrLoadDummy('?raw');
+		expect(result).toMatchSnapshot();
+	});
+	test('?raw&svelte&type=preprocessed', async () => {
+		const result = await ssrLoadDummy('?raw&svelte&type=preprocessed');
+		expect(result).toMatchSnapshot();
+	});
+	test('?raw&svelte&type=script', async () => {
+		const result = await ssrLoadDummy('?raw&svelte&type=script');
+		expect(normalizeSnapshot(result)).toMatchSnapshot();
+	});
+	test('?raw&svelte&type=script&compilerOptions={"customElement":true}', async () => {
+		const result = await ssrLoadDummy(
+			'?raw&svelte&type=script&compilerOptions={"customElement":true}'
+		);
+		expect(normalizeSnapshot(result)).toMatchSnapshot();
+	});
+	test('?raw&svelte&type=style', async () => {
+		const result = await ssrLoadDummy('?raw&svelte&type=style');
+		expect(result).toMatchSnapshot();
+	});
+});
diff --git a/packages/e2e-tests/import-queries/index.html b/packages/e2e-tests/import-queries/index.html
new file mode 100644
index 000000000..c4b05496b
--- /dev/null
+++ b/packages/e2e-tests/import-queries/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/png" href="/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>
diff --git a/packages/e2e-tests/import-queries/package.json b/packages/e2e-tests/import-queries/package.json
new file mode 100644
index 000000000..3dde129dc
--- /dev/null
+++ b/packages/e2e-tests/import-queries/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "e2e-tests-import-queries",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --force",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "workspace:*",
+    "sass": "^1.56.1",
+    "svelte": "^3.53.1",
+    "vite": "^3.2.3"
+  }
+}
diff --git a/packages/e2e-tests/import-queries/public/favicon.png b/packages/e2e-tests/import-queries/public/favicon.png
new file mode 100644
index 000000000..7e6f5eb5a
Binary files /dev/null and b/packages/e2e-tests/import-queries/public/favicon.png differ
diff --git a/packages/e2e-tests/import-queries/src/App.svelte b/packages/e2e-tests/import-queries/src/App.svelte
new file mode 100644
index 000000000..4c3781e69
--- /dev/null
+++ b/packages/e2e-tests/import-queries/src/App.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import Dummy from './Dummy.svelte';
+	import raw from './Dummy.svelte?raw';
+	import preprocessed from './Dummy.svelte?raw&svelte&type=preprocessed';
+	import script from './Dummy.svelte?raw&svelte&type=script';
+	import wcScript from './Dummy.svelte?raw&svelte&type=script&compilerOptions={"customElement":true,"dev":false}';
+	import style from './Dummy.svelte?raw&svelte&type=style';
+	import * as all from './Dummy.svelte?raw&svelte&type=all&sourcemap';
+</script>
+
+<main>
+	<h1>Component</h1>
+	<div id="component"><Dummy name="dummy" /></div>
+	<h1>raw</h1>
+	<pre id="raw">{raw}</pre>
+	<h1>preprocessed</h1>
+	<pre id="preprocessed">{preprocessed}</pre>
+	<h1>script</h1>
+	<pre id="script">{script}</pre>
+	<h1>web component script</h1>
+	<pre id="wcScript">{wcScript}</pre>
+	<h1>style</h1>
+	<pre id="style">{style}</pre>
+	<h1>all</h1>
+	<pre id="all">{JSON.stringify(all, null, 2)}</pre>
+</main>
diff --git a/packages/e2e-tests/import-queries/src/Dummy.svelte b/packages/e2e-tests/import-queries/src/Dummy.svelte
new file mode 100644
index 000000000..21db6c29d
--- /dev/null
+++ b/packages/e2e-tests/import-queries/src/Dummy.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	export let name: string;
+	let clicks = 0;
+</script>
+
+<button
+	on:click={() => {
+		clicks++;
+	}}>{name} clicks: {clicks}</button
+>
+
+<style lang="scss">
+	$blue: blue;
+	button {
+		color: darken($blue, 20);
+	}
+</style>
diff --git a/packages/e2e-tests/import-queries/src/main.js b/packages/e2e-tests/import-queries/src/main.js
new file mode 100644
index 000000000..2c27a2579
--- /dev/null
+++ b/packages/e2e-tests/import-queries/src/main.js
@@ -0,0 +1,7 @@
+import App from './App.svelte';
+
+const app = new App({
+	target: document.body
+});
+
+export default app;
diff --git a/packages/e2e-tests/import-queries/src/vite-env.d.ts b/packages/e2e-tests/import-queries/src/vite-env.d.ts
new file mode 100644
index 000000000..4078e7476
--- /dev/null
+++ b/packages/e2e-tests/import-queries/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
diff --git a/packages/e2e-tests/import-queries/svelte.config.js b/packages/e2e-tests/import-queries/svelte.config.js
new file mode 100644
index 000000000..f3a4f4ccb
--- /dev/null
+++ b/packages/e2e-tests/import-queries/svelte.config.js
@@ -0,0 +1,12 @@
+export default {
+	vitePlugin: {
+		experimental: {
+			useVitePreprocess: true
+		}
+	},
+	onwarn(warning, defaultHandler) {
+		// import query test generates one of these
+		if (warning.code === 'custom-element-no-tag') return;
+		defaultHandler(warning);
+	}
+};
diff --git a/packages/e2e-tests/import-queries/vite.config.js b/packages/e2e-tests/import-queries/vite.config.js
new file mode 100644
index 000000000..24823c71d
--- /dev/null
+++ b/packages/e2e-tests/import-queries/vite.config.js
@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [svelte()],
+	optimizeDeps: {
+		exclude: [
+			// TODO this must be excluded because nested has an scss dep that prebundle can't handle!
+			// figure out how to exclude it automatically or at least tell the user about it in a more friendly way
+			'e2e-test-dep-scss-only',
+			'e2e-test-dep-svelte-hybrid'
+		]
+	},
+	build: {
+		// make build faster by skipping transforms and minification
+		target: 'esnext',
+		minify: false
+	},
+	server: {
+		watch: {
+			// During tests we edit the files too fast and sometimes chokidar
+			// misses change events, so enforce polling for consistency
+			usePolling: true,
+			interval: 100
+		}
+	}
+});
diff --git a/packages/e2e-tests/testUtils.ts b/packages/e2e-tests/testUtils.ts
index a87cf517c..eea67ae6d 100644
--- a/packages/e2e-tests/testUtils.ts
+++ b/packages/e2e-tests/testUtils.ts
@@ -269,6 +269,10 @@ export async function fetchPageText() {
 	}
 }
 
+export async function fetchFromPage(url, init?) {
+	const fullUrl = page.url() + (url.startsWith('/') ? url.slice(1) : url);
+	return fetch(fullUrl, init);
+}
 export function readVitePrebundleMetadata() {
 	const metadataPaths = [
 		'node_modules/.vite/_metadata.json',
diff --git a/packages/vite-plugin-svelte/src/handle-hot-update.ts b/packages/vite-plugin-svelte/src/handle-hot-update.ts
index 0349abfea..6f3b90ff2 100644
--- a/packages/vite-plugin-svelte/src/handle-hot-update.ts
+++ b/packages/vite-plugin-svelte/src/handle-hot-update.ts
@@ -20,7 +20,7 @@ export async function handleHotUpdate(
 		log.debug(`handleHotUpdate called before initial transform for ${svelteRequest.id}`);
 		return;
 	}
-	const { read, server } = ctx;
+	const { read, server, modules } = ctx;
 
 	const cachedJS = cache.getJS(svelteRequest);
 	const cachedCss = cache.getCSS(svelteRequest);
@@ -35,41 +35,41 @@ export async function handleHotUpdate(
 		throw e;
 	}
 
-	const affectedModules = new Set<ModuleNode | undefined>();
+	const affectedModules = [...modules];
 
-	const cssModule = server.moduleGraph.getModuleById(svelteRequest.cssId);
-	const mainModule = server.moduleGraph.getModuleById(svelteRequest.id);
-	const cssUpdated = cssModule && cssChanged(cachedCss, compileData.compiled.css);
-	if (cssUpdated) {
-		log.debug(`handleHotUpdate css changed for ${svelteRequest.cssId}`);
-		affectedModules.add(cssModule);
+	const cssIdx = modules.findIndex((m) => m.id === svelteRequest.cssId);
+	if (cssIdx > -1) {
+		const cssUpdated = cssChanged(cachedCss, compileData.compiled.css);
+		if (!cssUpdated) {
+			log.debug(`skipping unchanged css for ${svelteRequest.cssId}`);
+			affectedModules.splice(cssIdx, 1);
+		}
 	}
-	const jsUpdated =
-		mainModule && jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
-	if (jsUpdated) {
-		log.debug(`handleHotUpdate js changed for ${svelteRequest.id}`);
-		affectedModules.add(mainModule);
+	const jsIdx = modules.findIndex((m) => m.id === svelteRequest.id);
+	if (jsIdx > -1) {
+		const jsUpdated = jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
+		if (!jsUpdated) {
+			log.debug(`skipping unchanged js for ${svelteRequest.id}`);
+			affectedModules.splice(jsIdx, 1);
+			// transform won't be called, log warnings here
+			logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
+		}
 	}
 
-	if (!jsUpdated) {
-		// transform won't be called, log warnings here
-		logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
-	}
-
-	const result = [...affectedModules].filter(Boolean) as ModuleNode[];
-
 	// TODO is this enough? see also: https://github.com/vitejs/vite/issues/2274
-	const ssrModulesToInvalidate = result.filter((m) => !!m.ssrTransformResult);
+	const ssrModulesToInvalidate = affectedModules.filter((m) => !!m.ssrTransformResult);
 	if (ssrModulesToInvalidate.length > 0) {
 		log.debug(`invalidating modules ${ssrModulesToInvalidate.map((m) => m.id).join(', ')}`);
 		ssrModulesToInvalidate.forEach((moduleNode) => server.moduleGraph.invalidateModule(moduleNode));
 	}
-	if (result.length > 0) {
+	if (affectedModules.length > 0) {
 		log.debug(
-			`handleHotUpdate for ${svelteRequest.id} result: ${result.map((m) => m.id).join(', ')}`
+			`handleHotUpdate for ${svelteRequest.id} result: ${affectedModules
+				.map((m) => m.id)
+				.join(', ')}`
 		);
 	}
-	return result;
+	return affectedModules;
 }
 
 function cssChanged(prev?: Code, next?: Code): boolean {
diff --git a/packages/vite-plugin-svelte/src/index.ts b/packages/vite-plugin-svelte/src/index.ts
index df0587415..48d751b5f 100644
--- a/packages/vite-plugin-svelte/src/index.ts
+++ b/packages/vite-plugin-svelte/src/index.ts
@@ -4,8 +4,8 @@ import { HmrContext, ModuleNode, Plugin, ResolvedConfig, UserConfig } from 'vite
 import { isDepExcluded } from 'vitefu';
 import { handleHotUpdate } from './handle-hot-update';
 import { log, logCompilerWarnings } from './utils/log';
-import { CompileData, createCompileSvelte } from './utils/compile';
-import { buildIdParser, IdParser, SvelteRequest } from './utils/id';
+import { type CompileSvelte, createCompileSvelte } from './utils/compile';
+import { buildIdParser, IdParser } from './utils/id';
 import {
 	buildExtraViteConfig,
 	validateInlineOptions,
@@ -23,6 +23,7 @@ import { toRollupError } from './utils/error';
 import { saveSvelteMetadata } from './utils/optimizer';
 import { svelteInspector } from './ui/inspector/plugin';
 import { VitePluginSvelteCache } from './utils/vite-plugin-svelte-cache';
+import { loadRaw } from './utils/load-raw';
 
 interface PluginAPI {
 	/**
@@ -45,11 +46,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 	let options: ResolvedOptions;
 	let viteConfig: ResolvedConfig;
 	/* eslint-disable no-unused-vars */
-	let compileSvelte: (
-		svelteRequest: SvelteRequest,
-		code: string,
-		options: Partial<ResolvedOptions>
-	) => Promise<CompileData>;
+	let compileSvelte: CompileSvelte;
 	/* eslint-enable no-unused-vars */
 
 	let resolvedSvelteSSR: Promise<PartialResolvedId | null>;
@@ -103,23 +100,26 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				setupWatchers(options, cache, requestParser);
 			},
 
-			load(id, opts) {
+			async load(id, opts) {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(id, !!ssr);
 				if (svelteRequest) {
-					const { filename, query } = svelteRequest;
-					// virtual css module
-					if (query.svelte && query.type === 'style') {
-						const css = cache.getCSS(svelteRequest);
-						if (css) {
-							log.debug(`load returns css for ${filename}`);
-							return css;
+					const { filename, query, raw } = svelteRequest;
+					if (raw) {
+						return loadRaw(svelteRequest, compileSvelte, options);
+					} else {
+						if (query.svelte && query.type === 'style') {
+							const css = cache.getCSS(svelteRequest);
+							if (css) {
+								log.debug(`load returns css for ${filename}`);
+								return css;
+							}
+						}
+						// prevent vite asset plugin from loading files as url that should be compiled in transform
+						if (viteConfig.assetsInclude(filename)) {
+							log.debug(`load returns raw content for ${filename}`);
+							return fs.readFileSync(filename, 'utf-8');
 						}
-					}
-					// prevent vite asset plugin from loading files as url that should be compiled in transform
-					if (viteConfig.assetsInclude(filename)) {
-						log.debug(`load returns raw content for ${filename}`);
-						return fs.readFileSync(filename, 'utf-8');
 					}
 				}
 			},
@@ -128,14 +128,12 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(importee, ssr);
 				if (svelteRequest?.query.svelte) {
-					if (svelteRequest.query.type === 'style') {
+					if (svelteRequest.query.type === 'style' && !svelteRequest.raw) {
 						// return cssId with root prefix so postcss pipeline of vite finds the directory correctly
 						// see https://github.com/sveltejs/vite-plugin-svelte/issues/14
 						log.debug(`resolveId resolved virtual css module ${svelteRequest.cssId}`);
 						return svelteRequest.cssId;
 					}
-					log.debug(`resolveId resolved ${importee}`);
-					return importee; // query with svelte tag, an id we generated, no need for further analysis
 				}
 
 				if (ssr && importee === 'svelte') {
@@ -188,7 +186,7 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 			async transform(code, id, opts) {
 				const ssr = !!opts?.ssr;
 				const svelteRequest = requestParser(id, ssr);
-				if (!svelteRequest || svelteRequest.query.svelte) {
+				if (!svelteRequest || svelteRequest.query.type === 'style' || svelteRequest.raw) {
 					return;
 				}
 				let compileData;
diff --git a/packages/vite-plugin-svelte/src/utils/compile.ts b/packages/vite-plugin-svelte/src/utils/compile.ts
index f169c31d3..4f0e9c244 100644
--- a/packages/vite-plugin-svelte/src/utils/compile.ts
+++ b/packages/vite-plugin-svelte/src/utils/compile.ts
@@ -6,17 +6,41 @@ import { SvelteRequest } from './id';
 import { safeBase64Hash } from './hash';
 import { log } from './log';
 import { StatCollection } from './vite-plugin-svelte-stats';
+//eslint-disable-next-line node/no-missing-import
+import type { Processed } from 'svelte/types/compiler/preprocess';
+import { createInjectScopeEverythingRulePreprocessorGroup } from './preprocess';
+import path from 'path';
 
 const scriptLangRE = /<script [^>]*lang=["']?([^"' >]+)["']?[^>]*>/;
 
+export type CompileSvelte = ReturnType<typeof _createCompileSvelte>;
+
+function mapSourcesToRelative(map: { sources?: string[] }, filename: string) {
+	// sourcemap sources are relative to the sourcemap itself
+	// assume the sourcemap location is the same as filename and turn absolute paths to relative
+	// to avoid leaking fs information like vite root
+	if (map?.sources) {
+		map.sources = map.sources.map((s) => {
+			if (path.isAbsolute(s)) {
+				const relative = path.relative(filename, s);
+				// empty string a source is not allowed, use simple filename
+				return relative === '' ? path.basename(filename) : relative;
+			} else {
+				return s;
+			}
+		});
+	}
+}
+
 const _createCompileSvelte = (makeHot: Function) => {
 	let stats: StatCollection | undefined;
+	const devStylePreprocessor = createInjectScopeEverythingRulePreprocessorGroup();
 	return async function compileSvelte(
 		svelteRequest: SvelteRequest,
 		code: string,
 		options: Partial<ResolvedOptions>
 	): Promise<CompileData> {
-		const { filename, normalizedFilename, cssId, ssr } = svelteRequest;
+		const { filename, normalizedFilename, cssId, ssr, raw } = svelteRequest;
 		const { emitCss = true } = options;
 		const dependencies = [];
 
@@ -47,7 +71,7 @@ const _createCompileSvelte = (makeHot: Function) => {
 
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
-			filename,
+			filename: normalizedFilename, // use normalized here to avoid bleeding absolute fs path
 			generate: ssr ? 'ssr' : 'dom',
 			format: 'esm'
 		};
@@ -65,10 +89,20 @@ const _createCompileSvelte = (makeHot: Function) => {
 		}
 
 		let preprocessed;
-
-		if (options.preprocess) {
+		let preprocessors = options.preprocess;
+		if (!options.isBuild && options.emitCss && options.hot) {
+			// inject preprocessor that ensures css hmr works better
+			if (!Array.isArray(preprocessors)) {
+				preprocessors = preprocessors
+					? [preprocessors, devStylePreprocessor]
+					: [devStylePreprocessor];
+			} else {
+				preprocessors = preprocessors.concat(devStylePreprocessor);
+			}
+		}
+		if (preprocessors) {
 			try {
-				preprocessed = await preprocess(code, options.preprocess, { filename });
+				preprocessed = await preprocess(code, preprocessors, { filename }); // full filename here so postcss works
 			} catch (e) {
 				e.message = `Error while preprocessing ${filename}${e.message ? ` - ${e.message}` : ''}`;
 				throw e;
@@ -77,6 +111,13 @@ const _createCompileSvelte = (makeHot: Function) => {
 			if (preprocessed.dependencies) dependencies.push(...preprocessed.dependencies);
 			if (preprocessed.map) compileOptions.sourcemap = preprocessed.map;
 		}
+		if (typeof preprocessed?.map === 'object') {
+			mapSourcesToRelative(preprocessed?.map, filename);
+		}
+		if (raw && svelteRequest.query.type === 'preprocessed') {
+			// shortcut
+			return { preprocessed: preprocessed ?? { code } } as CompileData;
+		}
 		const finalCode = preprocessed ? preprocessed.code : code;
 		const dynamicCompileOptions = await options.experimental?.dynamicCompileOptions?.({
 			filename,
@@ -100,24 +141,29 @@ const _createCompileSvelte = (makeHot: Function) => {
 		if (endStat) {
 			endStat();
 		}
+		mapSourcesToRelative(compiled.js?.map, filename);
+		mapSourcesToRelative(compiled.css?.map, filename);
+		if (!raw) {
+			// wire css import and code for hmr
+			const hasCss = compiled.css?.code?.trim().length > 0;
+			// compiler might not emit css with mode none or it may be empty
+			if (emitCss && hasCss) {
+				// TODO properly update sourcemap?
+				compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
+			}
 
-		const hasCss = compiled.css?.code?.trim().length > 0;
-		// compiler might not emit css with mode none or it may be empty
-		if (emitCss && hasCss) {
-			// TODO properly update sourcemap?
-			compiled.js.code += `\nimport ${JSON.stringify(cssId)};\n`;
-		}
-
-		// only apply hmr when not in ssr context and hot options are set
-		if (!ssr && makeHot) {
-			compiled.js.code = makeHot({
-				id: filename,
-				compiledCode: compiled.js.code,
-				hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
-				compiled,
-				originalCode: code,
-				compileOptions: finalCompileOptions
-			});
+			// only apply hmr when not in ssr context and hot options are set
+			if (!ssr && makeHot) {
+				compiled.js.code = makeHot({
+					id: filename,
+					compiledCode: compiled.js.code,
+					//@ts-expect-error hot isn't a boolean at this point
+					hotOptions: { ...options.hot, injectCss: options.hot?.injectCss === true && hasCss },
+					compiled,
+					originalCode: code,
+					compileOptions: finalCompileOptions
+				});
+			}
 		}
 
 		compiled.js.dependencies = dependencies;
@@ -129,7 +175,8 @@ const _createCompileSvelte = (makeHot: Function) => {
 			// @ts-ignore
 			compiled,
 			ssr,
-			dependencies
+			dependencies,
+			preprocessed: preprocessed ?? { code }
 		};
 	};
 };
@@ -190,4 +237,5 @@ export interface CompileData {
 	compiled: Compiled;
 	ssr: boolean | undefined;
 	dependencies: string[];
+	preprocessed: Processed;
 }
diff --git a/packages/vite-plugin-svelte/src/utils/id.ts b/packages/vite-plugin-svelte/src/utils/id.ts
index 29b625b44..b8b3a6e4d 100644
--- a/packages/vite-plugin-svelte/src/utils/id.ts
+++ b/packages/vite-plugin-svelte/src/utils/id.ts
@@ -3,19 +3,39 @@ import { createFilter } from 'vite';
 import { Arrayable, ResolvedOptions } from './options';
 import { normalizePath } from 'vite';
 import * as fs from 'fs';
+//eslint-disable-next-line node/no-missing-import
+import { CompileOptions } from 'svelte/types/compiler/interfaces';
+import { log } from './log';
 
 const VITE_FS_PREFIX = '/@fs/';
 const IS_WINDOWS = process.platform === 'win32';
 
-export type SvelteQueryTypes = 'style' | 'script';
+const SUPPORTED_COMPILER_OPTIONS = [
+	'generate',
+	'dev',
+	'css',
+	'hydratable',
+	'customElement',
+	'immutable',
+	'enableSourcemap'
+];
+const TYPES_WITH_COMPILER_OPTIONS = ['style', 'script', 'all'];
+
+export type SvelteQueryTypes = 'style' | 'script' | 'preprocessed' | 'all';
 
 export interface RequestQuery {
 	// our own
 	svelte?: boolean;
 	type?: SvelteQueryTypes;
+	sourcemap?: boolean;
+	compilerOptions?: Pick<
+		CompileOptions,
+		'generate' | 'dev' | 'css' | 'hydratable' | 'customElement' | 'immutable' | 'enableSourcemap'
+	>;
 	// vite specific
 	url?: boolean;
 	raw?: boolean;
+	direct?: boolean;
 }
 
 export interface SvelteRequest {
@@ -26,6 +46,7 @@ export interface SvelteRequest {
 	query: RequestQuery;
 	timestamp: number;
 	ssr: boolean;
+	raw: boolean;
 }
 
 function splitId(id: string) {
@@ -44,10 +65,12 @@ function parseToSvelteRequest(
 	ssr: boolean
 ): SvelteRequest | undefined {
 	const query = parseRequestQuery(rawQuery);
-	if (query.url || query.raw) {
+	const rawOrDirect = !!(query.raw || query.direct);
+	if (query.url || (!query.svelte && rawOrDirect)) {
 		// skip requests with special vite tags
 		return;
 	}
+	const raw = rawOrDirect;
 	const normalizedFilename = normalize(filename, root);
 	const cssId = createVirtualImportId(filename, root, 'style');
 
@@ -58,7 +81,8 @@ function parseToSvelteRequest(
 		cssId,
 		query,
 		timestamp,
-		ssr
+		ssr,
+		raw
 	};
 }
 
@@ -86,6 +110,34 @@ function parseRequestQuery(rawQuery: string): RequestQuery {
 			query[key] = true;
 		}
 	}
+	const compilerOptions = query.compilerOptions;
+	if (compilerOptions) {
+		if (!((query.raw || query.direct) && TYPES_WITH_COMPILER_OPTIONS.includes(query.type))) {
+			throw new Error(
+				`Invalid compilerOptions in query ${rawQuery}. CompilerOptions are only supported for raw or direct queries with type in "${TYPES_WITH_COMPILER_OPTIONS.join(
+					', '
+				)}" e.g. '?svelte&raw&type=script&compilerOptions={"generate":"ssr","dev":false}`
+			);
+		}
+		try {
+			const parsed = JSON.parse(compilerOptions);
+			const invalid = Object.keys(parsed).filter(
+				(key) => !SUPPORTED_COMPILER_OPTIONS.includes(key)
+			);
+			if (invalid.length) {
+				throw new Error(
+					`Invalid compilerOptions in query ${rawQuery}: ${invalid.join(
+						', '
+					)}. Supported: ${SUPPORTED_COMPILER_OPTIONS.join(', ')}`
+				);
+			}
+			query.compilerOptions = parsed;
+		} catch (e) {
+			log.error('failed to parse request query compilerOptions', e);
+			throw e;
+		}
+	}
+
 	return query as RequestQuery;
 }
 
diff --git a/packages/vite-plugin-svelte/src/utils/load-raw.ts b/packages/vite-plugin-svelte/src/utils/load-raw.ts
new file mode 100644
index 000000000..bb8923c26
--- /dev/null
+++ b/packages/vite-plugin-svelte/src/utils/load-raw.ts
@@ -0,0 +1,132 @@
+import { ResolvedOptions } from './options';
+import fs from 'fs';
+import { toRollupError } from './error';
+import { log } from './log';
+import type { SvelteRequest } from './id';
+import { type CompileData, CompileSvelte } from './compile';
+
+/**
+ * utility function to compile ?raw and ?direct requests in load hook
+ */
+export async function loadRaw(
+	svelteRequest: SvelteRequest,
+	compileSvelte: CompileSvelte,
+	options: ResolvedOptions
+) {
+	const { id, filename, query } = svelteRequest;
+
+	// raw svelte subrequest, compile on the fly and return requested subpart
+	let compileData;
+	const source = fs.readFileSync(filename, 'utf-8');
+	try {
+		//avoid compileSvelte doing extra ssr stuff unless requested
+		svelteRequest.ssr = query.compilerOptions?.generate === 'ssr';
+		const type = query.type;
+		compileData = await compileSvelte(svelteRequest, source, {
+			...options,
+			// don't use dynamic vite-plugin-svelte defaults here to ensure stable result between ssr,dev and build
+			compilerOptions: {
+				dev: false,
+				css: false,
+				hydratable: false,
+				enableSourcemap: query.sourcemap
+					? {
+							js: type === 'script' || type === 'all',
+							css: type === 'style' || type === 'all'
+					  }
+					: false,
+				...svelteRequest.query.compilerOptions
+			},
+			hot: false,
+			emitCss: true
+		});
+	} catch (e) {
+		throw toRollupError(e, options);
+	}
+	let result;
+	if (query.type === 'style') {
+		result = compileData.compiled.css;
+	} else if (query.type === 'script') {
+		result = compileData.compiled.js;
+	} else if (query.type === 'preprocessed') {
+		result = compileData.preprocessed;
+	} else if (query.type === 'all' && query.raw) {
+		return allToRawExports(compileData, source);
+	} else {
+		throw new Error(
+			`invalid "type=${query.type}" in ${id}. supported are script, style, preprocessed, all`
+		);
+	}
+	if (query.direct) {
+		const supportedDirectTypes = ['script', 'style'];
+		if (!supportedDirectTypes.includes(query.type)) {
+			throw new Error(
+				`invalid "type=${
+					query.type
+				}" combined with direct in ${id}. supported are: ${supportedDirectTypes.join(', ')}`
+			);
+		}
+		log.debug(`load returns direct result for ${id}`);
+		let directOutput = result.code;
+		if (query.sourcemap && result.map?.toUrl) {
+			const map = `sourceMappingURL=${result.map.toUrl()}`;
+			if (query.type === 'style') {
+				directOutput += `\n\n/*# ${map} */\n`;
+			} else if (query.type === 'script') {
+				directOutput += `\n\n//# ${map}\n`;
+			}
+		}
+		return directOutput;
+	} else if (query.raw) {
+		log.debug(`load returns raw result for ${id}`);
+		return toRawExports(result);
+	} else {
+		throw new Error(`invalid raw mode in ${id}, supported are raw, direct`);
+	}
+}
+
+/**
+ * turn compileData and source into a flat list of raw exports
+ *
+ * @param compileData
+ * @param source
+ */
+function allToRawExports(compileData: CompileData, source: string) {
+	// flatten CompileData
+	const exports: Partial<CompileData & { source: string }> = {
+		...compileData,
+		...compileData.compiled,
+		source
+	};
+	delete exports.compiled;
+	delete exports.filename; // absolute path, remove to avoid it in output
+	return toRawExports(exports);
+}
+
+/**
+ * turn object into raw exports.
+ *
+ * every prop is returned as a const export, and if prop 'code' exists it is additionally added as default export
+ *
+ * eg {'foo':'bar','code':'baz'} results in
+ *
+ *  ```js
+ *  export const code='baz'
+ *  export const foo='bar'
+ *  export default code
+ *  ```
+ * @param object
+ */
+function toRawExports(object: object) {
+	let exports =
+		Object.entries(object)
+			//eslint-disable-next-line no-unused-vars
+			.filter(([key, value]) => typeof value !== 'function') // preprocess output has a toString function that's enumerable
+			.sort(([a], [b]) => (a < b ? -1 : a === b ? 0 : 1))
+			.map(([key, value]) => `export const ${key}=${JSON.stringify(value)}`)
+			.join('\n') + '\n';
+	if (Object.prototype.hasOwnProperty.call(object, 'code')) {
+		exports += `export default code\n`;
+	}
+	return exports;
+}
diff --git a/packages/vite-plugin-svelte/src/utils/preprocess.ts b/packages/vite-plugin-svelte/src/utils/preprocess.ts
index 63bfe1eae..7c0d4ce10 100644
--- a/packages/vite-plugin-svelte/src/utils/preprocess.ts
+++ b/packages/vite-plugin-svelte/src/utils/preprocess.ts
@@ -21,7 +21,7 @@ function createVitePreprocessorGroup(config: ResolvedConfig): PreprocessorGroup
  *
  * only used during dev with enabled css hmr
  */
-function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
+export function createInjectScopeEverythingRulePreprocessorGroup(): PreprocessorGroup {
 	return {
 		style({ content, filename }) {
 			const s = new MagicString(content);
@@ -102,10 +102,6 @@ function buildExtraPreprocessors(options: ResolvedOptions, config: ResolvedConfi
 		appendPreprocessors.push(...pluginsWithPreprocessors.map((p) => p.api.sveltePreprocess));
 	}
 
-	if (options.hot && options.emitCss) {
-		appendPreprocessors.push(createInjectScopeEverythingRulePreprocessorGroup());
-	}
-
 	return { prependPreprocessors, appendPreprocessors };
 }
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5a50c00e6..292f1ce67 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -246,6 +246,18 @@ importers:
       svelte: 3.53.1
       vite: 3.2.4
 
+  packages/e2e-tests/import-queries:
+    specifiers:
+      '@sveltejs/vite-plugin-svelte': workspace:*
+      sass: ^1.56.1
+      svelte: ^3.53.1
+      vite: ^3.2.3
+    devDependencies:
+      '@sveltejs/vite-plugin-svelte': link:../../vite-plugin-svelte
+      sass: 1.56.1
+      svelte: 3.53.1
+      vite: 3.2.4_sass@1.56.1
+
   packages/e2e-tests/inspector-kit:
     specifiers:
       '@sveltejs/kit': ^1.0.0-next.567