Support Webpack 5, drop copypasted webpack-virtual-modules

Fixes #139, Fixes #131, Fixes #126

Co-authored-by: Smittyvb <[email protected]>

README.md

@@ -33,6 +33,13 @@ Configure inside your `webpack.config.js`:
         test: /\.(html|svelte)$/,
         exclude: /node_modules/,
         use: 'svelte-loader'
+      },
+      {
+        // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+        test: /node_modules\/svelte\/.*\.mjs$/,
+        resolve: {
+          fullySpecified: false
+        }
       }
       ...
     ]

index.js

@@ -1,6 +1,5 @@
 const { basename, extname, relative } = require('path');
 const { getOptions } = require('loader-utils');
-const VirtualModules = require('./lib/virtual');
 
 const hotApi = require.resolve('./lib/hot-api.js');
 
@@ -96,20 +95,22 @@ function deprecatePreprocessOptions(options) {
 	options.preprocess = options.preprocess || preprocessOptions;
 }
 
-const virtualModuleInstances = new Map();
+const virtualModules = new Map();
+let index = 0;
 
 module.exports = function(source, map) {
-	if (this._compiler && !virtualModuleInstances.has(this._compiler)) {
-		virtualModuleInstances.set(this._compiler, new VirtualModules(this._compiler));
-	}
-
-	const virtualModules = virtualModuleInstances.get(this._compiler);
-
 	this.cacheable();
-	
+
 	const options = Object.assign({}, getOptions(this));
 	const callback = this.async();
 
+	if (options.cssPath) {
+		const css = virtualModules.get(options.cssPath);
+		virtualModules.delete(options.cssPath);
+		callback(null, css);
+		return;
+	}
+
 	const isServer = this.target === 'node' || (options.generate && options.generate == 'ssr');
 	const isProduction = this.minimize || process.env.NODE_ENV === 'production';
 
@@ -161,17 +162,11 @@ module.exports = function(source, map) {
 		}
 
 		if (options.emitCss && css.code) {
-			const cssFilepath = compileOptions.filename.replace(
-				/\.[^/.]+$/,
-				`.svelte.css`
-			);
-
+			const resource = posixify(this.resource);
+			const cssPath = `${resource}.${index++}.css`;
 			css.code += '\n/*# sourceMappingURL=' + css.map.toUrl() + '*/';
-			js.code = js.code + `\nimport '${posixify(cssFilepath)}';\n`;
-
-			if (virtualModules) {
-				virtualModules.writeModule(cssFilepath, css.code);
-			}
+			js.code += `\nimport '${cssPath}!=!svelte-loader?cssPath=${cssPath}!${resource}'\n;`;
+			virtualModules.set(cssPath, css.code);
 		}
 
 		callback(null, js.code, js.map);

test/loader.spec.js

@@ -32,13 +32,16 @@ describe('loader', () => {
 
 			const callbackSpy = spy(cb);
 
+			const nameParts = fileName.split(/[/\\]/g);
+
 			loader.call(
 				{
 					cacheable: cacheableSpy,
 					async: () => callbackSpy,
 					resourcePath: fileName,
 					version,
-					query
+					query,
+					resource: nameParts[nameParts.length - 1],
 				},
 				fileContents,
 				null
@@ -216,7 +219,7 @@ describe('loader', () => {
 					function(err, code, map) {
 						expect(err).not.to.exist;
 
-						expect(code).to.match(/import '.+\.css';/);
+						expect(code).to.match(/!=!svelte-loader\?cssPath=/);
 					},
 					{ emitCss: true }
 				)