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.

Author: non25

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

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);