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.8.1 to 0.8.2

examples/calendar/dist/index.js

2

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

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

@@ -134,4 +134,8 @@ !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){

this.text = ''
this.element = this.createElement()
// Don't create element if we are not in a browser environment.
if (typeof document != 'undefined') {
this.element = this.createElement()
}
for (var key in rules) {

@@ -138,0 +142,0 @@ this.createRules(key, rules[key])

@@ -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 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){"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)});
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="";if(typeof document!="undefined"){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){"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)});

@@ -1,5 +0,12 @@

angular.module('myApp', [])
.controller('myController', function MyController($scope) {
var ss = jss.createStyleSheet(window.styles, true).attach()
$scope.classes = ss.classes
})
(function () {
var ss = jss.createStyleSheet(window.styles, true).attach()
angular
.module('myApp', [])
.controller('myController', function MyController($scope) {
$scope.classes = ss.classes
$scope.showSource = function () {
location.href = 'http://github.com/jsstyles/jss/tree/master/examples/angular'
}
})
}())
window.styles = {
button1: {
padding: '20px',
background: 'blue'
background: 'blue',
color: '#fff'
},

@@ -6,0 +7,0 @@

@@ -426,4 +426,8 @@ (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){

this.text = ''
this.element = this.createElement()
// Don't create element if we are not in a browser environment.
if (typeof document != 'undefined') {
this.element = this.createElement()
}
for (var key in rules) {

@@ -430,0 +434,0 @@ this.createRules(key, rules[key])

@@ -0,1 +1,6 @@

## 0.8.2 / 2014-12-17
- add build for "support non browser env #12"
- add calendar example
## 0.8.1 / 2014-11-29

@@ -2,0 +7,0 @@

{
"name": "jss",
"description": "Dynamic stylesheets for web components.",
"version": "0.8.1",
"version": "0.8.2",
"author": {

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

## Dynamic style sheets for web components.
[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/jsstyles/jss?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
JSS is a _very_ thin layer which compiles JSON structures to CSS.
Why do we need transpilers like [sass](http://sass-lang.com/) or [stylus](http://learnboost.github.io/stylus/) when we can use javascript to do the same and much more?

@@ -238,2 +240,27 @@

### Convert to CSS
`styleSheet.toString()`
If you want to get a pure CSS string from jss e.g. for preprocessing jss on the server.
```javascript
var jss = require('jss')
var styleSheet = jss.createStyleSheet({
'.my-button': {
float: 'left',
}
})
console.log(styleSheet.toString())
```
```css
.my-button {
float: left;
}
```
## Plugins

@@ -268,6 +295,9 @@

To make some realistic assumptions about performance overhead, I have converted bootstraps css to jss. In `bench/bootstrap` folder you will find [jss](http://jsstyles.github.io/jss/bench/bootstrap/jss.html) and [css](http://jsstyles.github.io/jss/bench/bootstrap/css.html) files. You need to try more than once to have some average value.
1. How fast would bootstrap css lib render?
I have converted bootstraps css to jss. In `bench/bootstrap` folder you will find [jss](http://jsstyles.github.io/jss/bench/bootstrap/jss.html) and [css](http://jsstyles.github.io/jss/bench/bootstrap/css.html) files. You need to try more than once to have some average value.
In my tests overhead is 10-15ms.
On my machine overhead is about 10-15ms.
1. Rendering jss vs. css (same styles) [jsperf bench](http://jsperf.com/jss-vs-css/3).
## Run tests

@@ -274,0 +304,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