feat: add purgecss in production

client/package-lock.json

@@ -818,13 +818,13 @@
       }
     },
     "@fullhuman/postcss-purgecss": {
-      "version": "1.2.0",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-1.3.0.tgz",
-      "integrity": "sha512-An05jbnZVUrX+VVNniaNQtOuo/S7tyQu5x86itXTF+7kfMaGxglFGykFX2KCt2hcbJijbvfCval9IkPO19V1KA==",
+      "integrity": "sha512-zvfS3dPKD2FAtMcXapMJXGbDgEp9E++mLR6lTgSruv6y37uvV5xJ1crVktuC1gvnmMwsa7Zh1m05FeEiz4VnIQ==",
       "dev": true,
       "requires": {
         "postcss": "^7.0.14",
-        "purgecss": "^1.3.0"
+        "purgecss": "^1.4.0"
       }
     },
     "@hapi/address": {
@@ -8428,18 +8428,6 @@
         }
       }
     },
-    "postcss-import": {
-      "version": "12.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
-      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
-      "dev": true,
-      "requires": {
-        "postcss": "^7.0.1",
-        "postcss-value-parser": "^3.2.3",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      }
-    },
     "postcss-js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-2.0.1.tgz",
@@ -9049,15 +9037,46 @@
       "dev": true
     },
     "purgecss": {
-      "version": "1.3.0",
+      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-1.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-1.4.0.tgz",
-      "integrity": "sha512-0UMnr8aUsPO7RbzAT72UELRvwMHhadtuunDm7rcgRS6b8pCVO8yglIqikiYFwQk2XP606mk+GpjI1G74Auxgtg==",
+      "integrity": "sha512-or7/16i7O6DH+NpXqY8NCcWCc940O6PxOgjWAcMTElzgccKOJua1/n6JVtM8UYqoMMWoCyKk+CbLpo4+4mY3BQ==",
       "dev": true,
       "requires": {
         "glob": "^7.1.3",
         "postcss": "^7.0.14",
         "postcss-selector-parser": "^6.0.0",
-        "yargs": "^13.2.2"
+        "yargs": "^14.0.0"
+      },
+      "dependencies": {
+        "yargs": {
+          "version": "14.2.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-14.2.0.tgz",
+          "integrity": "sha512-/is78VKbKs70bVZH7w4YaZea6xcJWOAwkhbR0CFuZBmYtfTYF0xjGJF43AYd8g2Uii1yJwmS5GR2vBmrc32sbg==",
+          "dev": true,
+          "requires": {
+            "cliui": "^5.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^3.0.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^3.0.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^15.0.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "15.0.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-15.0.0.tgz",
+          "integrity": "sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==",
+          "dev": true,
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
       }
     },
     "q": {
@@ -9138,23 +9157,6 @@
         "unpipe": "1.0.0"
       }
     },
-    "read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
-      "dev": true,
-      "requires": {
-        "pify": "^2.3.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
     "read-pkg": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.1.1.tgz",

client/package.json

@@ -15,15 +15,13 @@
     "vuex": "^3.1.1"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^1.2.0",
+    "@fullhuman/postcss-purgecss": "^1.3.0",
     "@vue/cli-plugin-babel": "^3.8.0",
     "@vue/cli-plugin-eslint": "^3.8.0",
     "@vue/cli-service": "^3.8.4",
     "babel-eslint": "^10.0.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
-    "postcss-import": "^12.0.1",
-    "purgecss": "^1.3.0",
     "tailwindcss": "^1.0.4",
     "vue-template-compiler": "^2.5.21"
   }

client/postcss.config.js

@@ -1,32 +1,21 @@
-const tailwindcss = require("tailwindcss");
+const purgecss = require('@fullhuman/postcss-purgecss')({
-const autoprefixer = require("autoprefixer");
-const purgecss = require("@fullhuman/postcss-purgecss");
-const postcssImport = require('postcss-import')
 
-class TailwindExtractor {
+  // Specify the paths to all of the template files in your project 
-  static extract(content) {
+  content: [
-    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
+    './src/**/*.vue',
-  }
+    './public/**/*.html',
-}
+  ],
+
+  // Include any special characters you're using in this regular expression
+  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+})
 
 module.exports = {
   plugins: [
-    postcssImport,
+    require('tailwindcss'),
-    tailwindcss('./tailwind.config.js'),
+    require('autoprefixer'),
-
+    ...process.env.NODE_ENV === 'production'
-    // --- !!! purgecss not working !!! ---
+      ? [purgecss]
-
+      : []
-    // purgecss({
-    //   content: ['./src/**/*.vue'],
-    //   whitelist: ['html', 'body'],
-    //   extractors: [
-    //     {
-    //       extractor: TailwindExtractor,
-
-    //       extensions: ['html', 'js', 'vue']
-    //     }
-    //   ]
-    // }),
-    autoprefixer
   ]
 }