update nvmrc with updated postcss deps, use mixins for theme, fix build, change theme scripts, preload fonts (#8)

Author: colegoldsmith

.nvmrc

@@ -1 +1 @@
-10
+16.20.2

.stylelintrc

@@ -3,5 +3,6 @@
   "rules": {
     "comment-empty-line-before": null,
     "no-descending-specificity": null,
+    "at-rule-no-unknown": [true, { "ignoreAtRules": ["include", "mixin", "extend", "content", "if", "else", "for", "each", "while", "function", "return", "warn", "error", "debug"]}]
   }
 }

gulp.d/tasks/build.js

@@ -11,7 +11,8 @@ const ospath = require('path')
 const path = ospath.posix
 const postcss = require('gulp-postcss')
 const postcssCalc = require('postcss-calc')
-const postcssNesting = require('postcss-nesting')
+const postcssNested = require('postcss-nested')
+const postcssAdvancedVars = require('postcss-advanced-variables')
 const postcssImport = require('postcss-import')
 const postcssUrl = require('postcss-url')
 const postcssVar = require('postcss-custom-properties')
@@ -48,9 +49,9 @@ module.exports = (src, dest, preview) => () => {
         },
       },
     ]),
-    postcssNesting,
-    // NOTE because css vars are our theme switching mechanism we must preserve them with preserve: true
-    postcssVar({ preserve: true }),
+    postcssNested,
+    postcssAdvancedVars,
+    postcssVar({ preserve: preview }),
     // NOTE to make vars.css available to all top-level stylesheets, use the next line in place of the previous one
     //postcssVar({ importFrom: path.join(src, 'css', 'vars.css'), preserve: preview }),
     preview ? postcssCalc : () => {}, // cssnano already applies postcssCalc