Comparing version 0.6.0 to 0.7.0
{ | ||
"name": "jss", | ||
"description": "Dynamic stylesheets for web components.", | ||
"version": "0.6.0", | ||
"version": "0.7.0", | ||
"author": { | ||
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi", |
187
dist/jss.js
!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){ | ||
/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/jsstyles/jss | ||
* @license MIT | ||
*/ | ||
module.exports = require('./lib/index') | ||
@@ -314,6 +322,2 @@ | ||
exports.vendorPrefix = require('./vendorPrefix') | ||
exports.support = require('./support') | ||
exports.plugins = require('./plugins') | ||
@@ -356,3 +360,3 @@ | ||
},{"./Rule":2,"./Stylesheet":3,"./plugins":5,"./support":9,"./vendorPrefix":10}],5:[function(require,module,exports){ | ||
},{"./Rule":2,"./Stylesheet":3,"./plugins":5}],5:[function(require,module,exports){ | ||
'use strict' | ||
@@ -366,7 +370,3 @@ | ||
*/ | ||
exports.registry = [ | ||
require('./plugins/nested'), | ||
require('./plugins/extend'), | ||
require('./plugins/vendorPrefixer') | ||
] | ||
exports.registry = [] | ||
@@ -395,170 +395,3 @@ /** | ||
},{"./plugins/extend":6,"./plugins/nested":7,"./plugins/vendorPrefixer":8}],6:[function(require,module,exports){ | ||
'use strict' | ||
var toString = Object.prototype.toString | ||
/** | ||
* Handle `extend` property. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
// Copy base style. | ||
for (var prop in style) { | ||
if (prop != 'extend') newStyle[prop] = style[prop] | ||
} | ||
}(style)) | ||
rule.style = newStyle | ||
} | ||
},{}],7:[function(require,module,exports){ | ||
'use strict' | ||
var regExp = /&/gi | ||
/** | ||
* Convert nested rules to separate, remove them from original styles. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
} | ||
},{}],8:[function(require,module,exports){ | ||
'use strict' | ||
var jss = require('..') | ||
/** | ||
* 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}],9:[function(require,module,exports){ | ||
'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] | ||
} | ||
},{"./vendorPrefix":10}],10:[function(require,module,exports){ | ||
'use strict' | ||
var jsCssMap = { | ||
Webkit: '-webkit-', | ||
Moz: '-moz-', | ||
// IE did it wrong again ... | ||
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) | ||
}); |
@@ -1,8 +0,15 @@ | ||
!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 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.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");var plugins=require("./plugins");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;plugins.run(rule);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,"./plugins":5}],4:[function(require,module,exports){/** | ||
!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){/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/jsstyles/jss | ||
* @license MIT | ||
*/ | ||
module.exports=require("./lib/index")},{"./lib/index":4}],2:[function(require,module,exports){"use strict";var uid=0;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.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");var plugins=require("./plugins");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;plugins.run(rule);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,"./plugins":5}],4:[function(require,module,exports){/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/kof/jss | ||
* @license MIT | ||
*/ | ||
"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.vendorPrefix=require("./vendorPrefix");exports.support=require("./support");exports.plugins=require("./plugins");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){var rule=new Rule(selector,style);exports.plugins.run(rule);return rule};exports.use=exports.plugins.use},{"./Rule":2,"./Stylesheet":3,"./plugins":5,"./support":9,"./vendorPrefix":10}],5:[function(require,module,exports){"use strict";exports.registry=[require("./plugins/nested"),require("./plugins/extend"),require("./plugins/vendorPrefixer")];exports.use=function(fn){exports.registry.push(fn)};exports.run=function(rule){for(var i=0;i<exports.registry.length;i++){exports.registry[i](rule)}}},{"./plugins/extend":6,"./plugins/nested":7,"./plugins/vendorPrefixer":8}],6:[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}},{}],7:[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]}}}},{}],8:[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}],9:[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":10}],10:[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");exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.plugins=require("./plugins");exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){var rule=new Rule(selector,style);exports.plugins.run(rule);return rule};exports.use=exports.plugins.use},{"./Rule":2,"./Stylesheet":3,"./plugins":5}],5:[function(require,module,exports){"use strict";exports.registry=[];exports.use=function(fn){exports.registry.push(fn)};exports.run=function(rule){for(var i=0;i<exports.registry.length;i++){exports.registry[i](rule)}}},{}]},{},[1])(1)}); |
@@ -32,2 +32,10 @@ (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){ | ||
},{}],3:[function(require,module,exports){ | ||
/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/jsstyles/jss | ||
* @license MIT | ||
*/ | ||
module.exports = require('./lib/index') | ||
@@ -345,6 +353,2 @@ | ||
exports.vendorPrefix = require('./vendorPrefix') | ||
exports.support = require('./support') | ||
exports.plugins = require('./plugins') | ||
@@ -387,3 +391,3 @@ | ||
},{"./Rule":4,"./Stylesheet":5,"./plugins":7,"./support":11,"./vendorPrefix":12}],7:[function(require,module,exports){ | ||
},{"./Rule":4,"./Stylesheet":5,"./plugins":7}],7:[function(require,module,exports){ | ||
'use strict' | ||
@@ -397,7 +401,3 @@ | ||
*/ | ||
exports.registry = [ | ||
require('./plugins/nested'), | ||
require('./plugins/extend'), | ||
require('./plugins/vendorPrefixer') | ||
] | ||
exports.registry = [] | ||
@@ -426,169 +426,2 @@ /** | ||
},{"./plugins/extend":8,"./plugins/nested":9,"./plugins/vendorPrefixer":10}],8:[function(require,module,exports){ | ||
'use strict' | ||
var toString = Object.prototype.toString | ||
/** | ||
* Handle `extend` property. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
// Copy base style. | ||
for (var prop in style) { | ||
if (prop != 'extend') newStyle[prop] = style[prop] | ||
} | ||
}(style)) | ||
rule.style = newStyle | ||
} | ||
},{}],9:[function(require,module,exports){ | ||
'use strict' | ||
var regExp = /&/gi | ||
/** | ||
* Convert nested rules to separate, remove them from original styles. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
} | ||
},{}],10:[function(require,module,exports){ | ||
'use strict' | ||
var jss = require('..') | ||
/** | ||
* 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}],11:[function(require,module,exports){ | ||
'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] | ||
} | ||
},{"./vendorPrefix":12}],12:[function(require,module,exports){ | ||
'use strict' | ||
var jsCssMap = { | ||
Webkit: '-webkit-', | ||
Moz: '-moz-', | ||
// IE did it wrong again ... | ||
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]); |
@@ -294,2 +294,10 @@ (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){ | ||
},{}],8:[function(require,module,exports){ | ||
/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/jsstyles/jss | ||
* @license MIT | ||
*/ | ||
module.exports = require('./lib/index') | ||
@@ -607,6 +615,2 @@ | ||
exports.vendorPrefix = require('./vendorPrefix') | ||
exports.support = require('./support') | ||
exports.plugins = require('./plugins') | ||
@@ -649,3 +653,3 @@ | ||
},{"./Rule":9,"./Stylesheet":10,"./plugins":12,"./support":16,"./vendorPrefix":17}],12:[function(require,module,exports){ | ||
},{"./Rule":9,"./Stylesheet":10,"./plugins":12}],12:[function(require,module,exports){ | ||
'use strict' | ||
@@ -659,7 +663,3 @@ | ||
*/ | ||
exports.registry = [ | ||
require('./plugins/nested'), | ||
require('./plugins/extend'), | ||
require('./plugins/vendorPrefixer') | ||
] | ||
exports.registry = [] | ||
@@ -688,169 +688,2 @@ /** | ||
},{"./plugins/extend":13,"./plugins/nested":14,"./plugins/vendorPrefixer":15}],13:[function(require,module,exports){ | ||
'use strict' | ||
var toString = Object.prototype.toString | ||
/** | ||
* Handle `extend` property. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
// Copy base style. | ||
for (var prop in style) { | ||
if (prop != 'extend') newStyle[prop] = style[prop] | ||
} | ||
}(style)) | ||
rule.style = newStyle | ||
} | ||
},{}],14:[function(require,module,exports){ | ||
'use strict' | ||
var regExp = /&/gi | ||
/** | ||
* Convert nested rules to separate, remove them from original styles. | ||
* | ||
* @param {Rule} rule | ||
* @api private | ||
*/ | ||
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] | ||
} | ||
} | ||
} | ||
},{}],15:[function(require,module,exports){ | ||
'use strict' | ||
var jss = require('..') | ||
/** | ||
* 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}],16:[function(require,module,exports){ | ||
'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] | ||
} | ||
},{"./vendorPrefix":17}],17:[function(require,module,exports){ | ||
'use strict' | ||
var jsCssMap = { | ||
Webkit: '-webkit-', | ||
Moz: '-moz-', | ||
// IE did it wrong again ... | ||
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]); |
@@ -0,1 +1,6 @@ | ||
## 0.7.0 / 2014-11-29 | ||
- moved jss to separate github organization | ||
- moved all plugins to separate repositories (don't force people use plugins they don't need) | ||
## 0.6.0 / 2014-11-28 | ||
@@ -2,0 +7,0 @@ |
@@ -0,1 +1,9 @@ | ||
/** | ||
* Stylesheets written in javascript. | ||
* | ||
* @copyright Oleg Slobodskoi 2014 | ||
* @website https://github.com/jsstyles/jss | ||
* @license MIT | ||
*/ | ||
module.exports = require('./lib/index') |
@@ -18,6 +18,2 @@ /** | ||
exports.vendorPrefix = require('./vendorPrefix') | ||
exports.support = require('./support') | ||
exports.plugins = require('./plugins') | ||
@@ -24,0 +20,0 @@ |
@@ -9,7 +9,3 @@ 'use strict' | ||
*/ | ||
exports.registry = [ | ||
require('./plugins/nested'), | ||
require('./plugins/extend'), | ||
require('./plugins/vendorPrefixer') | ||
] | ||
exports.registry = [] | ||
@@ -16,0 +12,0 @@ /** |
{ | ||
"name": "jss", | ||
"description": "Dynamic stylesheets for web components.", | ||
"version": "0.6.0", | ||
"version": "0.7.0", | ||
"author": { | ||
@@ -29,3 +29,2 @@ "name": "Oleg Slobodskoi", | ||
"uglify-js": "2.4.15", | ||
"qunit": "0.7.5", | ||
"qunitjs": "1.15.0", | ||
@@ -32,0 +31,0 @@ "xpkg": "0.2.0" |
118
readme.md
@@ -13,94 +13,32 @@ ## Dynamic stylesheets for web components. | ||
## Syntactic differences compared to CSS | ||
### Syntactic differences compared to CSS | ||
Jss styles are just plain javascript objects. They map 1:1 to css rules, except of those modified by plugins. | ||
### Nested Rules | ||
Put an `&` before a selector within a rule and it will be replaced by the parent selector and extracted to a [separate rule](http://kof.github.io/jss/examples/nested/index.html). | ||
```javascript | ||
// Some random jss code example | ||
{ | ||
'.container': { | ||
padding: '20px', | ||
// Will result in .container.clear | ||
'&.clear': { | ||
clear: 'both' | ||
}, | ||
// Will result in .container .button | ||
'& .button': { | ||
background: 'red' | ||
}, | ||
'&.selected, &.active': { | ||
border: '1px solid red' | ||
} | ||
'.carousel-caption': { | ||
'position': 'absolute', | ||
'z-index': '10', | ||
}, | ||
'hr': { | ||
'border': '0', | ||
'border-top': '1px solid #eee' | ||
}, | ||
'@media (min-width: 768px)': { | ||
'.modal-dialog': { | ||
'width': '600px', | ||
'margin': '30px auto' | ||
}, | ||
'.modal-content': { | ||
'box-shadow': '0 5px 15px rgba(0, 0, 0, .5)' | ||
}, | ||
'.modal-sm': { | ||
'width': '300px' | ||
} | ||
} | ||
} | ||
``` | ||
```css | ||
.container { | ||
padding: 20px; | ||
} | ||
.container.clear { | ||
clear: both; | ||
} | ||
.container .button { | ||
background: red; | ||
} | ||
.container.selected, .container.active { | ||
border: 1px solid red; | ||
} | ||
``` | ||
### Inheritance | ||
Inherit a rule(s) by using `extend` keyword. This makes it easy to reuse code. [See example.](http://kof.github.io/jss/examples/extend/index.html) | ||
```javascript | ||
var rules = {} | ||
var button1 = { | ||
padding: '20px', | ||
background: 'blue' | ||
} | ||
rules['.button-1'] = button1 | ||
rules['.button-2'] = { | ||
extend: button1, // can be an array of styles | ||
padding: '30px' | ||
} | ||
``` | ||
```css | ||
.button-1 { | ||
padding: 20px; | ||
background: blue; | ||
} | ||
.button-2 { | ||
padding: 30px; | ||
background: blue; | ||
} | ||
``` | ||
### Vendor prefixes | ||
Vendor prefixes are handled automatically using a smart check which results are cached. [See example.](http://kof.github.io/jss/examples/vendor-prefixer/index.html) | ||
```javascript | ||
{ | ||
'.container': { | ||
transform: 'translateX(100px)' | ||
} | ||
} | ||
``` | ||
```css | ||
.container { | ||
transform: -webkit-translateX(100px); | ||
} | ||
``` | ||
### Multiple declarations with identical property names | ||
@@ -112,3 +50,2 @@ | ||
```js | ||
@@ -302,6 +239,17 @@ { | ||
## Plugins | ||
Things you know from stylus like @extend, nested selectors, vendor prefixer are separate plugins. | ||
[Full list of available plugins](https://github.com/jsstyles?query=jss-) | ||
### | ||
## Install | ||
```bash | ||
npm i jss | ||
npm install jss | ||
#or | ||
bower install jsstyles | ||
``` | ||
@@ -308,0 +256,0 @@ |
@@ -52,4 +52,4 @@ 'use strict' | ||
jss.use(plugin) | ||
equal(jss.plugins.registry.length, 4) | ||
strictEqual(jss.plugins.registry[3], plugin) | ||
equal(jss.plugins.registry.length, 1) | ||
strictEqual(jss.plugins.registry[0], plugin) | ||
}) | ||
@@ -56,0 +56,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
4
353822
50
8611
284