postcss-nested 0.3.0 → 1.0.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 1.0.1
+* Clean up npm package.
+
+## 1.0
+* Use PostCSS 5.0 API.
+* Do not add spaces to selector in compressed CSS.
+* Move nodes with its comment above.
+
+## 0.3.2
+* Fix `@supports` at-rule support (by Ben Briggs).
+
+## 0.3.1
+* Pass PostCSS Plugin Guidelines.
+
 ## 0.3
 * Do not unwrap custom at-rules.
 * Add `bubble` option to unwrap some custom at-rules.

package/README.md

@@ -2,7 +2,7 @@
 
 <img align="right" width="135" height="95"
      title="Philosopher’s stone, logo of PostCSS"
-     src="http://postcss.github.io/postcss/logo-leftp.png">
+     src="http://postcss.github.io/postcss/logo-leftp.svg">
 
 [PostCSS] plugin to unwrap nested rules like how Sass does it.
 
@@ -42,13 +42,25 @@ body.is_dark .phone_title {
 }
 ```
 
+Use [postcss-current-selector] **after** this plugin if you want to use current selector in properties or variables values.
+
+Use [postcss-nested-ancestors] **before** this plugin if you want to reference any ancestor element directly in your selectors with `^&`.
+
+See also [postcss-nesting], which implements [Tab Atkin's proposed syntax](https://tabatkins.github.io/specs/css-nesting/) (requires the `&` and introduces `@nest`).
+
+There is also [postcss-nested-props] for nested properties like `font-size`.
+
 <a href="https://evilmartians.com/?utm_source=postcss-nested">
 <img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg" alt="Sponsored by Evil Martians" width="236" height="54">
 </a>
 
-[PostCSS]: https://github.com/postcss/postcss
-[ci-img]:  https://travis-ci.org/postcss/postcss-nested.svg
-[ci]:      https://travis-ci.org/postcss/postcss-nested
+[postcss-current-selector]: https://github.com/komlev/postcss-current-selector
+[postcss-nested-ancestors]: https://github.com/toomuchdesign/postcss-nested-ancestors
+[postcss-nested-props]:     https://github.com/jedmao/postcss-nested-props
+[postcss-nesting]:          https://github.com/jonathantneal/postcss-nesting
+[PostCSS]:                  https://github.com/postcss/postcss
+[ci-img]:                   https://travis-ci.org/postcss/postcss-nested.svg
+[ci]:                       https://travis-ci.org/postcss/postcss-nested
 
 ## Usage
 
@@ -62,7 +74,7 @@ See [PostCSS] docs for examples for your environment.
 
 ### `bubble`
 
-By default, plugin will unwrap only `@media`, `@support` and `@document`
+By default, plugin will unwrap only `@media`, `@supports` and `@document`
 at-rules. You can add your custom at-rules to this list by `bubble` option:
 
 ```js

package/index.js

@@ -1,59 +1,73 @@
 var postcss = require('postcss');
 
-var selector = function (parent, node) {
-    return parent.selectors.map(function (i) {
-        return node.selectors.map(function (j) {
+function selectors(parent, node) {
+    var result = [];
+    parent.selectors.forEach(function (i) {
+        node.selectors.forEach(function (j) {
             if ( j.indexOf('&') === -1 ) {
-                return i + ' ' + j;
+                result.push(i + ' ' + j);
             } else {
-                return j.replace(/&/g, i);
+                result.push(j.replace(/&/g, i));
             }
-        }).join(', ');
-    }).join(', ');
-};
+        });
+    });
+    return result;
+}
+
+function pickComment(comment, after) {
+    if ( comment && comment.type === 'comment' ) {
+        return comment.moveAfter(after);
+    } else {
+        return after;
+    }
+}
 
-var atruleChilds = function (rule, atrule) {
-    var decls = [];
+function atruleChilds(rule, atrule) {
+    var children = [];
     atrule.each(function (child) {
-        if ( child.type === 'decl' ) {
-            decls.push( child );
+        if ( child.type === 'comment' ) {
+            children.push( child );
+        } if ( child.type === 'decl' ) {
+            children.push( child );
         } else if ( child.type === 'rule' ) {
-            child.selector = selector(rule, child);
+            child.selectors = selectors(rule, child);
         } else if ( child.type === 'atrule' ) {
             atruleChilds(rule, child);
         }
     });
-    if ( decls.length ) {
+    if ( children.length ) {
         var clone = rule.clone({ nodes: [] });
-        for ( var i = 0; i < decls.length; i++ ) decls[i].moveTo(clone);
+        for ( var i = 0; i < children.length; i++ ) children[i].moveTo(clone);
         atrule.prepend(clone);
     }
-};
+}
 
-var processRule = function (rule, bubble) {
+function processRule(rule, bubble) {
     var unwrapped = false;
     var after     = rule;
     rule.each(function (child) {
         if ( child.type === 'rule' ) {
             unwrapped = true;
-            child.selector = selector(rule, child);
+            child.selectors = selectors(rule, child);
+            after = pickComment(child.prev(), after);
             after = child.moveAfter(after);
         } else if ( child.type === 'atrule' ) {
             if ( bubble.indexOf(child.name) !== -1 ) {
                 unwrapped = true;
                 atruleChilds(rule, child);
+                after = pickComment(child.prev(), after);
                 after = child.moveAfter(after);
             }
         }
     });
     if ( unwrapped ) {
-        rule.semicolon = true;
-        if ( rule.nodes.length === 0 ) rule.removeSelf();
+        rule.raws.semicolon = true;
+        if ( rule.nodes.length === 0 ) rule.remove();
     }
-};
+}
 
 module.exports = postcss.plugin('postcss-nested', function (opts) {
-    var bubble = ['media', 'support', 'document'];
+    var bubble = ['media', 'supports', 'document'];
     if ( opts && opts.bubble ) {
         bubble = bubble.concat(opts.bubble.map(function (i) {
             return i.replace(/^@/, '');

package/package.json

@@ -1,25 +1,32 @@
 {
-    "name": "postcss-nested",
-    "version": "0.3.0",
-    "description": "PostCSS plugin to unwrap nested rules like how Sass does it.",
-    "keywords": ["postcss", "sass", "css", "nested"],
-    "author": "Andrey Sitnik <andrey@sitnik.ru>",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url":  "https://github.com/postcss/postcss-nested.git"
-    },
-    "dependencies": {
-        "postcss": "^4.1.9"
-    },
-    "devDependencies": {
-        "gulp-eslint": "0.11.1",
-        "gulp-mocha":  "2.0.1",
-        "mocha":       "2.2.4",
-        "chai":        "2.3.0",
-        "gulp":        "3.8.11"
-    },
-    "scripts": {
-        "test": "gulp"
+  "name": "postcss-nested",
+  "version": "1.0.1",
+  "description": "PostCSS plugin to unwrap nested rules like how Sass does it.",
+  "keywords": [
+    "postcss",
+    "css",
+    "postcss-plugin",
+    "sass",
+    "nested"
+  ],
+  "author": "Andrey Sitnik <andrey@sitnik.ru>",
+  "license": "MIT",
+  "repository": "postcss/postcss-nested",
+  "dependencies": {
+    "postcss": "^5.2.17"
+  },
+  "devDependencies": {
+    "eslint": "^3.12.2",
+    "eslint-config-postcss": "^2.0.2",
+    "jest": "^18.0.0"
+  },
+  "scripts": {
+    "test": "jest && eslint *.js"
+  },
+  "eslintConfig": {
+    "extends": "eslint-config-postcss/es5",
+    "env": {
+      "jest": true
     }
+  }
 }

package/.eslintrc

@@ -1,21 +0,0 @@
-{
-    "rules": {
-        "no-unused-expressions": [0],
-        "no-underscore-dangle":  [0],
-        "no-reserved-keys":      [2],
-        "no-multi-spaces":       [0],
-        "no-extra-parens":       [2],
-        "no-unused-vars":        [2],
-        "no-loop-func":          [0],
-        "key-spacing":           [0],
-        "max-len":               [2],
-        "strict":                [0],
-        "indent":                [2],
-        "quotes":                [2, "single", "avoid-escape"],
-        "curly":                 [0]
-    },
-    "env": {
-        "mocha": true,
-        "node":  true
-    }
-}

package/.npmignore

@@ -1,8 +0,0 @@
-.gitignore
-
-node_modules/
-
-test/
-.travis.yml
-
-gulpfile.js