Use camelCase for property names; also test for svg-style properties

index.js

@@ -9,16 +9,31 @@ module.exports = style;
  * Return the style for `prop` using the given `selector`.
  *
  * @param {String} selector
- * @param {String} prop
- * @return {String}
+ * @param {String|Array} prop
+ * @return {String|Object}
  * @api public
  */
 
 function style(selector, prop) {
   var cache = style.cache = style.cache || {}
-    , cid = selector + ':' + prop;
+    , arr = Array.isArray(prop)
+    , props = arr ? prop : [prop];
 
-  if (cache[cid]) return cache[cid];
+  var cids = props.map(function (prop) {
+    return selector + ':' + prop;
+  });
+
+  var cached = {};
+  var missing = [];
+  props.forEach(function (prop) {
+    var cid = selector + ':' + prop;
+    if (cache[cid])
+      cached[prop] = cache[cid];
+    else
+      missing.push(prop);
+  });
+
+  if (!missing.length) return arr ? cached : cached[prop];
 
   var parts = selector.split(/ +/)
     , len = parts.length
@@ -40,7 +55,11 @@ function style(selector, prop) {
   }
 
   document.body.appendChild(root);
-  var ret = getComputedStyle(child)[prop];
+  var styles = getComputedStyle(child);
+  missing.forEach(function (prop) {
+    var cid = selector + ':' + prop;
+    cached[prop] = cache[cid] = styles.getPropertyValue(prop);
+  });
   document.body.removeChild(root);
-  return cache[cid] = ret;
-}
+  return arr ? cached : cached[prop];
+}

test/index.html

@@ -12,6 +12,7 @@
       }
       .progress .percent {
         color: #ddd;
+        stroke-linejoin: miter;
       }
       .progress .ring {
         background: #ddd;

test/unit.js

@@ -5,14 +5,27 @@
 
 var style = require('style');
 
-function assert(expr) {
-  if (!expr) throw new Error('assertion failed');
+function eql(expected, actual) {
+  if (expected == actual)
+    return
+  var err = new Error('"' + actual + '" should equal "' + expected + '"');
+  err.expected = expected;
+  err.actual = actual;
+  throw err;
 }
 
 describe('style(selector, prop)', function(){
   it('should support styling faux elements', function(){
-    assert('rgb(255, 255, 255)' == style('.progress', 'background-color'));
-    assert('rgb(221, 221, 221)' == style('.progress .percent', 'color'));
-    assert('18px' == style('.progress .percent', 'font-size'));
+    eql('rgb(255, 255, 255)', style('.progress', 'background-color'));
+    eql('rgb(221, 221, 221)', style('.progress .percent', 'color'));
+    eql('18px', style('.progress .percent', 'font-size'));
+  })
+  it('should also support svg-style properties', function(){
+    eql('miter', style('.progress .percent', 'stroke-linejoin'));
+  })
+  it('should support querying multiple props at once', function(){
+    var props = style('.progress .percent', ['font-size', 'color']);
+    eql('18px', props['font-size']);
+    eql('rgb(221, 221, 221)', props['color']);
   })
 })