fix: schema validation (#480)

Author: evilebottnawi

package-lock.json

@@ -68,7 +68,7 @@
     "jest": "^24.8.0",
     "jest-junit": "^10.0.0",
     "lint-staged": "^9.5.0",
-    "memory-fs": "^0.4.1",
+    "memfs": "^3.0.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.19.1",
     "standard-version": "^7.0.1",

package.json

@@ -3,7 +3,10 @@
 import webpack from 'webpack';
 import sources from 'webpack-sources';
 
+import validateOptions from 'schema-utils';
+
 import CssDependency from './CssDependency';
+import schema from './plugin-options.json';
 
 const { ConcatSource, SourceMapSource, OriginalSource } = sources;
 const {
@@ -97,6 +100,8 @@ class CssModuleFactory {
 
 class MiniCssExtractPlugin {
   constructor(options = {}) {
+    validateOptions(schema, options, 'Mini CSS Extract Plugin');
+
     this.options = Object.assign(
       {
         filename: DEFAULT_FILENAME,
@@ -491,6 +496,7 @@ class MiniCssExtractPlugin {
           // use list with fewest failed deps
           // and emit a warning
           const fallbackModule = bestMatch.pop();
+
           if (!this.options.ignoreOrder) {
             const reasons = moduleDependenciesReasons.get(fallbackModule);
             compilation.warnings.push(

src/index.js

@@ -1,4 +1,5 @@
 {
+  "type": "object",
   "additionalProperties": true,
   "properties": {
     "publicPath": {
@@ -13,10 +14,9 @@
     },
     "esModule": {
       "type": "boolean"
+    },
+    "hmr": {
+      "type": "boolean"
     }
-  },
-  "errorMessages": {
-    "publicPath": "should be {String} or {Function} (https://github.com/webpack-contrib/mini-css-extract-plugin#publicpath)"
-  },
-  "type": "object"
+  }
 }

src/options.json renamed to src/loader-options.json

@@ -12,7 +12,7 @@ import validateOptions from 'schema-utils';
 
 import CssDependency from './CssDependency';
 
-import schema from './options.json';
+import schema from './loader-options.json';
 
 const pluginName = 'mini-css-extract-plugin';
 

src/loader.js

@@ -0,0 +1,18 @@
+{
+  "type": "object",
+  "additionalProperties": true,
+  "properties": {
+    "filename": {
+      "type": "string"
+    },
+    "chunkFilename": {
+      "type": "string"
+    },
+    "moduleFilename": {
+      "instanceof": "Function"
+    },
+    "ignoreOrder": {
+      "type": "boolean"
+    }
+  }
+}

src/plugin-options.json

@@ -1,6 +1,6 @@
 import path from 'path';
 
-import MemoryFS from 'memory-fs';
+import { createFsFromVolume, Volume } from 'memfs';
 import webpack from 'webpack';
 
 const assetsNames = (json) => json.assets.map((asset) => asset.name);
@@ -20,20 +20,30 @@ describe('TestMemoryFS', () => {
       context: directoryForCase,
       cache: false,
     });
-    compiler.outputFileSystem = new MemoryFS();
+    const outputFileSystem = createFsFromVolume(new Volume());
+    // Todo remove when we drop webpack@4 support
+    outputFileSystem.join = path.join.bind(path);
+
+    compiler.outputFileSystem = outputFileSystem;
+
     compiler.run((err1, stats1) => {
       if (err1) {
         done(err1);
+
         return;
       }
+
       compiler.run((err2, stats2) => {
         if (err2) {
           done(err2);
+
           return;
         }
+
         expect(assetsNames(stats1.toJson())).toEqual(
           assetsNames(stats2.toJson())
         );
+
         done();
       });
     });

test/TestMemoryFS.test.js

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validate options should throw an error on the "esModule" option with "1" value 1`] = `
+"Mini CSS Extract Plugin Loader Invalid Options
+
+options.esModule should be boolean
+"
+`;
+
+exports[`validate options should throw an error on the "hmr" option with "1" value 1`] = `
+"Mini CSS Extract Plugin Loader Invalid Options
+
+options.hmr should be boolean
+"
+`;
+
+exports[`validate options should throw an error on the "publicPath" option with "true" value 1`] = `
+"Mini CSS Extract Plugin Loader Invalid Options
+
+options.publicPath should be string
+options.publicPath should pass \\"instanceof\\" keyword validation
+options.publicPath should match some schema in anyOf
+"
+`;

test/__snapshots__/validate-loader-options.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`validate options should throw an error on the "chunkFilename" option with "true" value 1`] = `
+"Mini CSS Extract Plugin Invalid Options
+
+options.chunkFilename should be string
+"
+`;
+
+exports[`validate options should throw an error on the "filename" option with "true" value 1`] = `
+"Mini CSS Extract Plugin Invalid Options
+
+options.filename should be string
+"
+`;
+
+exports[`validate options should throw an error on the "ignoreOrder" option with "1" value 1`] = `
+"Mini CSS Extract Plugin Invalid Options
+
+options.ignoreOrder should be boolean
+"
+`;
+
+exports[`validate options should throw an error on the "moduleFilename" option with "true" value 1`] = `
+"Mini CSS Extract Plugin Invalid Options
+
+options.moduleFilename should pass \\"instanceof\\" keyword validation
+"
+`;

test/__snapshots__/validate-plugin-options.test.js.snap

@@ -0,0 +1,3 @@
+.async {
+  color: red;
+}

test/cases/chunkFilename/async.css

@@ -0,0 +1,4 @@
+.async {
+  color: red;
+}
+

test/cases/chunkFilename/expected/1.async.css

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+

test/cases/chunkFilename/expected/main.css

@@ -0,0 +1,4 @@
+import './style.css';
+
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "async" */ './async.css');

test/cases/chunkFilename/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/chunkFilename/style.css

@@ -0,0 +1,19 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+      chunkFilename: '[id].[name].css',
+    }),
+  ],
+};

test/cases/chunkFilename/webpack.config.js

@@ -0,0 +1,3 @@
+.async {
+  color: red;
+}

test/cases/filename-with-template/async.css

@@ -0,0 +1,4 @@
+.async {
+  color: red;
+}
+

test/cases/filename-with-template/expected/async.css

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+

test/cases/filename-with-template/expected/main.css

@@ -0,0 +1,4 @@
+import './style.css';
+
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "async" */ './async.css');

test/cases/filename-with-template/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/filename-with-template/style.css

@@ -0,0 +1,18 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/filename-with-template/webpack.config.js

@@ -0,0 +1,3 @@
+.async {
+  color: red;
+}

test/cases/filename-without-template/async.css

@@ -0,0 +1,4 @@
+.async {
+  color: red;
+}
+

test/cases/filename-without-template/expected/1.main.css

@@ -0,0 +1,4 @@
+body {
+  background: red;
+}
+

test/cases/filename-without-template/expected/main.css

@@ -0,0 +1,4 @@
+import './style.css';
+
+/* eslint-disable-next-line no-unused-expressions */
+import(/* webpackChunkName: "async" */ './async.css');

test/cases/filename-without-template/index.js

@@ -0,0 +1,3 @@
+body {
+  background: red;
+}

test/cases/filename-without-template/style.css

@@ -0,0 +1,18 @@
+import Self from '../../../src';
+
+module.exports = {
+  entry: './index.js',
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: 'main.css',
+    }),
+  ],
+};

test/cases/filename-without-template/webpack.config.js

@@ -0,0 +1,3 @@
+.foo {
+  color: red;
+}

test/fixtures/simple.css

@@ -0,0 +1,3 @@
+import './simple.css';
+
+console.log('HERE');