nullstack · Mortaro · Jan 16, 2022 · Jan 7, 2022 · Jan 9, 2022 · Jan 9, 2022
diff --git a/tests/src/Application.css b/tests/src/Application.css
@@ -1,3 +1,23 @@
 #application * {
   display: block;
+}
+
+.class-\[custom\] {
+  background: red;
+}
+
+.class-0\.5 {
+  background: blue;
+}
+
+.class-05 {
+  background: green;
+}
+
+.class {
+  background: blue;
+}
+
+.should-be-removed {
+  background: yellow;
 }
diff --git a/tests/src/Application.njs b/tests/src/Application.njs
@@ -27,6 +27,7 @@ import PersistentComponent from './PersistentComponent';
 import PluginAttributes from './PluginAttributes';
 import PublicServerFunctions from './PublicServerFunctions.njs';
 import PureComponents from './PureComponents';
+import Purge from './Purge';
 import RemoveStart from './RemoveStart';
 import RenderableComponent from './RenderableComponent';
 import RoutesAndParams from './RoutesAndParams';
@@ -102,6 +103,7 @@ class Application extends Nullstack {
         <PublicServerFunctions key="publicServerFunctions" />
         <ExternalServerFunctions route="/external-server-functions" />
         <UndefinedNodes route="/undefined-nodes" />
+        <Purge route="/purge" />
         <ErrorPage route="*" />
       </main>
     )

diff --git a/tests/src/Purge.njs b/tests/src/Purge.njs
@@ -0,0 +1,13 @@
+import Nullstack from 'nullstack';
+
+class Purge extends Nullstack {
+
+  render() {
+    return (
+      <div class="class class-[custom] class-0.5"> Purge </div>
+    )
+  }
+
+}
+
+export default Purge;
diff --git a/tests/src/Purge.test.js b/tests/src/Purge.test.js
@@ -0,0 +1,36 @@
+const { readFileSync } = require('fs');
+const { promisify } = require('util');
+const exec = promisify(require('child_process').exec);
+
+let css;
+
+const unused = '.unused'
+
+beforeAll(async () => {
+  await exec('npm run build');
+  css = readFileSync('.production/client.css', 'utf-8')
+});
+
+describe('.production', () => {
+
+  test('used classes stay after purge', async () => {
+    const hasClass = css.includes('.class')
+    expect(hasClass).toBeTruthy();
+  })
+
+  test('used classes with brackets stay after purge', async () => {
+    const hasClass = css.includes('.class-\\[custom\\]')
+    expect(hasClass).toBeTruthy();
+  })
+
+  test('used classes with dots stay after purge', async () => {
+    const hasClass = css.includes('.class-0\\.5')
+    expect(hasClass).toBeTruthy();
+  })
+
+  test('unused classes are removed during purge', async () => {
+    const hasClass = css.includes(unused)
+    expect(hasClass).toBeFalsy();
+  })
+
+})
diff --git a/webpack.config.js b/webpack.config.js
@@ -204,14 +204,12 @@ function client(env, argv) {
     })
   ]
   if (argv.environment === 'production') {
-    if (argv.environment === 'production') {
-      plugins.push(new PurgecssPlugin({
-        paths: glob.sync(`src/**/*`, { nodir: true }),
-        content: ['./**/*.njs'],
-        whitelist: ['script', 'body', 'html', 'style'],
-        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
-      }));
-    }
+    plugins.push(new PurgecssPlugin({
+      paths: glob.sync(`src/**/*`, { nodir: true }),
+      content: ['./**/*.njs'],
+      whitelist: ['script', 'body', 'html', 'style'],
+      defaultExtractor: content => content.match(/[\w-/:\\\.\[\]]+(?<!:)/g) || [],
+    }));
   }
   return {
     mode: argv.environment,