chore: improve sass-render and watch scripts (web-padawan#18)

.eslintrc

@@ -33,6 +33,15 @@
       "rules": {
         "no-unused-expressions": "off"
       }
+    },
+    {
+      "files": [
+        "packages/sass-render/**/*",
+        "scripts/watcher.js"
+      ],
+      "rules": {
+        "no-console": "off"
+      }
     }
   ],
   "parserOptions": {

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "argos": "argos upload test/visual/screenshots/chrome --token $ARGOS_TOKEN || true",
     "build": "yarn build-styling",
-    "build-styling": "./scripts/build-styling.sh",
+    "build-styling": "node packages/sass-render/bin/sass-render.js -s 'packages/*/scss/*.scss'",
     "deploy-storybook": "storybook-to-ghpages",
     "dist": "lerna run dist",
     "lint": "npm-run-all --parallel lint:*",
@@ -21,6 +21,9 @@
   "workspaces": [
     "packages/*"
   ],
+  "dependencies": {
+    "node-watch": "^0.6.0"
+  },
   "devDependencies": {
     "@babel/core": "^7.4.0",
     "@babel/plugin-transform-runtime": "^7.4.0",
@@ -36,8 +39,6 @@
     "argos-cli": "^0.1.1",
     "babel-loader": "^8.0.5",
     "chai": "^4.2.0",
-    "command-line-args": "^5.0.2",
-    "command-line-usage": "^5.0.5",
     "eslint": "^5.15.3",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^4.1.0",
@@ -59,15 +60,12 @@
     "lint-staged": "^8.1.5",
     "lit-html": "^1.0.0",
     "mocha": "^6.0.2",
-    "node-sass-import": "^2.0.1",
-    "node-watch": "^0.6.0",
     "npm-run-all": "^4.1.5",
     "polymer-webpack-loader": "^2.0.3",
     "prettier": "^1.16.4",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "rimraf": "^2.6.3",
-    "sass": "^1.17.3",
     "sinon": "^7.3.0",
     "sinon-chai": "^3.3.0",
     "stylelint": "^9.10.1",

packages/sass-render/bin/sass-render.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+const path = require('path');
+const commandLineArgs = require('command-line-args');
+const commandLineUsage = require('command-line-usage');
+const glob = require('glob');
+const { sassRender } = require('../index.js');
+
+const options = [
+  {
+    name: 'source',
+    alias: 's',
+    type: String,
+    description: 'Template file to render sass into.',
+    defaultOption: true
+  },
+  {
+    name: 'help',
+    alias: 'h',
+    type: Boolean,
+    description: 'Print this message.'
+  }
+];
+
+const { source, help } = commandLineArgs(options);
+
+function printUsage() {
+  const sections = [
+    {
+      header: 'sass-render',
+      content: 'Render sass into css tagged template literal'
+    },
+    {
+      header: 'Options',
+      optionList: options
+    }
+  ];
+  console.log(commandLineUsage(sections));
+}
+
+if (help) {
+  printUsage();
+  process.exit(0);
+}
+
+if (!source) {
+  console.error('Must provide a source!');
+  printUsage();
+  process.exit(-1);
+}
+
+glob(source, (err, files) => {
+  files
+    .filter(file => !path.basename(file).startsWith('_'))
+    .forEach(file => {
+      sassRender(file).catch(error => {
+        console.error(error);
+        process.exit(-1);
+      });
+    });
+});

scripts/sass-render/index.js → packages/sass-render/index.js

@@ -1,4 +1,5 @@
 const fs = require('fs');
+const path = require('path');
 const util = require('util');
 
 const sass = require('sass');
@@ -14,17 +15,20 @@ async function sassToCss(sassFile) {
   const result = await renderSass({
     file: sassFile,
     importer: nodeSassImport,
-    outputStyle: 'compressed',
+    outputStyle: 'compressed'
   });
   return result.css.toString();
 }
 
-async function sassRender(sourceFile, templateFile) {
+const templateFile = path.join(__dirname, './sass-template.tmpl');
+
+async function sassRender(sourceFile) {
   const template = await readFile(templateFile, 'utf-8');
   const match = delimiter.exec(template);
   if (!match) {
     throw new Error(`Template file ${templateFile} did not contain template delimiters`);
   }
+  console.log(`Processing ${sourceFile}`);
   const replacement = await sassToCss(sourceFile);
   const newContent = template.replace(delimiter, replacement);
   const outputFile = sourceFile

packages/sass-render/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@aybolit/sass-render",
+  "private": true,
+  "version": "0.1.0",
+  "author": "Serhii Kulykov <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "command-line-args": "^5.0.2",
+    "command-line-usage": "^5.0.5",
+    "glob": "^7.1.3",
+    "node-sass-import": "^2.0.1",
+    "sass": "^1.17.3"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

scripts/watcher.js

@@ -4,21 +4,17 @@ const exec = promisify(require('child_process').exec);
 
 const watchOptions = {
   recursive: true,
-  filter: (path) => {
+  filter: path => {
     if (path.indexOf('node_modules') > -1) {
       return false;
     }
     if (path.indexOf('scss') === -1) {
       return false;
     }
     return /.(?:scss)$/.test(path);
-  },
+  }
 };
 
-watch('packages', watchOptions, function(_event, fileName) {
-  addToQueue(fileName);
-});
-
 let updating = false;
 
 async function addToQueue(fileName) {
@@ -28,16 +24,20 @@ async function addToQueue(fileName) {
   console.log(`saw change to ${fileName}`);
   updating = true;
   console.log('building styles');
-  const execPromise = exec('npm run build');
+  const execPromise = exec(`node packages/sass-render/bin/sass-render.js -s "${fileName}"`);
   try {
-    const {stdout} = await execPromise;
+    const { stdout } = await execPromise;
     console.log(stdout);
-  } catch ({stdout, stderr}) {
+  } catch ({ stdout, stderr }) {
     console.log(stdout);
     console.log('ERROR:', stderr);
   }
   console.log('watcher build complete!');
   updating = false;
 }
 
+watch('packages', watchOptions, (_event, fileName) => {
+  addToQueue(fileName);
+});
+
 console.log('watcher started!');