Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

jss

Package Overview
Dependencies
Maintainers
1
Versions
186
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jss - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

2

bower.json
{
"name": "jss",
"description": "Dynamic stylesheets for web components.",
"version": "0.6.0",
"version": "0.7.0",
"author": {

@@ -6,0 +6,0 @@ "name": "Oleg Slobodskoi",

!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"

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc