jss - npm Package Compare versions

Comparing version 0.2.7 to 0.2.8

bin/cli.js

@@ -74,4 +74,5 @@ #!/usr/bin/env node
     .description('path to the source file')
-    .action(function (path) {
-        program.sourcePath = path
+    .action(function (source) {
+        if (source[0] != '/') source = path.resolve(process.cwd(), source)
+        program.sourcePath = source
     })
@@ -83,16 +84,13 @@
 
-var source = {
-    path: program.sourcePath
-}
-if (source.path[0] != '/') source.path = path.resolve(process.cwd(), source.path)
+;(function convert() {
+    var code = fs.readFileSync(program.sourcePath, 'utf-8')
+    var ast = css.parse(code)
 
-source.code = fs.readFileSync(source.path, 'utf-8')
-source.ast = css.parse(source.code)
-if (source.ast && source.ast.stylesheet && source.ast.stylesheet && source.ast.stylesheet.rules) {
-    var jss = toJss(source.ast.stylesheet.rules)
-    var space = program.pretty ? '  ' : ''
-    var output = JSON.stringify(jss, null, space)
-    output = program.export + output + ';'
-    console.log(output)
-}
-
+    if (ast.stylesheet && ast.stylesheet.rules) {
+        var jss = toJss(ast.stylesheet.rules)
+        var spaces = program.pretty ? '  ' : ''
+        var output = JSON.stringify(jss, null, spaces)
+        output = program.export + output + ';'
+        console.log(output)
+    }
+}())

bower.json

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

dist/jss.js

@@ -59,3 +59,3 @@ !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){
  */
-Rule.prototype.runPreprocessors = function () {
+Rule.prototype.runPreprocessors = function () {
     for (var i = 0; i < processors.length; i++) {
@@ -130,3 +130,3 @@ processors[i](this)
  */
-Stylesheet.prototype.attach = function () {
+Stylesheet.prototype.attach = function () {
     if (this.attached) return this
@@ -151,3 +151,3 @@
  */
-Stylesheet.prototype.detach = function () {
+Stylesheet.prototype.detach = function () {
     if (!this.attached) return this
@@ -210,3 +210,3 @@
  */
-Stylesheet.prototype.toString = function () {
+Stylesheet.prototype.toString = function () {
     var str = ''
@@ -264,3 +264,3 @@ var rules = this.rules
  */
-Stylesheet.prototype.createElement = function () {
+Stylesheet.prototype.createElement = function () {
     var el = document.createElement('style')
@@ -377,3 +377,3 @@ for (var name in this.attributes) el.setAttribute(name, this.attributes[name])
         if (prop[0] == '&') {
-            var selector = rule.selector + prop.substr(1)
+            var selector = prop.replace(/&/gi, rule.selector)
             stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
@@ -380,0 +380,0 @@ delete style[prop]

dist/jss.min.js

@@ -8,2 +8,2 @@ !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.jss=e()}}(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){module.exports=require("./lib/index")},{"./lib/index":4}],2:[function(require,module,exports){"use strict";var uid=0;var processors=[];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.toString=function(){var style=this.style;var str=this.selector+" {";for(var prop in style){str+="\n  "+prop+": "+style[prop]+";"}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.rules={};this.attributes=attributes||{};this.classes={};this.text="";if(!this.attributes.type)this.attributes.type="text/css";if(!this.attributes.media)this.attributes.media="screen";if(!this.attributes.title)this.attributes.title="Generated by jss.";this.element=this.createElement();if(rules)this.createRules(rules)}module.exports=Stylesheet;Stylesheet.prototype.attach=function(){if(this.attached)return this;if(!this.text){this.text=this.toString();this.element.innerHTML="\n"+this.text+"\n"}document.head.appendChild(this.element);this.attached=true;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 rule=this.createRule(key,style);var sheet=this.element.sheet;sheet.insertRule(rule.toString(),sheet.cssRules.length);return rule};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.createRule=function(key,style){var selector,name;if(this.named)name=key;else selector=key;var rule=new Rule(selector,style,this);this.rules[name||rule.selector]=rule;if(this.named)this.classes[name]=rule.className;rule.runPreprocessors();return rule};Stylesheet.prototype.createRules=function(rules){for(var key in rules){this.createRule(key,rules[key])}return this};Stylesheet.prototype.createElement=function(){var el=document.createElement("style");for(var name in this.attributes)el.setAttribute(name,this.attributes[name]);return el}},{"./Rule":2}],4:[function(require,module,exports){/**
  */
-"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style)}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6}],5:[function(require,module,exports){"use strict";module.exports=function(rule){var style=rule.style;if(!style)return;var extend=style.extend;if(!extend)return;var newStyle={};var prop;if("length"in extend){for(var i=0;i<extend.length;i++){for(prop in extend[i])newStyle[prop]=extend[i][prop]}}else{for(prop in extend)newStyle[prop]=extend[prop]}for(prop in style){if(prop!="extend")newStyle[prop]=style[prop]}rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var Rule=require("../Rule");module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=rule.selector+prop.substr(1);stylesheet.rules[selector]=new Rule(selector,style[prop],stylesheet);delete style[prop]}}}},{"../Rule":2}]},{},[1])(1)});
+"use strict";var Stylesheet=require("./Stylesheet");var Rule=require("./Rule");[require("./processors/nested"),require("./processors/extend")].forEach(Rule.addPreprocessor);exports.Stylesheet=Stylesheet;exports.Rule=Rule;exports.createStylesheet=function(rules,named,attributes){return new Stylesheet(rules,named,attributes)};exports.createRule=function(selector,style){return new Rule(selector,style)}},{"./Rule":2,"./Stylesheet":3,"./processors/extend":5,"./processors/nested":6}],5:[function(require,module,exports){"use strict";module.exports=function(rule){var style=rule.style;if(!style)return;var extend=style.extend;if(!extend)return;var newStyle={};var prop;if("length"in extend){for(var i=0;i<extend.length;i++){for(prop in extend[i])newStyle[prop]=extend[i][prop]}}else{for(prop in extend)newStyle[prop]=extend[prop]}for(prop in style){if(prop!="extend")newStyle[prop]=style[prop]}rule.style=newStyle}},{}],6:[function(require,module,exports){"use strict";var Rule=require("../Rule");module.exports=function(rule){var stylesheet=rule.stylesheet;var style=rule.style;for(var prop in style){if(prop[0]=="&"){var selector=prop.replace(/&/gi,rule.selector);stylesheet.rules[selector]=new Rule(selector,style[prop],stylesheet);delete style[prop]}}}},{"../Rule":2}]},{},[1])(1)});

examples/commonjs/build.js

@@ -89,3 +89,3 @@ (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){
  */
-Rule.prototype.runPreprocessors = function () {
+Rule.prototype.runPreprocessors = function () {
     for (var i = 0; i < processors.length; i++) {
@@ -160,3 +160,3 @@ processors[i](this)
  */
-Stylesheet.prototype.attach = function () {
+Stylesheet.prototype.attach = function () {
     if (this.attached) return this
@@ -181,3 +181,3 @@
  */
-Stylesheet.prototype.detach = function () {
+Stylesheet.prototype.detach = function () {
     if (!this.attached) return this
@@ -240,3 +240,3 @@
  */
-Stylesheet.prototype.toString = function () {
+Stylesheet.prototype.toString = function () {
     var str = ''
@@ -294,3 +294,3 @@ var rules = this.rules
  */
-Stylesheet.prototype.createElement = function () {
+Stylesheet.prototype.createElement = function () {
     var el = document.createElement('style')
@@ -407,3 +407,3 @@ for (var name in this.attributes) el.setAttribute(name, this.attributes[name])
         if (prop[0] == '&') {
-            var selector = rule.selector + prop.substr(1)
+            var selector = prop.replace(/&/gi, rule.selector)
             stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
@@ -410,0 +410,0 @@ delete style[prop]

history.md

@@ -0,1 +1,5 @@
+## 0.2.8 / 2014-11-02
+
+- add possibility write multi nested selector in one line #18
+
 ## 0.2.7 / 2014-11-02
@@ -2,0 +6,0 @@

lib/processors/nested.js

@@ -17,3 +17,3 @@ 'use strict'
         if (prop[0] == '&') {
-            var selector = rule.selector + prop.substr(1)
+            var selector = prop.replace(/&/gi, rule.selector)
             stylesheet.rules[selector] = new Rule(selector, style[prop], stylesheet)
@@ -20,0 +20,0 @@ delete style[prop]

lib/Rule.js

@@ -55,3 +55,3 @@ 'use strict'
  */
-Rule.prototype.runPreprocessors = function () {
+Rule.prototype.runPreprocessors = function () {
     for (var i = 0; i < processors.length; i++) {
@@ -58,0 +58,0 @@ processors[i](this)

lib/Stylesheet.js

@@ -43,3 +43,3 @@ 'use strict'
  */
-Stylesheet.prototype.attach = function () {
+Stylesheet.prototype.attach = function () {
     if (this.attached) return this
@@ -64,3 +64,3 @@
  */
-Stylesheet.prototype.detach = function () {
+Stylesheet.prototype.detach = function () {
     if (!this.attached) return this
@@ -123,3 +123,3 @@
  */
-Stylesheet.prototype.toString = function () {
+Stylesheet.prototype.toString = function () {
     var str = ''
@@ -177,3 +177,3 @@ var rules = this.rules
  */
-Stylesheet.prototype.createElement = function () {
+Stylesheet.prototype.createElement = function () {
     var el = document.createElement('style')
@@ -180,0 +180,0 @@ for (var name in this.attributes) el.setAttribute(name, this.attributes[name])

package.json

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

readme.md

@@ -27,3 +27,3 @@ ## Dynamic stylesheets for web components.
 
-Put an ampersand before a selector within a rule and it will be converted to a separate rule with a [nested selector.](http://kof.github.io/jss/examples/nested/index.html)
+Put an ampersand before a selector within a rule and it will be replaced by the parent selector and extracted to a separate rule with a [nested selector.](http://kof.github.io/jss/examples/nested/index.html)
 
@@ -42,2 +42,5 @@
             background: 'red'
+        },
+        '&.selected, &.active': {
+            border: '1px solid red'
         }
@@ -57,2 +60,5 @@ }
 }
+.container.selected, .container.active {
+    border: 1px solid red;
+}
 ```
@@ -59,0 +65,0 @@

test/processors/extend.js

 QUnit.module('Extend preprocessor')
 
-test('simple extend', function () {
+test('simple extend', function () {
     var a = {float: 'left'}
@@ -17,3 +17,3 @@ var ss = new jss.Stylesheet({
 
-test('multi extend', function () {
+test('multi extend', function () {
     var a = {float: 'left'}
@@ -20,0 +20,0 @@ var b = {position: 'absolute'}

test/processors/nested.js

 QUnit.module('Nested preprocessor')
 
-test('nesting extend', function () {
+test('nesting with space', function () {
     var ss = new jss.Stylesheet({
         a: {
             float: 'left',
-            '& b': {
-                float: 'left'
-            }
+            '& b': {float: 'left'}
         }
@@ -16,1 +14,39 @@ })
 })
+
+test('nesting without space', function () {
+    var ss = new jss.Stylesheet({
+        a: {
+            float: 'left',
+            '&b': {float: 'left'}
+        }
+    })
+    ok(ss.rules.a instanceof jss.Rule)
+    ok(ss.rules['ab'] instanceof jss.Rule)
+    equal(ss.toString(), 'a {\n  float: left;\n}\nab {\n  float: left;\n}')
+})
+
+test('multi nesting', function () {
+    var ss = new jss.Stylesheet({
+        a: {
+            float: 'left',
+            '&b': {float: 'left'},
+            '& c': {float: 'left'}
+        }
+    })
+    ok(ss.rules.a instanceof jss.Rule)
+    ok(ss.rules.ab instanceof jss.Rule)
+    ok(ss.rules['a c'] instanceof jss.Rule)
+    equal(ss.toString(), 'a {\n  float: left;\n}\nab {\n  float: left;\n}\na c {\n  float: left;\n}')
+})
+
+test('multi nesting in one selector', function () {
+    var ss = new jss.Stylesheet({
+        a: {
+            float: 'left',
+            '&b, &c': {float: 'left'}
+        }
+    })
+    ok(ss.rules.a instanceof jss.Rule)
+    ok(ss.rules['ab, ac'] instanceof jss.Rule)
+    equal(ss.toString(), 'a {\n  float: left;\n}\nab, ac {\n  float: left;\n}')
+})

test/Rule.js

 QUnit.module('Rule')
 
-test('create empty instance', function () {
+test('create empty instance', function () {
     var rule = new jss.Rule()
@@ -14,3 +14,3 @@ equal(rule.className, 'jss-0')
 
-test('create instance with selector only', function () {
+test('create instance with selector only', function () {
     var rule = new jss.Rule('a')
@@ -22,3 +22,3 @@ equal(rule.selector, 'a')
 
-test('create instance with styles only', function () {
+test('create instance with styles only', function () {
     var rule = new jss.Rule({float: 'left'})
@@ -31,3 +31,3 @@ equal(rule.stylesheet, undefined)
 
-test('create instance with styles and stylesheet', function () {
+test('create instance with styles and stylesheet', function () {
     var ss = {}
@@ -41,3 +41,3 @@ var rule = new jss.Rule({float: 'left'}, ss)
 
-test('create instance with all params', function () {
+test('create instance with all params', function () {
     var ss = {}
@@ -51,3 +51,3 @@ var rule = new jss.Rule('a', {float: 'left'}, ss)
 
-test('add preprocessor', function () {
+test('add preprocessor', function () {
     var preprocessor = function () {}
@@ -59,3 +59,3 @@ var preprocessors = jss.Rule.addPreprocessor(preprocessor)
 
-test('run preprocessors', function () {
+test('run preprocessors', function () {
     var executed = false
@@ -70,3 +70,3 @@ function preprocessor() {
 
-test('toString', function () {
+test('toString', function () {
     var rule = new jss.Rule('a', {float: 'left', width: '1px'})
@@ -73,0 +73,0 @@ equal(rule.toString(), 'a {\n  float: left;\n  width: 1px;\n}')

test/Stylesheet.js

 QUnit.module('Stylesheet')
 
-test('create empty instance', function () {
+test('create empty instance', function () {
     var ss = new jss.Stylesheet()
@@ -17,3 +17,3 @@ equal(ss.attached, false)
 
-test('create instance with rules', function () {
+test('create instance with rules', function () {
     var ss = new jss.Stylesheet({a: {float: 'left'}})
@@ -23,3 +23,3 @@ ok(ss.rules.a instanceof jss.Rule)
 
-test('create instance with rules and generated classes', function () {
+test('create instance with rules and generated classes', function () {
     var ss = new jss.Stylesheet({a: {float: 'left'}}, true)
@@ -31,3 +31,3 @@ equal(typeof ss.classes.a, 'string')
 
-test('create instance with rules and attributes', function () {
+test('create instance with rules and attributes', function () {
     var ss = new jss.Stylesheet({a: {float: 'left'}}, {test: 1})
@@ -39,3 +39,3 @@ ok(ss.rules.a instanceof jss.Rule)
 
-test('create instance with all params', function () {
+test('create instance with all params', function () {
     var ss = new jss.Stylesheet({a: {float: 'left'}}, true, {test: 1})
@@ -48,3 +48,3 @@ equal(typeof ss.classes.a, 'string')
 
-test('attach/detach', function () {
+test('attach/detach', function () {
     var ss = new jss.Stylesheet({abc: {float: 'left'}}).attach()
@@ -60,3 +60,3 @@ var style = document.getElementsByTagName('style')[0]
 
-test('addRule/getRule', function () {
+test('addRule/getRule', function () {
     var ss = new jss.Stylesheet().attach()
@@ -72,3 +72,3 @@ var rule = ss.addRule('aa', {float: 'left'})
 
-test('addRules', function () {
+test('addRules', function () {
     var ss = new jss.Stylesheet().attach()
@@ -80,5 +80,8 @@ ss.addRules({aa: {float: 'left'}})
 
-test('toString', function () {
+test('toString', function () {
     var ss = new jss.Stylesheet({a: {float: 'left', width: '1px'}})
+    ss.attach()
     equal(ss.toString(), 'a {\n  float: left;\n  width: 1px;\n}')
+    equal(ss.element.innerHTML, '\na {\n  float: left;\n  width: 1px;\n}\n')
+    ss.detach()
 })

New alerts

License Policy Violation

License

This 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

License

This 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

329710

increased by0.43%

Lines of code

7747

increased by0.45%

Number of lines in readme file

279

increased by2.2%

No dependency changes