From 270c302e51d43e09190fe62ca79c16416a01999b Mon Sep 17 00:00:00 2001
From: Thomas Cazade <cazade.thomas@gmail.com>
Date: Mon, 14 Sep 2020 08:02:44 +0200
Subject: [PATCH] Add hot-reload script, refactor log function into module

---
 build/build.js      |  6 ++----
 build/hot-reload.js | 23 +++++++++++++++++++++++
 build/log.js        |  7 +++++++
 package.json        |  4 +++-
 4 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 build/hot-reload.js
 create mode 100644 build/log.js

diff --git a/build/build.js b/build/build.js
index 7b49231..755f2ea 100644
--- a/build/build.js
+++ b/build/build.js
@@ -1,16 +1,13 @@
 const fs = require('fs');
 const path = require('path');
 const sass = require('sass');
-const chalk = require('chalk');
 const write = require('write');
 const rimraf = require('rimraf');
 const postcss = require('postcss');
 const cssnano = require('cssnano');
 const autoprefixer = require('autoprefixer');
 
-function log(...args) {
-  return console.log('📦', chalk.cyan(...args));
-}
+const log = require('./log');
 
 async function build() {
   const entrypoint = path.resolve(__dirname, '../src/styles.scss');
@@ -20,6 +17,7 @@ async function build() {
   log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
 
   rimraf.sync('dist', { disableGlob: true });
+
   if (fs.existsSync(paperDocsPath)) {
     fs.unlinkSync(paperDocsPath);
   }
diff --git a/build/hot-reload.js b/build/hot-reload.js
new file mode 100644
index 0000000..0d89b56
--- /dev/null
+++ b/build/hot-reload.js
@@ -0,0 +1,23 @@
+const util = require('util');
+const path = require('path');
+const sass = require('sass');
+const write = require('write');
+const postcss = require('postcss');
+const chokidar = require('chokidar');
+const autoprefixer = require('autoprefixer');
+
+const log = require('./log');
+
+const sassRenderPromisified = util.promisify(sass.render);
+
+const entrypoint = path.resolve(__dirname, '../src/styles.scss');
+const paperDocsPath = path.resolve(__dirname, '../docs/static/assets/paper.css');
+
+chokidar.watch('./src/**/*.scss').on('change', (event, path) => {
+  log(`Detected file change (${event}), re-building compiled CSS...`);
+
+  sassRenderPromisified({ file: entrypoint })
+    .then((compiledCSS) => postcss([autoprefixer]).process(compiledCSS.css.toString(), { from: undefined }))
+    .then((autoprefixedCSS) => write(paperDocsPath, autoprefixedCSS.css))
+    .then(() => log('Re-built compiled CSS.'));
+});
diff --git a/build/log.js b/build/log.js
new file mode 100644
index 0000000..f9c5499
--- /dev/null
+++ b/build/log.js
@@ -0,0 +1,7 @@
+const chalk = require('chalk');
+
+function log(...args) {
+  return console.log('📦 ', chalk.cyan(...args));
+}
+
+module.exports = log;
diff --git a/package.json b/package.json
index 1db7d6b..43f0810 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,12 @@
   "description": "The less formal CSS framework.",
   "main": "dist/paper.css",
   "scripts": {
+    "build": "npm run css:build && npm run hugo:build",
     "css:build": "node ./build/build.js",
+    "dev": "concurrently --kill-others \"npm run dev:hot-reload\" \"npm run hugo:serve\"",
+    "dev:hot-reload": "node ./build/hot-reload.js",
     "hugo:build": "hugo -D --source=docs",
     "hugo:serve": "hugo server --source=docs --disableFastRender",
-    "build": "npm run css:build && npm run hugo:build",
     "lint": "npm run stylelint",
     "start": "npm run hugo:serve",
     "stylelint": "stylelint 'src/**/*.scss'"