From 03b6b883056e2cfe71994b19732ce69ead4a3c07 Mon Sep 17 00:00:00 2001
From: renatoi <renatoi@yahoo-inc.com>
Date: Mon, 27 Apr 2015 17:04:47 -0700
Subject: [PATCH] Fixes #179

---
 src/atomizer.js   | 36 ++++++++++++++++++++++---
 tests/atomizer.js | 68 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 100 insertions(+), 4 deletions(-)

diff --git a/src/atomizer.js b/src/atomizer.js
index cd52d12a..d39a2f74 100644
--- a/src/atomizer.js
+++ b/src/atomizer.js
@@ -287,7 +287,35 @@ Atomizer.prototype.parseConfig = function (config/*:AtomizerConfig*/, options/*:
                         }
                     }
                     if (value !== null) {
-                        treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value);
+                        // value could be an object for custom classes with breakPoints
+                        // e.g.
+                        // 'custom': {
+                        //     'P($gutter)': {
+                        //         default: '10px',
+                        //         sm: '12px',
+                        //         md: '14px',
+                        //         lg: '20px'
+                        //     }
+                        // }
+                        if (_.isObject(value)) {
+                            Object.keys(value).forEach(function (bp) {
+                                // don't continue if we can't find the breakPoint in the declaration
+                                if (!config.hasOwnProperty('breakPoints') || !config.breakPoints.hasOwnProperty(bp)) {
+                                    return;
+                                }
+                                treeo.declarations[config.breakPoints[bp]] = {};
+                                treeo.declarations[config.breakPoints[bp]][prop] = treeo.declarations[prop].replace('$' + index, value[bp]);
+                            });
+                            // handle default value in the custom class
+                            if (!value.hasOwnProperty('default')) {
+                                // default has not been passed, make sure we delete it
+                                delete treeo.declarations[prop];
+                            } else {
+                                treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value.default);
+                            }
+                        } else {
+                            treeo.declarations[prop] = treeo.declarations[prop].replace('$' + index, value);
+                        }
                     } else {
                         treeo.declarations = null;
                     }
@@ -359,9 +387,6 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
         ie: false
     }, options);
 
-    // make sense of the config
-    tree = this.parseConfig(config, options);
-
     // validate config.breakPoints
     if (config && config.breakPoints) {
         if (!_.isObject(config.breakPoints)) {
@@ -379,6 +404,9 @@ Atomizer.prototype.getCss = function (config/*:AtomizerConfig*/, options/*:CSSOp
         }
     }
 
+    // make sense of the config
+    tree = this.parseConfig(config, options);
+
     // write JSS
     // start by iterating rules (we need to follow the order that the rules were declared)
     this.rules.forEach(function (rule) {
diff --git a/tests/atomizer.js b/tests/atomizer.js
index 6a2a2888..d4effe39 100644
--- a/tests/atomizer.js
+++ b/tests/atomizer.js
@@ -172,6 +172,74 @@ describe('Atomizer()', function () {
         });
     });
     describe('getCss()', function () {
+        it ('returns expected css for custom classes with break points', function () {
+            // set rules here so if helper change, we don't fail the test
+            var atomizer = new Atomizer();
+            var config = {
+                breakPoints: {
+                    sm: '@media screen and (min-width:700px)',
+                    md: '@media screen and (min-width:999px)',
+                    lg: '@media screen and (min-width:1200px)'
+                },
+                custom: {
+                    'P($gutter)': {
+                        default: '10px',
+                        sm: '16px',
+                        md: '20px',
+                        lg: '24px'
+                    }
+                },
+                classNames: ['P($gutter)']
+            };
+            var expected = [
+                '.P\\(\\$gutter\\) {',
+                '  padding: 10px;',
+                '}',
+                '@media screen and (min-width:700px) {',
+                '  .P\\(\\$gutter\\) {',
+                '    padding: 16px;',
+                '  }',
+                '}',
+                '@media screen and (min-width:999px) {',
+                '  .P\\(\\$gutter\\) {',
+                '    padding: 20px;',
+                '  }',
+                '}',
+                '@media screen and (min-width:1200px) {',
+                '  .P\\(\\$gutter\\) {',
+                '    padding: 24px;',
+                '  }',
+                '}\n'
+            ].join('\n');
+            var result = atomizer.getCss(config, {ie: true});
+            expect(result).to.equal(expected);
+        });
+        it ('returns expected css for custom classes with break points with missing breakPoints', function () {
+            // set rules here so if helper change, we don't fail the test
+            var atomizer = new Atomizer();
+            var config = {
+                breakPoints: {
+                    sm: '@media screen and (min-width:700px)'
+                },
+                custom: {
+                    'P($gutter)': {
+                        sm: '16px',
+                        md: '20px',
+                        lg: '24px'
+                    }
+                },
+                classNames: ['P($gutter)']
+            };
+            var expected = [
+                '@media screen and (min-width:700px) {',
+                '  .P\\(\\$gutter\\) {',
+                '    padding: 16px;',
+                '  }',
+                '}\n'
+            ].join('\n');
+            var result = atomizer.getCss(config, {ie: true});
+            expect(result).to.equal(expected);
+        });
         it ('returns css by reading an array of class names', function () {
             var atomizer = new Atomizer();
             var config = {