strict order option

site/content/docs/04-compile-time.md

@@ -203,6 +203,7 @@ result: {
 	}>,
 	options?: {
 		filename?: string
+		strictOrder?: boolean
 	}
 )
 ```

src/compiler/compile/index.ts

@@ -26,7 +26,8 @@ const valid_options = [
 	'css',
 	'loopGuardTimeout',
 	'preserveComments',
-	'preserveWhitespace'
+	'preserveWhitespace',
+	'strictOrder'
 ];
 
 function validate_options(options: CompileOptions, warnings: Warning[]) {

src/compiler/preprocess/index.ts

@@ -67,32 +67,31 @@ async function replace_async(str: string, re: RegExp, func: (...any) => Promise<
 	return out;
 }
 
-export default async function preprocess(
+async function process_markup(
 	source: string,
-	preprocessor: PreprocessorGroup | PreprocessorGroup[],
+	func: (...any) => Processed | Promise<Processed>,
-	options?: { filename?: string }
+	filename: string,
 ) {
-	// @ts-ignore todo: doublecheck
-	const filename = (options && options.filename) || preprocessor.filename; // legacy
-	const dependencies = [];
 
-	const preprocessors = Array.isArray(preprocessor) ? preprocessor : [preprocessor];
+	const processed: Processed = await func({
+		content: source,
+		filename
+	});
 
-	const markup = preprocessors.map(p => p.markup).filter(Boolean);
+	return {
-	const script = preprocessors.map(p => p.script).filter(Boolean);
+		source: processed ? processed.code : source,
-	const style = preprocessors.map(p => p.style).filter(Boolean);
+		dependencies: processed.dependencies,
-
+	};
-	for (const fn of markup) {
+}
-		const processed = await fn({
+
-			content: source,
+async function process_script(
-			filename
+	source: string,
-		});
+	func: (...any) => Processed | Promise<Processed>,
-		if (processed && processed.dependencies) dependencies.push(...processed.dependencies);
+	filename: string,
-		source = processed ? processed.code : source;
+) {
-	}
+	const dependencies = [];
 
-	for (const fn of script) {
+	const s = await replace_async(
-		source = await replace_async(
 			source,
 			/<!--[^]*?-->|<script(\s[^]*?)?>([^]*?)<\/script>/gi,
 			async (match, attributes = '', content) => {
@@ -100,7 +99,7 @@ export default async function preprocess(
 					return match;
 				}
 				attributes = attributes || '';
-				const processed = await fn({
+				const processed: Processed = await func({
 					content,
 					attributes: parse_attributes(attributes),
 					filename
@@ -109,26 +108,97 @@ export default async function preprocess(
 				return processed ? `<script${attributes}>${processed.code}</script>` : match;
 			}
 		);
-	}
 
-	for (const fn of style) {
+		console.log(s, 'RETURREND');
-		source = await replace_async(
+
-			source,
+	return {
-			/<!--[^]*?-->|<style(\s[^]*?)?>([^]*?)<\/style>/gi,
+		source: s,
-			async (match, attributes = '', content) => {
+		dependencies,
-				if (!attributes && !content) {
+	};
-					return match;
+}
-				}
+
-				const processed: Processed = await fn({
+async function process_style(
-					content,
+	source: string,
-					attributes: parse_attributes(attributes),
+	func: (...any) => Processed | Promise<Processed>,
-					filename
+	filename: string,
-				});
+) {
-				if (processed && processed.dependencies) dependencies.push(...processed.dependencies);
+	const dependencies = [];
-				return processed ? `<style${attributes}>${processed.code}</style>` : match;
+
+	const s = await replace_async(
+		source,
+		/<!--[^]*?-->|<style(\s[^]*?)?>([^]*?)<\/style>/gi,
+		async (match, attributes = '', content) => {
+			if (!attributes && !content) {
+				return match;
 			}
-		);
+			const processed: Processed = await func({
-	}
+				content,
+				attributes: parse_attributes(attributes),
+				filename
+			});
+
+			if (processed && processed.dependencies) dependencies.push(...processed.dependencies);
+			return processed ? `<style${attributes}>${processed.code}</style>` : match;
+		}
+	);
+
+	return {
+		source: s,
+		dependencies,
+	};
+}
+
+async function asyncForEach(array, callback) {
+  // eslint-disable-next-line
+  for (let index = 0; index < array.length; index++) {
+    // eslint-disable-next-line
+    await callback(array[index], index, array);
+  }
+}
+
+
+export default async function preprocess(
+	source: string,
+	preprocessor: PreprocessorGroup | PreprocessorGroup[],
+	options?: { filename?: string; strictOrder?: boolean }
+) {
+	// @ts-ignore todo: doublecheck
+	const filename = (options && options.filename) || preprocessor.filename; // legacy
+	const dependencies = [];
+
+	const preprocessors = Array.isArray(preprocessor) ? preprocessor : [preprocessor];
+
+	const order = options.strictOrder
+		? preprocessors
+		: [
+		...preprocessors.map(({ markup }) => ({ markup })),
+		...preprocessors.map(({ script }) => ({ script })),
+		...preprocessors.map(({ style }) => ({ style })),
+	];
+
+	console.log(preprocessors);
+
+	await asyncForEach(order, async p => {
+		let processed;
+
+		if (p.markup) {
+			processed = await process_markup(source, p.markup, filename);
+			source = processed.source;
+			dependencies.push(processed.dependencies);
+		}
+
+		if (p.script) {
+			processed = await process_script(source, p.script, filename);
+			source = processed.source;
+			dependencies.push(processed.dependencies);
+		}
+
+		if (p.style) {
+			processed = await process_style(source, p.style, filename);
+			source = processed.source;
+			dependencies.push(processed.dependencies);
+		}
+	});
 
 	return {
 		// TODO return separated output, in future version where svelte.compile supports it: