Merge pull request #226 from papercss/build/hot-reload

Add SCSS hot-reloading compilation for Hugo docs

build/build.js

@@ -1,32 +1,27 @@
 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 constants = require('./constants');
+const log = require('./log');
 
 async function build() {
-  const entrypoint = path.resolve(__dirname, '../src/styles.scss');
-  const paperDocsPath = path.resolve(__dirname, '../docs/static/assets/paper.css');
-
   log('Starting PaperCSS build...');
   log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
 
   rimraf.sync('dist', { disableGlob: true });
-  if (fs.existsSync(paperDocsPath)) {
-    fs.unlinkSync(paperDocsPath);
+
+  if (fs.existsSync(constants.PAPER_DOCS_PATH)) {
+    fs.unlinkSync(constants.PAPER_DOCS_PATH);
   }
 
-  log('Compiling SCSS to CSS, entrypoint:', entrypoint);
+  log('Compiling SCSS to CSS, entrypoint:', constants.ENTRYPOINT_PATH);
 
-  const compiledCSS = sass.renderSync({ file: entrypoint });
+  const compiledCSS = sass.renderSync({ file: constants.ENTRYPOINT_PATH });
 
   log('Processing CSS: autoprefixer...');
 
@@ -36,14 +31,11 @@ async function build() {
 
   const minifiedCSS = await postcss([cssnano]).process(autoprefixedCSS.css, { from: undefined });
 
-  const paperPath = path.resolve(__dirname, '../dist/paper.css');
-  const paperminpath = path.resolve(__dirname, '../dist/paper.min.css');
-
   log('Writing paper.css and paper.min.css files to dist/ and docs/ folders...');
 
-  write(paperPath, autoprefixedCSS.css);
-  write(paperminpath, minifiedCSS.css);
-  write(paperDocsPath, autoprefixedCSS.css);
+  write(constants.PAPER_DIST_PATH, autoprefixedCSS.css);
+  write(constants.PAPER_DIST_MIN_PATH, minifiedCSS.css);
+  write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css);
 
   log('Build done!');
 }

build/constants.js

@@ -0,0 +1,8 @@
+const path = require('path');
+
+module.exports = {
+  ENTRYPOINT_PATH: path.resolve(__dirname, '../src/styles.scss'),
+  PAPER_DIST_PATH: path.resolve(__dirname, '../dist/paper.css'),
+  PAPER_DIST_MIN_PATH: path.resolve(__dirname, '../dist/paper.min.css'),
+  PAPER_DOCS_PATH: path.resolve(__dirname, '../docs/static/assets/paper.css'),
+};

build/hot-reload.js

@@ -0,0 +1,26 @@
+const util = require('util');
+const sass = require('sass');
+const write = require('write');
+const postcss = require('postcss');
+const chokidar = require('chokidar');
+const autoprefixer = require('autoprefixer');
+
+const constants = require('./constants');
+const log = require('./log');
+
+const sassRenderPromisified = util.promisify(sass.render);
+
+function compile() {
+  sassRenderPromisified({ file: constants.ENTRYPOINT_PATH })
+    .then((compiledCSS) => postcss([autoprefixer]).process(compiledCSS.css.toString(), { from: undefined }))
+    .then((autoprefixedCSS) => write(constants.PAPER_DOCS_PATH, autoprefixedCSS.css))
+    .then(() => log('Compiled CSS in docs/ folder.'));
+}
+
+chokidar.watch('./src/**/*.scss').on('change', (event) => {
+  log(`Detected file change (${event}), compiling SCSS to CSS...`);
+  compile();
+});
+
+// Do initial compilation.
+compile();

build/log.js

@@ -0,0 +1,7 @@
+const chalk = require('chalk');
+
+function log(...args) {
+  return console.log('📦 ', chalk.cyan(...args));
+}
+
+module.exports = log;

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'"
@@ -27,6 +29,8 @@
     "autoprefixer": "^9.8.6",
     "chai": "^4.1.2",
     "chalk": "^4.1.0",
+    "chokidar": "^3.4.2",
+    "concurrently": "^5.3.0",
     "cssnano": "^4.1.10",
     "hugo-bin": "^0.62.3",
     "postcss": "^7.0.32",