reustyle 2.0.7

data/dist/ustyle.min.js

@@ -0,0 +1 @@
+var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;b<c;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;a<c;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;b<c&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window),forEach=function(a,b,c){for(var d=a.length-1;d>=0;d--)b.call(c,d,a[d])};this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame,forEach:forEach},window.Backdrop=function(){function a(){null==(d=document.querySelector(".us-backdrop"))&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;if(1===++c)return Utils.addClass(d,"us-backdrop--visible"),a=function(){if(c>=1)return Utils.addClass(d,"us-backdrop--active")},Utils.requestAnimationFrame.call(window,a)},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){if(0===c)return Utils.removeClass(d,"us-backdrop--visible")},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,this.overlay instanceof jQuery&&(this.overlay=document.querySelector(this.overlay.selector)),this.options.openButton instanceof jQuery&&(this.options.openButton=document.querySelector(this.options.openButton.selector)),null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:document.querySelector(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){var a=new CustomEvent("click.open-overlay"),b=new CustomEvent("click.close-overlay"),c="string"==typeof this.options.openButton?document.querySelector(this.options.openButton):this.options.openButton,d=function(b){return function(d){return b.options.preventDefault&&d.preventDefault(),c.dispatchEvent(a),b.show(d)}}(this);c&&c.addEventListener("click",d);var e=function(a){return function(c){for(var d=[],e=a.overlay.querySelectorAll(a.options.closeButton),f=[a.overlay].concat(Array.prototype.slice.call(e)),g=f.length-1;g>=0;g--){var h=f[g];if(c.target===h){a.options.preventDefault&&c.preventDefault(),a.hide(c);break}d.push(void 0)}return a.overlay.dispatchEvent(b),d}}(this);if(this.overlay.addEventListener("click",e),this.hasHistory())return window.onpopstate=function(a){return function(b){if(a.isOpen())return a.hide(b)}}(this)},b.prototype.show=function(a){var b,d=this;if(c(document.body,this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay,this.options.visibleClass),b=function(){return c(d.overlay,d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory())return history.pushState("open",window.document.title,this.options.historyStatus)},b.prototype.hide=function(a){var b,c=this;if(e(document.body,this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay,c.options.activeClass),setTimeout(function(){var b;return e(c.overlay,c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state)return history.back()},b.prototype.isOpen=function(){return d(this.overlay,this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils),window.Tabs=function(a){function b(a){var b=this.options=f(a,this.defaults),c=b.tabContainer,d=b.tabLinks;if(this.activeTabEvent=new CustomEvent("ustyle.tab.active"),this.tabs=document.querySelectorAll(c+" "+d),this.tabs.length){this.filter=this.tabs.item(0).getAttribute("data-target")?"data-target":"href",this.init();var e=function(a){return function(b){var c=b.currentTarget;return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this);g(this.tabs,function(a,b){b.addEventListener("click",e)})}}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.forEach;b.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},b.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b?this.navigateTo(b):a?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.item(0))},b.prototype.hashChange=function(a){if(this.options.changeUrls)return window.location.replace("#!"+h(a).replace(/#/,""))},b.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},b.prototype.navigateTo=function(a){var b=h(a),d=document.querySelector(b),f=this.options.activeClass,i=this.filter;return g(this.tabs,function(a,b){e(b,f)}),g(this.tabs,function(a,d){if(d.getAttribute(i)===b)return c(d,f)}),g(d.parentNode.children,function(a,b){b!==d&&e(b,f)}),c(d,f),d.dispatchEvent(this.activeTabEvent)},b.prototype.collapse=function(a){var b=document.querySelector(h(a)),c=this.options.activeClass;return g(this.tabs,function(a,b){e(b,c)}),e(b,c)},b.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){return document.querySelector(h(a)).scrollIntoView()}},b.prototype.activeTab=function(){var a=this.options.activeClass,b=null;return g(this.tabs,function(c,e){if(d(e,a))return b=e}),b},b.prototype.tabFromHash=function(){var a=window.location.hash.replace("!",""),b=this.filter,c=null;return g(this.tabs,function(d,e){if(e.getAttribute(b)===a)return c=e}),c},b.prototype.isActive=function(a){return h(a)===h(this.activeTab())},b.prototype.isAccordion=function(){var a=document.querySelector(this.options.tabNav);return!(a.offsetWidth>0||a.offsetHeight>0)};var h=function(a){if(a)return a.getAttribute("data-target")||a.getAttribute("href")};return b}(this.Utils),window.ClassToggler=function(a){function b(b){this.options=a.setOptions(b,f),!this.options.target&&this.options.$target&&this.options.$target instanceof jQuery&&(this.options.target=document.querySelectorAll(this.options.$target.selector)),this.options.target?this.addEventListeners():console.trace("ClassToggle",this.options)}var c=(a.addClass,a.hasClass),d=a.removeClass,e=a.forEach,f={containerClass:null,target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},g=function(a,b){for(;(a=a.parentElement)&&!c(a,b););return a};return b.prototype.addEventListeners=function(){var a=this.options.toggleOn,b=function(a){return function(b){var c=a.options.containerClass?g(b.target,a.options.containerClass):b.delegateTarget;return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this);e(this.options.target,function(c,d){d.addEventListener(a,b)})},b.prototype.isActive=function(a){return c(a,this.options.activeClass)},b.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},b.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),d(a,this.options.activeClass)},b}(this.Utils);

data/grunt/modules/dss-helper.js

@@ -0,0 +1,115 @@
+const dss = require('dss')
+const crypto = require('crypto')
+const marked = require('marked')
+const escaped = require('underscore.string/escapeHTML')
+
+module.exports = {
+  /**
+   * Register DSS parsers
+   *
+   * @param {object} parsers - An object containing the declared parsers to register
+   */
+  addParsers: function (parsers) {
+    for (var key in parsers) {
+      dss.parser(key, parsers[key])
+    }
+  },
+
+  /**
+   * Removing ${modifiers} text from markup
+   *
+   * @param {string} escaped markup - The file to extract the variable values from
+   * @return {string} Escaped string without ${modifiers}
+   */
+  addStateToExample: function (markup, state) {
+    return markup.replace(/{\$modifiers}/g, state)
+  },
+
+  /**
+   * Removing ${modifiers} text from markup
+   *
+   * @param {string} escaped markup - The file to extract the variable values from
+   * @return {string} Escaped string without ${modifiers}
+   */
+  removeModifiersFromMarkup: function (escaped) {
+    return escaped.replace(/(\sclass=('|"){\$modifiers}('|")|\s{\$modifiers})/g, '')
+  },
+
+  /**
+   * Get parser for a file which will extract "@variable {name} - {description}"
+   *
+   * @param {object} file - The file to extract the variable values from
+   * @return {function} A DSS parser
+   */
+  variableDssParser: function () {
+    const fileVariablesRx = /^[$|@]([a-zA-Z0-9_-]+):([^;]+);/gim
+    const lineSplitRx = /(( - )+)/
+    var fileVariables = {}
+    var variables = {}
+    var match
+    var hash
+    var tokens
+    var name
+
+    return function (i, line, block, css) {
+      hash = crypto.createHash('md5').update(css).digest('hex')
+      if (!fileVariables[hash]) {
+        while ((match = fileVariablesRx.exec(css)) !== null) {
+          variables[match[1].trim()] = match[2].trim()
+        }
+        fileVariables[hash] = variables
+      }
+
+            // Extract name and any delimiter with description
+      tokens = line.split(lineSplitRx, 2)
+      name = tokens[0].trim()
+      if (variables.hasOwnProperty(name)) {
+        return {
+          name: name,
+                    // Description is line with name and any delimiter replaced
+          description: line.replace(tokens.join(''), ''),
+          value: variables[name]
+        }
+      }
+    }
+  },
+
+  /**
+   * Read over multiple description lines and return a markdown version
+   *
+   * @param {number} i - line number
+   * @param {string} line - Line matching parser
+   * @param {string} block - Entire block of text matching
+   * @return {string} A markdown version of the description
+   */
+  descriptionDssParser: function (i, line, block) {
+    var nextParserIndex = block.indexOf('@', i + 1)
+    var markupLength = nextParserIndex > -1 ? nextParserIndex - i : block.length
+    var markup = block.split('')
+      .splice(i, markupLength)
+      .join('')
+      .replace(/\n/g, '\n\n')
+      .replace(/@description/, '')
+
+    return marked(markup)
+  },
+
+  /**
+   * Read over multiple lines and return a javascript code snippet
+   *
+   * @param {number} i - line number
+   * @param {string} line - Line matching parser
+   * @param {string} block - Entire block of text matching
+   * @return {string} JavaScript code snipper
+   */
+  javascriptParser: function (i, line, block) {
+    var nextParserIndex = block.indexOf('@', i + 1)
+    var markupLength = nextParserIndex > -1 ? nextParserIndex - i : block.length
+    var markup = block.split('')
+      .splice(i, markupLength)
+      .join('')
+      .replace(/@javascript/, '')
+
+    return escaped(markup)
+  }
+}

data/grunt/modules/file.js

@@ -0,0 +1,24 @@
+const grunt = require('grunt')
+
+module.exports = {
+  writeFile: function (file, dest, message) {
+    var outputType = 'created'
+    var oldFile = null
+
+    if (grunt.file.exists(dest)) {
+      outputType = 'overwritten'
+      oldFile = grunt.file.read(dest)
+    }
+
+    if (oldFile !== file) {
+      grunt.file.write(dest, file)
+      grunt.log.writeln('✓ ' + message + ' ' + outputType + ' at: ' + grunt.log.wordlist([dest], {color: 'cyan'}))
+    } else {
+      grunt.log.writeln('‣ ' + message + ' unchanged')
+    }
+  },
+
+  isMarkdown: function (extension) {
+    return extension === '.md'
+  }
+}

data/grunt/modules/html-parser.js

@@ -0,0 +1,22 @@
+const cheerio = require('cheerio')
+
+module.exports = {
+  extractSubNav: function (content) {
+    var $ = cheerio.load(content)
+    var contents = []
+
+    function buildHashOfContents (i, el) {
+      contents.push({name: $(el).text(), link: $(el).attr('href')})
+    }
+
+    $('ul.table-of-contents a').map(buildHashOfContents)
+    return contents
+  },
+
+  removeSubNav: function (content) {
+    var $ = cheerio.load(content)
+
+    $('ul.table-of-contents').remove()
+    return $.html()
+  }
+}

data/grunt/modules/templates.js

@@ -0,0 +1,57 @@
+const handlebars = require('handlebars')
+const humanize = require('underscore.string/humanize')
+
+function humanFileSize (size) {
+  if (size < 1024) return size
+  var i = Math.floor(Math.log(size) / Math.log(1024))
+  return new handlebars.SafeString((size / Math.pow(1024, i)).toFixed(2) * 1 + '<span> ' + ['B', 'kB', 'MB', 'GB', 'TB'][i] + '</span>')
+};
+
+module.exports = {
+  registerHelpers: function () {
+    handlebars.registerHelper('humanize', function (name, options) {
+      return new handlebars.SafeString(humanize(name))
+    })
+
+    handlebars.registerHelper('json', function (context) {
+      return JSON.stringify(context)
+    })
+
+    handlebars.registerHelper('partial', function (name, options) {
+      // Get the partial with the given name. This is a string.
+      var partial = handlebars.partials[name]
+
+      // Return empty string if the partial is not defined
+      if (!partial) return ''
+      // Compile and call the partial with this as context
+      return new handlebars.SafeString(handlebars.compile(partial)(this))
+    })
+
+    handlebars.registerHelper('activeClass', function (name, attribute, context) {
+      var active = ''
+      if (name === context.data.root.page[attribute]) {
+        active = 'active'
+      }
+      return new handlebars.SafeString(active)
+    })
+
+    handlebars.registerHelper('isActive', function (name, attribute, context) {
+      if (name === attribute) {
+        return context.fn(this)
+      }
+      return context.inverse(this)
+    })
+
+    handlebars.registerHelper('humanFileSize', function (size, context) {
+      return new handlebars.SafeString(humanFileSize(size))
+    })
+
+    handlebars.registerHelper('number', function (number, context) {
+      return new handlebars.SafeString(number.toPrecision(2))
+    })
+
+    handlebars.registerHelper('classSanitizer', function (klass) {
+      return new handlebars.SafeString(klass.split('.')[1])
+    })
+  }
+}

data/grunt/tasks/browser-sync.js

@@ -0,0 +1,23 @@
+'use strict'
+
+module.exports = function (grunt) {
+  var browserSync = require('browser-sync')
+
+  grunt.registerTask('browserSync-init', function () {
+    var done = this.async()
+    browserSync({
+      server: './docs',
+      notify: false
+    }, function (err, bs) {
+      if (err) {
+        console.log(err)
+      }
+
+      done()
+    })
+  })
+
+  grunt.registerTask('browserSync-inject', function () {
+    browserSync.reload(['docs/css/main.css'])
+  })
+}

data/grunt/tasks/builder.js

@@ -0,0 +1,67 @@
+const handlebars = require('handlebars')
+const async = require('async')
+const path = require('path')
+const template = require('../modules/templates')
+const fileHelper = require('../modules/file')
+const slugify = require('underscore.string/slugify')
+
+module.exports = function (grunt) {
+  grunt.registerMultiTask('builder', function () {
+    var promise = this.async()
+    var files = this.files
+
+    var options = this.options({
+      templates: './styleguide/**/*.tpl'
+    })
+
+    async.waterfall([
+      init,
+      generateStyleguide
+    ], completeTask)
+
+    function completeTask () {
+      promise()
+    }
+
+    function init (callback) {
+      template.registerHelpers()
+      generateTemplates(options.templates)
+      callback(null)
+    }
+
+    function generateStyleguide (callback) {
+      files.forEach(function (file) {
+        const dest = file.dest
+        const datum = grunt.file.readJSON(file.src[0])
+        generatePages(datum, datum.pages, dest)
+      })
+      callback(null, 'done')
+    }
+
+    function generatePages (data, pages, dest) {
+      pages.map(function (page) {
+        const model = {
+          project: data.project,
+          navigation: data.navigation,
+          page: page,
+          pages: data.pages
+        }
+        const outputFilePath = dest + slugify(page.section) + '/' + page.page
+        const template = handlebars.compile(grunt.file.read(page.template))(model)
+
+        fileHelper.writeFile(template, outputFilePath, 'Build')
+      })
+    }
+
+    function generateTemplates (templatePath) {
+      var templates = {}
+
+      grunt.file.expand(templatePath).forEach(function (file) {
+        var templateName = path.basename(file, '.tpl')
+        templates[templateName] = grunt.file.read(file)
+      })
+
+      handlebars.registerPartial(templates)
+    }
+  })
+}

data/grunt/tasks/styleguide.js

@@ -0,0 +1,299 @@
+const dss = require('dss')
+const _ = require('lodash')
+const async = require('async')
+const path = require('path')
+const fs = require('fs')
+const dssHelper = require('../modules/dss-helper')
+const fileHelper = require('../modules/file')
+const parser = require('../modules/html-parser')
+const humanize = require('underscore.string/humanize')
+const underscored = require('underscore.string/underscored')
+const slugify = require('underscore.string/slugify')
+const matter = require('gray-matter')
+const StyleStats = require('stylestats')
+const marked = require('marked')
+const semver = require('semver')
+const exec = require('child_process').exec
+const simpleGit = require('simple-git')(path.resolve('.'))
+
+module.exports = function (grunt) {
+  grunt.registerMultiTask('styleguide', 'Parse DSS comment blocks', function () {
+    var promise = this.async()
+    var files = this.files
+    var outputFilePath = this.data.output
+    var styleguidePath = this.data.dir
+    var contentPath = path.join(styleguidePath, 'content')
+    var templatePath = path.join(styleguidePath, 'templates')
+    var cssStatsFile = this.data.statsFor
+    var tagStartVersion = this.data.tagStartVersion
+    var tagPlaceholder = this.data.tagPlaceholder
+
+    var options = this.options({
+      template: 'styleguide.tpl',
+      contentTemplate: 'simple.tpl',
+      parsers: {
+        variable: dssHelper.variableDssParser(),
+        partial: function (i, line, block) { return line },
+        page: function (i, line, block) { return line },
+        description: dssHelper.descriptionDssParser,
+        javascript: dssHelper.javascriptParser
+      }
+    })
+
+    async.waterfall([
+      init,
+      parseDSS,
+      groupDSS,
+      generateStaticContent,
+      generateStyleguide,
+      generateStats,
+      writeFile
+    ], completeTask)
+
+    function completeTask () {
+      promise()
+    }
+
+    function init (callback) {
+      dssHelper.addParsers(options.parsers)
+      callback(null)
+    }
+
+    function parseDSS (callback) {
+      var styleguide = []
+      var srcFiles = files[0].src
+
+      srcFiles.forEach(function (file) {
+        dss.parse(grunt.file.read(file), { file: file }, function (parsed) {
+          // Continue only if file contains DSS annotation
+          if (parsed.blocks.length) {
+            // Add comment block to styleguide
+            parsed.blocks.map(function (block) {
+              block['path'] = file
+              block['file'] = path.basename(file)
+              block['link'] = underscored(slugify(block['name']));
+
+              // Normalize @state and @variable to array
+              ['state', 'variable'].forEach(function (prop) {
+                if (block.hasOwnProperty(prop) && typeof block[prop].slice !== 'function') {
+                  block[prop] = [block[prop]]
+                }
+              })
+
+              if (block.markup) {
+                block.markup.escaped = dssHelper.removeModifiersFromMarkup(block.markup.escaped)
+              }
+
+              if (block.hasOwnProperty('state')) {
+                block.state.map(function (state) {
+                  state.markup = {
+                    example: dssHelper.addStateToExample(block.markup.example, state.escaped)
+                  }
+                })
+              }
+            })
+            styleguide.push(parsed.blocks)
+          }
+        })
+      })
+      callback(null, styleguide)
+    }
+
+    function groupDSS (styleguide, callback) {
+      var sections = _.chain(styleguide).flatten().groupBy('page')
+        .map(function (value, key) {
+          const structure = key.split('/')
+          const section = slugify(structure[0])
+          const page = structure[1]
+
+          return {
+            name: page,
+            page: slugify(page) + '.html',
+            template: _getTemplate(options.template),
+            section: slugify(section),
+            blocks: value
+          }
+        })
+        // As it's iterating over files, we don't want files that aren't documented to come through
+        .filter(function (object) { return object.section !== 'undefined' }).compact().value()
+
+      callback(null, sections)
+    }
+
+    function generateStaticContent (sections, callback) {
+      var pages = grunt.file.expand(contentPath + '/**/*')
+          .filter(function (dir) {
+            var stats = fs.lstatSync(dir)
+            return !stats.isDirectory()
+          })
+          .map(function (file) {
+            const data = matter.read(file)
+            const html = parser.removeSubNav(data.content)
+            const extension = path.extname(file)
+            const subNavData = parser.extractSubNav(data.content)
+            const section = path.dirname(file).replace((new RegExp(contentPath + '/?', 'g')), '')
+            const filename = path.basename(file, extension)
+
+            return {
+              name: data.data.name || humanize(filename),
+              page: filename + '.html',
+              template: _getTemplate(data.data.template || options.contentTemplate),
+              section,
+              content: (fileHelper.isMarkdown(extension) ? marked(html) : html),
+              subNav: subNavData
+            }
+          })
+
+      var data = _sortyByIndex(pages).concat(sections)
+
+      callback(null, _sortyByIndex(data))
+    }
+
+    function generateStyleguide (sections, callback) {
+      var model = {
+        pages: sections,
+        navigation: _getSection(sections),
+        project: grunt.file.readJSON('package.json')
+      }
+
+      callback(null, model)
+    }
+
+    function generateStats (model, callback) {
+      var cssParser
+      var omitEntries
+      var statsPage
+      var cachedStatsFile
+
+      cachedStatsFile = 'tmp/.stats-cache'
+
+      statsPage = {
+        name: 'Stats',
+        page: 'stats.html',
+        section: 'pattern-library',
+        content: {report: []},
+        template: 'styleguide/templates/stats.tpl'
+      }
+
+      // Get the latest tag, if the tag is different from the cached one
+      // fetch new data.
+      exec('git describe --tags `git rev-list --tags --max-count=1`',
+        function (error, stdout, sterr) {
+          if (error) {
+            console.log(error)
+          }
+
+          var latestTag = semver.clean(stdout)
+          var data
+
+          try {
+            data = grunt.file.readJSON(cachedStatsFile)
+            var latestVersion = data[0].version
+            if (data[0] && data[0].version && semver.eq(latestVersion, latestTag)) {
+              statsPage.content.report = data
+              next()
+            } else {
+              fetchNewStatsData()
+            }
+          } catch (err) {
+            // File does't exist or wrong format.
+            fetchNewStatsData()
+          }
+        }
+      )
+
+      function fetchNewStatsData () {
+        async.waterfall([
+          getTags,
+          getStylesListing,
+          getStats
+        ], next)
+      }
+
+      function getTags (callback) {
+        simpleGit.tags(function (err, tags) {
+          if (err) {
+            console.log(err)
+          }
+
+          callback(null, tags)
+        })
+      }
+
+      function getStylesListing (tags, callback) {
+        var styleListing = tags.all.map(function (tag) {
+          var cleanTag = semver.clean(tag)
+          if (cleanTag != null && semver.gt(cleanTag, tagStartVersion)) {
+            return {
+              version: cleanTag,
+              path: cssStatsFile.replace(tagPlaceholder, cleanTag)
+            }
+          }
+        })
+        callback(null, _.compact(styleListing))
+      }
+
+      function getStats (styleListing, callback) {
+        omitEntries = [
+          'dataUriSize', 'ratioOfDataUriSize', 'lowestCohesion',
+          'lowestCohesionSelector', 'uniqueFontSize', 'uniqueFontFamily',
+          'propertiesCount', 'published', 'paths', 'mostIdentifierSelector',
+          'totalUniqueFontSizes', 'mostIdentifier', 'totalUniqueFontFamilies',
+          'totalUniqueColors', 'unqualifiedAttributeSelectors', 'floatProperties',
+          'uniqueColor'
+        ]
+
+        async.map(styleListing,
+          function (entry, cb) {
+            cssParser = new StyleStats(entry.path, {})
+            cssParser.parse(function (err, styleStatsData) {
+              if (err) {
+                console.log(err)
+              }
+
+              var generalReport = _.omit(styleStatsData, omitEntries)
+              if (Object.keys(generalReport).length) {
+                generalReport.version = entry.version
+                statsPage.content.report.push(generalReport)
+              }
+              cb()
+            })
+          },
+          function () {
+            // Sort array
+            var sortedReport = statsPage.content.report.sort(function (a, b) {
+              return semver.rcompare(a.version, b.version)
+            })
+            statsPage.content.report = sortedReport
+            fileHelper.writeFile(JSON.stringify(sortedReport), cachedStatsFile, 'Cached stats')
+            callback()
+          }
+        )
+      }
+
+      function next () {
+        model.pages.push(statsPage)
+        callback(null, model)
+      }
+    }
+
+    function _getSection (sections) {
+      return _.chain(sections).map(function (data) { return slugify(data.section) }).compact().uniq().value()
+    }
+
+    function _sortyByIndex (sections) {
+      return sections.sort(function (a, b) {
+        return (a.page === 'index.html' ? -1 : 1)
+      })
+    }
+
+    function _getTemplate (name) {
+      return path.join(templatePath, name)
+    }
+
+    function writeFile (model, callback) {
+      fileHelper.writeFile(JSON.stringify(model), outputFilePath, 'Styleguide')
+      callback(null, 'done')
+    }
+  })
+}

data/index.js

@@ -0,0 +1,37 @@
+const types = require('node-sass').types
+const path = require('path')
+const fs = require('fs')
+const packageVersion = require('./package.json')['version']
+
+const base64encode = string => {
+  const stringBuffer = Buffer.from(string.getValue())
+  return types.String(stringBuffer.toString('base64'))
+}
+
+const inlineSVG = source => {
+  const sourcePath = path.join(__dirname, 'vendor', 'assets', 'images', source.getValue())
+  let svg = ''
+
+  try {
+    svg = fs.readFileSync(sourcePath).toString()
+  } catch (err) {
+    console.error('Error inlining SVG file', err)
+  }
+
+  const dataUrl = `url('data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}')`
+  return types.String(dataUrl)
+}
+
+const version = function () {
+  return types.String(packageVersion)
+}
+
+const SassHelpers = {
+  'base64encode($string)': base64encode,
+  'inline-svg($source)': inlineSVG,
+  'version': version
+}
+
+module.exports = {
+  SassHelpers
+}