postcss-nesting - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 2.0.3 (2015-09-22)
+
+- Updated: Refactored plugin
+- Updated: Tests
+- Updated: PostCSS 5.0.6
+
 ## 2.0.2 (2015-09-16)
@@ -2,0 +8,0 @@

CONTRIBUTING.md

@@ -10,3 +10,3 @@ You want to help? You rock! Now, take a moment to be sure your contributions make sense to everyone else.
 
-Remember, a bug is a _demonstrable problem_ caused by _our_ code.
+Remember, a bug is a _demonstrable problem_ caused by _our_ code. Please use this [demo] as a testing platform. You can share code entered here at any time by pressing the Meta and S keys (`⌘S`) to save the current code as a URL.
 
@@ -58,5 +58,6 @@ ## Submitting Pull Requests
 [already been reported]: issues
+[demo]:                  http://jonathantneal.github.io/postcss-nesting/
 [fork this project]:     fork
 [live example]:          http://codepen.io/pen
 [open a pull request]:   https://help.github.com/articles/using-pull-requests/
-[reduced test case]:     https://css-tricks.com/reduced-test-cases/
+[reduced test case]:     https://css-tricks.com/reduced-test-cases/

index.js

@@ -1,14 +0,3 @@
-var bubble  = ['document', 'media', 'supports'];
 var postcss = require('postcss');
-var prefix  = '';
 
-function normalizeNodes(node) {
-	var index = -1;
-	var child;
-
-	while (child = node.nodes[++index]) {
-		child.parent = node;
-	}
-}
-
 function transpileSelectors(fromRule, toRule) {
@@ -19,98 +8,56 @@ var selectors = [];
 		toRule.selectors.forEach(function (toSelector) {
-			if (toSelector.indexOf('&') === -1) {
-				selectors.push(fromSelector + ' ' + toSelector);
-			} else {
-				selectors.push(toSelector.replace(/&/g, fromSelector));
-			}
+			selectors.push(toSelector.replace(/&/g, fromSelector));
 		});
 	});
 
-	return selectors;
+	toRule.selectors = selectors;
 }
 
-function transpileNestRule(fromRule, toRule, atRule) {
-	var parent = fromRule.parent;
+module.exports = postcss.plugin('postcss-nested', function (opts) {
+	var bubble = ['document', 'media', 'supports'];
+	var name   = 'nest';
 
-	if (!('nestedIndex' in parent)) {
-		parent.nestedIndex = parent.nodes.indexOf(fromRule);
-	}
+	if (opts && opts.bubble) bubble = bubble.concat(opts.bubble);
+	if (opts && opts.prefix) name   = '-' + opts.prefix + '-' + name;
 
-	fromRule.nodes.splice(fromRule.nodes.indexOf(atRule), 1);
+	return function (css) {
+		css.walkAtRules(function (atrule) {
+			var rule = atrule.parent;
+			var root = rule && rule.parent;
 
-	toRule.nodes     = atRule.nodes.splice(0);
-	toRule.parent    = parent;
-	toRule.selector  = atRule.params;
-	toRule.selectors = transpileSelectors(fromRule, toRule);
+			if (root && rule.type === 'rule') {
+				var newrule = postcss.rule({
+					raws: atrule.raws
+				});
 
-	normalizeNodes(toRule);
+				if (atrule.name === name && atrule.params.indexOf('&') !== -1) {
+					atrule.remove();
 
-	parent.nodes.splice(++parent.nestedIndex, 0, toRule);
-}
+					newrule.selector = atrule.params;
 
-function transpileAtRule(fromRule, toRule, atRule) {
-	var parent = fromRule.parent;
+					newrule.append(atrule.nodes);
 
-	if (!('nestedIndex' in parent)) {
-		parent.nestedIndex = parent.nodes.indexOf(fromRule);
-	}
+					transpileSelectors(rule, newrule);
 
-	fromRule.nodes.splice(fromRule.nodes.indexOf(atRule), 1);
+					root.insertAfter(rule.insertAfterNode || rule, newrule);
 
-	toRule.nodes     = atRule.nodes.splice(0);
-	toRule.parent    = atRule;
-	toRule.selector  = fromRule.selector;
+					rule.insertAfterNode = newrule;
+				} else if (bubble.indexOf(atrule.name) !== -1) {
+					atrule.remove();
 
-	normalizeNodes(toRule);
+					newrule.selector = rule.selector;
 
-	atRule.nodes  = [toRule];
-	atRule.parent = parent;
+					newrule.append(atrule.nodes);
 
-	parent.nodes.splice(++parent.nestedIndex, 0, atRule);
-}
+					atrule.removeAll();
 
-function transpileRule(rule) {
-	var nodes = rule.nodes;
-	var index = -1;
-	var name  = prefix ? '-' + prefix + '-nest' : 'nest';
-	var child;
+					atrule.append(newrule);
 
-	// for each node
-	while (child = nodes[++index]) {
-		// if node is atrule
-		if (child.type === 'atrule') {
-			var newRule = postcss.rule();
+					root.insertAfter(rule.insertAfterNode || rule, atrule);
 
-			// if atrule is nest
-			if (child.name === name && child.params.indexOf('&') !== -1) {
-				transpileNestRule(rule, newRule, child);
-
-				transpileRule(newRule);
-
-				--index;
-			} else if (bubble.indexOf(child.name) !== -1) {
-				transpileAtRule(rule, newRule, child);
-
-				transpileRule(newRule);
-
-				--index;
+					rule.insertAfterNode = atrule;
+				}
 			}
-		}
-	}
-}
-
-module.exports = postcss.plugin('postcss-nested', function (opts) {
-	if (opts && opts.bubble) bubble = bubble.concat(opts.bubble);
-	if (opts && opts.prefix) prefix = opts.prefix;
-
-	return function (css) {
-		var nodes = css.nodes;
-		var index = -1;
-		var child;
-
-		while (child = nodes[++index]) {
-			if (child.type === 'rule') {
-				transpileRule(child);
-			}
-		}
+		});
 	};
 });

package.json

 {
   "name": "postcss-nesting",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Transpiles nested rules according to CSS Nesting Module Level 3",
@@ -24,6 +24,6 @@ "keywords": [
   "dependencies": {
-    "postcss": "^5.0.5"
+    "postcss": "^5.0.6"
   },
   "devDependencies": {
-    "chai": "^3.2.0",
+    "chai": "^3.3.0",
     "gulp": "^3.9.0",
@@ -30,0 +30,0 @@ "gulp-eslint": "^1.0.0",

README.md

@@ -5,6 +5,4 @@ # CSS Nesting [![Build Status][ci-img]][ci]
 
-[CSS Nesting] is a [PostCSS] plugin that allows you to nest one style rule inside another, similar to Sass, but following the [CSS Nesting Module Level 3] specification.
+[CSS Nesting] is a [PostCSS] plugin that allows you to nest one style rule inside another, following the [CSS Nesting Module Level 3] specification.
 
-This greatly increases the modularity and maintainability of CSS stylesheets.
-
 ```css
@@ -69,2 +67,4 @@ /* before */
 
+Use [CSS Nesting] directly:
+
 ```js
@@ -82,3 +82,3 @@ require('postcss-nesting')({ /* options */ }).process(YOUR_CSS);
 
-Load [CSS Nesting] as a PostCSS plugin:
+Use [CSS Nesting] as a PostCSS plugin:
 
@@ -99,3 +99,3 @@ ```js
 
-Enable [CSS Nesting] within your Gulpfile:
+Use [CSS Nesting] within your Gulpfile:
 
@@ -124,3 +124,3 @@ ```js
 
-Enable [CSS Nesting] within your Gruntfile:
+Use [CSS Nesting] within your Gruntfile:
 
@@ -163,5 +163,6 @@ ```js
 [ci-img]: https://travis-ci.org/jonathantneal/postcss-nesting.svg
+[CSS Nesting]: https://github.com/jonathantneal/postcss-nesting
+[CSS Nesting Module Level 3]: http://tabatkins.github.io/specs/css-nesting/
 [Gulp PostCSS]: https://github.com/postcss/gulp-postcss
 [Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
-[CSS Nesting]: https://github.com/jonathantneal/postcss-nesting
 [PostCSS]: https://github.com/postcss/postcss

No alert changes

Improved metrics

Number of lines in readme file

163

increased by0.62%

Worsened metrics

Total package byte prevSize

13705

decreased by-5.43%

Lines of code

43

decreased by-50.57%

Dependency changes

• Updatedpostcss@^5.0.6