StyleModifier support. Unit test coverage. Tested basic, listitem, and pattern param support with style modifiers. added to readme. Closes #95

Author: bmuenzenmeyer

Gruntfile.js

@@ -51,6 +51,10 @@ module.exports = function(grunt) {
 			list_item_hunter: {
 				src: './builder/list_item_hunter.js',
 				dest: './builder/list_item_hunter.js'
+			},
+			style_modifier_hunter: {
+				src: './builder/style_modifier_hunter.js',
+				dest: './builder/style_modifier_hunter.js'
 			}
 		},
 		copy: {

README.md

@@ -179,6 +179,32 @@ Pattern parameters **do not** currently support the following:
 
 You can read the full documentation on pattern parameters here: [Using Pattern Parameters](http://patternlab.io/docs/pattern-parameters.html)
 
+##### Pattern Style Modifiers
+Style Modifiers allow you to create a base pattern that you can easily modify by adding a class name to the pattern partial. Read more about them [here](http://patternlab.io/docs/pattern-stylemodifier.html), including support with pattern parameters. Below is the gist.
+
+The basic syntax is this:
+
+```
+{{> atoms-message:error }}
+```
+
+This works by using a reserved mustache variable of sorts called {{ styleModifier }} applied to the atoms-message mustache file itself:
+
+```
+<div class="message {{ styleModifier }}">{{ message }}</div>
+```
+
+Once rendered, it looks like this:
+
+```
+<div>
+    <div class="message error"></div>
+</div>
+```
+
+
+
+
 ##### Pseudo-Patterns
 Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.
 

builder/list_item_hunter.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.14.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.14.0 - 2015
+ *
  * Brian Muenzenmeyer, and the web community.
- * Licensed under the MIT license. 
- * 
- * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -15,8 +15,10 @@
 
 		var extend = require('util')._extend,
 		pa = require('./pattern_assembler'),
+		smh = require('./style_modifier_hunter'),
 		mustache = require('mustache'),
 		pattern_assembler = new pa(),
+		style_modifier_hunter = new smh(),
     items = [ 'zero','one','two','three','four','five','six','seven','eight','nine','ten','eleven','twelve','thirteen','fourteen','fifteen','sixteen','seventeen','eighteen','nineteen','twenty'];
 
 		function processListItemPartials(pattern, patternlab){
@@ -71,6 +73,11 @@
                 var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[0];
                 var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
 
+								//if partial has style modifier data, replace the styleModifier value
+								if(pattern.stylePartials && pattern.stylePartials.length > 0){
+									style_modifier_hunter.consume_style_modifier(partialPattern, foundPartials[j], patternlab);
+								}
+
                 //replace its reference within the block with the extended template
                 thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
               }
@@ -87,7 +94,7 @@
             repeatedBlockHtml = repeatedBlockHtml + thisBlockHTML;
           }
 
-          //replace the block with our generated HTML 
+          //replace the block with our generated HTML
           var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
           pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);
 

builder/parameter_hunter.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.14.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.14.0 - 2015
+ *
  * Brian Muenzenmeyer, and the web community.
- * Licensed under the MIT license. 
- * 
- * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -16,17 +16,18 @@
 		var extend = require('util')._extend,
 		pa = require('./pattern_assembler'),
 		mustache = require('mustache'),
+		smh = require('./style_modifier_hunter'),
+		style_modifier_hunter = new smh(),
 		pattern_assembler = new pa();
 
 		function findparameters(pattern, patternlab){
 
-			//find the {{> template-name(*) }} within patterns
-			var matches = pattern.template.match(/{{>([ ]+)?([\w\-\.\/~]+)(\()(.+)(\))([ ]+)?}}/g);
-			if(matches !== null){
+			if(pattern.parameteredPartials && pattern.parameteredPartials.length > 0){
 				//compile this partial immeadiately, essentially consuming it.
-				matches.forEach(function(pMatch, index, matches){
-					//find the partial's name
+				pattern.parameteredPartials.forEach(function(pMatch, index, matches){
+					//find the partial's name and retrieve it
 					var partialName = pMatch.match(/([\w\-\.\/~]+)/g)[0];
+					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
 
 					if(patternlab.config.debug){
 						console.log('found patternParameters for ' + partialName);
@@ -40,13 +41,17 @@
 					//do no evil. there is no good way to do this that I can think of without using a split, which then makes commas and colons special characters and unusable within the pattern params
 					var paramData = eval(paramString);
 
-					var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
 					var globalData = JSON.parse(JSON.stringify(patternlab.data));
-					var localData = JSON.parse(JSON.stringify(pattern.jsonFileData));
+					var localData = JSON.parse(JSON.stringify(pattern.jsonFileData || {}));
 
 					var allData = pattern_assembler.merge_data(globalData, localData);
 					allData = pattern_assembler.merge_data(allData, paramData);
 
+					//if partial has style modifier data, replace the styleModifier value
+					if(pattern.stylePartials && pattern.stylePartials.length > 0){
+						style_modifier_hunter.consume_style_modifier(partialPattern, pMatch, patternlab);
+					}
+
 					//extend pattern data links into link for pattern link shortcuts to work. we do this locally and globally
 					allData.link = extend({}, patternlab.data.link);
 

builder/pattern_assembler.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.14.0 - 2015 
- * 
+/*
+ * patternlab-node - v0.14.0 - 2015
+ *
  * Brian Muenzenmeyer, and the web community.
- * Licensed under the MIT license. 
- * 
- * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. 
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
  *
  */
 
@@ -24,19 +24,19 @@
 
     // returns any patterns that match {{> value:mod }} or {{> value:mod(foo:"bar") }} within the pattern
     function findPartialsWithStyleModifiers(pattern){
-      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?!\()(\:[A-Za-z0-9-]+)+(?:(| )\(.*)?([ ])?}}/g);
+      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?!\()(\:[A-Za-z0-9-_]+)+(?:(| )\(.*)?([ ])?}}/g);
       return matches;
     }
 
     // returns any patterns that match {{> value(foo:"bar") }} or {{> value:mod(foo:"bar") }} within the pattern
     function findPartialsWithPatternParameters(pattern){
-      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)+([ ])?}}/g);
+      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-_]+)?(?:(| )\(.*)+([ ])?}}/g);
       return matches;
     }
 
-    //find and return any {{> template-name }} within pattern
+    //find and return any {{> template-name* }} within pattern
     function findPartials(pattern){
-      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g);
+      var matches = pattern.template.match(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-_]+)?(?:(| )\(.*)?([ ])?}}/g);
       return matches;
     }
 
@@ -145,6 +145,12 @@
       //add the raw template to memory
       currentPattern.template = fs.readFileSync(file, 'utf8');
 
+      //find any stylemodifiers that may be in the current pattern
+      currentPattern.stylePartials = findPartialsWithStyleModifiers(currentPattern);
+
+      //find any pattern parameters that may be in the current pattern
+      currentPattern.parameteredPartials = findPartialsWithPatternParameters(currentPattern);
+
       //add currentPattern to patternlab.patterns array
       addPattern(currentPattern, patternlab);
     }
@@ -157,11 +163,13 @@
       ph = require('./parameter_hunter'),
       pph = require('./pseudopattern_hunter'),
       lih = require('./list_item_hunter'),
+      smh = require('./style_modifier_hunter'),
       path = require('path');
 
       var parameter_hunter = new ph(),
       lineage_hunter = new lh(),
       list_item_hunter = new lih(),
+      style_modifier_hunter = new smh(),
       pseudopattern_hunter = new pph();
 
       //find current pattern in patternlab object using var file as a key
@@ -198,7 +206,8 @@
 
         //do something with the regular old partials
         for(i = 0; i < foundPatternPartials.length; i++){
-          var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
+          var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(:[A-z-_]+)?(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
+
           var partialPath;
 
           //identify which pattern this partial corresponds to
@@ -215,7 +224,14 @@
 
           //complete assembly of extended template
           var partialPattern = getpatternbykey(partialKey, patternlab);
+
+          //if partial has style modifier data, replace the styleModifier value
+          if(currentPattern.stylePartials && currentPattern.stylePartials.length > 0){
+            style_modifier_hunter.consume_style_modifier(partialPattern, foundPatternPartials[i], patternlab);
+          }
+
           currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate);
+
         }
 
       }

builder/style_modifier_hunter.js

@@ -0,0 +1,41 @@
+/*
+ * patternlab-node - v0.14.0 - 2015
+ *
+ * Brian Muenzenmeyer, and the web community.
+ * Licensed under the MIT license.
+ *
+ * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.
+ *
+ */
+
+(function () {
+	"use strict";
+
+	var style_modifier_hunter = function(){
+
+		function consumestylemodifier(pattern, partial, patternlab){
+				
+				//extract the classname from the stylemodifier which comes in the format of :className
+        var styleModifier = partial.match(/:([\w\-_])+/g) ? partial.match(/:([\w\-_])+/g)[0].slice(1) : null;
+        if(styleModifier){
+
+          if(patternlab.config.debug){
+            console.log('found partial styleModifier within pattern ' + pattern.key);
+          }
+
+					//replace the stylemodifier placeholder with the class name
+					pattern.extendedTemplate = pattern.extendedTemplate.replace('{{styleModifier}}', styleModifier);
+        }
+		}
+
+		return {
+			consume_style_modifier: function(pattern, partial, patternlab){
+				consumestylemodifier(pattern, partial, patternlab);
+			}
+		};
+
+	};
+
+	module.exports = style_modifier_hunter;
+
+}());

gulpfile.js

@@ -42,7 +42,8 @@ gulp.task('banner', function(){
     './builder/pattern_exporter.js',
     './builder/pattern_assembler.js',
     './builder/pseudopattern_hunter.js',
-    './builder/list_item_hunter.js'
+    './builder/list_item_hunter.js',
+    './builder/style_modifier_hunter.js'
   ])
     .pipe(strip_banner())
     .pipe(header( banner, {