diff --git a/README.md b/README.md index 7b9fe51a..de67e823 100644 --- a/README.md +++ b/README.md @@ -349,6 +349,16 @@ 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 + +By default `svelte-loader` uses a Map to store css, and passes keys to that Map through custom loader string in query parameter. + +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. + +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. + +It will clutter the console output, but you will gain compilation speed, especially when using `tailwindcss` with `@apply` through `svelte-preprocess`. + ## License MIT diff --git a/index.js b/index.js index 304ef8b2..d73d5032 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,17 @@ module.exports = function(source, map) { if (options.emitCss && css.code) { const resource = posixify(compileOptions.filename); - const cssPath = `${resource}.${index++}.css`; + const threadLoaderUsed = this.emitFile === undefined; + const cssPath = threadLoaderUsed + ? `${resource}.css` + : `${resource}.${index++}.css`; + 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?cssPath=${cssPath}!${resource}'\n;`; - virtualModules.set(cssPath, css.code); + js.code += `\nimport '${cssPath}!=!svelte-loader?${cssQuery}!${resource}'\n;`; + if (!threadLoaderUsed) + virtualModules.set(cssPath, css.code); } callback(null, js.code, js.map); 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 } )