bikubi · March 1, 2019 12:39 · Mar 1, 2019
diff --git a/README.md b/README.md
@@ -0,0 +1,74 @@
+# Why
+
+1. [Sage](https://github.com/roots/sage) doesn't come with [Purgecss](https://github.com/FullHuman/purgecss) (or uncss, etc.)
+2. Say, we use [Bulma](https://bulma.io) -- suddenly `dist/main.css` grows by 400K!
+3. Let's purge it!
+4. Oh dang, we need to whitelist `/\.wp-/`, `/\.post-type/`, `/myfancylightbox/`...
+5. Wait we are whitelisting pretty much everything from `/resource/assets/styles`!
+6. Isn't there an option to purge `/node_modules/**/*` only?
+7. Nope.
+8. `purgecss start ignore`, *strategically* placed, to the rescue!
+
+Now, this might not be 100% effective, but it is very convenient. YMMV!
+
+# Installation
+
+```bash
+yarn add -D purgecss-webpack-plugin
+yarn add -D glob-all
+```
+# Set up Webpack plugin
+
+```javascript
+// resources/assets/build/webpack.config.optimize.js
+const glob = require('glob-all');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+//...
+module.exports = {
+  plugins: [
+    //...
+    new PurgecssPlugin({
+      paths: glob.sync([
+        'app/**/*.php',
+        'resources/views/**/*.php',
+        'resources/assets/scripts/**/*.js',
+      ]),
+    }),
+```
+
+# Configure Sage's PostCSS
+
+```javascript
+// resources/assets/build/postcss.config.js
+// we need to keep "important" comments
+const cssnanoConfig = {
+  preset: ['default', { discardComments: { removeAll: false } }]
+//                                                    ^^^^^
+```
+
+# Edit main.scss
+
+```scss
+// resources/assets/styles/main.scss
+
+@import "common/variables";
+
+/** Import everything from autoload */
+@import "./autoload/**/*";
+
+/**
+ * Import npm dependencies
+ *
+ * Prefix your imports with `~` to grab from node_modules/
+ * @see https://github.com/webpack-contrib/sass-loader#imports
+ */
+
+/*! purgecss start ignore */
+// note the exclamation mark, which makes this comment "important"!
+// everything above this line will be purged!
+// everything below it will land in dist/main.css!
+
+/** Import theme styles */
+@import "common/global";
+//...
+```