From b71db9f6e8278cedf999e6d858a9b38a2809b00a Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 08:31:59 +0200
Subject: [PATCH 01/11] Remove deprecation warnings and tests for them (tests
 fail)

---
 index.js            | 20 +-------------------
 test/loader.spec.js | 29 -----------------------------
 2 files changed, 1 insertion(+), 48 deletions(-)

diff --git a/index.js b/index.js
index 0d8a171e..0b51125f 100644
--- a/index.js
+++ b/index.js
@@ -20,23 +20,6 @@ function normalize(compiled) {
 	return { js, css, ast: compiled.ast, warnings: compiled.warnings || compiled.stats.warnings || [] };
 }
 
-const warned = {};
-function deprecatePreprocessOptions(options) {
-	const preprocessOptions = {};
-
-	['markup', 'style', 'script'].forEach(kind => {
-		if (options[kind]) {
-			if (!warned[kind]) {
-				console.warn(`[svelte-loader] DEPRECATION: options.${kind} is now options.preprocess.${kind}`);
-				warned[kind] = true;
-			}
-			preprocessOptions[kind] = options[kind];
-		}
-	});
-
-	options.preprocess = options.preprocess || preprocessOptions;
-}
-
 const virtualModules = new Map();
 let index = 0;
 
@@ -65,8 +48,7 @@ module.exports = function(source, map) {
 
 	const handleWarning = warning => this.emitWarning(new Error(warning));
 
-	deprecatePreprocessOptions(options);
-	options.preprocess.filename = compileOptions.filename;
+	options.preprocess = { filename: compileOptions.filename };
 
 	preprocess(source, options.preprocess).then(processed => {
 		if (processed.dependencies && this.addDependency) {
diff --git a/test/loader.spec.js b/test/loader.spec.js
index a23ad919..d634606c 100644
--- a/test/loader.spec.js
+++ b/test/loader.spec.js
@@ -270,35 +270,6 @@ describe('loader', () => {
 			});
 		});
 
-		describe('deprecations', () => {
-			it('should warn on options.style', done => {
-				const { warn } = console;
-				const warnings = [];
-
-				console.warn = msg => {
-					warnings.push(msg);
-				};
-
-				testLoader(
-					'test/fixtures/style-valid.html',
-					(err, code, map) => {
-						expect(code).to.contain('50px');
-						expect(warnings).to.deep.equal([
-							'[svelte-loader] DEPRECATION: options.style is now options.preprocess.style'
-						]);
-						console.warn = warn;
-					},
-					{
-						style: ({ content }) => {
-							return {
-								code: content.replace(/\$size/gi, '50px')
-							};
-						}
-					}
-				)(done);
-			});
-		});
-
 		describe('hotReload', () => {
 			it(
 				'should configure hotReload=false (default)',

From 0570c91afb07a27a1d3c0ed43aa4c109fa5754e2 Mon Sep 17 00:00:00 2001
From: Adam Green <adam.green@kcl.ac.uk>
Date: Thu, 19 Nov 2020 21:41:29 +0000
Subject: [PATCH 02/11] Updated readme to reflect the new minicss plugin

---
 README.md | 25 +++++++++++++++++++------
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index f52466c3..edec6ca0 100644
--- a/README.md
+++ b/README.md
@@ -61,9 +61,11 @@ Webpack's [`resolve.mainFields`](https://webpack.js.org/configuration/resolve/#r
 
 If your Svelte components contain `<style>` tags, by default the compiler will add JavaScript that injects those styles into the page when the component is rendered. That's not ideal, because it adds weight to your JavaScript, prevents styles from being fetched in parallel with your code, and can even cause CSP violations.
 
-A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) to the mix to output the css to a separate file.
+A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to the mix to output the css to a separate file.
 
 ```javascript
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+  const dev = mode == 'development';
   ...
   module: {
     rules: [
@@ -80,22 +82,33 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
-          use: 'css-loader',
-        }),
+        use: [
+          dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
+            }
+          }
+        ]
       },
       ...
     ]
   },
   ...
   plugins: [
-    new ExtractTextPlugin('styles.css'),
+    new MiniCssExtractPlugin('styles.css'),
     ...
   ]
   ...
 ```
 
+Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading. `dev` is some boolean flag indicating that the build is development. 
+
+Additionally, if you're using multiple entrypoints, you may wish to change `new MiniCssExtractPlugin('styles.css')` for `new MiniCssExtractPlugin('[name].css')` to generate one CSS file per entrypoint. 
+
+Warning, in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of if it's included in your svelte components.
+
 Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use `css: false`.
 
 ### Source maps

From 834fc9536d13dcf381add184b2857608b915a5dc Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 08:48:43 +0200
Subject: [PATCH 03/11] Small adjustments to the readme

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index edec6ca0..4625013a 100644
--- a/README.md
+++ b/README.md
@@ -103,9 +103,9 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
   ...
 ```
 
-Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading. `dev` is some boolean flag indicating that the build is development. 
+Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading. `dev` is some boolean flag indicating that the build is development.
 
-Additionally, if you're using multiple entrypoints, you may wish to change `new MiniCssExtractPlugin('styles.css')` for `new MiniCssExtractPlugin('[name].css')` to generate one CSS file per entrypoint. 
+Additionally, if you're using multiple entrypoints, you may wish to change `new MiniCssExtractPlugin('styles.css')` for `new MiniCssExtractPlugin('[name].css')` to generate one CSS file per entrypoint.
 
 Warning, in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of if it's included in your svelte components.
 

From 7e9bbb21eb46484dc8bfca99c5510135d6620be1 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 09:01:24 +0200
Subject: [PATCH 04/11] Drop normalize for older svelte versions

---
 index.js | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/index.js b/index.js
index 0b51125f..e0bc929b 100644
--- a/index.js
+++ b/index.js
@@ -7,19 +7,6 @@ function posixify(file) {
 	return file.replace(/[/\\]/g, '/');
 }
 
-function normalize(compiled) {
-	// svelte.compile signature changed in 1.60 — this avoids
-	// future deprecation warnings while preserving backwards
-	// compatibility
-	const js = compiled.js || { code: compiled.code, map: compiled.map };
-
-	const css = compiled.css && typeof compiled.css === 'object'
-		? compiled.css
-		: { code: compiled.css, map: compiled.cssMap };
-
-	return { js, css, ast: compiled.ast, warnings: compiled.warnings || compiled.stats.warnings || [] };
-}
-
 const virtualModules = new Map();
 let index = 0;
 
@@ -58,7 +45,7 @@ module.exports = function(source, map) {
 		}
 
 		const compiled = compile(processed.toString(), compileOptions);
-		let { js, css, warnings } = normalize(compiled);
+		let { js, css, warnings } = compiled;
 
 		warnings.forEach(
 			options.onwarn

From 15caf4351957142e513b9918aa0d71aa51ebb4cb Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 09:09:13 +0200
Subject: [PATCH 05/11] Rephrase dev/prod dynamic adjustments to the config

---
 README.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4625013a..4358b00e 100644
--- a/README.md
+++ b/README.md
@@ -65,7 +65,8 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
 
 ```javascript
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-  const dev = mode == 'development';
+  const mode = process.env.NODE_ENV || 'development';
+  const prod = mode === 'production';
   ...
   module: {
     rules: [
@@ -83,7 +84,7 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
       {
         test: /\.css$/,
         use: [
-          dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+          prod ? MiniCssExtractPlugin.loader :'style-loader',
           {
             loader: 'css-loader',
             options: {
@@ -103,7 +104,9 @@ A better option is to extract the CSS into a separate file. Using the `emitCss`
   ...
 ```
 
-Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading. `dev` is some boolean flag indicating that the build is development.
+Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading.
+
+`prod` indicates, that `NODE_ENV=production` has been set from `package.json` or manually (`NODE_ENV=production npx webpack`) for production builds. We can rely on that to make dynamic adjustments to the config.
 
 Additionally, if you're using multiple entrypoints, you may wish to change `new MiniCssExtractPlugin('styles.css')` for `new MiniCssExtractPlugin('[name].css')` to generate one CSS file per entrypoint.
 

From 012cc295c8d0070e88f841a895ca44d28d82361c Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 10:12:20 +0200
Subject: [PATCH 06/11] Fix preprocess

---
 index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/index.js b/index.js
index e0bc929b..fc48c535 100644
--- a/index.js
+++ b/index.js
@@ -35,7 +35,8 @@ module.exports = function(source, map) {
 
 	const handleWarning = warning => this.emitWarning(new Error(warning));
 
-	options.preprocess = { filename: compileOptions.filename };
+	options.preprocess = options.preprocess || {};
+	options.preprocess.filename = compileOptions.filename;
 
 	preprocess(source, options.preprocess).then(processed => {
 		if (processed.dependencies && this.addDependency) {

From b4d3ee70c210bba1296d0e68c2fc8450fc45ec09 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 11:14:39 +0200
Subject: [PATCH 07/11] Actualize readme

Remove remainings of ExtractTextPlugin
Move `css: false` to compilerOptions
Remove externalDependencies, there's no such option anymore
---
 README.md | 64 +++++++++++++++++++++----------------------------------
 1 file changed, 24 insertions(+), 40 deletions(-)

diff --git a/README.md b/README.md
index 4358b00e..54ad7ea6 100644
--- a/README.md
+++ b/README.md
@@ -112,7 +112,20 @@ Additionally, if you're using multiple entrypoints, you may wish to change `new
 
 Warning, in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of if it's included in your svelte components.
 
-Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use `css: false`.
+Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use
+
+```javascript
+...
+use: {
+  loader: 'svelte-loader',
+  options: {
+    compilerOptions: {
+      css: false
+    }
+  },
+},
+...
+```
 
 ### Source maps
 
@@ -128,29 +141,24 @@ module.exports = {
     module: {
       rules: [
         ...
-        {
-          test: /\.(html|svelte)$/,
-          exclude: /node_modules/,
-          use: {
-            loader: 'svelte-loader',
-            options: {
-              emitCss: true,
-            },
-          },
-        },
         {
           test: /\.css$/,
-          use: ExtractTextPlugin.extract({
-            fallback: 'style-loader',
-            use: [{ loader: 'css-loader', options: { sourceMap: true } }],
-          }),
+          use: [
+            prod ? MiniCssExtractPlugin.loader :'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true
+              }
+            }
+          ]
         },
         ...
       ]
     },
     ...
     plugins: [
-      new ExtractTextPlugin('styles.css'),
+      new MiniCssExtractPlugin('styles.css'),
       ...
     ]
     ...
@@ -247,30 +255,6 @@ module.exports = {
 }
 ```
 
-#### External Dependencies
-
-If you rely on any external dependencies (files required in a preprocessor for example) you might want to watch these files for changes and re-run svelte compile.
-
-Webpack allows [loader dependencies](https://webpack.js.org/contribute/writing-a-loader/#loader-dependencies) to trigger a recompile. svelte-loader exposes this API via `options.externalDependencies`.
- For example:
-
-```js
-...
-const variables = path.resolve('./variables.js');
-...
-{
-    test: /\.(html|svelte)$/,
-    use: [
-      {
-        loader: 'svelte-loader',
-        options: {
-          externalDependencies: [variables]
-        }
-      }
-    ]
-  }
-```
-
 ## License
 
 MIT

From b5bdf6b8fd33c1a6c670234c3d5a8f00881c994d Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 11:19:55 +0200
Subject: [PATCH 08/11] Fix readme indentation

---
 README.md | 162 +++++++++++++++++++++++++++---------------------------
 1 file changed, 81 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index 54ad7ea6..ff08fcc1 100644
--- a/README.md
+++ b/README.md
@@ -17,34 +17,34 @@ npm install --save svelte svelte-loader
 Configure inside your `webpack.config.js`:
 
 ```javascript
-  ...
-  resolve: {
-    // see below for an explanation
-    alias: {
-      svelte: path.resolve('node_modules', 'svelte')
-    },
-    extensions: ['.mjs', '.js', '.svelte'],
-    mainFields: ['svelte', 'browser', 'module', 'main']
+...
+resolve: {
+  // see below for an explanation
+  alias: {
+    svelte: path.resolve('node_modules', 'svelte')
   },
-  module: {
-    rules: [
-      ...
-      {
-        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
-        }
+  extensions: ['.mjs', '.js', '.svelte'],
+  mainFields: ['svelte', 'browser', 'module', 'main']
+},
+module: {
+  rules: [
+    ...
+    {
+      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
       }
-      ...
-    ]
-  }
-  ...
+    }
+    ...
+  ]
+}
+...
 ```
 
 Check out the [example project](https://github.com/sveltejs/template-webpack).
@@ -64,44 +64,44 @@ If your Svelte components contain `<style>` tags, by default the compiler will a
 A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to the mix to output the css to a separate file.
 
 ```javascript
-  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-  const mode = process.env.NODE_ENV || 'development';
-  const prod = mode === 'production';
-  ...
-  module: {
-    rules: [
-      ...
-      {
-        test: /\.(html|svelte)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'svelte-loader',
-          options: {
-            emitCss: true,
-          },
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const mode = process.env.NODE_ENV || 'development';
+const prod = mode === 'production';
+...
+module: {
+  rules: [
+    ...
+    {
+      test: /\.(html|svelte)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: 'svelte-loader',
+        options: {
+          emitCss: true,
         },
       },
-      {
-        test: /\.css$/,
-        use: [
-          prod ? MiniCssExtractPlugin.loader :'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
-            }
+    },
+    {
+      test: /\.css$/,
+      use: [
+        prod ? MiniCssExtractPlugin.loader :'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
           }
-        ]
-      },
-      ...
-    ]
-  },
-  ...
-  plugins: [
-    new MiniCssExtractPlugin('styles.css'),
+        }
+      ]
+    },
     ...
   ]
+},
+...
+plugins: [
+  new MiniCssExtractPlugin('styles.css'),
   ...
+]
+...
 ```
 
 Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading.
@@ -135,33 +135,33 @@ To enable CSS source maps, you'll need to use `emitCss` and pass the `sourceMap`
 
 ```javascript
 module.exports = {
-    ...
-    devtool: "source-map", // any "source-map"-like devtool is possible
-    ...
-    module: {
-      rules: [
-        ...
-        {
-          test: /\.css$/,
-          use: [
-            prod ? MiniCssExtractPlugin.loader :'style-loader',
-            {
-              loader: 'css-loader',
-              options: {
-                sourceMap: true
-              }
+  ...
+  devtool: "source-map", // any "source-map"-like devtool is possible
+  ...
+  module: {
+    rules: [
+      ...
+      {
+        test: /\.css$/,
+        use: [
+          prod ? MiniCssExtractPlugin.loader :'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true
             }
-          ]
-        },
-        ...
-      ]
-    },
-    ...
-    plugins: [
-      new MiniCssExtractPlugin('styles.css'),
+          }
+        ]
+      },
       ...
     ]
+  },
+  ...
+  plugins: [
+    new MiniCssExtractPlugin('styles.css'),
     ...
+  ]
+  ...
 };
 ```
 

From e5759ff9baa537e0acb849fdf5e7eb65872a3543 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 12:23:17 +0200
Subject: [PATCH 09/11] Change Object.assigns to destructuring

---
 index.js       | 4 ++--
 lib/hot-api.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index fc48c535..26a31670 100644
--- a/index.js
+++ b/index.js
@@ -13,7 +13,7 @@ let index = 0;
 module.exports = function(source, map) {
 	this.cacheable();
 
-	const options = Object.assign({}, getOptions(this));
+	const options = { ...getOptions(this) };
 	const callback = this.async();
 
 	if (options.cssPath) {
@@ -55,7 +55,7 @@ module.exports = function(source, map) {
 		);
 
 		if (options.hotReload && !isProduction && !isServer) {
-			const hotOptions = Object.assign({}, options.hotOptions);
+			const hotOptions = { ...options.hotOptions };
 			const id = JSON.stringify(relative(process.cwd(), compileOptions.filename));
 			js.code = makeHot(id, js.code, hotOptions, compiled, source, compileOptions);
 		}
diff --git a/lib/hot-api.js b/lib/hot-api.js
index e98a8862..755c9582 100644
--- a/lib/hot-api.js
+++ b/lib/hot-api.js
@@ -99,5 +99,5 @@ export const applyHmr = makeApplyHmr(args => {
 		accept,
 	};
 
-	return Object.assign({}, args, { hot });
+	return { ...args, hot };
 });

From 8eef80b604b335f2453845c6a14c93896faa09f3 Mon Sep 17 00:00:00 2001
From: Non <19non91@gmail.com>
Date: Sat, 16 Jan 2021 16:13:36 +0200
Subject: [PATCH 10/11] Revert "Fix readme indentation"

---
 README.md | 162 +++++++++++++++++++++++++++---------------------------
 1 file changed, 81 insertions(+), 81 deletions(-)

diff --git a/README.md b/README.md
index ff08fcc1..54ad7ea6 100644
--- a/README.md
+++ b/README.md
@@ -17,34 +17,34 @@ npm install --save svelte svelte-loader
 Configure inside your `webpack.config.js`:
 
 ```javascript
-...
-resolve: {
-  // see below for an explanation
-  alias: {
-    svelte: path.resolve('node_modules', 'svelte')
-  },
-  extensions: ['.mjs', '.js', '.svelte'],
-  mainFields: ['svelte', 'browser', 'module', 'main']
-},
-module: {
-  rules: [
-    ...
-    {
-      test: /\.(html|svelte)$/,
-      exclude: /node_modules/,
-      use: 'svelte-loader'
+  ...
+  resolve: {
+    // see below for an explanation
+    alias: {
+      svelte: path.resolve('node_modules', 'svelte')
     },
-    {
-      // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
-      test: /node_modules\/svelte\/.*\.mjs$/,
-      resolve: {
-        fullySpecified: false
+    extensions: ['.mjs', '.js', '.svelte'],
+    mainFields: ['svelte', 'browser', 'module', 'main']
+  },
+  module: {
+    rules: [
+      ...
+      {
+        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
+        }
       }
-    }
-    ...
-  ]
-}
-...
+      ...
+    ]
+  }
+  ...
 ```
 
 Check out the [example project](https://github.com/sveltejs/template-webpack).
@@ -64,44 +64,44 @@ If your Svelte components contain `<style>` tags, by default the compiler will a
 A better option is to extract the CSS into a separate file. Using the `emitCss` option as shown below would cause a virtual CSS file to be emitted for each Svelte component. The resulting file is then imported by the component, thus following the standard Webpack compilation flow. Add [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) to the mix to output the css to a separate file.
 
 ```javascript
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const mode = process.env.NODE_ENV || 'development';
-const prod = mode === 'production';
-...
-module: {
-  rules: [
-    ...
-    {
-      test: /\.(html|svelte)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'svelte-loader',
-        options: {
-          emitCss: true,
+  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+  const mode = process.env.NODE_ENV || 'development';
+  const prod = mode === 'production';
+  ...
+  module: {
+    rules: [
+      ...
+      {
+        test: /\.(html|svelte)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'svelte-loader',
+          options: {
+            emitCss: true,
+          },
         },
       },
-    },
-    {
-      test: /\.css$/,
-      use: [
-        prod ? MiniCssExtractPlugin.loader :'style-loader',
-        {
-          loader: 'css-loader',
-          options: {
-            url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
+      {
+        test: /\.css$/,
+        use: [
+          prod ? MiniCssExtractPlugin.loader :'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              url: false, //necessary if you use url('/path/to/some/asset.png|jpg|gif')
+            }
           }
-        }
-      ]
-    },
+        ]
+      },
+      ...
+    ]
+  },
+  ...
+  plugins: [
+    new MiniCssExtractPlugin('styles.css'),
     ...
   ]
-},
-...
-plugins: [
-  new MiniCssExtractPlugin('styles.css'),
   ...
-]
-...
 ```
 
 Note that the configuration shown above switches off `MiniCssExtractPlugin` in development mode in favour of using CSS javascript injection. This is recommended by `MiniCssExtractPlugin` because it does not support hot reloading.
@@ -135,33 +135,33 @@ To enable CSS source maps, you'll need to use `emitCss` and pass the `sourceMap`
 
 ```javascript
 module.exports = {
-  ...
-  devtool: "source-map", // any "source-map"-like devtool is possible
-  ...
-  module: {
-    rules: [
-      ...
-      {
-        test: /\.css$/,
-        use: [
-          prod ? MiniCssExtractPlugin.loader :'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true
+    ...
+    devtool: "source-map", // any "source-map"-like devtool is possible
+    ...
+    module: {
+      rules: [
+        ...
+        {
+          test: /\.css$/,
+          use: [
+            prod ? MiniCssExtractPlugin.loader :'style-loader',
+            {
+              loader: 'css-loader',
+              options: {
+                sourceMap: true
+              }
             }
-          }
-        ]
-      },
+          ]
+        },
+        ...
+      ]
+    },
+    ...
+    plugins: [
+      new MiniCssExtractPlugin('styles.css'),
       ...
     ]
-  },
-  ...
-  plugins: [
-    new MiniCssExtractPlugin('styles.css'),
     ...
-  ]
-  ...
 };
 ```
 

From fb349824b7048b3b301e6a5962bffa26c04e45a2 Mon Sep 17 00:00:00 2001
From: non25 <19non91@gmail.com>
Date: Sat, 16 Jan 2021 16:15:17 +0200
Subject: [PATCH 11/11] Update README.md

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 54ad7ea6..360d74be 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ Note that the configuration shown above switches off `MiniCssExtractPlugin` in d
 
 Additionally, if you're using multiple entrypoints, you may wish to change `new MiniCssExtractPlugin('styles.css')` for `new MiniCssExtractPlugin('[name].css')` to generate one CSS file per entrypoint.
 
-Warning, in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of if it's included in your svelte components.
+Warning: in production, if you have set `sideEffects: false` in your `package.json`, `MiniCssExtractPlugin` has a tendency to drop CSS, regardless of whether it's included in your svelte components.
 
 Alternatively, if you're handling styles in some other way and just want to prevent the CSS being added to your JavaScript bundle, use