Add basic PurgeCSS support, update readme (#6)

* Add basic PurgeCSS support

- Adds css-purge npm script
- Updates readme to mention the tool and some basic options
- Tested it locally and the diff is definitely noticeable, so that part is working

Still need to check if there's something to update in regards to the Sass map after running the Purge.

* Also update readme about basic optimizations

* More script info, more tweaks

* Update package.json

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

* Update README.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

4 files changed, 115 insertions, 4 deletions

diff --git a/README.md b/README.md
index c6bc68a..3cc1549 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ Setup as a starter template, you can easily generate a new GitHub repository. Fr
 
 ## Usage
 
-Be sure to have [Node.js](https://nodejs.org/en/download/) installed before proceeding.
+Be sure to have [Node.js](https://nodejs.org/) installed before proceeding.
 
 ```shell
 # Clone the repo
@@ -55,6 +55,7 @@ The following npm scripts are available to you in this starter repo. With the ex
 | `css` | Runs `css-compile` and `css-prefix` |
 | `css-compile` | Compiles source Sass into CSS |
 | `css-prefix` | Runs Autoprefixer on the compiled CSS |
+| `css-purge` | Runs PurgeCSS to remove CSS that is unused by `index.html` |
 
 ## Advanced usage
 
@@ -62,7 +63,7 @@ Take this starter repository to another level with some built-in addons that you
 
 ### Optimizing CSS
 
-Before you start to use tools that remove Bootstrap styling like PurgeCSS, you can make some broad optimizations by only including the stylesheets you think you'll need.
+Before you start to use tools that remove Bootstrap styling like [PurgeCSS](#purgecss), you can make some broad optimizations by only including the stylesheets you think you'll need.
 
 Look to the `scss/starter.scss` file for your two options of including all of Bootstrap, or a subset of our styles and components. By default we've only imported the stylesheets that Bootstrap requires plus those of the components we're planning to use.
 
@@ -76,6 +77,20 @@ See the `js/starter.js` file for an example of how to import all of Bootstrap's
 
 You can add more options here, or import the entire `bootstrap-bundle.min.js` file, to get all JavaScript plugins and Popper.js.
 
+### PurgeCSS
+
+[PurgeCSS](https://purgecss.com/) is a [PostCSS](https://postcss.org) plugin that removes unused CSS based on your site's HTML. It finds rulesets that are unused by your HTML and removes them, ensuring only what's needed is sent to your site's visitors while improving file size and performance.
+
+We've included a single npm script that runs PurgeCSS against our single `index.html` file to remove unused styles from `assets/css/starter.css`.
+
+To purge your CSS, run `npm run css-purge` from the command line. This executes the following:
+
+```shell
+npm purgecss --css assets/css/starter.css --content index.html --output assets/css/
+```
+
+PurgeCSS is a PostCSS plugin and [can be configured](https://purgecss.com/configuration.html) to your exact needs with a little extra effort, including additional [command line options](https://purgecss.com/CLI.html).
+
 ## Actions CI
 
 We've included some simple GitHub Actions in this template repo. When you generate your new project from here, you'll have the same tests that run whenever a pull request is created. We've included Actions for the following:
diff --git a/package-lock.json b/package-lock.json
index 6aa173c..ffed73b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -725,6 +725,12 @@
         "delayed-stream": "~1.0.0"
       }
     },
+    "commander": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz",
+      "integrity": "sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==",
+      "dev": true
+    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -844,6 +850,12 @@
       "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
       "dev": true
     },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -1446,6 +1458,12 @@
         "repeating": "^2.0.0"
       }
     },
+    "indexes-of": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
+      "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=",
+      "dev": true
+    },
     "inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -2535,6 +2553,17 @@
         "postcss": "^7.0.7"
       }
     },
+    "postcss-selector-parser": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
+      "integrity": "sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
     "postcss-value-parser": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz",
@@ -2602,6 +2631,18 @@
         "escape-goat": "^2.0.0"
       }
     },
+    "purgecss": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-2.1.2.tgz",
+      "integrity": "sha512-5oDBxiT9VonwKmEMohPFRFZrj8fdSVKxHPwq7G5Rx/2pXicZFJu+D4m5bb3NuV0sSK3ooNxq5jFIwwHzifP5FA==",
+      "dev": true,
+      "requires": {
+        "commander": "^5.0.0",
+        "glob": "^7.0.0",
+        "postcss": "7.0.27",
+        "postcss-selector-parser": "^6.0.2"
+      }
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
@@ -3361,6 +3402,12 @@
         }
       }
     },
+    "uniq": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz",
+      "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=",
+      "dev": true
+    },
     "unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
diff --git a/package.json b/package.json
index 307cfdb..a8c05ef 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "build": "npm run css",
     "css-compile": "node-sass --include-path node_modules --output-style compressed --source-map true --source-map-contents true --precision 6 scss -o assets/css/",
     "css-prefix": "postcss --replace assets/css/starter.css --use autoprefixer --map",
+    "css-purge": "purgecss --css assets/css/starter.css --content index.html --output assets/css/",
     "css": "npm run css-compile && npm run css-prefix",
     "server": "serve --listen 3000",
     "watch": "nodemon -e html,scss -x \"npm run css\"",
@@ -39,6 +40,7 @@
     "node-sass": "^4.14.1",
     "nodemon": "^2.0.4",
     "postcss-cli": "^7.1.1",
-    "serve": "^11.3.1"
+    "purgecss": "^2.1.2",
+    "serve": "^11.3.0"
   }
 }
diff --git a/scss/starter.scss b/scss/starter.scss
index 80343ed..4fdd65b 100644
--- a/scss/starter.scss
+++ b/scss/starter.scss
@@ -27,7 +27,54 @@ $body-bg: #f5f5f5;
 // Bring in Bootstrap
 //
 
-@import "bootstrap/scss/bootstrap";
+// Option 1
+//
+// Import all of Bootstrap's CSS
+
+// @import "bootstrap/scss/bootstrap";
+
+// Option 2
+//
+// Import just the styles you need. Note that some stylesheets are required no matter what.
+
+@import "bootstrap/scss/functions"; // Required
+@import "bootstrap/scss/variables"; // Required
+@import "bootstrap/scss/mixins"; // Required
+// @import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot"; // Required
+@import "bootstrap/scss/type";
+// @import "bootstrap/scss/images";
+// @import "bootstrap/scss/code";
+@import "bootstrap/scss/grid";
+// @import "bootstrap/scss/tables";
+// @import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+// @import "bootstrap/scss/dropdown";
+// @import "bootstrap/scss/button-group";
+// @import "bootstrap/scss/input-group"; // Requires forms
+// @import "bootstrap/scss/custom-forms";
+// @import "bootstrap/scss/nav";
+// @import "bootstrap/scss/navbar"; // Requires nav
+// @import "bootstrap/scss/card";
+// @import "bootstrap/scss/breadcrumb";
+// @import "bootstrap/scss/pagination";
+// @import "bootstrap/scss/badge";
+// @import "bootstrap/scss/jumbotron";
+// @import "bootstrap/scss/alert";
+// @import "bootstrap/scss/progress";
+// @import "bootstrap/scss/media";
+// @import "bootstrap/scss/list-group";
+// @import "bootstrap/scss/close";
+// @import "bootstrap/scss/toasts";
+@import "bootstrap/scss/modal"; // Requires transitions
+// @import "bootstrap/scss/tooltip";
+// @import "bootstrap/scss/popover";
+// @import "bootstrap/scss/carousel";
+// @import "bootstrap/scss/spinners";
+// @import "bootstrap/scss/utilities";
+// @import "bootstrap/scss/print";
+
 
 
 //