jss-nested - npm Package Compare versions

Comparing version 2.1.0 to 2.2.1

dist/jss-nested.js

@@ -66,3 +66,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	exports.default = jssNested;
-	var warn = console.warn.bind(console); // eslint-disable-line no-console
+	var consoleWarn = console.warn.bind(console); // eslint-disable-line no-console
 	var parentRegExp = /&/g;
@@ -72,14 +72,2 @@ var refRegExp = /\$(\w+)/g;
 	/**
-	 * Get a function to be used for $ref replacement.
-	 */
-	function getReplaceRef(sheet) {
-	  return function (match, name) {
-	    var rule = sheet.getRule(name);
-	    if (rule) return rule.selector;
-	    warn('JSS: could not find the referenced rule ' + name + '.');
-	    return name;
-	  };
-	}
-
-	/**
 	 * Convert nested rules to separate, remove them from original styles.
@@ -91,20 +79,35 @@ *
 	function jssNested() {
+	  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+	  var _ref$warn = _ref.warn;
+	  var warn = _ref$warn === undefined ? consoleWarn : _ref$warn;
+
+	  // Get a function to be used for $ref replacement.
+	  function getReplaceRef(container) {
+	    return function (match, name) {
+	      var rule = container.getRule(name);
+	      if (rule) return rule.selector;
+	      warn('[JSS] Could not find the referenced rule "' + name + '".');
+	      return name;
+	    };
+	  }
+
 	  return function (rule) {
 	    if (rule.type !== 'regular') return;
-	    var _rule$options = rule.options;
-	    var sheet = _rule$options.sheet;
-	    var jss = _rule$options.jss;
-	    var parent = _rule$options.parent;
-
-	    var container = sheet || jss;
+	    var container = rule.options.parent;
 	    var options = void 0;
 	    var replaceRef = void 0;
+	    var index = void 0;
 
-	    if (parent && parent.type === 'conditional') {
-	      container = parent;
-	    }
-
 	    for (var prop in rule.style) {
 	      if (prop[0] === '&') {
-	        if (!options) options = _extends({}, rule.options, { named: false });
+	        if (!options) {
+	          var level = rule.options.level;
+
+	          level = level === undefined ? 1 : level + 1;
+	          if (level > 1) warn('[JSS] Nesting is too deep "' + prop + '".');
+	          options = _extends({}, rule.options, { named: false, level: level, index: index });
+	        }
+	        index = (index === undefined ? container.indexOf(rule) : index) + 1;
+	        options.index = index;
 	        // Lazily create the ref replacer function just once for all nested rules within
@@ -120,7 +123,3 @@ // the sheet.
 
-	        // Conditional rule has no `.addRule()`.
-	        // Use `.addRule()` in regular rules to render a nested rule
-	        // when a sheet is attached.
-	        var method = container.addRule ? 'addRule' : 'createRule';
-	        container[method](name, rule.style[prop], options);
+	        container.addRule(name, rule.style[prop], options);
 	        delete rule.style[prop];
@@ -127,0 +126,0 @@ }

dist/jss-nested.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssNested=t():e.jssNested=t()}(this,function(){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t){"use strict";function r(e){return function(t,r){var o=e.getRule(r);return o?o.selector:(s("JSS: could not find the referenced rule "+r+"."),r)}}function o(){return function(e){if("regular"===e.type){var t=e.options,o=t.sheet,s=t.jss,c=t.parent,a=o||s,l=void 0,d=void 0;c&&"conditional"===c.type&&(a=c);for(var f in e.style)if("&"===f[0]){l||(l=n({},e.options,{named:!1})),d||(d=r(a));var p=f.replace(i,e.selector).replace(u,d),v=a.addRule?"addRule":"createRule";a[v](p,e.style[f],l),delete e.style[f]}}}}Object.defineProperty(t,"__esModule",{value:!0});var n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e};t["default"]=o;var s=console.warn.bind(console),i=/&/g,u=/\$(\w+)/g}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.jssNested=t():e.jssNested=t()}(this,function(){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t){"use strict";function o(){function e(e){return function(t,o){var r=e.getRule(o);return r?r.selector:(s('[JSS] Could not find the referenced rule "'+o+'".'),o)}}var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],o=t.warn,s=void 0===o?n:o;return function(t){if("regular"===t.type){var o=t.options.parent,n=void 0,l=void 0,a=void 0;for(var f in t.style)if("&"===f[0]){if(!n){var u=t.options.level;u=void 0===u?1:u+1,u>1&&s('[JSS] Nesting is too deep "'+f+'".'),n=r({},t.options,{named:!1,level:u,index:a})}a=(void 0===a?o.indexOf(t):a)+1,n.index=a,l||(l=e(o));var c=f.replace(i,t.selector).replace(d,l);o.addRule(c,t.style[f],n),delete t.style[f]}}}}Object.defineProperty(t,"__esModule",{value:!0});var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e};t["default"]=o;var n=console.warn.bind(console),i=/&/g,d=/\$(\w+)/g}])});

history.md

@@ -0,1 +1,13 @@
+## 2.2.1 / 2016-09-07
+
+- don't use es6 in tests.webpack.js, because it is loaded from jss without babelifying
+
+## 2.2.0 / 2016-09-05
+
+- upgrade jss to 5.5.0
+- fix the order of extracted nested rules
+- deprecate nesting level is higher than 1 (was never fully supported)
+- warn if nesting level is too high
+- migrate to mocha
+
 ## 2.1.0 / 2016-08-15
@@ -2,0 +14,0 @@

lib/index.js

@@ -10,3 +10,3 @@ 'use strict';
 exports.default = jssNested;
-var warn = console.warn.bind(console); // eslint-disable-line no-console
+var consoleWarn = console.warn.bind(console); // eslint-disable-line no-console
 var parentRegExp = /&/g;
@@ -16,14 +16,2 @@ var refRegExp = /\$(\w+)/g;
 /**
- * Get a function to be used for $ref replacement.
- */
-function getReplaceRef(sheet) {
-  return function (match, name) {
-    var rule = sheet.getRule(name);
-    if (rule) return rule.selector;
-    warn('JSS: could not find the referenced rule ' + name + '.');
-    return name;
-  };
-}
-
-/**
  * Convert nested rules to separate, remove them from original styles.
@@ -35,20 +23,35 @@ *
 function jssNested() {
+  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _ref$warn = _ref.warn;
+  var warn = _ref$warn === undefined ? consoleWarn : _ref$warn;
+
+  // Get a function to be used for $ref replacement.
+  function getReplaceRef(container) {
+    return function (match, name) {
+      var rule = container.getRule(name);
+      if (rule) return rule.selector;
+      warn('[JSS] Could not find the referenced rule "' + name + '".');
+      return name;
+    };
+  }
+
   return function (rule) {
     if (rule.type !== 'regular') return;
-    var _rule$options = rule.options;
-    var sheet = _rule$options.sheet;
-    var jss = _rule$options.jss;
-    var parent = _rule$options.parent;
-
-    var container = sheet || jss;
+    var container = rule.options.parent;
     var options = void 0;
     var replaceRef = void 0;
+    var index = void 0;
 
-    if (parent && parent.type === 'conditional') {
-      container = parent;
-    }
-
     for (var prop in rule.style) {
       if (prop[0] === '&') {
-        if (!options) options = _extends({}, rule.options, { named: false });
+        if (!options) {
+          var level = rule.options.level;
+
+          level = level === undefined ? 1 : level + 1;
+          if (level > 1) warn('[JSS] Nesting is too deep "' + prop + '".');
+          options = _extends({}, rule.options, { named: false, level: level, index: index });
+        }
+        index = (index === undefined ? container.indexOf(rule) : index) + 1;
+        options.index = index;
         // Lazily create the ref replacer function just once for all nested rules within
@@ -64,7 +67,3 @@ // the sheet.
 
-        // Conditional rule has no `.addRule()`.
-        // Use `.addRule()` in regular rules to render a nested rule
-        // when a sheet is attached.
-        var method = container.addRule ? 'addRule' : 'createRule';
-        container[method](name, rule.style[prop], options);
+        container.addRule(name, rule.style[prop], options);
         delete rule.style[prop];
@@ -71,0 +70,0 @@ }

package.json

 {
   "name": "jss-nested",
   "description": "JSS plugin that enables support for nested selectors",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "author": {
@@ -14,2 +14,5 @@ "name": "Oleg Slobodskoi",
   "keywords": [
+    "cssinnjs",
+    "css-in-js",
+    "css in js",
     "jss",
@@ -20,6 +23,4 @@ "plugin",
   ],
-  "engines": {},
   "scripts": {
-    "all": "npm run lint && npm run build",
-    "test": "opener ./test/index.html",
+    "all": "npm run lint && npm run test && npm run build",
     "build": "npm run clean && npm run build:lib && npm run build:max && npm run build:min",
@@ -31,3 +32,5 @@ "clean": "rimraf ./lib/*",
     "lint": "eslint ./src",
-    "prepublish": "npm run all && git push --tags"
+    "test": "karma start --single-run ",
+    "test:watch": "karma start",
+    "prepublish": "npm run all"
   },
@@ -49,11 +52,24 @@ "license": "MIT",
     "eslint-plugin-react": "^5.0.1",
-    "jss": "^5.2.0",
-    "opener": "^1.4.1",
-    "qunitjs": "^1.21.0",
+    "expect.js": "^0.3.1",
+    "jss": "^5.5.0",
+    "karma": "^1.1.1",
+    "karma-benchmark": "^0.6.0",
+    "karma-benchmark-reporter": "^0.1.1",
+    "karma-browserstack-launcher": "^1.0.0",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-coverage": "^1.1.0",
+    "karma-firefox-launcher": "^1.0.0",
+    "karma-mocha": "^1.0.1",
+    "karma-mocha-reporter": "^2.0.2",
+    "karma-safari-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.7.0",
+    "lodash.assign": "^4.0.9",
+    "mocha": "^3.0.2",
     "rimraf": "^2.5.4",
-    "webpack": "^1.13.1"
+    "webpack": "^1.12.2"
   },
   "peerDependencies": {
-    "jss": "^5.2.0"
+    "jss": "^5.5.0"
   }
 }

readme.md

 ![JSS logo](https://avatars1.githubusercontent.com/u/9503099?v=3&s=60)
 
-## JSS plugin that enables support for nested selectors
+## JSS plugin enables support for 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://cssinjs.github.io/examples/plugins/jss-nested/simple/index.html).
-
-You can also reference a local rule within the style sheet by using `$ruleName`.
-
 [Demo](http://cssinjs.github.io/examples/index.html#plugin-jss-nested) -
 [JSS](https://github.com/cssinjs/jss)
-
 [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/cssinjs/lobby)
 
+### Use `&` to reference selector of the parent rule.
 
-## Usage example
-
 ```javascript
-import jss from 'jss'
-import nested from 'jss-nested'
-
-jss.use(nested())
-
 const sheet = jss.createStyleSheet({
   container: {
-    padding: '20px',
+    padding: 20,
     '&:hover': {
@@ -42,10 +29,3 @@ background: 'blue'
       border: '1px solid red'
-    },
-    // Reference the local rule "button".
-    '& $button': {
-      padding: '10px'
     }
-  },
-  button: {
-    color: 'red'
   }
@@ -55,36 +35,68 @@ })
 
-```javascript
-console.log(sheet.toString())
-```
 ```css
-.container-12345 {
+.container-3775999496 {
   padding: 20px;
 }
-.container-12345:hover {
+.container-3775999496:hover {
   background: blue;
 }
-.container-12345.clear {
+.container-3775999496.clear {
   clear: both;
 }
-.container-12345 .button {
+.container-3775999496 .button {
   background: red;
 }
-.container-12345.selected, .container-12345.active {
+.container-3775999496.selected, .container-3775999496.active {
   border: 1px solid red;
 }
-.button-12341 {
-  color: red;
-}
-.container-12345 .button-12341 {
-  padding: 10px;
-}
 ```
 
+### Use `$ruleName` to reference a local rule within the same style sheet.
+
 ```javascript
-console.log(sheet.classes)
+const sheet = jss.createStyleSheet({
+  container: {
+    // Reference the local rule "button".
+    '& $button': {
+      padding: '10px'
+    },
+    // Multiple local refs in one rule.
+    '&:hover $button, &:active $button': {
+      color: 'red',
+    },
+    '&:focus $button': {
+      color: 'blue'
+    }
+  },
+  button: {
+    color: 'grey'
+  }
+})
 ```
-```javascript
-{ container: "jss-0-0" }
+
+```css
+.button-3940538223 {
+  color: grey;
+}
+.container-2645419599 .button-3940538223 {
+  padding: 10px;
+}
+.container-2645419599:hover .button-3940538223, .container-2645419599:active .button-3940538223 {
+  color: red;
+}
+.container-2645419599:focus .button-3940538223 {
+  color: blue;
+}
 ```
 
+### Deep nesting
+
+Deep nesting is not supported for multiple reasons:
+
+1. More than 2 levels of indentation lead to less readability from our experience.
+1. Components should never be big and so there should be no need for deep nesting.
+1. Even if they are big, deep nesting shouldn't be needed. Class names can be switched on nodes for different states.
+
+If you can provide a real life example where you __really need__ deep nesting - we would love to know it.
+
 ## Issues
@@ -91,0 +103,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

23582

increased by75.51%

Number of package files

16

increased by45.45%

Lines of code

423

increased by118.04%

Number of lines in readme file

114

increased by11.76%

Worsened metrics

Dev dependency count

30

increased by76.47%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes