Skip to content

Commit 48f1746

Browse files
committed
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.
1 parent 1f0272e commit 48f1746

File tree

2 files changed

+38
-6
lines changed

2 files changed

+38
-6
lines changed

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -276,6 +276,29 @@ module.exports = {
276276
}
277277
```
278278

279+
## Using svelte-loader in combination with thread-loader
280+
281+
There is a way to make `svelte-loader` support `thread-loader`.
282+
283+
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.
284+
285+
This will make console output unpleasant to look at, but `thread-loader` will have access to the css data it needs to function properly.
286+
287+
```javascript
288+
...
289+
{
290+
test: /\.(html|svelte)$/,
291+
exclude: /node_modules/,
292+
use: {
293+
loader: 'svelte-loader',
294+
options: {
295+
inlineCss: true,
296+
},
297+
},
298+
},
299+
...
300+
```
301+
279302
## License
280303

281304
MIT

index.js

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,12 @@ module.exports = function(source, map) {
1616
const options = { ...getOptions(this) };
1717
const callback = this.async();
1818

19-
if (options.cssPath) {
20-
const css = virtualModules.get(options.cssPath);
21-
virtualModules.delete(options.cssPath);
19+
if (options.cssPath || options.cssData) {
20+
const css = options.cssData
21+
? Buffer.from(options.cssData, 'base64').toString('utf-8')
22+
: virtualModules.get(options.cssPath);
23+
if (options.cssPath)
24+
virtualModules.delete(options.cssPath);
2225
callback(null, css);
2326
return;
2427
}
@@ -62,10 +65,16 @@ module.exports = function(source, map) {
6265

6366
if (options.emitCss && css.code) {
6467
const resource = posixify(compileOptions.filename);
65-
const cssPath = `${resource}.${index++}.css`;
68+
const cssPath = options.inlineCss
69+
? `${resource}.css`
70+
: `${resource}.${index++}.css`;
71+
const cssQuery = options.inlineCss
72+
? `cssData=${Buffer.from(css.code).toString('base64')}`
73+
: `cssPath=${cssPath}`;
6674
css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
67-
js.code += `\nimport '${cssPath}!=!svelte-loader?cssPath=${cssPath}!${resource}'\n;`;
68-
virtualModules.set(cssPath, css.code);
75+
js.code += `\nimport '${cssPath}!=!svelte-loader?${cssQuery}!${resource}'\n;`;
76+
if (!options.inlineCss)
77+
virtualModules.set(cssPath, css.code);
6978
}
7079

7180
callback(null, js.code, js.map);

0 commit comments

Comments
 (0)