Support Webpack 5, drop copypasted webpack-virtual-modules

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(compileOptions.filename);
+			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

@@ -216,7 +216,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 }
 				)