Migrate to node-sass

Still using same compass and foundation mixins but using npm.

Fixes #46

README.adoc

@@ -22,25 +22,12 @@ The styles and components are generated by http://foundation.zurb.com[Foundation
 
 == Setup and compilation
 
-To setup the project, make sure you have Ruby, RubyGems and, optionally Node and Bundler.
-Next, run Bundler to install the required gems:
-
- $ bundle
-
-That command is equivalent to executing:
-
- $ gem install --version '0.12.7' compass
- $ gem install --version '4.3.2' zurb-foundation
-
-Then run npm to install the required Node modules:
+To setup the project, make sure you have Node installed.
+Next, run npm to install the required Node modules:
 
  $ npm i
 
-That command is equivalent to executing:
-
- $ npm i color@0.11.4 csscolormin@0.0.5 cssshrink
-
-Once you have the gems and Node modules installed, you can build the stylesheets.
+Once you have the Node modules installed, you can build the stylesheets.
 
 == Build the default stylesheet
 
@@ -49,11 +36,10 @@ The default stylesheet is generated using the [.path]_build-stylesheet.sh_ comma
 
 To run this command, you need the following programs:
 
-* bundler
+* node
 * cssshrink
 * cat
 * sed
-* ruby
 
 Once those are installed, run the command as follows:
 
@@ -65,7 +51,7 @@ This command will create asciidoctor.css and asciidoctor.min.css in the root of
 
 To build the stylesheets, simply run:
 
- $ compass compile
+ $ ./build-all.sh
 
 The stylesheets are compiled from the Sass source files in the [.path]_sass/_ folder and written to the [.path]_stylesheets/_ folder.
 You can then reference the stylesheets in [.path]_stylesheets/_ from your HTML file.

build-all.sh

@@ -0,0 +1,7 @@
+#!/bin/sh
+
+for stylesheet in sass/*.scss; do
+  name=$(basename "${stylesheet}" .scss)
+  echo "Compiling ${name}"
+  ./build-stylesheet.sh "${name}"
+done

build-stylesheet.sh

@@ -6,7 +6,15 @@ if [ ! -z $1 ]; then
   STYLESHEET_NAME=$1
 fi
 
-bundle exec compass compile -s compact
+mkdir -p stylesheets
+
+./node_modules/.bin/node-sass \
+  --include-path node_modules/foundation-sites/scss \
+  --include-path node_modules/compass-mixins/lib \
+  --functions lib/functions.js \
+  --output-style compact \
+  sass/${STYLESHEET_NAME}.scss > stylesheets/${STYLESHEET_NAME}.css
+
 LINES=`wc -l stylesheets/$STYLESHEET_NAME.css | cut -d" " -f1`
 echo '/* Asciidoctor default stylesheet | MIT License | https://asciidoctor.org */' > $STYLESHEET_NAME.css
 cat stylesheets/$STYLESHEET_NAME.css | \

lib/functions.js

@@ -0,0 +1,236 @@
+const SassColor = require("node-sass").types.Color;
+const SassString = require("node-sass").types.String;
+const { createCanvas } = require("canvas");
+
+const COLOR_NAMES = {
+  aliceblue: 0xf0f8ff,
+  antiquewhite: 0xfaebd7,
+  aqua: 0x00ffff,
+  aquamarine: 0x7fffd4,
+  azure: 0xf0ffff,
+  beige: 0xf5f5dc,
+  bisque: 0xffe4c4,
+  black: 0x000000,
+  blanchedalmond: 0xffebcd,
+  blue: 0x0000ff,
+  blueviolet: 0x8a2be2,
+  brown: 0xa52a2a,
+  burlywood: 0xdeb887,
+  cadetblue: 0x5f9ea0,
+  chartreuse: 0x7fff00,
+  chocolate: 0xd2691e,
+  coral: 0xff7f50,
+  cornflowerblue: 0x6495ed,
+  cornsilk: 0xfff8dc,
+  crimson: 0xdc143c,
+  cyan: 0x00ffff,
+  darkblue: 0x00008b,
+  darkcyan: 0x008b8b,
+  darkgoldenrod: 0xb8860b,
+  darkgray: 0xa9a9a9,
+  darkgrey: 0xa9a9a9,
+  darkgreen: 0x006400,
+  darkkhaki: 0xbdb76b,
+  darkmagenta: 0x8b008b,
+  darkolivegreen: 0x556b2f,
+  darkorange: 0xff8c00,
+  darkorchid: 0x9932cc,
+  darkred: 0x8b0000,
+  darksalmon: 0xe9967a,
+  darkseagreen: 0x8fbc8f,
+  darkslateblue: 0x483d8b,
+  darkslategray: 0x2f4f4f,
+  darkslategrey: 0x2f4f4f,
+  darkturquoise: 0x00ced1,
+  darkviolet: 0x9400d3,
+  deeppink: 0xff1493,
+  deepskyblue: 0x00bfff,
+  dimgray: 0x696969,
+  dimgrey: 0x696969,
+  dodgerblue: 0x1e90ff,
+  firebrick: 0xb22222,
+  floralwhite: 0xfffaf0,
+  forestgreen: 0x228b22,
+  fuchsia: 0xff00ff,
+  gainsboro: 0xdcdcdc,
+  ghostwhite: 0xf8f8ff,
+  gold: 0xffd700,
+  goldenrod: 0xdaa520,
+  gray: 0x808080,
+  green: 0x008000,
+  greenyellow: 0xadff2f,
+  honeydew: 0xf0fff0,
+  hotpink: 0xff69b4,
+  indianred: 0xcd5c5c,
+  indigo: 0x4b0082,
+  ivory: 0xfffff0,
+  khaki: 0xf0e68c,
+  lavender: 0xe6e6fa,
+  lavenderblush: 0xfff0f5,
+  lawngreen: 0x7cfc00,
+  lemonchiffon: 0xfffacd,
+  lightblue: 0xadd8e6,
+  lightcoral: 0xf08080,
+  lightcyan: 0xe0ffff,
+  lightgoldenrodyellow: 0xfafad2,
+  lightgreen: 0x90ee90,
+  lightgray: 0xd3d3d3,
+  lightgrey: 0xd3d3d3,
+  lightpink: 0xffb6c1,
+  lightsalmon: 0xffa07a,
+  lightseagreen: 0x20b2aa,
+  lightskyblue: 0x87cefa,
+  lightslategray: 0x778899,
+  lightslategrey: 0x778899,
+  lightsteelblue: 0xb0c4de,
+  lightyellow: 0xffffe0,
+  lime: 0x00ff00,
+  limegreen: 0x32cd32,
+  linen: 0xfaf0e6,
+  magenta: 0xff00ff,
+  maroon: 0x800000,
+  mediumaquamarine: 0x66cdaa,
+  mediumblue: 0x0000cd,
+  mediumorchid: 0xba55d3,
+  mediumpurple: 0x9370db,
+  mediumseagreen: 0x3cb371,
+  mediumslateblue: 0x7b68ee,
+  mediumspringgreen: 0x00fa9a,
+  mediumturquoise: 0x48d1cc,
+  mediumvioletred: 0xc71585,
+  midnightblue: 0x191970,
+  mintcream: 0xf5fffa,
+  mistyrose: 0xffe4e1,
+  moccasin: 0xffe4b5,
+  navajowhite: 0xffdead,
+  navy: 0x000080,
+  oldlace: 0xfdf5e6,
+  olive: 0x808000,
+  olivedrab: 0x6b8e23,
+  orange: 0xffa500,
+  orangered: 0xff4500,
+  orchid: 0xda70d6,
+  palegoldenrod: 0xeee8aa,
+  palegreen: 0x98fb98,
+  paleturquoise: 0xafeeee,
+  palevioletred: 0xdb7093,
+  papayawhip: 0xffefd5,
+  peachpuff: 0xffdab9,
+  peru: 0xcd853f,
+  pink: 0xffc0cb,
+  plum: 0xdda0dd,
+  powderblue: 0xb0e0e6,
+  purple: 0x800080,
+  red: 0xff0000,
+  rosybrown: 0xbc8f8f,
+  royalblue: 0x4169e1,
+  saddlebrown: 0x8b4513,
+  salmon: 0xfa8072,
+  sandybrown: 0xf4a460,
+  seagreen: 0x2e8b57,
+  seashell: 0xfff5ee,
+  sienna: 0xa0522d,
+  silver: 0xc0c0c0,
+  skyblue: 0x87ceeb,
+  slateblue: 0x6a5acd,
+  slategray: 0x708090,
+  slategrey: 0x708090,
+  snow: 0xfffafa,
+  springgreen: 0x00ff7f,
+  steelblue: 0x4682b4,
+  tan: 0xd2b48c,
+  teal: 0x008080,
+  thistle: 0xd8bfd8,
+  tomato: 0xff6347,
+  turquoise: 0x40e0d0,
+  violet: 0xee82ee,
+  wheat: 0xf5deb3,
+  white: 0xffffff,
+  whitesmoke: 0xf5f5f5,
+  yellow: 0xffff00,
+  yellowgreen: 0x9acd32,
+};
+
+// TODO document me
+function string_to_color(name) {
+  // FIXME check to see if a color could be found, don't just assume
+  const hex = COLOR_NAMES[name.getValue().toLowerCase()];
+  const rgb = Array(3)
+    .fill()
+    .map((_, n) => (hex >> (n << 3)) & 0xff)
+    .reverse();
+  return new SassColor(...rgb);
+}
+
+// based on https://github.com/DanielRapp/Noisy
+function background_noise(c, noise, opacity, size, mono) {
+  noise = noise.getValue();
+  opacity = opacity.getValue();
+  size = size.getValue();
+  mono = mono.getValue();
+
+  const bgCanvas = createCanvas(size, size);
+  const fgCanvas = createCanvas(size, size);
+
+  const bg = bgCanvas.getContext("2d");
+  const fg = fgCanvas.getContext("2d");
+
+  // fill background
+  bg.fillStyle = `rgba(${c.red}, ${c.green}, ${c.blue}, ${c.alpha})`;
+  bg.fillRect(0, 0, size, size);
+
+  // add noise
+  let imgData = fg.createImageData(size, size);
+  let numPixels = Math.round(noise * Math.pow(size, 2));
+  let maxAlpha = 255 * opacity;
+
+  while (numPixels--) {
+    let x = ~~(Math.random() * size);
+    let y = ~~(Math.random() * size);
+    let index = (x + y * imgData.width) * 4;
+    let colorChannel = numPixels % 255;
+
+    imgData.data[index] = colorChannel; // red
+    imgData.data[index + 1] = mono ? colorChannel : ~~(Math.random() * 255); // green
+    imgData.data[index + 2] = mono ? colorChannel : ~~(Math.random() * 255); // blue
+    imgData.data[index + 3] = ~~(Math.random() * maxAlpha);
+  }
+
+  fg.putImageData(imgData, 0, 0);
+
+  // compose
+  bg.drawImage(fgCanvas, 0, 0);
+
+  return new SassString(bgCanvas.toDataURL("image/png"));
+}
+
+function headers(from, to) {
+  from = from.getValue ? from.getValue() : null;
+  to = to.getValue ? to.getValue() : null;
+
+  if (from && !to) {
+    if (from === "all") {
+      from = 1;
+      to = 6;
+    } else {
+      to = from;
+      from = 1;
+    }
+  } else {
+    from = from ? from : 1;
+    to = to ? to : 6;
+  }
+
+  const result = [];
+  for (let n = from; n <= to; n++) {
+    result.push(`h${n}`);
+  }
+
+  return new SassString(result.join(", "));
+}
+
+module.exports = {
+  "string-to-color($name)": string_to_color,
+  "background_noise($color, $intensity: 0.5, $opacity: 0.08, $size: 200, $mono: false)": background_noise,
+  "headers($from: null, $to: null)": headers,
+};