Begin reworking the build and components gen

Author: johno

build.js

@@ -12,20 +12,18 @@ var conditionals = require('postcss-conditionals')
 var cssvariables = require('postcss-css-variables')
 var customMedia = require('postcss-custom-media')
 
+var componentsBuild = require('./components-build')
+
 // css to be processed
 var css = fs.readFileSync('src/tachyons.css', 'utf8')
 
 // process css
-var output = postcss([autoprefixer])
-  .use(atImport())
-  .use(cssvariables())
-  .use(conditionals())
-  .use(customMedia())
-  .process(css, {
-    from: 'src/tachyons.css',
-    to: 'css/tachyons.css'
-  })
-  .css
+var output = postcss([
+  atImport(), cssvariables(), conditionals(), customMedia(), autoprefixer()
+]).process(css, {
+  from: 'src/tachyons.css',
+  to: 'css/tachyons.css'
+}).css
 
 // get the original css size
 fs.writeFile('css/tachyons.css', output, 'utf-8')
@@ -36,11 +34,10 @@ console.log('This file starts out at ' + filesize(uncompressedSize) + ' which wo
 
 // minify the css
 new compressor.minify({
-    type: 'sqwish',
-    fileIn: 'css/tachyons.css',
-    fileOut: 'css/tachyons.min.css',
-    callback: function (err, min) {
-    }
+  type: 'sqwish',
+  fileIn: 'css/tachyons.css',
+  fileOut: 'css/tachyons.min.css',
+  callback: function (err, min) {}
 })
 
 var minified = fs.statSync('css/tachyons.min.css', 'utf8')
@@ -49,3 +46,5 @@ var minifiedSize = minified['size']
 
 console.log('After minification it is ' + filesize(minifiedSize))
 console.log('After gzipping it is ' + filesize(gzipped)  + 'instead of ' + filesize(gzipped))
+
+componentsBuild()

components-build.js

@@ -0,0 +1,73 @@
+var fs = require('fs')
+var _ = require('lodash')
+var path = require('path')
+var glob = require('glob')
+var titleize = require('titleize')
+var fm = require('json-front-matter')
+var rmHtmlExt = require('remove-html-extension')
+var getClasses = require('get-classes-from-html')
+var postcss = require('postcss')
+var select = require('postcss-select')
+var atImport = require('postcss-import')
+var conditionals = require('postcss-conditionals')
+var removeComments = require('postcss-discard-comments')
+var cssVariables = require('postcss-css-variables')
+var customMedia = require('postcss-custom-media')
+var mqPacker = require('css-mqpacker')
+
+var tachyonsCss = fs.readFileSync('src/tachyons.css', 'utf8')
+
+module.exports = function () {
+  glob('examples/components/src/**/*.html', {}, function (err, components) {
+    if (err) {
+      console.error(err)
+      return
+    }
+
+    var template = fs.readFileSync('templates/components.html', 'utf8')
+
+
+    components.forEach(function (component) {
+      var newDir = rmHtmlExt(component.replace('/src', '')) + '/index.html'
+      var componentHtml = fs.readFileSync(component, 'utf8')
+
+      var fmParsed = fm.parse(componentHtml)
+      var frontMatter = fmParsed.attributes || {}
+      frontMatter.title = frontMatter.title || getTitle(component)
+      frontMatter.classes = getClasses(fmParsed.body).map(function(klass) {
+        return '.' + klass
+      })
+      frontMatter.componentHtml = componentHtml
+      frontMatter.content = fmParsed.body
+
+      var moduleSrcs = {}
+      var getModules = postcss.plugin('get-modules', function () {
+        return function (css, result) {
+          css.walkRules(function (rule) {
+            moduleSrcs[rule.source.input.from] = true
+          })
+        }
+      })
+
+      frontMatter.componentCss = postcss([
+        atImport(), cssVariables(), conditionals(), customMedia(), select(frontMatter.classes),
+        removeComments(), mqPacker(), getModules()
+      ]).process(tachyonsCss, {
+        from: 'src/tachyons.css'
+      }).css
+
+      // 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)
+    })
+  })
+}
+
+function getTitle(component) {
+  var title = rmHtmlExt(component).replace('examples/components/src/', '').replace(/(\/|_|-)/g, ' ')
+  return titleize(title)
+}