From 1847f9ec69b6f7277e5ff142a04cf7ca97c2e902 Mon Sep 17 00:00:00 2001
From: Maxime LUCE <maxime@touchify.co>
Date: Mon, 12 Apr 2021 18:00:38 +0200
Subject: [PATCH] Pass full markup source to preprocessors (#6169)

---
 site/content/docs/04-compile-time.md | 6 +++---
 src/compiler/preprocess/index.ts     | 3 ++-
 src/compiler/preprocess/types.ts     | 7 +++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/site/content/docs/04-compile-time.md b/site/content/docs/04-compile-time.md
index 755985520d..361c9cdbc4 100644
--- a/site/content/docs/04-compile-time.md
+++ b/site/content/docs/04-compile-time.md
@@ -199,11 +199,11 @@ result: {
 			code: string,
 			dependencies?: Array<string>
 		}>,
-		script?: (input: { content: string, attributes: Record<string, string>, filename: string }) => Promise<{
+		script?: (input: { content: string, markup: string, attributes: Record<string, string>, filename: string }) => Promise<{
 			code: string,
 			dependencies?: Array<string>
 		}>,
-		style?: (input: { content: string, attributes: Record<string, string>, filename: string }) => Promise<{
+		style?: (input: { content: string, markup: string, attributes: Record<string, string>, filename: string }) => Promise<{
 			code: string,
 			dependencies?: Array<string>
 		}>
@@ -242,7 +242,7 @@ const { code } = await svelte.preprocess(source, {
 
 ---
 
-The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively. In addition to `filename`, they get an object of the element's attributes.
+The `script` and `style` functions receive the contents of `<script>` and `<style>` elements respectively (`content`) as well as the entire component source text (`markup`). In addition to `filename`, they get an object of the element's attributes.
 
 If a `dependencies` array is returned, it will be included in the result object. This is used by packages like [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) to watch additional files for changes, in the case where your `<style>` tag has an `@import` (for example).
 
diff --git a/src/compiler/preprocess/index.ts b/src/compiler/preprocess/index.ts
index 16bcdf1687..e66fb4ba14 100644
--- a/src/compiler/preprocess/index.ts
+++ b/src/compiler/preprocess/index.ts
@@ -139,7 +139,7 @@ async function process_tag(
 	preprocessor: Preprocessor,
 	source: Source
 ): Promise<SourceUpdate> {
-	const { filename } = source;
+	const { filename, source: markup } = source;
 	const tag_regex =
 		tag_name === 'style'
 			? /<!--[^]*?-->|<style(\s[^]*?)?(?:>([^]*?)<\/style>|\/>)/gi
@@ -160,6 +160,7 @@ async function process_tag(
 		const processed = await preprocessor({
 			content: content || '',
 			attributes: parse_tag_attributes(attributes || ''),
+			markup,
 			filename
 		});
 
diff --git a/src/compiler/preprocess/types.ts b/src/compiler/preprocess/types.ts
index 06890ad7b5..94007371cc 100644
--- a/src/compiler/preprocess/types.ts
+++ b/src/compiler/preprocess/types.ts
@@ -20,8 +20,15 @@ export type MarkupPreprocessor = (options: {
 }) => Processed | Promise<Processed>;
 
 export type Preprocessor = (options: {
+	/**
+	 * The script/style tag content
+	 */
 	content: string;
 	attributes: Record<string, string | boolean>;
+	/**
+	 * The whole Svelte file content
+	 */
+	markup: string;
 	filename?: string;
 }) => Processed | Promise<Processed>;