Integrate KSS splitter. Show related CSS styles in UI

lib/app/js/directives/section.js

@@ -8,8 +8,10 @@ angular.module('sgApp')
       templateUrl: 'views/partials/section.html',
       link: function(scope, element, attrs) {
 
-        //init setting based on global 'showAllMarkup' value
+        // Init setting based on global 'showAllMarkup' value
         scope.section.showMarkup = scope.markup.isVisible;
+        // By default do not show CSS markup
+        scope.section.showCSS = false;
 
         scope.showSingleMarkupBox = function(index) {
           if (!scope.section.showMarkup) {
@@ -22,6 +24,18 @@ angular.module('sgApp')
             scope.section.showMarkup = false;
           }
         }
+
+        scope.showSingleCSSBox = function(index) {
+          if (!scope.section.showCSS) {
+            scope.section.showCSS = true;
+          }
+        }
+
+        scope.hideSingleCSSBox = function(index) {
+          if (scope.section.showCSS) {
+            scope.section.showCSS = false;
+          }
+        }
       }
     };
   }]);

lib/app/sass/app.scss

@@ -692,6 +692,11 @@ $mobile: new-breakpoint(max-width 480px);
       padding: 1em;
     }
 
+    .hljs {
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
     a.show-section {
       display: block;
       cursor: pointer;

lib/app/views/partials/section.html

@@ -43,14 +43,27 @@ <h4 ng-show="getLevel(section) === 'sub-sub-sub'" ng-show="" class="sg section-h
         ng-bind-html="section.wrappedMarkup | setVariables: variables | unsafe" dynamic-compile>
       </div>
     </div>
+
+    <div class="sg section-partial code-listing" ng-if="section.css">
+      <div ng-if="section.showCSS" class="sg label">
+        <a ng-click="hideSingleCSSBox($index)" target="_blank">
+          <i class="fa fa-close"></i>
+        </a>
+      </div>
+      <pre class="sg" ng-if="section.showCSS">
+        <code hljs source="section.css" class="html"></code>
+      </pre>
+      <a class="sg show-section" ng-hide="section.showCSS" ng-click="showSingleCSSBox($index)">Show CSS</a>
+    </div>
+
     <div class="sg section-partial code-listing" ng-if="section.markup">
-      <div ng-show="section.showMarkup" class="sg label">
+      <div ng-if="section.showMarkup" class="sg label">
         <a ng-click="hideSingleMarkupBox($index)" target="_blank">
           <i class="fa fa-close"></i>
         </a>
       </div>
-      <pre class="sg" ng-show="section.showMarkup">
-        <code hljs source="section.markup" class="html"></code>
+      <pre class="sg" ng-if="section.showMarkup">
+        <code hljs source="section.markup" class="css"></code>
       </pre>
       <a class="sg show-section" ng-hide="section.showMarkup" ng-click="showSingleMarkupBox($index)">Show markup</a>
     </div>

lib/modules/kss.js

@@ -1,8 +1,9 @@
 
 'use strict';
 var kss = require('kss'),
-  sanitizeHtml = require('sanitize-html'),
-  wrapperMarkup = require('./wrapper-markup');
+  Q = require('q'),
+  kssSplitter = require('./kss-splitter'),
+  sanitizeHtml = require('sanitize-html');
 
 // Parses kss.KssSection to JSON
 function jsonSections(sections) {
@@ -32,30 +33,84 @@ function jsonModifiers(modifiers) {
   });
 }
 
+function trimLinebreaks(str) {
+  // Remove leading and trailing whitespaces
+  if (!str) {
+    return str;
+  }
+  return str.replace(/^[\r\n]+|[\r\n]+$/g, '');
+}
+
 function sanitize(string) {
   return sanitizeHtml(string, {allowedTags: [], allowedAttributes: []});
 }
 
-module.exports = {
+function processBlock(block, options, json) {
+  var blockPromise = Q.defer();
 
-  // Parse node-kss object ( {'file.path': 'file.contents.toString('utf8'}' )
-  parseKSS: function(files, options, success) {
-  var json = {};
-  kss.parse(files, options, function(err, styleguide) {
+  kss.parse(block.kss, options, function(err, styleguide) {
+    var section,
+      blockStyles;
     if (err) {
       new PluginError(PLUGIN_NAME, 'Error parsing', err);
+      blockPromise.resolve();
       return false;
     } else {
-      json.sections = jsonSections(styleguide.section());
+      section = jsonSections(styleguide.section());
 
-      /* Make inherited wrappers */
-      json.sections = wrapperMarkup.generateSectionWrapperMarkup(json.sections);
+      if (section.length > 0) {
+        if (section.length > 1) {
+          console.warn('Warning: KSS splitter returned more than 1 KSS block. Styleguide might not be properly generated.');
+        }
+        blockStyles = trimLinebreaks(block.code);
 
-      if (typeof success === 'function') {
-        success(json);
+        // Add related CSS to section
+        if (blockStyles && blockStyles !== '') {
+          section[0].css = blockStyles;
+        }
+        json.sections = json.sections.concat(section);
       }
+      blockPromise.resolve();
     }
   });
+  return blockPromise;
 }
 
+function processFile(contents, options, json) {
+  var filePromise = Q.defer(),
+    blockPromises = [],
+    splittedFile = kssSplitter.getBlocks(contents);
+
+  // Process every block in the current file
+  splittedFile.forEach(function(block) {
+    blockPromises.push(processBlock(block, options, json));
+  });
+
+  Q.all(blockPromises).then(function() {
+    // All blocks are processed, resolve file promise
+    filePromise.resolve();
+  });
+
+  return filePromise;
+}
+
+module.exports = {
+  // Parse node-kss object ( {'file.path': 'file.contents.toString('utf8'}' )
+  parseKSS: function(files, options, success) {
+    var json = {
+      sections: []
+    },
+    filePromises = [],
+    fileKeys = Object.keys(files);
+
+    fileKeys.forEach(function(filePath) {
+      var contents = files[filePath];
+      filePromises.push(processFile(contents, options, json));
+    });
+
+    Q.all(filePromises).then(function() {
+      // All files are processed. Call success callback
+      success(json);
+    });
+  }
 }

lib/styleguide.js

@@ -22,6 +22,7 @@ var through = require('through2'),
   parseKSS = require(__dirname + '/modules/kss').parseKSS,
   pseudoSelectors = require(__dirname + '/modules/pseudo-selectors'),
   preprocess = require(__dirname + '/modules/preprocess'),
+  wrapperMarkup = require(__dirname + '/modules/wrapper-markup'),
   path = require('path'),
   sgServer = require(__dirname + '/server'),
   File = require('vinyl'),
@@ -99,6 +100,7 @@ module.exports = function(opt) {
     // After reading all files, parse them and generate data for styleguide
     function(callback) {
       var _this = this;
+
       parseKSS(filesBuffer, opt.kssOpt, function(styleguide) {
         var pushAllFiles = function() {
           return through.obj(function(file, enc, cb) {
@@ -109,6 +111,9 @@ module.exports = function(opt) {
           })
         };
 
+        // Make inherited wrappers
+        styleguide.sections = wrapperMarkup.generateSectionWrapperMarkup(styleguide.sections);
+
         // Store settings inside the styleguide JSON
         styleguide.config = opt;
 

package.json

@@ -49,6 +49,7 @@
     "node-neat": "^1.3.0",
     "node.extend": "^1.1.2",
     "ometajs": "^3.3.7",
+    "q": "^1.1.1",
     "run-sequence": "^1.0.1",
     "sanitize-html": "^1.4.3",
     "serve-favicon": "^2.1.6",