fix: compatibility with webpack@5 (#571)

Author: evilebottnawi

.gitignore

@@ -5,6 +5,7 @@ npm-debug.log*
 /coverage
 /dist
 /test/js
+/test/outputs
 /local
 /reports
 /node_modules

src/index.js

@@ -1,14 +1,16 @@
 /* eslint-disable class-methods-use-this */
 
 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;
+// webpack 5 exposes the sources property to ensure the right version of webpack-sources is used
+const { ConcatSource, SourceMapSource, OriginalSource } =
+  // eslint-disable-next-line global-require
+  webpack.sources || require('webpack-sources');
+
 const {
   Template,
   util: { createHash },

test/TestCases.test.js

@@ -1,3 +1,7 @@
+/**
+ * @jest-environment node
+ */
+
 import fs from 'fs';
 import path from 'path';
 

test/cases/contenthash/expected/webpack-5/1.main.d229600830e975496c76.css renamed to test/cases/cache/expected/main.css

@@ -0,0 +1 @@
+import './style.css';

test/cases/cache/index.js

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

test/cases/cache/style.css

@@ -0,0 +1,33 @@
+import path from 'path';
+
+import del from 'del';
+
+import Self from '../../../src';
+
+const fileSystemCacheDirectory = path.resolve(
+  __dirname,
+  '../../outputs/cache/type-filesystem'
+);
+
+del.sync(fileSystemCacheDirectory);
+
+module.exports = {
+  entry: './index.js',
+  cache: {
+    type: 'filesystem',
+    cacheDirectory: fileSystemCacheDirectory,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [Self.loader, 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new Self({
+      filename: '[name].css',
+    }),
+  ],
+};

test/cases/cache/webpack.config.js

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