Merge pull request #286 from oddbird/node-sass-peer-dep

Move node-sass to peerDependencies.

CHANGELOG.md

@@ -1,6 +1,13 @@
 # Herman Changelog
 
 
+## Unreleased
+
+- 💥 BREAKING: Move `node-sass` to `peerDependencies`
+- 🐛 BUGFIX: Do not require `node-sass` if `@example scss` is not used
+- 🏠 INTERNAL: Upgrade dev dependencies
+
+
 ## 2.1.0: 2018-04-02
 
 - 🚀 NEW: Add `sass.outputStyle` option (default: `expanded`) --

README.md

@@ -43,8 +43,17 @@ and more.
 npm install sassdoc sassdoc-theme-herman
 ```
 
+Note: If you plan to use Herman to display samples of Sass/Scss code,
+`node-sass` is required as a `peerDependency`.
+If it's not already installed in your project,
+install it with Herman:
+
+```bash
+npm install node-sass
+```
+
 See the [SassDoc documentation](http://sassdoc.com/getting-started/)
-to install SassDoc and run it via various build tools.
+to run SassDoc via various build tools.
 Specify `herman` as the theme
 in your SassDoc options:
 

docs/CHANGELOG.html

@@ -295,6 +295,12 @@ <h3 class="nav-title">
 
   <div class="text-block">
     <h1 id="herman-changelog">Herman Changelog</h1>
+<h2 id="unreleased">Unreleased</h2>
+<ul>
+<li>💥 BREAKING: Move <code>node-sass</code> to <code>peerDependencies</code></li>
+<li>🐛 BUGFIX: Do not require <code>node-sass</code> if <code>@example scss</code> is not<span class="widont">&nbsp;</span>used</li>
+<li>🏠 INTERNAL: Upgrade dev<span class="widont">&nbsp;</span>dependencies</li>
+</ul>
 <h2 id="2-1-0-2018-04-02">2.1.0: 2018-04-02</h2>
 <ul>
 <li>🚀 NEW: Add <code>sass.outputStyle</code> option (default: <code>expanded</code>) –

docs/api_json-export.html

@@ -1459,7 +1459,7 @@ <h3 class="item-subtitle">
 
       <pre class="hljs-pre"><code class="lang-scss">$brand-colors: (
   &#39;brand-blue&#39;: hsl(195, 85%, 35%),
-  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, get-function(&#39;desaturate&#39;): 80%),
+  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, &#39;desaturate&#39;: 80%),
 );
 @include herman-add(&#39;colors&#39;, &#39;brand-colors&#39;, $brand-colors, get-function(&#39;color&#39;));
 /* #{$herman} */</code></pre>
@@ -1985,7 +1985,7 @@ <h3 class="item-subtitle">
       <pre class="hljs-pre"><code class="lang-scss">$brand-colors: (
   &#39;brand-orange&#39;: hsl(24, 100%, 39%),
   &#39;brand-blue&#39;: hsl(195, 85%, 35%),
-  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, get-function(&#39;desaturate&#39;): 80%),
+  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, &#39;desaturate&#39;: 80%),
 );
 /* #{herman-map-compile($brand-colors, get-function(&#39;color&#39;))} */</code></pre>
     </div>

docs/config-colors.html

@@ -771,9 +771,9 @@ <h2 class="item-title">
 
 
       <pre class="hljs-pre"><code class="lang-scss">$neutral-colors: (
-  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, get-function(&#39;desaturate&#39;): 80%),
-  &#39;gray&#39;: &#39;brand-blue&#39; (get-function(&#39;desaturate&#39;): 80%),
-  &#39;black&#39;: &#39;brand-blue&#39; (&#39;shade&#39;: 30%, get-function(&#39;desaturate&#39;): 80%)
+  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, &#39;desaturate&#39;: 80%),
+  &#39;gray&#39;: &#39;brand-blue&#39; (&#39;desaturate&#39;: 80%),
+  &#39;black&#39;: &#39;brand-blue&#39; (&#39;shade&#39;: 30%, &#39;desaturate&#39;: 80%)
 );</code></pre>
     </div>
 
@@ -1017,11 +1017,11 @@ <h2 class="item-title">
   &#39;underline&#39;: &#39;action&#39; (&#39;tint&#39;: 75%),
   &#39;border&#39;: &#39;gray&#39;,
   &#39;border-light&#39;: &#39;light-gray&#39;,
-  &#39;shadow&#39;: &#39;gray&#39; (get-function(&#39;rgba&#39;): 0.5),
+  &#39;shadow&#39;: &#39;gray&#39; (&#39;rgba&#39;: 0.5),
   &#39;callout&#39;: &#39;theme-light&#39;,
   &#39;slight&#39;: &#39;callout&#39; (&#39;tint&#39;: 90%),
   &#39;code&#39;: &#39;theme-dark&#39;,
-  &#39;code-shadow&#39;: &#39;code&#39; (get-function(&#39;rgba&#39;): 0.2)
+  &#39;code-shadow&#39;: &#39;code&#39; (&#39;rgba&#39;: 0.2)
 );</code></pre>
     </div>
 

docs/config-utils.html

@@ -348,6 +348,257 @@ <h1 id="herman-config-private-helpers">Herman Config: Private<span class="widont
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</section>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<section class="item" id="variable--functions">
+
+
+
+
+
+
+
+
+
+
+  <div data-item-section="header">
+    <h2 class="item-title">
+
+        <span class="item-type"></span>
+
+
+
+        <a href="#variable--functions" class="item-name">$functions</a>
+
+
+
+        <span class="value-type">(map)</span>
+
+
+
+    </h2>
+
+
+
+
+
+
+
+
+
+    <div class="code-block">
+
+        <div class="code-header">
+          <span class="code-language">
+            scss
+          </span>
+
+
+        </div>
+
+
+
+
+      <pre class="hljs-pre"><code class="lang-scss">$functions: (
+  &#39;darken&#39;: get-function(&#39;darken&#39;),
+  &#39;desaturate&#39;: get-function(&#39;desaturate&#39;),
+  &#39;rgba&#39;: get-function(&#39;rgba&#39;),
+  &#39;convert&#39;: &#39;convert-units&#39;
+);</code></pre>
+    </div>
+
+
+
+
+
+
+
+
+
+    <div class="text-block">
+      <p>These functions will be made available to
+accoutrement-color &amp; accoutrement-scale tools,
+for use in the <code>$colors</code> and <code>$sizes</code> configuration maps.
+Register additional functions as needed,
+or establish alias names for existing<span class="widont">&nbsp;</span>functions.</p>
+
+
+
+
+
+
+
+
+
+
+    </div>
+
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+
+  <div data-item-section="property">
+
+      <h3 class="item-subtitle">
+        <span class="item-subtitle-main">Map Properties</span>
+
+      </h3>
+
+
+
+
+
+
+
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+
+
+        <span class="item-name">&lt;alias&gt;:</span>
+
+
+      <span class="value-type">(function |<span class="widont">&nbsp;</span>string)</span>
+
+    </h4>
+
+
+
+      <div class="param-details text-block">
+        <p>Use <code>get-function()</code> to capture a first-class function,
+or use a string to reference existing functions and<span class="widont">&nbsp;</span>alias-keys</p>
+
+      </div>
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+  <div data-item-section="related">
+
+      <h3 class="item-subtitle">
+        <span class="item-subtitle-main">Related</span>
+
+      </h3>
+
+
+
+
+
+
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+
+
+        <a href="http://oddbird.net/accoutrement-color" class="item-name">Accoutrement-Color</a>
+
+
+
+      <span class="item-note">[external]</span>
+    </h4>
+
+
+  </div>
+
+
+
+
+
+
+
+  <div class="param-list">
+    <h4 class="param-title">
+
+
+        <a href="http://oddbird.net/accoutrement-scale" class="item-name">Accoutrement-Scale</a>
+
+
+
+      <span class="item-note">[external]</span>
+    </h4>
+
+
+  </div>
+
+
+
+
+
+
+  </div>
+
+
+
 
 
 

docs/demo_colors.html

@@ -832,9 +832,9 @@ <h2 id="compile-and-export-complex-maps">Compile and export complex<span class="
 before they can be exported to Herman.
 Using <a href="http://oddbird.net/accoutrement-color">accoutrement-color</a>, our maps look like<span class="widont">&nbsp;</span>this:</p>
 <pre><code class="lang-scss">$demo-noncolors: (
-  'light-gray': 'brand-blue' ('tint': 80%, get-function('desaturate'): 80%),
-  'gray': 'brand-blue' (get-function('desaturate'): 80%),
-  'black': 'brand-blue' ('shade': 30%, get-function('desaturate'): 80%),
+  'light-gray': 'brand-blue' ('tint': 80%, 'desaturate': 80%),
+  'gray': 'brand-blue' ('desaturate': 80%),
+  'black': 'brand-blue' ('shade': 30%, 'desaturate': 80%),
 );
 </code></pre>
 <p>Our <code>color()</code> function knows how to interpret that syntax
@@ -916,9 +916,9 @@ <h3 class="item-subtitle">
 
       <pre class="hljs-pre"><code class="lang-scss">$herman: ();
 $demo-noncolors: (
-  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, get-function(&#39;desaturate&#39;): 80%),
-  &#39;gray&#39;: &#39;brand-blue&#39; (get-function(&#39;desaturate&#39;): 80%),
-  &#39;black&#39;: &#39;brand-blue&#39; (&#39;shade&#39;: 30%, get-function(&#39;desaturate&#39;): 80%),
+  &#39;light-gray&#39;: &#39;brand-blue&#39; (&#39;tint&#39;: 80%, &#39;desaturate&#39;: 80%),
+  &#39;gray&#39;: &#39;brand-blue&#39; (&#39;desaturate&#39;: 80%),
+  &#39;black&#39;: &#39;brand-blue&#39; (&#39;shade&#39;: 30%, &#39;desaturate&#39;: 80%),
 );
 
 @include herman-add(

docs/demo_examples.html

@@ -468,6 +468,8 @@ <h2 id="compiling-sass-scss">Compiling Sass/Scss</h2>
 <p>Example annotations with language set to <code>sass</code> or <code>scss</code>
 will be compiled by Herman,
 and display the output along with the<span class="widont">&nbsp;</span>source.</p>
+<p>Note that Sass/Scss examples require <code>node-sass</code>
+to be installed, if it isn’t already: <code>npm install node-sass</code>.</p>
 <p>All Sass examples must be complete and valid,
 with the ability to import Sass partials inside each example.
 In order for this to work with Sass/Scss,

docs/index.html

@@ -337,8 +337,14 @@ <h1 id="herman-a-sassdoc-theme-"><a href="http://oddbird.net/herman/">Herman</a>
 <h2 id="getting-started">Getting Started</h2>
 <pre><code class="lang-bash">npm install sassdoc sassdoc-theme-herman
 </code></pre>
+<p>Note: If you plan to use Herman to display samples of Sass/Scss code,
+<code>node-sass</code> is required as a <code>peerDependency</code>.
+If it’s not already installed in your project,
+install it with<span class="widont">&nbsp;</span>Herman:</p>
+<pre><code class="lang-bash">npm install node-sass
+</code></pre>
 <p>See the <a href="http://sassdoc.com/getting-started/">SassDoc documentation</a>
-to install SassDoc and run it via various build tools.
+to run SassDoc via various build tools.
 Specify <code>herman</code> as the theme
 in your SassDoc<span class="widont">&nbsp;</span>options:</p>
 <pre><code class="lang-bash">sassdoc &lt;src&gt; --theme herman