ustyle 1.3.6

data/grunt/modules/dss-helper.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var dss        = require("dss"),
+    crypto     = require("crypto"),
+    marked     = require('marked'),
+    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() {
+
+        var fileVariables = {},
+            fileVariablesRx = /^[\$|@]([a-zA-Z0-9_-]+):([^\;]+)\;/gim,
+            lineSplitRx = /(( - )+)/,
+            variables = {},
+            match, hash, tokens, 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),
+          markupLength = nextParserIndex > -1 ? nextParserIndex - i : block.length,
+          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),
+          markupLength = nextParserIndex > -1 ? nextParserIndex - i : block.length,
+          markup = block.split('')
+                        .splice(i, markupLength)
+                        .join('')
+                        .replace(/@javascript/, '');
+
+          return escaped(markup);
+    }
+};

data/grunt/modules/file.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var grunt = require('grunt');
+
+module.exports = {
+  writeFile: function(file, dest, message){
+    var outputType = 'created',
+        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/templates.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var handlebars = require('handlebars'),
+    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,19 @@
+"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) {
+          done();
+      });
+  });
+
+  grunt.registerTask("browserSync-inject", function() {
+    browserSync.reload(["docs/css/main.css"]);
+  });
+}

data/grunt/tasks/builder.js

@@ -0,0 +1,72 @@
+'use strict';
+
+module.exports = function(grunt){
+
+  grunt.registerMultiTask('builder', function() {
+
+    var handlebars  = require('handlebars'),
+        async       = require('async'),
+        path        = require('path'),
+        fs          = require('fs'),
+        template    = require('../modules/templates'),
+        fileHelper  = require('../modules/file'),
+        slugify     = require("underscore.string/slugify"),
+        promise     = this.async(),
+        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){
+        var dest = file.dest,
+            datum = grunt.file.readJSON(file.src[0]);
+        generatePages(datum, datum.pages, dest);
+      });
+      callback(null, 'done');
+    }
+
+    function generatePages(data, pages, dest){
+      pages.map(function(page){
+        var model = {
+          project: data.project,
+          navigation: data.navigation,
+          page: page,
+          pages: data.pages
+        };
+        var outputFilePath = dest + slugify(page.section) + "/" + page.page,
+            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,290 @@
+"use strict";
+
+// Expose
+module.exports = function(grunt){
+  grunt.registerMultiTask('styleguide', 'Parse DSS comment blocks', function(){
+
+    var dss             = require('dss'),
+        _               = require('lodash'),
+        async           = require('async'),
+        path            = require('path'),
+        fs              = require('fs'),
+        dssHelper       = require('../modules/dss-helper'),
+        fileHelper      = require('../modules/file'),
+        humanize        = require("underscore.string/humanize"),
+        underscored     = require("underscore.string/underscored"),
+        slugify         = require("underscore.string/slugify"),
+        matter          = require("gray-matter"),
+        cssstats        = require('cssstats'),
+        StyleStats      = require('stylestats'),
+        marked          = require('marked'),
+        semver          = require('semver'),
+        exec            = require('child_process').exec,
+        simpleGit       = require('simple-git')( path.resolve('.') ),
+        promise         = this.async(),
+        files           = this.files,
+        outputFilePath  = this.data.output,
+        styleguidePath  = this.data.dir,
+        contentPath     = path.join(styleguidePath, "content"),
+        templatePath    = path.join(styleguidePath, "templates"),
+        cssStatsFile    = this.data.statsFor,
+        tagStartVersion = this.data.tagStartVersion,
+        tagPlaceholder  = this.data.tagPlaceholder,
+        styleguide      = [];
+
+    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) {
+
+                      var structure = key.split("/"),
+                          section = slugify(structure[0]),
+                          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){
+            var data = matter.read(file),
+                extension = path.extname(file),
+                section = path.dirname(file).replace((new RegExp(contentPath + "\/?", "g")), ""),
+                filename = path.basename(file, extension);
+
+            return {
+              name: data.data.name || humanize(filename),
+              page: filename + '.html',
+              template: _getTemplate(data.data.template || options.contentTemplate),
+              section: section,
+              content: (fileHelper.isMarkdown(extension) ? marked(data.content) : data.content)
+            }
+          });
+
+      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 cssFileData, selectors, cssParser,
+          omitEntries, statsPage, 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) {
+          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) {
+          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){
+              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/grunt/tasks/svg2png.js

@@ -0,0 +1,57 @@
+"use strict";
+
+module.exports = function(grunt){
+  grunt.registerMultiTask('svg2png', 'Convert SVG to PNGs', function(){
+
+    var svg_to_png = require('svg-to-png'),
+        path       = require('path'),
+        fs         = require('fs'),
+        async      = require('async'),
+        fileHelper = require('../modules/file'),
+        Promise    = require('bluebird'),
+        dest       = this.data.src,
+        files      = grunt.file.expand(dest + "**/*.svg"),
+        done       = this.async(),
+        tmpPath    = "tmp/",
+        sizes      = this.data.sizes,
+        promises   = [];
+
+    deleteFolderRecursive(tmpPath);
+
+    files.forEach(function(file){
+      var svg = grunt.file.read(file);
+      var newSvg = svg.replace(/width=\"[0-9]+\" height=\"[0-9]+\"/, '');
+      fileHelper.writeFile(newSvg, tmpPath + path.basename(file), "Icon");
+    });
+
+    sizes.forEach(function(size){
+      var sizing = size.split(" ");
+      var sizeX = sizing[0];
+      var sizeY = sizing[1];
+      var tmpFiles = grunt.file.expand(tmpPath + "**/*.svg");
+      promises.push(convert(tmpFiles, sizeX, sizeY))
+    });
+
+    Promise.all(promises).then(function(){
+      done();
+    });
+
+    function convert(files, sizeX, sizeY){
+      return svg_to_png.convert(files, path.join( dest + sizeX + "px"), {defaultWidth: sizeX, defaultHeight: sizeY, compress: true})
+    }
+
+    function deleteFolderRecursive(path){
+      if( fs.existsSync(path) ) {
+        fs.readdirSync(path).forEach(function(file,index){
+          var curPath = path + "/" + file;
+          if(fs.lstatSync(curPath).isDirectory()) { // recurse
+            deleteFolderRecursive(curPath);
+          } else { // delete file
+            fs.unlinkSync(curPath);
+          }
+        });
+        fs.rmdirSync(path);
+      }
+    }
+  });
+}

data/lib/ustyle/deploy.rb

@@ -0,0 +1,31 @@
+require "aws-sdk"
+
+module Ustyle
+  REGION = 'eu-west-1'
+  BUCKET = 'uswitch-assets-eu'
+  CLOUDFRONT_DISTRIBUTION = 'E3F1XI0HIG20E0'
+
+  def self.s3_upload to, from, content_type, bucket = BUCKET
+    bucket = s3.bucket(bucket)
+    object = bucket.object(to)
+    object.put(body: open(from), content_type: content_type, acl: 'public-read')
+  end
+
+  def self.invalidate files
+    cloudfront = Aws::CloudFront::Client.new(region: REGION)
+    cloudfront.create_invalidation(
+      distribution_id: CLOUDFRONT_DISTRIBUTION,
+      invalidation_batch: {
+        paths: {
+          quantity: files.length,
+          items: files
+        },
+        caller_reference: "ustyle invalidation at #{Time.now.to_s}"
+      }
+    )
+  end
+
+  def self.s3
+    @conn ||= Aws::S3::Resource.new(region: REGION)
+  end
+end

data/lib/ustyle/engine.rb

@@ -0,0 +1,24 @@
+require 'autoprefixer-rails'
+
+module Ustyle
+  class Engine < ::Rails::Engine
+    add_paths_block = lambda { |app|
+      Ustyle.asset_directories.each do |asset_directory|
+        app.config.assets.paths << File.join(Ustyle.assets_path, asset_directory)
+      end
+    }
+
+    initializer "ustyle.assets.precompile" do |app|
+      app.config.assets.precompile += %w( icons/**.* )
+    end
+
+    initializer "ustyle.update_asset_paths", &add_paths_block
+    initializer "ustyle.update_asset_paths", group: :assets, &add_paths_block
+  end
+
+  class Railtie < ::Rails::Railtie
+    initializer :setup_autoprefixer, group: :all do |app|
+      AutoprefixerRails.install(app.assets, *Ustyle.autoprefixer_config(app))
+    end
+  end
+end