Post css and fixes

cli/compiler.js

@@ -45,6 +45,10 @@ const matter = require("gray-matter");
 const Sugar = require("sugar-date");
 const livereload = require("rollup-plugin-livereload");
 const svgo = require("svgo");
+const postcss = require("postcss");
+const postcssSCSS = require("postcss-scss");
+const autoprefixer = require("autoprefixer");
+const filendir = require("filendir");
 
 const spawn = require("child_process").spawnSync;
 
@@ -137,20 +141,15 @@ function compile(prefix) {
   switch (prefix) {
     case "images":
       compiler = async file => {
-        const imageExists = await exists(__public(file, "images"));
-        if (imageExists) return;
-
         switch (path.extname(file)) {
           case ".svg":
-            const data = await fs.readFileAsync(
-              __current("images", file),
-              "utf8"
-            );
+            const data = fs.readFileSync(__current("images", file), "utf8");
             const result = await svgOptimizer.optimize(data);
             fs.writeFileSync(__public(file, "images"), result.data);
             break;
           default:
-            fs.copyAsync(__current("images", file), __public(file, "images"));
+            fs.copySync(__current("images", file), __public(file, "images"));
+            break;
         }
       };
       break;
@@ -170,7 +169,14 @@ function compile(prefix) {
           Object.assign(options, { plugins: [uglify({}, minify)] });
         } else {
           Object.assign(options, {
-            plugins: [livereload({ watch: "public", verbose: false })]
+            plugins: [
+              livereload({
+                watch: "public",
+                verbose: false,
+                applyCSSLive: false, // = workaround, because it kills livereload
+                applyImgLive: false
+              })
+            ]
           });
         }
 
@@ -199,23 +205,47 @@ function compile(prefix) {
       break;
     case "stylesheets":
       compiler = async file => {
-        let filePath = __current(prefix, file);
-
+        const filePath = __current(prefix, file);
+        const outputFilePathWOExt = __public(
+          path.join(
+            "stylesheets", // compile scss to subfolder
+            path.dirname(file),
+            path.basename(file, ".scss")
+          )
+        );
         try {
-          let result = await sass.renderAsync({
-            file: filePath,
-            includePaths: includePaths || [],
-            outputStyle: "compressed",
-            sourceMap: true,
-            outFile: __public("styles.css")
+          fs.readFile(filePath, (err, scss) => {
+            postcss([
+              autoprefixer({
+                browsers: [
+                  ">1%",
+                  "last 4 versions",
+                  "Firefox ESR",
+                  "not ie < 9"
+                ]
+              })
+            ])
+              .process(scss, {
+                from: filePath,
+                to: `${outputFilePathWOExt}.css`,
+                syntax: postcssSCSS,
+                map: true // = inline source maps
+              })
+              .then(
+                result => {
+                  // filendir is fs wrapper - it can create directories
+                  filendir.writeFileSync(
+                    `${outputFilePathWOExt}.css`,
+                    result.content
+                  );
+                },
+                error => {
+                  println(error);
+                }
+              );
           });
-
-          output = result.css;
-          filename = `${path.basename(file, path.extname(file))}.css`;
-
-          await fs.writeFileAsync(__public(filename), output);
         } catch (error) {
-          println(error.formatted);
+          println(error);
         }
       };
       break;
@@ -252,7 +282,10 @@ function compile(prefix) {
           };
 
           if (path.extname(file) === ".md") {
-            const parentDir = path.parse(file).dir.split(path.sep).slice(-1)[0];
+            const parentDir = path
+              .parse(file)
+              .dir.split(path.sep)
+              .slice(-1)[0];
             const layout =
               parentDir && (await fs.pathExists(__current("layout", parentDir)))
                 ? parentDir
@@ -412,7 +445,9 @@ async function checkDirectoryStructure() {
     "website/stylesheets"
   ].map(el => path.join(cwd, el));
 
-  const result = await Promise.resolve(paths).map(fs.pathExists).all();
+  const result = await Promise.resolve(paths)
+    .map(fs.pathExists)
+    .all();
 
   if (!result.every(_ => _)) {
     const tree = spawn("tree", ["-d", "-I", "node_modules"], { cwd: "." });

cli/server.js

@@ -11,15 +11,15 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-const Huncwot = require('huncwot');
-const chokidar = require('chokidar');
-const { compile, transform, compileAll, loadData } = require('./compiler');
-const path = require('path');
-const colors = require('colors');
+const Huncwot = require("huncwot");
+const chokidar = require("chokidar");
+const { compile, transform, compileAll, loadData } = require("./compiler");
+const path = require("path");
+const colors = require("colors");
 
-const { println } = require('./util');
+const { println } = require("./util");
 
-const debug = require('debug')('server');
+const debug = require("debug")("server");
 
 async function recompile(file) {
   let fileSegments = file.split(path.sep);
@@ -28,41 +28,59 @@ async function recompile(file) {
 
   debug(`file to recompile: ${file}`);
   if (prefix.match(/layouts|partials|data/)) {
-    await loadData()
-    await transform('pages')();
+    await loadData();
+    await transform("pages")();
   } else if (prefix.match(/stylesheets/)) {
-    await transform('stylesheets')();
+    await transform("stylesheets")();
+  } else if (prefix.match(/images/)) {
+    await transform("images")();
   } else {
     compile(prefix)(file);
   }
 }
 
 async function serve({ port, dir }) {
-  await compileAll({ dir })
+  await compileAll({ dir });
 
   const watcher = chokidar.watch(dir, {
     ignored: /[\/\\]\./,
     persistent: true,
-    cwd: 'website'
+    cwd: "website"
   });
 
+  let scanComplete = false;
   watcher
-    .on('change', recompile)
+    .on("change", recompile)
+    // XXX "add" and "change" fires on file rename
+    // => 2 recompile(..) calls (maybe only with some NodeJS and OS versions)
+    // similar issue for example: https://github.com/paulmillr/chokidar/issues/551
+    .on("add", (...params) => {
+      if (scanComplete) {
+        recompile(...params);
+      }
+    })
+    .on("unlink", recompile)
+    .on("error", function(error) {
+      console.log("Error happened:", error);
+    })
+    .on("ready", function() {
+      console.log("Ready for changes.");
+      scanComplete = true;
+    });
 
-  const app = new Huncwot({ staticDir: './public' });
+  const app = new Huncwot({ staticDir: "./public" });
 
-  app.on('error', err => {
-    println('Error: '.red + err.message);
+  app.on("error", err => {
+    println("Error: ".red + err.message);
   });
 
   app.listen(port);
-  
-  println(`---\nServer running at http://localhost:${port}`)
+
+  println(`---\nServer running at http://localhost:${port}`);
 }
 
 module.exports = {
-  builder: _ => _
-    .option('port', { alias: 'p', default: 3000 })
-    .default('dir', '.'),
+  builder: _ =>
+    _.option("port", { alias: "p", default: 3000 }).default("dir", "."),
   handler: serve
 };

package.json

@@ -33,7 +33,8 @@
     "yaml",
     "content",
     "images",
-    "CMS"
+    "CMS",
+    "PostCSS"
   ],
   "author": {
     "name": "Zaiste",
@@ -45,12 +46,14 @@
     "url": "https://github.com/zaiste/kulfon"
   },
   "dependencies": {
+    "autoprefixer": "^7.1.3",
     "axios": "^0.16.2",
     "bluebird": "^3.5.1",
     "chokidar": "^1.7.0",
     "colors": "^1.1.2",
     "deepmerge": "^2.0.0",
     "fs-extra": "^4.0.2",
+    "filendir": "^1.0.0",
     "global": "^4.3.2",
     "gray-matter": "^3.0.8",
     "highlight.js": "^9.12.0",
@@ -65,6 +68,8 @@
     "nunjucks": "^3.0.1",
     "nunjucks-markdown": "^2.0.1",
     "open": "^0.0.5",
+    "postcss": "^6.0.10",
+    "postcss-scss": "^1.0.2",
     "rollup": "^0.50.0",
     "rollup-plugin-livereload": "^0.6.0",
     "rollup-plugin-uglify": "^2.0.1",

themes/bare/website/layouts/base.html

@@ -7,7 +7,7 @@
   {% for stylesheet in stylesheets %}
   <link rel="stylesheet" href="{{ stylesheet }}"/>
   {% endfor %}
-  <link href="/styles.css" rel="stylesheet">
+  <link href="/stylesheets/styles.css" rel="stylesheet">
   {% block head %}{% endblock %}
 </head>
 <body>

themes/default/website/layouts/base.html

@@ -8,7 +8,7 @@
   {% for stylesheet in stylesheets %}
   <link rel="stylesheet" href="{{ stylesheet }}"/>
   {% endfor %}
-  <link href="/styles.css" rel="stylesheet">
+  <link href="/stylesheets/styles.css" rel="stylesheet">
   {% block head %}{% endblock %}
 </head>
 <body>

themes/tachyons/website/layouts/base.html

@@ -8,7 +8,7 @@
   {% for stylesheet in stylesheets %}
   <link rel="stylesheet" href="{{ stylesheet }}"/>
   {% endfor %}
-  <link href="/styles.css" rel="stylesheet">
+  <link href="/stylesheets/styles.css" rel="stylesheet">
   {% block head %}{% endblock %}
 </head>
 <body class="w-100 sans-serif bg-white">

themes/tachyons/website/stylesheets/extra/extra.scss

@@ -0,0 +1,3 @@
+html {
+  border: 3px solid black;
+}

themes/tachyons/website/stylesheets/styles.scss

@@ -1,15 +1,17 @@
 @import url('https://fonts.googleapis.com/css?family=Lato');
+@import "extra/extra.css";
 
 * {
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   height: 100%;
   min-height: 100%;
   font-size: 18px;
-  font-family: 'Lato';
+  font-family: "Lato";
 }
 
 body {
@@ -18,12 +20,17 @@ body {
   flex-direction: column;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   margin: 0;
 }
 
 header {
-  background: #FEFEFE;
+  background: #fefefe;
   border-bottom: 1px solid #d9d9d9;
 }