Ensure that component docs generation is more robust

The components build no longer fails when there's a
multiple/directory/path that doesn't yet exist. Also,
CSS stats are now passed to the component template.

Author: johno

package.json

@@ -25,12 +25,13 @@
     "cssnano": "^3.3.1",
     "cssstats": "^2.0.1",
     "filesize": "^3.1.3",
-    "get-classes-from-html": "^0.1.0",
+    "get-classes-from-html": "^1.0.1",
     "glob": "^5.0.15",
     "gzip-size": "^3.0.0",
     "immutable-css": "^0.1.0",
     "json-front-matter": "^1.0.0",
     "lodash": "^3.10.0",
+    "mkdirp": "^0.5.1",
     "node-minify": "^1.2.0",
     "normalize": "^0.3.1",
     "perfectionist": "^2.1.2",
@@ -43,7 +44,7 @@
     "postcss-custom-properties": "^5.0.0",
     "postcss-discard-comments": "^2.0.1",
     "postcss-import": "^7.0.0",
-    "postcss-select": "^0.1.0",
+    "postcss-select": "^1.0.0",
     "remove-html-extension": "0.0.1",
     "s3": "^4.4.0",
     "tachyons": "^3.0.1",

src/components-build.js

@@ -1,6 +1,7 @@
 var fs = require('fs')
 var _ = require('lodash')
 var path = require('path')
+var mkdirp = require('mkdirp')
 var glob = require('glob')
 var titleize = require('titleize')
 var fm = require('json-front-matter')
@@ -14,6 +15,7 @@ var removeComments = require('postcss-discard-comments')
 var cssVariables = require('postcss-css-variables')
 var customMedia = require('postcss-custom-media')
 var mqPacker = require('css-mqpacker')
+var cssstats = require('cssstats')
 
 var tachyonsCss = fs.readFileSync('src/css/tachyons.css', 'utf8')
 
@@ -27,11 +29,13 @@ module.exports = function () {
     var template = fs.readFileSync('src/templates/components.html', 'utf8')
 
     components.forEach(function (component) {
-      var newDir = rmHtmlExt(component.replace('src/', 'examples/')) + '/index.html'
+      var newDir = rmHtmlExt(component.replace('src/', 'examples/'))
+      var newFile = newDir + '/index.html'
       var componentHtml = fs.readFileSync(component, 'utf8')
 
       var fmParsed = fm.parse(componentHtml)
       var frontMatter = fmParsed.attributes || {}
+      frontMatter.bodyClass = frontMatter.bodyClass || ''
       frontMatter.title = frontMatter.title || getTitle(component)
       frontMatter.classes = getClasses(fmParsed.body).map(function(klass) {
         return '.' + klass
@@ -55,13 +59,16 @@ module.exports = function () {
         from: 'src/css/tachyons.css'
       }).css
 
+      frontMatter.stats = cssstats(frontMatter.componentCss)
+
       // TODO: Update me once src/ uses the npm modules
       frontMatter.modules = Object.keys(moduleSrcs).map(function (module) {
         return 'tachyons-' + module.split('/_')[1].replace('.css', '')
       })
 
       var compiledPage = _.template(template)(frontMatter)
-      fs.writeFileSync(newDir, compiledPage)
+      mkdirp.sync(newDir)
+      fs.writeFileSync(newFile, compiledPage)
     })
   })
 }