Improve style processing

Resolves flaviait#5

bin/process-styles.js

@@ -0,0 +1,92 @@
+var sass = require("node-sass");
+var autoprefixer = require("autoprefixer");
+var cssnano = require("cssnano");
+var postcss = require("postcss");
+var program = require("commander");
+var fs = require("fs");
+var _ = require("lodash");
+
+var AUTOPREFIXER_OPTIONS = {
+  browsers: ["last 2 versions"]
+};
+var CSSNANO_OPTIONS = {
+  zindex: false
+};
+
+program
+  .usage('[options] <entry> <output>')
+  .option("-w, --watch <glob>", "Watch the styles")
+  .option("-m, --minify", "Minify the styles")
+  .parse(process.argv);
+
+program.entry = program.args[0];
+program.output = program.args[1];
+
+var preprocess = file => new Promise((resolve, reject) =>
+  sass.render({
+    sourceMapEmbed: true,
+    sourceMapContents: true,
+    file: file
+  }, (error, result) => {
+    if (error) {
+      console.error(`${error.line}:${error.column} ${error.message}`);
+      reject(error);
+    } else {
+      resolve(result);
+    }
+  })
+);
+
+var postprocess = input => new Promise((resolve, reject) => {
+  var processors = [autoprefixer(AUTOPREFIXER_OPTIONS)];
+  if (program.minify) {
+    processors.push(cssnano(CSSNANO_OPTIONS));
+  }
+  postcss(processors)
+    .process(input.css, {map: {inline: false}, to: program.output})
+    .then(
+      result => resolve(result),
+      reject
+    );
+});
+
+var writeFile = (target, content) =>
+  new Promise((resolve, reject) =>
+    fs.writeFile(target, content, err => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve();
+      }
+    })
+  );
+
+var writeStyles = result =>
+  Promise.all([
+    writeFile(program.output, result.css),
+    writeFile(`${program.output}.map`, result.map)
+  ]);
+
+var processStyles = () => preprocess(program.entry)
+  .then(postprocess)
+  .then(writeStyles);
+
+processStyles()
+  .catch(err => {
+    console.error("Error processing styles:", err);
+    process.exit(1);
+  });
+
+if (program.watch) {
+  var chokidar = require("chokidar");
+  console.log(`Watching for changes in ${program.watch}`);
+  chokidar.watch(program.watch)
+    .on("change", _.debounce(file => {
+      console.log(`${file} changed. Reprocessing styles ...`);
+      processStyles()
+        .then(
+          () => console.log(`Styles written to ${program.output}`),
+          err => console.error("Error processing styles:", err)
+        );
+    }, 100));
+}

package.json

@@ -173,16 +173,17 @@
   "scripts": {
     "check": "tslint \"src/**/*.ts\" -e src/generated-typings.d.ts",
     "generate-typings": "node bin/write-typings.js \"src/app/**/*.scss\", \"src/generated-typings.d.ts\"",
-    "dev": "concurrently -r \"npm run dev-bundle\" \"npm run dev-start\" \"npm run dev-test\"",
+    "dev": "concurrently -r \"npm run dev-bundle\" \"npm run dev-start\" \"npm run dev-test\" \"npm run dev-styles\"",
     "dev-build": "npm run dev-bundle",
     "dev-bundle": "npm run generate-typings && jspm bundle -diw \"src/**/*.ts\" .tmp/dev-bundle.js --config jspm.dev-bundle.json --log ok",
     "dev-start": "node server/server-dev.js",
+    "dev-styles": "mkdirp .tmp && node bin/process-styles.js --watch src/styles/**/*.scss src/styles/main.scss .tmp/main.css",
     "dev-test": "wait-for-change .tmp/dev-bundle.js && karma start karma-dev.conf.js",
     "dist": "concurrently -r \"npm run dist-bundle\" \"npm run dist-test\" \"npm run dist-styles\"",
     "dist-bundle": "rimraf dist/bundle.js && npm run generate-typings && jspm build src/main dist/bundle.js --minify --format global --global-name APP --config jspm.dist-bundle.json --log ok && cp src/index.html dist",
     "dist-server": "npm run dist && npm run dist-start",
     "dist-start": "node server/server-dist.js",
-    "dist-styles": "rimraf dist/*.css dist/*.css.map && mkdirp dist && node-sass --source-map-embed=true --source-map-contents src/main.scss | postcss -u autoprefixer -u cssnano --autoprefixer.browsers \"last 2 versions\" --no-cssnano.zindex | exorcist dist/main.css.map > dist/main.css",
+    "dist-styles": "rimraf dist/*.css dist/*.css.map && mkdirp dist && node bin/process-styles.js --minify src/styles/main.scss dist/main.css",
     "dist-test": "rimraf .tmp/test-bundle.js && npm run generate-typings && npm run dist-test-bundle && karma start karma-dist.conf.js",
     "dist-test-bundle": "jspm bundle -d \"src/**/*.ts\" .tmp/test-bundle.js --config jspm.dev-bundle.json --log ok",
     "dev-install": "npm i && jspm i && typings i",
@@ -202,6 +203,7 @@
     "autoprefixer": "^6.3.6",
     "chokidar": "^1.4.3",
     "chokidar-socket-emitter": "^0.5.1",
+    "commander": "^2.9.0",
     "concurrently": "^2.1.0",
     "cssnano": "^3.5.2",
     "exorcist": "^0.4.0",

server/dev/watch.js

@@ -6,12 +6,7 @@ module.exports = () => {
   var server = livereload.createServer({
     port: require("../config.json").port.livereload
   });
-  chokidar
-    .watch("src/main.scss")
-    .on("change", file => server.refresh("main.css"));
-  chokidar
-    .watch("src/dev/index.dev.html")
-    .on("change", file => server.refresh(file));
+  server.watch([".tmp/main.css", "src/dev/index.dev.html"]);
   chokidar
     .watch("src/**/*.scss")
     .on("add", () =>

server/server-dev.js

@@ -1,23 +1,19 @@
 var express = require("express");
 var path = require("path");
-var processStyles = require("./dev/process-styles");
 var config = require("./config.json");
 
 var app = express();
 
 require("./dev/hmr")();
 require("./dev/watch")();
 
+config.appRoutes.forEach(route =>
+  app.get(route, (req, res) =>
+    res.sendFile(path.resolve("src/dev/index.dev.html"))));
 app.get("/ports", (req, res) => res.send(require("./config.json").port));
-app.get("/main.css", (req, res) =>
-  processStyles(path.resolve("src/main.scss")).then(
-    css => res.set("Content-Type", "text/css").end(css),
-    err => res.status(500).send(err)
-  ));
 
 app.use(require("./proxy"));
 app.use(express.static("."));
-app.get("*", (req, res) =>
-  res.sendFile(path.resolve("src/dev/index.dev.html")));
+app.use(express.static(".tmp"));
 
 app.listen(config.port.dev, () => console.log(`Listening on http://localhost:${config.port.dev}...`));

src/main.scss → src/styles/main.scss

@@ -7,5 +7,4 @@ html {
 
 body {
   background: #eee;
-  z-index: 60;
 }