Merge pull request #29 from FullHuman/webpack-4

Webpack 4

packages/purgecss-webpack-plugin/.travis.yml

@@ -1,5 +1,3 @@
 language: node_js
 node_js:
-  - "7"
-before_install:
-  - npm i -g npm@5.3.0
+  - "8"

packages/purgecss-webpack-plugin/__tests__/__snapshots__/webpack-integration.test.js.snap

@@ -16,6 +16,7 @@ exports[`Webpack Integration Tests path-and-whitelist-functions 1`] = `
 md\\\\:w-2\\\\/3 {
   color: red;
 }
+
 "
 `;
 
@@ -31,6 +32,7 @@ exports[`Webpack Integration Tests simple 1`] = `
 md\\\\:w-2\\\\/3 {
   color: red;
 }
+
 "
 `;
 
@@ -39,18 +41,19 @@ exports[`Webpack Integration Tests simple-with-exclusion 1`] = `
   color: red;
 }
 
+.unused {
+  color: blue;
+}
+
 .whitelisted {
   color: green;
 }
 
 md\\\\:w-2\\\\/3 {
   color: red;
 }
-"
-`;
 
-exports[`Webpack Integration Tests simple-with-exclusion 2`] = `
-".legacy-unused-class {
+.legacy-unused-class {
   color: red;
 }
 
@@ -61,5 +64,6 @@ exports[`Webpack Integration Tests simple-with-exclusion 2`] = `
 .hello {
   color: red;
 }
+
 "
 `;

packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/expected/style.css → packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/expected/styles.css

@@ -13,3 +13,4 @@
 md\:w-2\/3 {
   color: red;
 }
+

packages/purgecss-webpack-plugin/__tests__/cases/path-and-whitelist-functions/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const glob = require('glob')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const PurgecssPlugin = require('../../../src/').default
 
 class CustomExtractor {
@@ -14,19 +14,32 @@ const PATHS = {
 }
 
 module.exports = {
+    mode: 'development',
     entry: './src/index.js',
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                styles: {
+                    name: 'styles',
+                    test: /\.css$/,
+                    chunks: 'all',
+                    enforce: true
+                }
+            }
+        }
+    },
     module: {
         rules: [
             {
                 test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: 'css-loader?sourceMap'
-                })
+                use: [MiniCssExtractPlugin.loader, 'css-loader']
             }
         ]
     },
     plugins: [
-        new ExtractTextPlugin('style.css'),
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
         new PurgecssPlugin({
             paths: () => glob.sync(`${PATHS.src}/*`),
             whitelist: () => ['whitelisted'],

packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/styles.css

@@ -0,0 +1,28 @@
+.hello {
+  color: red;
+}
+
+.unused {
+  color: blue;
+}
+
+.whitelisted {
+  color: green;
+}
+
+md\:w-2\/3 {
+  color: red;
+}
+
+.legacy-unused-class {
+  color: red;
+}
+
+.unused-too {
+  color: blue;
+}
+
+.hello {
+  color: red;
+}
+

packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const glob = require('glob')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const PurgecssPlugin = require('../../../src/').default
 
 class CustomExtractor {
@@ -14,22 +14,35 @@ const PATHS = {
 }
 
 module.exports = {
+    mode: 'development',
     entry: {
         bundle: './src/index.js',
         legacy: './src/legacy.js'
     },
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                styles: {
+                    name: 'styles',
+                    test: /\.css$/,
+                    chunks: 'all',
+                    enforce: true
+                }
+            }
+        }
+    },
     module: {
         rules: [
             {
                 test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: 'css-loader?sourceMap'
-                })
+                use: [MiniCssExtractPlugin.loader, 'css-loader']
             }
         ]
     },
     plugins: [
-        new ExtractTextPlugin('[name].css?[hash]'),
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
         new PurgecssPlugin({
             paths: glob.sync(`${PATHS.src}/*`),
             styleExtensions: ['.css'],

packages/purgecss-webpack-plugin/__tests__/cases/simple-with-exclusion/expected/bundle.css → packages/purgecss-webpack-plugin/__tests__/cases/simple/expected/styles.css

@@ -9,3 +9,4 @@
 md\:w-2\/3 {
   color: red;
 }
+

packages/purgecss-webpack-plugin/__tests__/cases/simple/webpack.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const glob = require('glob')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const PurgecssPlugin = require('../../../src/').default
 
 class CustomExtractor {
@@ -14,19 +14,32 @@ const PATHS = {
 }
 
 module.exports = {
+    mode: 'development',
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                styles: {
+                    name: 'styles',
+                    test: /\.css$/,
+                    chunks: 'all',
+                    enforce: true
+                }
+            }
+        }
+    },
     entry: './src/index.js',
     module: {
         rules: [
             {
                 test: /\.css$/,
-                use: ExtractTextPlugin.extract({
-                    use: 'css-loader?sourceMap'
-                })
+                use: [MiniCssExtractPlugin.loader, 'css-loader']
             }
         ]
     },
     plugins: [
-        new ExtractTextPlugin('style.css'),
+        new MiniCssExtractPlugin({
+            filename: '[name].css'
+        }),
         new PurgecssPlugin({
             paths: glob.sync(`${PATHS.src}/*`),
             whitelist: ['whitelisted'],

packages/purgecss-webpack-plugin/__tests__/search.test.js

@@ -39,23 +39,23 @@ describe('Search files', () => {
     })
 
     it('returns matches based on extension', () => {
-        chunk.modules = ['foobar.txt', 'barbar.css']
+        chunk.modulesIterable = ['foobar.txt', 'barbar.css']
         const extensions = ['.txt']
         const matches = ['foobar.txt']
 
         expect(files(chunk, extensions)).toEqual(matches)
     })
 
     it('does not fail with missing modules', () => {
-        chunk.modules = ['foobar.txt', '', 'barbar.css']
+        chunk.modulesIterable = ['foobar.txt', '', 'barbar.css']
         const extensions = ['.txt']
         const matches = ['foobar.txt']
 
         expect(files(chunk, extensions)).toEqual(matches)
     })
 
     it('returns matches based on extension with a customized getter', () => {
-        chunk.modules = [
+        chunk.modulesIterable = [
             {
                 resource: 'foobar.txt'
             },
@@ -70,7 +70,7 @@ describe('Search files', () => {
     })
 
     it('does not fail with missing modules when a getter fails', () => {
-        chunk.modules = [
+        chunk.modulesIterable = [
             {
                 resource: 'foobar.txt'
             },

packages/purgecss-webpack-plugin/__tests__/webpack-integration.test.js

@@ -1,7 +1,6 @@
 import fs from 'fs'
 import path from 'path'
 import webpack from 'webpack'
-import ExtractPlugin from 'extract-text-webpack-plugin'
 
 const cases = process.env.CASES
     ? process.env.CASES.split(',')
@@ -20,11 +19,6 @@ describe('Webpack Integration Tests', () => {
             }
             options.context = testDirectory
             if (!options.module) options.module = {}
-            if (!options.module.loaders) {
-                options.module.loaders = [
-                    { test: /\.txt$/, loader: ExtractPlugin.extract('raw-loader') }
-                ]
-            }
             if (!options.output) options.output = { filename: '[name].js' }
             if (!options.output.path) options.output.path = outputDirectory
             if (process.env.CASES) {

packages/purgecss-webpack-plugin/examples/simple/dist/0.bundle.js

@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{2:function(n,w,o){}}]);