support for multiple classes on stylemodifier

closes #186

Author: bmuenzenmeyer

CHANGELOG

@@ -2,7 +2,8 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
 PL-node-v0.15.1
 - FIX: Resolve issue with styleModifiers not being replaced when the partial has spaces in it.
-- THX: Thanks @theorise for the issue report!
+- ADD: Support multiple styleModifier classes using the | pipe syntax
+- THX: Thanks @theorise for the issue reports!
 
 PL-node-v0.15.0
 - CHG: Updated package.json devDependencies for Node 4.X and 5.X support.

README.md

@@ -212,6 +212,11 @@ Once rendered, it looks like this:
 </div>
 ```
 
+You may also specify multiple classes using a pipe character (|).
+
+```
+{{> atoms-message:error|is-on }}
+```
 
 
 

builder/pattern_assembler.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.15.1 - 2015 
- * 
+/*
+ * patternlab-node - v0.15.1 - 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
     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;
     }
 
@@ -207,7 +207,7 @@
 
         //do something with the regular old partials
         for(i = 0; i < foundPatternPartials.length; i++){
-          var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(:[A-z-_]+)?(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
+          var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(:[A-z-_|]+)?(?:\:[A-Za-z0-9-]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
 
           var partialPath;
 
@@ -262,7 +262,7 @@
       throw 'Could not find pattern with key ' + key;
     }
 
-    
+
     function mergeData(obj1, obj2){
       if(typeof obj2 === 'undefined'){
         obj2 = {};

builder/style_modifier_hunter.js

@@ -1,10 +1,10 @@
-/* 
- * patternlab-node - v0.15.1 - 2015 
- * 
+/*
+ * patternlab-node - v0.15.1 - 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,9 +16,12 @@
 		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;
+			var styleModifier = partial.match(/:([\w\-_|])+/g) ? partial.match(/:([\w\-_|])+/g)[0].slice(1) : null;
 			if(styleModifier){
 
+				//replace the special character pipe | used to separate multiple classes with a space
+				styleModifier = styleModifier.replace(/\|/g, ' ');
+
 				if(patternlab.config.debug){
 					console.log('found partial styleModifier within pattern ' + pattern.key);
 				}

test/style_modifier_hunter_tests.js

@@ -42,6 +42,25 @@
 			test.equals(pattern.extendedTemplate, '<div class="foo bar"></div>');
 			test.done();
 		},
+		'replaces multiple style modifiers' : function(test){
+			//arrange
+			var pl = {};
+			pl.config = {};
+			pl.config.debug = false;
+
+			var pattern = {
+				extendedTemplate: '<div class="foo {{ styleModifier }}"></div>'
+			};
+
+			var style_modifier_hunter = new smh();
+
+			//act
+			style_modifier_hunter.consume_style_modifier(pattern, '{{> partial:bar|baz|dum}}', pl);
+
+			//assert
+			test.equals(pattern.extendedTemplate, '<div class="foo bar baz dum"></div>');
+			test.done();
+		},
 		'does not alter pattern extendedTemplate if styleModifier not found in partial' : function(test){
 			//arrange
 			var pl = {};