jss - npm Package Compare versions

Comparing version 0.5.0 to 0.5.1

lib/support.js

+'use strict'
+
+var vendorPrefix = require('./vendorPrefix')
+
+/**
+ * We test every property on vendor prefix requirement.
+ * Once tested, result is cached. It gives us up to 70% perf boost.
+ * http://jsperf.com/element-style-object-access-vs-plain-object
+ */
+var cache = {}
+
+var p = document.createElement('p')
+
+// Prefill cache with known css properties to reduce amount of
+// properties we need to feature test.
+// http://davidwalsh.name/vendor-prefix
+;(function() {
+    var computed = window.getComputedStyle(document.documentElement, '')
+    for (var key in computed) {
+        cache[computed[key]] = false
+    }
+}())
+
+// Convert dash separated strings to camel cased.
+var camelize = (function () {
+    var regExp = /[-\s]+(.)?/g
+
+    function toUpper(match, c) {
+        return c ? c.toUpperCase() : ''
+    }
+
+    return function(str) {
+        return str.replace(regExp, toUpper)
+    }
+}())
+
+/**
+ * Test if a property is supported, returns property with vendor
+ * prefix if required, otherwise `false`.
+ *
+ * @param {String} prop
+ * @return {String|Boolean}
+ * @api private
+ */
+exports.getProp = function (prop) {
+    // We have not tested this prop yet, lets do the test.
+    if (cache[prop] == null) {
+        var camelized = vendorPrefix.js + camelize('-' + prop)
+        var dasherized = vendorPrefix.css + prop
+        // Test if property is supported.
+        // Camelization is required because we can't test using
+        // css syntax e.g. in ff.
+        cache[prop] = camelized in p.style ? dasherized : false
+    }
+
+    return cache[prop]
+}

test/support.js

+'use strict'
+
+QUnit.module('CSS feature test')
+
+test('known property', function () {
+    var prop = jss.support.getProp('animation')
+    var prefixedProp = jss.vendorPrefix.css + 'animation'
+
+    equal(prop, prefixedProp)
+})
+
+test('unknown property', function () {
+    equal(jss.support.getProp('xxx'), false)
+})
+

bower.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": {
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

dist/jss.js

@@ -348,2 +348,4 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+exports.support = require('./support')
+
 /**
@@ -374,3 +376,3 @@ * Create a stylesheet.
 
-},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./vendorPrefix":8}],5:[function(require,module,exports){
+},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./support":8,"./vendorPrefix":9}],5:[function(require,module,exports){
 'use strict'
@@ -444,2 +446,25 @@
 /**
+ * Add vendor prefix to a property name when needed.
+ *
+ * @param {Rule} rule
+ * @api private
+ */
+module.exports = function (rule) {
+    var style = rule.style
+
+    for (var prop in style) {
+        var supportedProp = jss.support.getProp(prop)
+        if (supportedProp) {
+            style[supportedProp] = style[prop]
+            delete style[prop]
+        }
+    }
+}
+
+},{"..":4}],8:[function(require,module,exports){
+'use strict'
+
+var vendorPrefix = require('./vendorPrefix')
+
+/**
  * We test every property on vendor prefix requirement.
@@ -477,31 +502,24 @@ * Once tested, result is cached. It gives us up to 70% perf boost.
 /**
- * Add vendor prefix to a property name when needed.
- * It doesn't covers cases where vendor prefix needs to be added to the property
- * value.
+ * Test if a property is supported, returns property with vendor
+ * prefix if required, otherwise `false`.
  *
- * @param {Rule} rule
+ * @param {String} prop
+ * @return {String|Boolean}
  * @api private
  */
-module.exports = function (rule) {
-    var style = rule.style
+exports.getProp = function (prop) {
+    // We have not tested this prop yet, lets do the test.
+    if (cache[prop] == null) {
+        var camelized = vendorPrefix.js + camelize('-' + prop)
+        var dasherized = vendorPrefix.css + prop
+        // Test if property is supported.
+        // Camelization is required because we can't test using
+        // css syntax e.g. in ff.
+        cache[prop] = camelized in p.style ? dasherized : false
+    }
 
-    for (var prop in style) {
-        // We have not tested this prop yet, lets do the test.
-        if (cache[prop] == null) {
-            var camelized = jss.vendorPrefix.js + camelize('-' + prop)
-            var dasherized = jss.vendorPrefix.css + prop
-            // Test if property is supported.
-            // Camelization is required because we can't test using
-            // css syntax for e.g. in ff.
-            cache[prop] = camelized in p.style ? dasherized : false
-        }
-
-        if (cache[prop]) {
-            style[cache[prop]] = style[prop]
-            delete style[prop]
-        }
-    }
+    return cache[prop]
 }
 
-},{"..":4}],8:[function(require,module,exports){
+},{"./vendorPrefix":9}],9:[function(require,module,exports){
 'use strict'
@@ -508,0 +526,0 @@

dist/jss.min.js

@@ -8,2 +8,2 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=require("./lib/index")},{"./lib/index":4}],2:[function(require,module,exports){"use strict";var uid=0;var processors=[];var hasKeyframes=/@keyframes/;var toString=Object.prototype.toString;function Rule(selector,style,stylesheet){if(typeof selector=="object"){stylesheet=style;style=selector;selector=null}if(selector){this.selector=selector}else{this.className=Rule.NAMESPACE_PREFIX+"-"+uid;uid++;this.selector="."+this.className}this.stylesheet=stylesheet;this.style=style}module.exports=Rule;Rule.NAMESPACE_PREFIX="jss";Rule.addPreprocessor=function(fn){processors.push(fn);return processors};Rule.prototype.runPreprocessors=function(){for(var i=0;i<processors.length;i++){processors[i](this)}return this};Rule.prototype.addChild=function(selector,style){if(!this.children)this.children={};this.children[selector]=style;return this};Rule.prototype.toString=function(){var isKeyframe=hasKeyframes.test(this.selector);var style=this.style;var str=this.selector+" {";for(var prop in style){var value=style[prop];if(typeof value=="object"){var type=toString.call(value);if(type=="[object Object]"){var valueStr="{";for(var prop2 in value){valueStr+="\n    "+prop2+": "+value[prop2]+";"}valueStr+="\n  }";value=valueStr;str+="\n  "+prop+(isKeyframe?" ":": ")+value}else if(type=="[object Array]"){for(var i=0;i<value.length;i++){str+="\n  "+prop+": "+value[i]+";"}}}else{str+="\n  "+prop+": "+value+";"}}str+="\n}";return str}},{}],3:[function(require,module,exports){"use strict";var Rule=require("./Rule");function Stylesheet(rules,named,attributes){if(typeof named=="object"){attributes=named;named=false}this.element=null;this.attached=false;this.named=named||false;this.attributes=attributes;this.rules={};this.classes={};this.text="";this.element=this.createElement();for(var key in rules){this.createRules(key,rules[key])}}module.exports=Stylesheet;Stylesheet.prototype.attach=function(){if(this.attached)return this;if(!this.text)this.deploy();document.head.appendChild(this.element);this.attached=true;return this};Stylesheet.prototype.deploy=function(){this.text=this.toString();this.element.innerHTML="\n"+this.text+"\n";return this};Stylesheet.prototype.detach=function(){if(!this.attached)return this;this.element.parentNode.removeChild(this.element);this.attached=false;return this};Stylesheet.prototype.addRule=function(key,style){var rules=this.createRules(key,style);if(this.text){var sheet=this.element.sheet;for(var i=0;i<rules.length;i++){sheet.insertRule(rules[i].toString(),sheet.cssRules.length)}}else{this.deploy()}return rules};Stylesheet.prototype.addRules=function(rules){for(var key in rules){this.addRule(key,rules[key])}return this};Stylesheet.prototype.getRule=function(key){return this.rules[key]};Stylesheet.prototype.toString=function(){var str="";var rules=this.rules;for(var key in rules){if(str)str+="\n";str+=rules[key].toString()}return str};Stylesheet.prototype.createRules=function(key,style){var rules=[];var selector,name;if(this.named)name=key;else selector=key;var rule=new Rule(selector,style,this);rules.push(rule);this.rules[name||rule.selector]=rule;if(this.named)this.classes[name]=rule.className;rule.runPreprocessors();for(key in rule.children){rules.push(this.createRules(key,rule.children[key]))}return rules};Stylesheet.prototype.createElement=function(){var el=document.createElement("style");if(this.attributes){for(var name in this.attributes){el.setAttribute(name,this.attributes[name])}}return el}},{"./Rule":2}],4:[function(require,module,exports){/**
  */
-"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend"),require("./processors/vendorPrefixer")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.vendorPrefix=require("./vendorPrefix");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style).runPreprocessors()}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./vendorPrefix":8}],5:[function(require,module,exports){"use strict";var toString=Object.prototype.toString;module.exports=function(rule){var style=rule.style;if(!style||!style.extend)return;var newStyle={};(function extend(style){if(toString.call(style.extend)=="[object Array]"){for(var i=0;i<style.extend.length;i++){extend(style.extend[i])}}else{for(var prop in style.extend){if(prop=="extend")extend(style.extend.extend);else newStyle[prop]=style.extend[prop]}}for(var prop in style){if(prop!="extend")newStyle[prop]=style[prop]}})(style);rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var regExp=/&/gi;module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=prop.replace(regExp,rule.selector);rule.addChild(selector,style[prop]);delete style[prop]}}}},{}],7:[function(require,module,exports){"use strict";var jss=require("..");var cache={};var p=document.createElement("p");(function(){var computed=window.getComputedStyle(document.documentElement,"");for(var key in computed){cache[computed[key]]=false}})();var camelize=function(){var regExp=/[-\s]+(.)?/g;function toUpper(match,c){return c?c.toUpperCase():""}return function(str){return str.replace(regExp,toUpper)}}();module.exports=function(rule){var style=rule.style;for(var prop in style){if(cache[prop]==null){var camelized=jss.vendorPrefix.js+camelize("-"+prop);var dasherized=jss.vendorPrefix.css+prop;cache[prop]=camelized in p.style?dasherized:false}if(cache[prop]){style[cache[prop]]=style[prop];delete style[prop]}}}},{"..":4}],8:[function(require,module,exports){"use strict";var jsCssMap={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"};var style=document.createElement("p").style;var testProp="Transform";for(var js in jsCssMap){if(js+testProp in style){exports.js=js;exports.css=jsCssMap[js];break}}},{}]},{},[1])(1)});
+"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend"),require("./processors/vendorPrefixer")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.vendorPrefix=require("./vendorPrefix");exports.support=require("./support");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style).runPreprocessors()}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6,"./processors/vendorPrefixer":7,"./support":8,"./vendorPrefix":9}],5:[function(require,module,exports){"use strict";var toString=Object.prototype.toString;module.exports=function(rule){var style=rule.style;if(!style||!style.extend)return;var newStyle={};(function extend(style){if(toString.call(style.extend)=="[object Array]"){for(var i=0;i<style.extend.length;i++){extend(style.extend[i])}}else{for(var prop in style.extend){if(prop=="extend")extend(style.extend.extend);else newStyle[prop]=style.extend[prop]}}for(var prop in style){if(prop!="extend")newStyle[prop]=style[prop]}})(style);rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var regExp=/&/gi;module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=prop.replace(regExp,rule.selector);rule.addChild(selector,style[prop]);delete style[prop]}}}},{}],7:[function(require,module,exports){"use strict";var jss=require("..");module.exports=function(rule){var style=rule.style;for(var prop in style){var supportedProp=jss.support.getProp(prop);if(supportedProp){style[supportedProp]=style[prop];delete style[prop]}}}},{"..":4}],8:[function(require,module,exports){"use strict";var vendorPrefix=require("./vendorPrefix");var cache={};var p=document.createElement("p");(function(){var computed=window.getComputedStyle(document.documentElement,"");for(var key in computed){cache[computed[key]]=false}})();var camelize=function(){var regExp=/[-\s]+(.)?/g;function toUpper(match,c){return c?c.toUpperCase():""}return function(str){return str.replace(regExp,toUpper)}}();exports.getProp=function(prop){if(cache[prop]==null){var camelized=vendorPrefix.js+camelize("-"+prop);var dasherized=vendorPrefix.css+prop;cache[prop]=camelized in p.style?dasherized:false}return cache[prop]}},{"./vendorPrefix":9}],9:[function(require,module,exports){"use strict";var jsCssMap={Webkit:"-webkit-",Moz:"-moz-",ms:"-ms-",O:"-o-"};var style=document.createElement("p").style;var testProp="Transform";for(var js in jsCssMap){if(js+testProp in style){exports.js=js;exports.css=jsCssMap[js];break}}},{}]},{},[1])(1)});

examples/commonjs/build.js

@@ -378,2 +378,4 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+exports.support = require('./support')
+
 /**
@@ -404,3 +406,3 @@ * Create a stylesheet.
 
-},{"./Rule":4,"./Stylesheet":5,"./processors/extend":7,"./processors/nested":8,"./processors/vendorPrefixer":9,"./vendorPrefix":10}],7:[function(require,module,exports){
+},{"./Rule":4,"./Stylesheet":5,"./processors/extend":7,"./processors/nested":8,"./processors/vendorPrefixer":9,"./support":10,"./vendorPrefix":11}],7:[function(require,module,exports){
 'use strict'
@@ -474,2 +476,25 @@
 /**
+ * Add vendor prefix to a property name when needed.
+ *
+ * @param {Rule} rule
+ * @api private
+ */
+module.exports = function (rule) {
+    var style = rule.style
+
+    for (var prop in style) {
+        var supportedProp = jss.support.getProp(prop)
+        if (supportedProp) {
+            style[supportedProp] = style[prop]
+            delete style[prop]
+        }
+    }
+}
+
+},{"..":6}],10:[function(require,module,exports){
+'use strict'
+
+var vendorPrefix = require('./vendorPrefix')
+
+/**
  * We test every property on vendor prefix requirement.
@@ -507,31 +532,24 @@ * Once tested, result is cached. It gives us up to 70% perf boost.
 /**
- * Add vendor prefix to a property name when needed.
- * It doesn't covers cases where vendor prefix needs to be added to the property
- * value.
+ * Test if a property is supported, returns property with vendor
+ * prefix if required, otherwise `false`.
  *
- * @param {Rule} rule
+ * @param {String} prop
+ * @return {String|Boolean}
  * @api private
  */
-module.exports = function (rule) {
-    var style = rule.style
+exports.getProp = function (prop) {
+    // We have not tested this prop yet, lets do the test.
+    if (cache[prop] == null) {
+        var camelized = vendorPrefix.js + camelize('-' + prop)
+        var dasherized = vendorPrefix.css + prop
+        // Test if property is supported.
+        // Camelization is required because we can't test using
+        // css syntax e.g. in ff.
+        cache[prop] = camelized in p.style ? dasherized : false
+    }
 
-    for (var prop in style) {
-        // We have not tested this prop yet, lets do the test.
-        if (cache[prop] == null) {
-            var camelized = jss.vendorPrefix.js + camelize('-' + prop)
-            var dasherized = jss.vendorPrefix.css + prop
-            // Test if property is supported.
-            // Camelization is required because we can't test using
-            // css syntax for e.g. in ff.
-            cache[prop] = camelized in p.style ? dasherized : false
-        }
-
-        if (cache[prop]) {
-            style[cache[prop]] = style[prop]
-            delete style[prop]
-        }
-    }
+    return cache[prop]
 }
 
-},{"..":6}],10:[function(require,module,exports){
+},{"./vendorPrefix":11}],11:[function(require,module,exports){
 'use strict'
@@ -538,0 +556,0 @@

examples/topcoat/build.js

@@ -640,2 +640,4 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+exports.support = require('./support')
+
 /**
@@ -666,3 +668,3 @@ * Create a stylesheet.
 
-},{"./Rule":9,"./Stylesheet":10,"./processors/extend":12,"./processors/nested":13,"./processors/vendorPrefixer":14,"./vendorPrefix":15}],12:[function(require,module,exports){
+},{"./Rule":9,"./Stylesheet":10,"./processors/extend":12,"./processors/nested":13,"./processors/vendorPrefixer":14,"./support":15,"./vendorPrefix":16}],12:[function(require,module,exports){
 'use strict'
@@ -736,2 +738,25 @@
 /**
+ * Add vendor prefix to a property name when needed.
+ *
+ * @param {Rule} rule
+ * @api private
+ */
+module.exports = function (rule) {
+    var style = rule.style
+
+    for (var prop in style) {
+        var supportedProp = jss.support.getProp(prop)
+        if (supportedProp) {
+            style[supportedProp] = style[prop]
+            delete style[prop]
+        }
+    }
+}
+
+},{"..":11}],15:[function(require,module,exports){
+'use strict'
+
+var vendorPrefix = require('./vendorPrefix')
+
+/**
  * We test every property on vendor prefix requirement.
@@ -769,31 +794,24 @@ * Once tested, result is cached. It gives us up to 70% perf boost.
 /**
- * Add vendor prefix to a property name when needed.
- * It doesn't covers cases where vendor prefix needs to be added to the property
- * value.
+ * Test if a property is supported, returns property with vendor
+ * prefix if required, otherwise `false`.
  *
- * @param {Rule} rule
+ * @param {String} prop
+ * @return {String|Boolean}
  * @api private
  */
-module.exports = function (rule) {
-    var style = rule.style
+exports.getProp = function (prop) {
+    // We have not tested this prop yet, lets do the test.
+    if (cache[prop] == null) {
+        var camelized = vendorPrefix.js + camelize('-' + prop)
+        var dasherized = vendorPrefix.css + prop
+        // Test if property is supported.
+        // Camelization is required because we can't test using
+        // css syntax e.g. in ff.
+        cache[prop] = camelized in p.style ? dasherized : false
+    }
 
-    for (var prop in style) {
-        // We have not tested this prop yet, lets do the test.
-        if (cache[prop] == null) {
-            var camelized = jss.vendorPrefix.js + camelize('-' + prop)
-            var dasherized = jss.vendorPrefix.css + prop
-            // Test if property is supported.
-            // Camelization is required because we can't test using
-            // css syntax for e.g. in ff.
-            cache[prop] = camelized in p.style ? dasherized : false
-        }
-
-        if (cache[prop]) {
-            style[cache[prop]] = style[prop]
-            delete style[prop]
-        }
-    }
+    return cache[prop]
 }
 
-},{"..":11}],15:[function(require,module,exports){
+},{"./vendorPrefix":16}],16:[function(require,module,exports){
 'use strict'
@@ -800,0 +818,0 @@

lib/index.js

@@ -27,2 +27,4 @@ /**
 
+exports.support = require('./support')
+
 /**
@@ -29,0 +31,0 @@ * Create a stylesheet.

lib/processors/vendorPrefixer.js

@@ -6,37 +6,3 @@ 'use strict'
 /**
- * We test every property on vendor prefix requirement.
- * Once tested, result is cached. It gives us up to 70% perf boost.
- * http://jsperf.com/element-style-object-access-vs-plain-object
- */
-var cache = {}
-
-var p = document.createElement('p')
-
-// Prefill cache with known css properties to reduce amount of
-// properties we need to feature test.
-// http://davidwalsh.name/vendor-prefix
-;(function() {
-    var computed = window.getComputedStyle(document.documentElement, '')
-    for (var key in computed) {
-        cache[computed[key]] = false
-    }
-}())
-
-// Convert dash separated strings to camel cased.
-var camelize = (function () {
-    var regExp = /[-\s]+(.)?/g
-
-    function toUpper(match, c) {
-        return c ? c.toUpperCase() : ''
-    }
-
-    return function(str) {
-        return str.replace(regExp, toUpper)
-    }
-}())
-
-/**
  * Add vendor prefix to a property name when needed.
- * It doesn't covers cases where vendor prefix needs to be added to the property
- * value.
  *
@@ -50,14 +16,5 @@ * @param {Rule} rule
     for (var prop in style) {
-        // We have not tested this prop yet, lets do the test.
-        if (cache[prop] == null) {
-            var camelized = jss.vendorPrefix.js + camelize('-' + prop)
-            var dasherized = jss.vendorPrefix.css + prop
-            // Test if property is supported.
-            // Camelization is required because we can't test using
-            // css syntax for e.g. in ff.
-            cache[prop] = camelized in p.style ? dasherized : false
-        }
-
-        if (cache[prop]) {
-            style[cache[prop]] = style[prop]
+        var supportedProp = jss.support.getProp(prop)
+        if (supportedProp) {
+            style[supportedProp] = style[prop]
             delete style[prop]
@@ -64,0 +21,0 @@ }

package.json

 {
   "name": "jss",
   "description": "Dynamic stylesheets for web components.",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "author": {
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

test/index.html

@@ -16,2 +16,3 @@ <!DOCTYPE html>
     <script src="http://cdn.rawgit.com/kof/jss/gh-pages/test/vendorPrefix.js"></script>
+    <script src="http://cdn.rawgit.com/kof/jss/gh-pages/test/support.js"></script>
     <script src="http://cdn.rawgit.com/kof/jss/gh-pages/test/processors/extend.js"></script>
@@ -18,0 +19,0 @@ <script src="http://cdn.rawgit.com/kof/jss/gh-pages/test/processors/nested.js"></script>

test/local.html

@@ -16,2 +16,3 @@ <!DOCTYPE html>
     <script src="./vendorPrefix.js"></script>
+    <script src="./support.js"></script>
     <script src="./processors/extend.js"></script>
@@ -18,0 +19,0 @@ <script src="./processors/nested.js"></script>

x-package.json5

 {
     name: 'jss',
     description: 'Dynamic stylesheets for web components.',
-    version: '0.5.0',
+    version: '0.5.1',
     author: {
@@ -6,0 +6,0 @@ name: 'Oleg Slobodskoi',

New alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

378212

0.53%

Number of package files

68

3.03%

Lines of code

9261

0.71%

No dependency changes