Fix font output on style files

Include regression tests

src/core/compile.js

@@ -173,19 +173,31 @@ async function collecticonsCompile (params) {
     );
   }
 
-  const styleOptions = {
-    fontName,
-    embed: !fontDest,
-    fonts: {
+  let includedFonts = {};
+  if (fontTypes.indexOf('woff') !== -1) {
+    includedFonts = {
+      ...includedFonts,
       woff: {
         contents: fonts.woff,
         path: path.relative(styleDest, path.join(fontDest || '', `${fontName}.woff`))
-      },
+      }
+    };
+  }
+
+  if (fontTypes.indexOf('woff2') !== -1) {
+    includedFonts = {
+      ...includedFonts,
       woff2: {
         contents: fonts.woff2,
         path: path.relative(styleDest, path.join(fontDest || '', `${fontName}.woff2`))
       }
-    },
+    };
+  }
+
+  const styleOptions = {
+    fontName,
+    embed: !fontDest,
+    fonts: includedFonts,
     authorName,
     authorUrl,
     className,

tests/compile-prog.test.js

@@ -149,6 +149,15 @@ describe('Command: compile', function () {
     assert.isUndefined(catalog);
     assert.isUndefined(woff2);
 
+    const actualPreview = await fs.readFile(path.resolve(dest, 'preview.html'), 'utf8');
+    const actualScss = await fs.readFile(path.resolve(dest, 'icons.scss'), 'utf8');
+
+    const expectedPreview = await fs.readFile(path.resolve(__dirname, 'expected/compile-default/preview.html'), 'utf8');
+    const expectedScss = await fs.readFile(path.resolve(__dirname, 'expected/compile-default/icons.scss'), 'utf8');
+
+    assert.equal(actualPreview, expectedPreview);
+    assert.equal(actualScss, expectedScss);
+
     // Clean up.
     await fs.remove(dest);
   });

tests/expected/compile-default/icons.scss

@@ -0,0 +1,79 @@
+/* ==========================================================================
+   Icon font: collecticons
+   ========================================================================== */
+
+/**
+ * Designed by Development Seed
+ * https://developmentseed.org/
+ *
+ * Generated with collecticons-processor on January 1st, 2019
+ * http://collecticons.io/
+ */
+
+@font-face {
+  font-family: "collecticons";
+  src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+%collecticons,
+[class^="collecticons-"],
+[class*=" collecticons-"] {
+  speak: none;
+  font-family: "collecticons";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+
+  /* Better font rendering */
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+%collecticons-book {
+  @extend %collecticons;
+  content: "\F101";
+}
+
+.collecticons-book:before {
+  content: "\F101";
+}
+
+%collecticons-brand-development-seed-2 {
+  @extend %collecticons;
+  content: "\F102";
+}
+
+.collecticons-brand-development-seed-2:before {
+  content: "\F102";
+}
+
+%collecticons-brand-development-seed {
+  @extend %collecticons;
+  content: "\F103";
+}
+
+.collecticons-brand-development-seed:before {
+  content: "\F103";
+}
+
+%collecticons-chevron-left {
+  @extend %collecticons;
+  content: "\F104";
+}
+
+.collecticons-chevron-left:before {
+  content: "\F104";
+}
+
+%collecticons-clipboard {
+  @extend %collecticons;
+  content: "\F105";
+}
+
+.collecticons-clipboard:before {
+  content: "\F105";
+}

tests/expected/compile-default/preview.html

@@ -0,0 +1,180 @@
+<!doctype html>
+<html class="no-js" lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="">
+    <meta content="width=device-width, initial-scale=1" name="viewport" />
+    <title>Font preview - collecticons</title>
+
+    <style type="text/css">
+      @font-face {
+        font-family: "collecticons";
+        src: url(data:application/font-woff2;charset=utf-8;base64,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) format('woff2');
+        font-weight: normal;
+        font-style: normal;
+      }
+
+      .collecticons, [class^="collecticons-"], [class*=" collecticons-"] {
+        speak: none;
+        font-family: "collecticons";
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+
+        /* Better font rendering */
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+
+      .collecticons-book:before {
+        content: "\F101";
+      }
+
+      .collecticons-brand-development-seed-2:before {
+        content: "\F102";
+      }
+
+      .collecticons-brand-development-seed:before {
+        content: "\F103";
+      }
+
+      .collecticons-chevron-left:before {
+        content: "\F104";
+      }
+
+      .collecticons-clipboard:before {
+        content: "\F105";
+      }
+    </style>
+
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        font-family: sans-serif;
+      }
+
+      #site-canvas {
+        max-width: 1600px;
+        margin: 0 auto;
+      }
+
+      .icons-list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        text-align: center;
+        word-spacing: -0.26rem;
+      }
+
+      .icons-list li {
+        width: 10rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        padding: 1rem;
+        margin: 0.5rem;
+        display: inline-block;
+        word-spacing: normal;
+        vertical-align: top;
+      }
+
+      .ico {
+        display: inline-block;
+        height: 2rem;
+        width: 2rem;
+        line-height: 2rem;
+        font-size: 1rem;
+        text-align: center;
+        background-color: #ddd;
+        border-radius: 4px;
+        color: #444;
+      }
+
+      .label {
+        display: block;
+        margin-top: 1rem;
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+
+      .icons-list.size-32 .ico {
+        height: 4rem;
+        width: 4rem;
+        line-height: 4rem;
+        font-size: 2rem;
+      }
+
+      .icons-list.size-48 .ico {
+        height: 5rem;
+        width: 5rem;
+        line-height: 5rem;
+        font-size: 3rem;
+      }
+
+      .switcher {
+        margin: 1rem 0;
+        padding: 0;
+        text-align: center;
+        word-spacing: -0.26rem;
+      }
+
+      .switcher li {
+        display: inline-block;
+        word-spacing: normal;
+        vertical-align: top;
+        margin: 0 0.5rem;
+      }
+
+      .switcher li a {
+        text-decoration: none;
+        background-color: #ddd;
+        color: #444;
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+        border-radius: 4px;
+      }
+
+      .switcher li a.active {
+        background-color: #FFBB4D;
+        color: #fff;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="site-canvas">
+      <ul class="switcher">
+        <li><a href="#" class="active" data-size="16">16</a></li>
+        <li><a href="#" data-size="32">32</a></li>
+        <li><a href="#" data-size="48">48</a></li>
+      </ul>
+
+      <ul id="list" class="icons-list">
+        <li><i class="ico icon collecticons-book"></i><span class="label">book</span></li>
+        <li><i class="ico icon collecticons-brand-development-seed-2"></i><span class="label">brand-development-seed-2</span></li>
+        <li><i class="ico icon collecticons-brand-development-seed"></i><span class="label">brand-development-seed</span></li>
+        <li><i class="ico icon collecticons-chevron-left"></i><span class="label">chevron-left</span></li>
+        <li><i class="ico icon collecticons-clipboard"></i><span class="label">clipboard</span></li>
+      </ul>
+    </div>
+
+    <script>
+      var elements = document.querySelectorAll('.switcher a');
+      [].forEach.call(elements, function (el) {
+        el.addEventListener('click', function (event) {
+          event.preventDefault();
+
+          var size = this.getAttribute('data-size');
+          document.getElementById('list').className = 'icons-list size-' + size;
+
+          var elements = document.querySelectorAll('.switcher a');
+          [].forEach.call(elements, function (e) {
+            e.className = '';
+          });
+          this.className = 'active';
+        });
+      });
+    </script>
+  </body>
+</html>