Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
jss - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0
| { | ||
| "name": "jss", | ||
| "description": "Dynamic stylesheets for web components.", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "author": { | ||
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi", |
@@ -13,2 +13,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){ | ||
| var toString = Object.prototype.toString | ||
| /** | ||
@@ -99,12 +101,21 @@ * Rule is selector + style hash. | ||
| if (typeof value == 'object') { | ||
| var valueStr = '{' | ||
| for (var prop2 in value) { | ||
| valueStr += '\n ' + prop2 + ': ' + value[prop2] + ';' | ||
| var type = toString.call(value) | ||
| // We are in a sub block e.g. @media, @keyframes | ||
| 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 | ||
| // We want to generate multiple declarations with identical property names. | ||
| } else if (type == '[object Array]') { | ||
| for (var i = 0; i < value.length; i++) { | ||
| str += '\n ' + prop + ': ' + value[i] + ';' | ||
| } | ||
| } | ||
| valueStr += '\n }' | ||
| value = valueStr | ||
| } else { | ||
| value += ';' | ||
| str += '\n ' + prop + ': ' + value + ';' | ||
| } | ||
| str += '\n ' + prop + (isKeyframe ? ' ' : ': ') + value | ||
| } | ||
@@ -111,0 +122,0 @@ |
@@ -1,2 +0,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/;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 valueStr="{";for(var prop2 in value){valueStr+="\n "+prop2+": "+value[prop2]+";"}valueStr+="\n }";value=valueStr}else{value+=";"}str+="\n "+prop+(isKeyframe?" ":": ")+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){/** | ||
| !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){/** | ||
| * Stylesheets written in javascript. | ||
@@ -3,0 +3,0 @@ * |
@@ -43,2 +43,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){ | ||
| var toString = Object.prototype.toString | ||
| /** | ||
@@ -129,12 +131,21 @@ * Rule is selector + style hash. | ||
| if (typeof value == 'object') { | ||
| var valueStr = '{' | ||
| for (var prop2 in value) { | ||
| valueStr += '\n ' + prop2 + ': ' + value[prop2] + ';' | ||
| var type = toString.call(value) | ||
| // We are in a sub block e.g. @media, @keyframes | ||
| 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 | ||
| // We want to generate multiple declarations with identical property names. | ||
| } else if (type == '[object Array]') { | ||
| for (var i = 0; i < value.length; i++) { | ||
| str += '\n ' + prop + ': ' + value[i] + ';' | ||
| } | ||
| } | ||
| valueStr += '\n }' | ||
| value = valueStr | ||
| } else { | ||
| value += ';' | ||
| str += '\n ' + prop + ': ' + value + ';' | ||
| } | ||
| str += '\n ' + prop + (isKeyframe ? ' ' : ': ') + value | ||
| } | ||
@@ -141,0 +152,0 @@ |
@@ -305,2 +305,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){ | ||
| var toString = Object.prototype.toString | ||
| /** | ||
@@ -391,12 +393,21 @@ * Rule is selector + style hash. | ||
| if (typeof value == 'object') { | ||
| var valueStr = '{' | ||
| for (var prop2 in value) { | ||
| valueStr += '\n ' + prop2 + ': ' + value[prop2] + ';' | ||
| var type = toString.call(value) | ||
| // We are in a sub block e.g. @media, @keyframes | ||
| 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 | ||
| // We want to generate multiple declarations with identical property names. | ||
| } else if (type == '[object Array]') { | ||
| for (var i = 0; i < value.length; i++) { | ||
| str += '\n ' + prop + ': ' + value[i] + ';' | ||
| } | ||
| } | ||
| valueStr += '\n }' | ||
| value = valueStr | ||
| } else { | ||
| value += ';' | ||
| str += '\n ' + prop + ': ' + value + ';' | ||
| } | ||
| str += '\n ' + prop + (isKeyframe ? ' ' : ': ') + value | ||
| } | ||
@@ -403,0 +414,0 @@ |
@@ -0,1 +1,5 @@ | ||
| ## 0.5.0 / 2014-11-27 | ||
| - support multiple declarations with identical property names #22 | ||
| ## 0.4.0 / 2014-11-23 | ||
@@ -2,0 +6,0 @@ |
@@ -9,2 +9,4 @@ 'use strict' | ||
| var toString = Object.prototype.toString | ||
| /** | ||
@@ -95,12 +97,21 @@ * Rule is selector + style hash. | ||
| if (typeof value == 'object') { | ||
| var valueStr = '{' | ||
| for (var prop2 in value) { | ||
| valueStr += '\n ' + prop2 + ': ' + value[prop2] + ';' | ||
| var type = toString.call(value) | ||
| // We are in a sub block e.g. @media, @keyframes | ||
| 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 | ||
| // We want to generate multiple declarations with identical property names. | ||
| } else if (type == '[object Array]') { | ||
| for (var i = 0; i < value.length; i++) { | ||
| str += '\n ' + prop + ': ' + value[i] + ';' | ||
| } | ||
| } | ||
| valueStr += '\n }' | ||
| value = valueStr | ||
| } else { | ||
| value += ';' | ||
| str += '\n ' + prop + ': ' + value + ';' | ||
| } | ||
| str += '\n ' + prop + (isKeyframe ? ' ' : ': ') + value | ||
| } | ||
@@ -107,0 +118,0 @@ |
| { | ||
| "name": "jss", | ||
| "description": "Dynamic stylesheets for web components.", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0", | ||
| "author": { | ||
@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi", |
@@ -13,3 +13,3 @@ ## Dynamic stylesheets for web components. | ||
| ## Built in preprocessors | ||
| ## Syntactic differences compared to CSS | ||
@@ -106,2 +106,34 @@ Jss styles are just plain javascript objects. They map 1:1 to css rules, except of those modified by preprocessors. | ||
| ### Multiple declarations with identical property names | ||
| I recommend to not to use this if you use jss on the client. Instead you should write a function, which makes a test for this feature support and generates just one final declaration. | ||
| In case you are using jss as a server side precompiler, you might want to have more than one property with identical name. This is not possible in js, so you can use an array. | ||
| ```js | ||
| { | ||
| '.container': { | ||
| background: [ | ||
| 'red', | ||
| '-moz-linear-gradient(left, red 0%, green 100%)', | ||
| '-webkit-linear-gradient(left, red 0%, green 100%)', | ||
| '-o-linear-gradient(left, red 0%, green 100%)', | ||
| '-ms-linear-gradient(left, red 0%, green 100%)', | ||
| 'linear-gradient(to right, red 0%, green 100%)' | ||
| ] | ||
| } | ||
| } | ||
| ``` | ||
| ```css | ||
| .container { | ||
| background: red; | ||
| background: -moz-linear-gradient(left, red 0%, green 100%); | ||
| background: -webkit-linear-gradient(left, red 0%, green 100%); | ||
| background: -o-linear-gradient(left, red 0%, green 100%); | ||
| background: -ms-linear-gradient(left, red 0%, green 100%); | ||
| background: linear-gradient(to right, red 0%, green 100%); | ||
| } | ||
| ``` | ||
| ## API | ||
@@ -108,0 +140,0 @@ |
@@ -71,2 +71,7 @@ 'use strict' | ||
| test('multiple declarations with identical property names', function () { | ||
| var rule = new jss.Rule('a', {display: ['inline', 'run-in']}) | ||
| equal(rule.toString(), 'a {\n display: inline;\n display: run-in;\n}') | ||
| }) | ||
| test('@media', function () { | ||
@@ -73,0 +78,0 @@ var rule = new jss.Rule('@media print', {button: {display: 'none'}}) |
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by1.05%
376219
- Lines of code
- increased by0.49%
9196
- Number of lines in readme file
- increased by11%
323
No dependency changes