csster 1.2.0 → 1.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 49e218f2e03cfc824d645e24a282a3108bb8ce63
-  data.tar.gz: 4ac80fbca170a31ef84d3e82d78f6a070d052856
+  metadata.gz: 4346d10b45afa599e70155d7b400416b78421696
+  data.tar.gz: e37d54be1ad7079244f2e627f99cf772781694ca
 SHA512:
-  metadata.gz: 8f79414e804667b33edf7ab88ef34eb06a53911debd1f96d64cbec907cb9ea714b5259cf05db3925b725935e064f04873a8e974af3a9e3507c323dee8208ab7d
-  data.tar.gz: e9b56552eb9ba9e07a0fd6c79086bf0f0d41fd570a15863d28a1327fc41236ac2fa86a9efb9a25e074d815da0c8e3870373c109f1423394c47941838e8b86bd6
+  metadata.gz: 65a58688bcda5f312fd6bc28c5436d7a8d4ab2fdd969930e5445e374c893d663d63ef4ee5f8fe193715fab1ba3c1eb91621e41c1c6523f19cbab6333edaf33a0
+  data.tar.gz: 8cf3e1869bd77e321fe8ae290f30485fbc75341ca5c9bd69dacd1bf9014660a217130fd56258f183fa9019c9bbe0bf665c6a2242f20b8414393c6520f20ca07c

data/README.md

@@ -8,7 +8,7 @@ Concisely generate CSS style rules within Javascript.  Features:
 
 * standard "object literal"/JSON format with good editor support
 * nesting to DRY up stylesheets
-* color functions like <code>darken</code> and <code>saturate</code>
+* color functions like `darken` and `saturate`
 * built-in macros for common CSS idioms like *clearfix*, *rounded corners*, *drop shadows*.
 * extension points for custom behavior or cross-browser support.
 * and all the plain old Javascript behavior: functions, data structures, looping, Math operations, etc.
@@ -59,42 +59,49 @@ The result is inserted in DOM automatically at the bottom of the &lt;head&gt; el
 
 ```html
 ...
-&lt;style type="text/stylesheet"&gt;
+<style type="text/stylesheet">
 h1 {
 font-size: 18px;
 color: red;
 }
-&lt;/style&gt;
-&lt;/head&gt;
+</style>
+</head>
 ...
 ```
 
-### Format of CSS Rules
+### Node Usage
 
-The *style* method accepts CSS rules passed either as arrays or hashes, arrays just being
+`Csster.buildCss` accepts arrays or hashes of rules and returns a text string of the Css rules.
+The caller is responsible for writing to the browser.
+
+
+### Building CSS Rules
+
+The `Csster.style` method accepts CSS rules passed either as arrays or hashes, arrays just being
 a way to order the hashes. For example:
 
-<pre>
-{
+```javascript
+Csster.style({
     ul: {
       margin: 5,
       padding: 0,
     }
     'ul li:first': {
-      paddingLeft: 20px
+      paddingLeft: '20px'
     }
 }
-</pre>
+```
 
 Note that
 
-* property names are automatically converted to hyphenated format from camelcase, so in many cases you can omit the quotation marks. ('float' needs to quoted since it's a reserved word.)
-* all raw numbers are assumed to be "pixels" (or "px"), and rendered as such.
+* property names are automatically converted to hyphenated format from camelCase, so in many cases you can omit the quotation marks. (`float` needs to quoted since it's a reserved word.)
+* most raw numbers are assumed to be "pixels" (or "px"), and rendered as such. A heuristic helps in this, skipping `opacity`, `z-index`, etc.
 * any sort of selectors are allowed... they are just passed through to the stylesheet.
 
 #### Nesting
 Csster supports nesting of rules to keep things more concise:
-<pre>
+
+```javascript
 {
     ul: {
       margin: 5,
@@ -106,65 +113,92 @@ Csster supports nesting of rules to keep things more concise:
       }
     }
 }
-</pre>
+```
 
 The "li" property in this case might be a selector or might be a property name. A list of valid
 property names is used to identify properties right now, and otherwise it's considered a sub-selector.
 
-Csster supports SASS's "&" operator, to indicate that the selector should be combined with the parent selector.
+Csster supports SASS's `&` operator, to indicate that the selector should be combined with the parent selector.
 Instead of the default "any descendent" space character being inserted, no space is inserted.
 
 Combined rules (with commas) are expanded as expected, so nested rules with commas have their parents expanded.
 
 
+#### Functions
+Most manipulations you'll want don't require any special syntax. They will fall into 
+Javascript's language support, as far as any math or looping. 
+Use Javascript to write necessary functions! Include them directly in the 
+CSS rule definitions.
 
 
-#### Functions
-Most manipulations will fall into Javascript's language support, as far as any math or looping. Use Javascript to write necessary functions.
+#### Colors
 
-functions/color.es6 contains SASS-like color functions mixed into the base String object:
+Colors can be particularly brittle in CSS, so color conversion functions are included. 
+The easiest way to enable this is to call:
+ 
+    Csster.colorizeString()
+    
+Now the `String` prototype will include SASS-like color functions:
 
-*  <code>"#ab342c".darken(%)</code> -- make color darker by given percent
-*  <code>"#ab342c".lighten(%)</code> -- make color lighter by given percent
-*  <code>"#ab342c".saturate(%)</code>  -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that <code>"#ab342c".saturate(-100)</code> renders in grayscale.
+*  `"#ab342c".darken(%)` -- make color darker by given percent
+*  `"#ab342c".lighten(%)` -- make color lighter by given percent
+*  `"#ab342c".saturate(%)`  -- make color more saturated by given percent. To *desaturate*, use negative values for the percent. Note that `"#ab342c".saturate(-100)` renders in grayscale.
 
 There are also color conversion routines if you want to build your own manipulation.
 
-*  <code>"#ab342c".toRGB()</code>
-*  <code>"#ab342c".toHSL()</code>
-*  <code>Csster.hslToHexColor(h,s,l)</code>
+*  `"#ab342c".toRGB()`
+*  `"#ab342c".toHSL()`
+*  `Csster.hslToHexColor(h,s,l)`
 
 Opacity is currently not supported by the color model.
 
-#### Macros using "has" key
+### Macros
+
+Although the Javascript language probably offers enough flexibility for most of what you 
+want, macros are also a core part of Csster.
+
+#### Pre-build Macros
 
 There are a host of pre-made macros that may be useful:
 
-* <code>roundedCorners(radius)</code> -- add rounded corners on all sides
-* <code>roundedCorners(side, radius)</code> -- add rounded corners on specified side: <code>'top'</code>, <code>'left'</code>, <code>'bottom'</code> or <code>'right'</code>
-* <code>roundedCorners(corner, radius)</code> -- add rounded corners to a specified corner: <code>'tl'</code>, <code>'tr'</code>, <code>'bl'</code> or <code>'br'</code>
-* <code>imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0)</code> -- phark image replacement with optional background image offset.
-* <code>boxShadow([xoffset, yoffset], radius, color)</code>
-* <code>verticalCentering(height)</code> and <code>horizontalCentering(width)</code> -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
-* <code>clearfix()</code> -- standard clearfix
+* `roundedCorners(radius)` -- add rounded corners on all sides
+* `roundedCorners(side, radius)` -- add rounded corners on specified side: `'top'`, `'left'`, `'bottom'` or `'right'`
+* `roundedCorners(corner, radius)` -- add rounded corners to a specified corner: `'tl'`, `'tr'`, `'bl'` or `'br'`
+* `imageReplacement(width, height, img, imgXPosition=0, imgYPosition=0)` -- phark image replacement with optional background image offset.
+* `boxShadow([xoffset, yoffset], radius, color)`
+* `verticalCentering(height)` and `horizontalCentering(width)` -- center using the top 50% / margin-top -width/2 technique. See http://stackoverflow.com/questions/148251/css-centering-tricks
+* `clearfix()` -- standard clearfix
 
-To "mix these in", use the "has" key:
+#### Using macros with the "has" or "mixin" key
 
-<pre>
-{
-    'div#featured_box': {
-      backgroundColor: '#394c89',
-      has: roundedCorner(5)
+To "mix these in", use the `has`, `mixin` or `mixins` key:
+
+    {
+        'div#featured_box': {
+          backgroundColor: '#394c89',
+          has: roundedCorner(5)
+        }
     }
-}
-</pre>
 
-Multiple macros can be included by making that a list, eg. <code>has: [roundedCorners(5), dropShadow()]</code>.
+Multiple macros can be included by making that a list, eg. `has: [roundedCorners(5), dropShadow()]`.
+
+#### Macros fake property names
+
+You can also make these _pseudo properties_ using the `Csster.setMacro` method. For example,
+
+    Csster.setMacro('roundedCorners', (px) => { return { borderRadius: px } })
+    
+As you might expect, this defines a property that is rendered with the given function. Therefore:
+
+    ...
+    Csster.style({ div: roundedCorners: 5 })
+
+#### Writing Macros
 
-It's all Javascript, so macros and more complex functions are easy to write. To mix in a set of values, create a function
-that returns a hash of values, for example:
+It's all Javascript, so macros and more complex functions are easy to write. 
+To mix in a set of values, create a function that returns a hash of values, for example:
 
-<pre>
+```javascript
     function roundedCorners(radius) {
         return {
             '-webkit-border-radius': radius,
@@ -172,21 +206,38 @@ that returns a hash of values, for example:
             'border-radius': radius
         }
     }
-</pre>
+```
+
+A macro's properties will be overwritten  similar to how the cascade takes the last defined value: later ones override earlier ones.
+
+
+## Verification
+
+By default, property names are validated against recent HTML specs. 
+The build-in tool rejects non-standard property names, 
+although by default popular "-moz" and "-webkit" properties are added.
+Use `Csster.addPropertyNames` to supplement property names it might not
+consider valid.
+
+At this time of history, though, validation is not necessarily what you want.
+To turn this off, use:
+
+    Csster.propertyNameValidator.setConfig('strictNames', false)
 
-A macro's properties will be overwritten by properties within including selector (or later included macros), similar to how the cascade takes the last defined value.
+By default, any browser extension property (such as `-moz-boo`) is allowed. To
+restrict this, turn on the validation:
+
+    Csster.propertyNameValidator.setConfig('anyBrowserExtension', false)
 
 
 ## jQuery Integration
 
-If jQuery is loaded first, Csster provides a "csster" method:
+If jQuery is loaded before Csster, it provides a "csster" plugin:
 
-<pre>
-   $('.sidebar').csster({ border: '5px solid green', padding: 10 });
-</pre>
+    $('.sidebar').csster({ border: '5px solid green', padding: 10 });
 
 As expected, this adds a rule to the document with the ".sidebar" selector.
-In general, this can be called identically to the <code>css()</code> function.
+In general, this can be called identically to the `css()` function.
 This is useful is the DOM on the page is dynamic and when a rule is more efficient than applying
 a style repeatedly to all the DOM nodes.
 
@@ -196,40 +247,8 @@ nothing is done to convert or report unsupported selectors (just like regular CS
 
 ## Extending Csster
 
-Csster is built as an extensible system.
-
-### Adding Custom Property Names
-Use <code>Csster.addPropertyNames</code> to add any non-standard property names you'd like to be considered valid. The build-in tool rejects non-standard property names, although by default popular "-moz" and "-webkit" properties are added.
-
-### Pre-process rules
-<del>Functions called before properties are processed stored in <code>Csster.propertyPreprocessors</code>. Callback is provided a hash of properties to values, which it modifies in any way it wants. This is used to interpret macros.</del>
-
-<del>### Post-processing
-Functions called after rules are processed stored in <code>Csster.rulesPostProcessors</code>. Called with an array of processed rules. Can be used to eliminate duplicates, modify selectors, etc. Standard list simplifies overly complex selectors with multiple IDs.
-
-A convenient built-in function is <code>compressSelectors</code>. Using this processor, rules with multiple '#'s are simplified. For example, '#a #b #c' becomes '#c'. Usually this is what you will want, so include it with <code>Csster.rulePostProcessors.push(Csster.compressSelectors);</code>.
-
-This is used to write custom browser overrides. For example, this one makes opacity work for IE:
-
-<pre>
-  Csster.rulesPostProcessors.push(function ieOpacity(rules) {
-    // http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
-    if (Csster.browserInfo().msie) {
-      for (var i = 0; i &lt; rules.length; i++) {
-        var rule = rules[i];
-        var value = rule.props['opacity']
-        if (value) {
-          value = Math.round(value * 100.0);
-          rules[i].props['filter'] = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + value + ')';
-        }
-      }
-    }
-  });
-</pre>
-</del>
-
 ### Inserting into the DOM
-Function that outputs a set of rules into the DOM is <code>Csster.insertCss</code> and can be replaced if desired.
+Function that outputs a set of rules into the DOM is `Csster.insertCss` and can be replaced if desired.
 
 ## V2.0 Changes
 
@@ -241,6 +260,7 @@ Function that outputs a set of rules into the DOM is <code>Csster.insertCss</cod
 ### Other changes:
 
 * use ES6 for implementation and provide a more compressed and clean script.
+* fake-property-based macros
 * add ability to turn off property name validation.
 * add ability to warn about unknown browser extensions for property names.
 
@@ -269,10 +289,10 @@ Function that outputs a set of rules into the DOM is <code>Csster.insertCss</cod
 2. Update `bin/build.sh#2` `VERSION=` code.
 3. `bin/build.sh`
 4. `rake build`
-5. `rake checkin`
+5. `git checkin...`
 6. `rake push...`
-7. `rake release`
-8. `npm publish`
+7. `rake release` # Ruby Gem
+8. `npm publish`  # Node module
 
 
 ### TDD

data/lib/csster/version.rb

@@ -1,3 +1,3 @@
 module Csster
-  VERSION = "1.2.0"
+  VERSION = "1.3.0"
 end

data/vendor/assets/javascripts/csster.js

@@ -1,4 +1,4 @@
-// Csster version 1.2.0; Copyright (c) Andrew J. Peterson / ndpsoftware.com. All Rights Reserved
+// Csster version 1.3.0; Copyright (c) Andrew J. Peterson / ndpsoftware.com. All Rights Reserved
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
 		module.exports = factory();
@@ -104,6 +104,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var macros = _interopRequireWildcard(_macros);
 
+	var _macroProcessor = __webpack_require__(12);
+
 	var _array = __webpack_require__(9);
 
 	var _browser = __webpack_require__(27);
@@ -126,14 +128,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	  insertCss: _insertCss2.default,
 	  style: style,
 	  macros: macros,
+	  setMacro: _macroProcessor.setMacro,
 	  arrayFlatten: _array.arrayFlatten,
 	  browserInfo: _browser.browserInfo,
 	  hslToHexColor: _color.hslToHexColor,
-	  addPropertyNames: addPropertyNames
+	  addPropertyNames: addPropertyNames,
+	  propertyNameValidator: propertyNameValidator,
+	  colorizeString: _color.colorizeString
 	};
 
-	(0, _color.colorizeString)();
-
 /***/ },
 /* 4 */
 /***/ function(module, exports, __webpack_require__) {
@@ -168,12 +171,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.rejectUnknownPropertyKeys = exports.dasherizePropertyKeys = undefined;
+	exports.dasherizePropertyKeys = undefined;
 
-	exports.default = function (obj) {
+	exports.default = function (objOrArray) {
+	  var a = (0, _array.arrayFlatten)([objOrArray]);
 	  var rules = [];
-	  (0, _array.arrayEach)((0, _array.arrayFlatten)([obj]), function (o) {
-	    rules.push(objectToRulesArray(process(o)));
+	  (0, _array.arrayEach)(a, function (o) {
+	    return rules.push(objectToRulesArray(process(o)));
 	  });
 	  return (0, _array.arrayFlatten)(rules);
 	};
@@ -190,8 +194,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var _properties = __webpack_require__(13);
 
-	var applyMacros = (0, _object.filterValuesRecursively)(_macroProcessor.macroProcessor);
-
 	// @param cssRule { selector: { prop1: value, prop2: value, subselector: { prop3: value}}
 	var objectToRulesArray = function objectToRulesArray(o) {
 	  var result = [];
@@ -203,9 +205,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	var dasherizePropertyKeys = exports.dasherizePropertyKeys = (0, _object.filterValuesRecursively)(_properties.dasherizeKeys);
 
-	var rejectUnknownPropertyKeys = exports.rejectUnknownPropertyKeys = (0, _object.filterValuesRecursively)(_properties.rejectUnknownKeys);
+	var log = function log(x) {
+	  console.log(x);return x;
+	};
 
-	var process = (0, _fn.compose)(rejectUnknownPropertyKeys, dasherizePropertyKeys, _cssObject.compressSelectors, _cssObject.flattenObject, applyMacros);
+	var process = (0, _fn.compose)(_properties.rejectUnknownPropertyKeys, dasherizePropertyKeys,
+	//compressSelectors,
+	_cssObject.flattenObject, _macroProcessor.macroProcessor);
 
 	;
 	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(6)))
@@ -316,7 +322,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.filterValuesRecursively = exports.applyToKeys = exports.mergeHashInto = undefined;
+	exports.filterObjectsRecursively = exports.filterValuesRecursively = exports.visitChildren = exports.applyToKeys = exports.mergeHashInto = undefined;
 
 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
 
@@ -341,6 +347,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	// fn:  (key) => new key
 	// o:   object to filter
 	var applyToKeys = exports.applyToKeys = (0, _fn.curry)(function (fn, o) {
+	  if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
 	  var out = {};
 	  for (var k in o) {
 	    out[fn(k)] = o[k];
@@ -348,19 +355,42 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return out;
 	});
 
+	var visitChildren = exports.visitChildren = (0, _fn.curry)(function (fn, o) {
+	  if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) == 'object') {
+	    for (var key1 in o) {
+	      if (_typeof(o[key1]) == 'object') {
+	        fn(o[key1], key1);
+	      }
+	    }
+	  }
+	  return o;
+	});
+
 	// Filter values of an object, recursively
 	// fn: fn(value, key) => new value
 	// o:  object to process
 	var filterValuesRecursively = exports.filterValuesRecursively = (0, _fn.curry)(function (fn, o) {
+	  if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
+
 	  var out = {};
-	  for (var k in o) {
-	    var v = o[k];
-	    var newValue = fn(v, k);
+	  for (var key in o) {
+	    var newValue = fn(o[key], key);
+	    if ((typeof newValue === 'undefined' ? 'undefined' : _typeof(newValue)) == 'object') {
+	      newValue = filterValuesRecursively(fn, newValue);
+	    }
+	    out[key] = newValue;
+	  }
+	  return out;
+	});
 
-	    if ((typeof newV === 'undefined' ? 'undefined' : _typeof(newV)) === 'object') {
-	      out[k] = filterValuesRecursively(fn, newValue);
-	    } else {
-	      out[k] = newValue;
+	// Filter values of an object, recursively
+	// fn: fn(value, key) => new value
+	// o:  object to process
+	var filterObjectsRecursively = exports.filterObjectsRecursively = (0, _fn.curry)(function (fn, o) {
+	  var out = fn(o);
+	  for (var key in out) {
+	    if (_typeof(out[key]) == 'object') {
+	      out[key] = filterObjectsRecursively(fn, out[key]);
 	    }
 	  }
 	  return out;
@@ -456,11 +486,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return false;
 	}
 
+	function map(fn, obj) {
+	  var result = [];
+	  if (isArray(obj)) {
+	    for (var i = 0; i < obj.length;) {
+	      result.push(fn(obj[i], i++));
+	    }
+	  } else {
+	    result = fn(obj);
+	  }
+	  return result;
+	}
+
 	exports.isArray = isArray;
 	exports.arrayEach = arrayEach;
 	exports.arrayInject = arrayInject;
 	exports.arrayFlatten = arrayFlatten;
 	exports.includes = includes;
+	exports.map = map;
 
 /***/ },
 /* 10 */
@@ -552,23 +595,31 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ },
 /* 11 */
-/***/ function(module, exports) {
+/***/ function(module, exports, __webpack_require__) {
 
-	"use strict";
+	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	// S T R I N G s
-	var dasherize = function dasherize(s) {
+	exports.trim = exports.dasherize = undefined;
+
+	var _fn = __webpack_require__(8);
+
+	var onString = (0, _fn.curry)(function (fn, s) {
+	  if (typeof s === 'string') return fn(s);else return s;
+	}); // S T R I N G s
+
+
+	var dasherize = onString(function (s) {
 	  return s.replace(/([A-Z])/g, function ($1) {
 	    return "-" + $1.toLowerCase();
 	  });
-	};
+	});
 
-	var trim = function trim(text) {
+	var trim = onString(function (text) {
 	  return (text || "").replace(/^(\s|\u00A0)+|(\s|\u00A0)+$/g, "");
-	};
+	});
 
 	exports.dasherize = dasherize;
 	exports.trim = trim;
@@ -582,55 +633,64 @@ return /******/ (function(modules) { // webpackBootstrap
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.setMacroKeys = setMacroKeys;
-	exports.macroProcessor = macroProcessor;
+	exports.macroProcessor = undefined;
+
+	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
+	exports.setMacro = setMacro;
 	exports.isMacroKey = isMacroKey;
 
 	var _object = __webpack_require__(7);
 
 	var _array = __webpack_require__(9);
 
-	var macroKeys = ['has', 'mixin', 'mixins'];
-	function setMacroKeys(keys) {
-	  macroKeys = keys;
-	}
+	var macroKeys = {
+	  'has': inLineIt,
+	  'mixin': inLineIt,
+	  'mixins': inLineIt
+	};
 
-	function macroProcessor(properties) {
+	function setMacro(key, fn) {
+	  macroKeys[key] = fn;
+	}
 
-	  function applyMacros(macroList) {
+	function isMacroKey(k) {
+	  return !!macroKeys[k];
+	}
 
-	    var props = {};
+	// Simplest macro just inlines
+	function inLineIt() {
+	  var expanded = {};
 
-	    var macros = (0, _array.arrayFlatten)([macroList]); // support single or multiple sets of properties
-	    for (var i = 0; i < macros.length; i++) {
-	      var macro = macros[i];
-	      if (typeof macro == 'function') macro = macro();
-	      for (var mp in macro) {
-	        if (isMacroKey(mp)) {
-	          (0, _object.mergeHashInto)(props, applyMacros(macro[mp]));
-	        } else {
-	          props[mp] = macro[mp];
-	        }
-	      }
-	    }
-	    return props;
+	  for (var _len = arguments.length, value = Array(_len), _key = 0; _key < _len; _key++) {
+	    value[_key] = arguments[_key];
 	  }
 
-	  for (var k in properties) {
-	    if (isMacroKey(k)) {
-	      var macros = properties[k];
-	      delete properties[k];
-	      if (macros) {
-	        (0, _object.mergeHashInto)(properties, applyMacros(macros));
+	  (0, _array.map)(function (val) {
+	    if (typeof val == 'function') val = val();
+	    (0, _object.mergeHashInto)(expanded, val);
+	  }, value);
+	  return expanded;
+	}
+
+	function process(o) {
+
+	  if ((typeof o === 'undefined' ? 'undefined' : _typeof(o)) !== 'object') return o;
+
+	  var result = {};
+	  for (var key in o) {
+	    var value = o[key];
+	    if (isMacroKey(key)) {
+	      var expanded = macroKeys[key].apply(null, (0, _array.isArray)(value) ? value : [value]);
+	      (0, _object.mergeHashInto)(result, process(expanded)); // Recurse
+	    } else {
+	        result[key] = value;
 	      }
-	    }
 	  }
-	  return properties;
+	  return result;
 	}
 
-	function isMacroKey(k) {
-	  return (0, _array.includes)(macroKeys, k);
-	}
+	var macroProcessor = exports.macroProcessor = (0, _object.filterObjectsRecursively)(process);
 
 /***/ },
 /* 13 */
@@ -641,33 +701,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.rejectUnknownKeys = exports.dasherizeKeys = undefined;
+	exports.rejectUnknownPropertyKeys = exports.dasherizeKeys = undefined;
 
 	var _string = __webpack_require__(11);
 
 	var _object = __webpack_require__(7);
 
-	var _fn = __webpack_require__(8);
-
 	var _propertyNameValidator = __webpack_require__(14);
 
 	var propertyNameValidator = _interopRequireWildcard(_propertyNameValidator);
 
+	var _object2 = __webpack_require__(7);
+
 	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 	var dasherizeKeys = exports.dasherizeKeys = (0, _object.applyToKeys)(_string.dasherize);
 
-	var propertyKeyVisitor = (0, _fn.curry)(function (fn, rules, ctx) {
+	var rejectUnknownPropertyKeys = exports.rejectUnknownPropertyKeys = (0, _object2.visitChildren)(function (rules, selector) {
 	  for (var prop in rules) {
-	    fn(prop, ctx);
-	  }
-	  return rules;
-	});
-
-	var rejectUnknownKeys = exports.rejectUnknownKeys = propertyKeyVisitor(function (prop, ctx) {
-	  var error = propertyNameValidator.error(prop);
-	  if (error) {
-	    throw '' + error + '. Context: "' + ctx + '"';
+	    var error = propertyNameValidator.error(prop);
+	    if (error) {
+	      throw '' + error + '. Context: "' + selector + '"';
+	    }
 	  }
 	});
 
@@ -682,7 +737,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	});
 	exports.setConfig = setConfig;
 	exports.addNames = addNames;
-	exports.validate = validate;
 	exports.error = error;
 
 	var _array = __webpack_require__(9);
@@ -697,9 +751,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	  config[key] = value;
 	}
 
-	/**
-	 * Add more valid properties to the list of valid property names.
-	 */
 	function addNames() {
 	  for (var _len = arguments.length, propertyNames = Array(_len), _key = 0; _key < _len; _key++) {
 	    propertyNames[_key] = arguments[_key];
@@ -732,10 +783,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	  }
 	}
 
-	function validate(name) {
-	  return !error(name) ? name : null;
-	}
-
 	function error(name) {
 	  if (/^\-\w+\-/.exec(name)) {
 	    if (!config.anyBrowserExtension && !validNames[name]) {
@@ -792,11 +839,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	  return Object.keys(props).reduce(function (s, p) {
 	    return s + propertyEntry.format(p, props[p]);
 	  }, '');
-	};
-
-	// Rule: object with `sel` and `props` keys.
+	}; // Rule: object with `sel` and `props` keys.
 	// .sel is the selector
 	// .props in an object holding CSS property rules
+
 	var format = exports.format = function format(rule) {
 	  return rule.sel + ' { ' + formatProperties(rule.props) + " }\n";
 	};
@@ -808,7 +854,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	'use strict';
 
 	Object.defineProperty(exports, "__esModule", {
-	  value: true
+	    value: true
 	});
 	exports.format = undefined;
 
@@ -822,12 +868,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
-	var format = function format(name, value) {
-	  return propertyName.format(name) + ": " + propertyValue.format(value, name) + ";\r";
+	var format = exports.format = function format(name, value) {
+	    return propertyName.format(name) + ": " + propertyValue.format(value, name) + ";\r";
 	};
 
-	exports.format = format;
-
 /***/ },
 /* 18 */
 /***/ function(module, exports, __webpack_require__) {
@@ -853,7 +897,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	var propertyNameOf = exports.propertyNameOf = function propertyNameOf(p) {
 	  var name = (0, _string.dasherize)(p);
-	  return propertyNameValidator.validate(name);
+	  return !propertyNameValidator.error(name) ? name : null;
 	};
 
 	var format = exports.format = function format(name) {
@@ -872,14 +916,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	  value: true
 	});
 
-	var format = function format(value, name) {
-	  if (value && typeof value == 'number' && name != 'z-index' && name != 'opacity' && name != 'zoom') {
-	    return '' + value + 'px';
-	  }
-	  return value;
-	};
 
-	exports.format = format;
+	var unitlessProperties = ['z-index', 'opacity', 'zoom'];
+
+	var format = exports.format = function format(value, name) {
+	  var appendPx = value && typeof value == 'number' && unitlessProperties.indexOf(name) == -1;
+	  return '' + value + (appendPx ? 'px' : '');
+	};
 
 /***/ },
 /* 20 */

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: csster
 version: !ruby/object:Gem::Version
-  version: 1.2.0
+  version: 1.3.0
 platform: ruby
 authors:
 - Andrew Peterson
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-03-04 00:00:00.000000000 Z
+date: 2016-03-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties