nullstack · Mortaro · Apr 3, 2022 · Mar 31, 2022 · Mar 31, 2022 · Mar 31, 2022
diff --git a/package.json b/package.json
@@ -31,13 +31,11 @@
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "fs-extra": "^10.0.0",
-    "glob": "^7.1.7",
     "ignore-loader": "^0.1.2",
     "mini-css-extract-plugin": "^2.4.5",
     "node-fetch": "2.6.7",
     "node-polyfill-webpack-plugin": "^1.1.4",
     "nodemon-webpack-plugin": "^4.3.1",
-    "purgecss-webpack-plugin": "^4.1.3",
     "raw-loader": "^4.0.2",
     "sass": "^1.32.11",
     "sass-loader": "^8.0.2",

diff --git a/scripts/index.js b/scripts/index.js
@@ -6,7 +6,10 @@ let lastTrace = '';
 let compilingIndex = 1;
 
 const webpack = require('webpack');
-const config = require('../webpack.config');
+const path = require('path');
+const { existsSync } = require('fs');
+const customConfig = path.resolve(process.cwd(), './webpack.config.js');
+const config = existsSync(customConfig) ? require(customConfig) : require('../webpack.config');
 
 const buildModes = ['ssg', 'spa', 'ssr']
 

diff --git a/tests/package.json b/tests/package.json
@@ -9,15 +9,14 @@
     "nullstack": "*",
     "puppeteer": "^5.5.0",
     "jest-puppeteer": "^6.0.3",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "glob": "^7.1.7",
+    "purgecss-webpack-plugin": "^4.1.3"
   },
   "scripts": {
     "start": "npx nullstack start --input=./tests --port=6969",
     "build": "npx nullstack build --input=./tests --mode=ssr",
     "test": "npm run build && jest",
     "script": "node src/scripts/run.js"
-  },
-  "dependencies": {
-    "glob": "^7.1.7"
   }
 }
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
@@ -30,7 +30,7 @@ import PluginAttributes from './PluginAttributes';
 import Polyfill from './Polyfill';
 import PublicServerFunctions from './PublicServerFunctions.njs';
 import PureComponents from './PureComponents';
-import Purge from './Purge';
+import WebpackCustomPlugin from './WebpackCustomPlugin';
 import RemoveStart from './RemoveStart';
 import RenderableComponent from './RenderableComponent';
 import RoutesAndParams from './RoutesAndParams';
@@ -107,7 +107,7 @@ class Application extends Nullstack {
         <PublicServerFunctions key="publicServerFunctions" />
         <ExternalServerFunctions route="/external-server-functions" />
         <UndefinedNodes route="/undefined-nodes" />
-        <Purge route="/purge" />
+        <WebpackCustomPlugin route="/webpack-custom-plugin" />
         <ComponentTernary route="/component-ternary" />
         <AnchorModifiers route="/anchor-modifiers" />
         <Polyfill route="/polyfill" />

diff --git a/tests/src/Purge.njs → tests/src/WebpackCustomPlugin.njs b/tests/src/Purge.njs → tests/src/WebpackCustomPlugin.njs
@@ -1,13 +1,13 @@
 import Nullstack from 'nullstack';
 
-class Purge extends Nullstack {
+class WebpackCustomPlugin extends Nullstack {
 
   render() {
     return (
-      <div class="class class-[custom] [color:var(--custom-var-value)] class-0.5"> Purge </div>
+      <div class="class class-[custom] [color:var(--custom-var-value)] class-0.5"> WebpackCustomPlugin Purge </div>
     )
   }
 
 }
 
-export default Purge;
+export default WebpackCustomPlugin;
diff --git a/tests/src/Purge.test.js → tests/src/WebpackCustomPlugin.test.js b/tests/src/Purge.test.js → tests/src/WebpackCustomPlugin.test.js
@@ -2,13 +2,11 @@ const { readFileSync } = require('fs');
 
 let css;
 
-const unused = '.unused'
-
 beforeAll(async () => {
   css = readFileSync('.production/client.css', 'utf-8')
 });
 
-describe('.production', () => {
+describe('WebpackCustomPlugin Purge', () => {
 
   test('used classes stay after purge', async () => {
     const hasClass = css.includes('.class')
@@ -31,7 +29,7 @@ describe('.production', () => {
   })
 
   test('unused classes are removed during purge', async () => {
-    const hasClass = css.includes(unused)
+    const hasClass = css.includes('.should-be-removed')
     expect(hasClass).toBeFalsy();
   })
 

diff --git a/tests/webpack.config.js b/tests/webpack.config.js
@@ -0,0 +1,20 @@
+const [server, client] = require('nullstack/webpack.config');
+
+const glob = require('glob');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+
+function customClient(...args) {
+  const config = client(...args);
+  if (config.mode === 'production') {
+    config.plugins.push(new PurgecssPlugin({
+      paths: glob.sync(`src/**/*`, { nodir: true }),
+      content: ['./**/*.njs'],
+      safelist: ['script', 'body', 'html', 'style'],
+      defaultExtractor: content => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+    }));
+  }
+
+  return config;
+}
+
+module.exports = [server, customClient]
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,9 +1,7 @@
 const path = require('path');
-const glob = require('glob');
 const NodemonPlugin = require('nodemon-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
-const PurgecssPlugin = require('purgecss-webpack-plugin');
 const crypto = require("crypto");
 const { readdirSync } = require('fs');
 const NodePolyfillPlugin = require("node-polyfill-webpack-plugin")
@@ -222,14 +220,6 @@ function client(env, argv) {
       excludeAliases: ["console"]
     })
   ]
-  if (argv.environment === 'production') {
-    plugins.push(new PurgecssPlugin({
-      paths: glob.sync(`src/**/*`, { nodir: true }),
-      content: ['./**/*.njs'],
-      safelist: ['script', 'body', 'html', 'style'],
-      defaultExtractor: content => content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
-    }));
-  }
   return {
     mode: argv.environment,
     entry: './client.js',