From 14c0824f265fad433987580a44c41e840579099b Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 13:25:46 +0200
Subject: [PATCH 1/4] Support thread loader by optional inline emitCss (base64,
 querystring)

This option makes svelte-loader output base64'd css in querystring,
which is always available to any thread.
It is turned off by default because it pollutes webpack's console
output, but if user needs to use thread-loader, he can.
---
 README.md | 23 +++++++++++++++++++++++
 index.js  | 21 +++++++++++++++------
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 7b9fe51a..76634250 100644
--- a/README.md
+++ b/README.md
@@ -349,6 +349,29 @@ If you are using autoprefixer for `.css`, then it is better to exclude emitted c
 
 This ensures that global css is being processed with `postcss` through webpack rules, and svelte component's css is being processed with `postcss` through `svelte-preprocess`.
 
+## Using svelte-loader in combination with thread-loader
+
+There is a way to make `svelte-loader` support `thread-loader`.
+
+Enable `inlineCss: true` in options as shown below. It will make `svelte-loader` output component css in base64 as a query string to webpack, instead of saving it to a Map, and passing key to that map.
+
+This will make console output unpleasant to look at, but `thread-loader` will have access to the css data it needs to function properly.
+
+```javascript
+      ...
+      {
+        test: /\.(html|svelte)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            inlineCss: true,
+          },
+        },
+      },
+      ...
+```
+
 ## License
 
 MIT
diff --git a/index.js b/index.js
index 304ef8b2..4b03b4b1 100644
--- a/index.js
+++ b/index.js
@@ -16,9 +16,12 @@ module.exports = function(source, map) {
 	const options = { ...getOptions(this) };
 	const callback = this.async();
 
-	if (options.cssPath) {
-		const css = virtualModules.get(options.cssPath);
-		virtualModules.delete(options.cssPath);
+	if (options.cssPath || options.cssData) {
+		const css = options.cssData
+			? Buffer.from(options.cssData, 'base64').toString('utf-8')
+			: virtualModules.get(options.cssPath);
+		if (options.cssPath)
+			virtualModules.delete(options.cssPath);
 		callback(null, css);
 		return;
 	}
@@ -66,10 +69,16 @@ module.exports = function(source, map) {
 
 		if (options.emitCss && css.code) {
 			const resource = posixify(compileOptions.filename);
-			const cssPath = `${resource}.${index++}.css`;
+			const cssPath = options.inlineCss
+				? `${resource}.css`
+				: `${resource}.${index++}.css`;
+			const cssQuery = options.inlineCss
+				? `cssData=${Buffer.from(css.code).toString('base64')}`
+				: `cssPath=${cssPath}`;
 			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
-			js.code += `\nimport '${cssPath}!=!svelte-loader?cssPath=${cssPath}!${resource}'\n;`;
-			virtualModules.set(cssPath, css.code);
+			js.code += `\nimport '${cssPath}!=!svelte-loader?${cssQuery}!${resource}'\n;`;
+			if (!options.inlineCss)
+				virtualModules.set(cssPath, css.code);
 		}
 
 		callback(null, js.code, js.map);

From 94773b43a763c214892cbaa68c636ff90a08ede9 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 20:55:36 +0200
Subject: [PATCH 2/4] Determine if thread-loader is enabled by checking if
 emitFile is available

---
 index.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index 4b03b4b1..d73d5032 100644
--- a/index.js
+++ b/index.js
@@ -69,15 +69,16 @@ module.exports = function(source, map) {
 
 		if (options.emitCss && css.code) {
 			const resource = posixify(compileOptions.filename);
-			const cssPath = options.inlineCss
+			const threadLoaderUsed = this.emitFile === undefined;
+			const cssPath = threadLoaderUsed
 				? `${resource}.css`
 				: `${resource}.${index++}.css`;
-			const cssQuery = options.inlineCss
+			const cssQuery = threadLoaderUsed
 				? `cssData=${Buffer.from(css.code).toString('base64')}`
 				: `cssPath=${cssPath}`;
 			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
 			js.code += `\nimport '${cssPath}!=!svelte-loader?${cssQuery}!${resource}'\n;`;
-			if (!options.inlineCss)
+			if (!threadLoaderUsed)
 				virtualModules.set(cssPath, css.code);
 		}
 

From e8ee41d88e9e152c6d1cded7152147c51a82af90 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 21:00:59 +0200
Subject: [PATCH 3/4] Fix test this.emitFile is not available in test mocks, so
 we need to check for cssData instead of cssPath

---
 test/loader.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/loader.spec.js b/test/loader.spec.js
index d634606c..a7a65436 100644
--- a/test/loader.spec.js
+++ b/test/loader.spec.js
@@ -216,7 +216,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.match(/!=!svelte-loader\?cssPath=/);
+						expect(code).to.match(/!=!svelte-loader\?cssData=/);
 					},
 					{ emitCss: true }
 				)

From b2ca22c5c9c96ebefdb38c784c4763465acfbd72 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sun, 17 Jan 2021 21:19:58 +0200
Subject: [PATCH 4/4] Adjust readme

---
 README.md | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 76634250..de67e823 100644
--- a/README.md
+++ b/README.md
@@ -351,26 +351,13 @@ This ensures that global css is being processed with `postcss` through webpack r
 
 ## Using svelte-loader in combination with thread-loader
 
-There is a way to make `svelte-loader` support `thread-loader`.
+By default `svelte-loader` uses a Map to store css, and passes keys to that Map through custom loader string in query parameter.
 
-Enable `inlineCss: true` in options as shown below. It will make `svelte-loader` output component css in base64 as a query string to webpack, instead of saving it to a Map, and passing key to that map.
+This won't work for multiple `thread-loader` processess. `css-loader` won't find component's css in a Map that is located in other process.
 
-This will make console output unpleasant to look at, but `thread-loader` will have access to the css data it needs to function properly.
+If you set up `thread-loader` on top of `svelte-loader` however, it will pass whole base64'd css in a query, without using Map.
 
-```javascript
-      ...
-      {
-        test: /\.(html|svelte)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'svelte-loader',
-          options: {
-            inlineCss: true,
-          },
-        },
-      },
-      ...
-```
+It will clutter the console output, but you will gain compilation speed, especially when using `tailwindcss` with `@apply` through `svelte-preprocess`.
 
 ## License