postcss-nested 2.0.4 → 3.0.0

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 3.0
+* Add `@font-face` to bubbling at-rules (by Valeriy Komlev).
+* Add special logic for `@font-face` bubbling (by Phanindra Pydisetty).
+* Use PostCSS selector parser 3.0.
+
+## 2.1.2
+* Fix replacing multiple `&`.
+
+## 2.1.1
+* Fix `:not(&)` support.
+
+## 2.1
+* Add `preserveEmpty` option (by Federico Zivolo).
+
 ## 2.0.4
 * Fix finding `&` in some selectors (by Stepan Mikhaylyuk).
 

package/README.md

@@ -74,9 +74,33 @@ See [PostCSS] docs for examples for your environment.
 
 ### `bubble`
 
-By default, plugin will unwrap only `@media`, `@supports` and `@document`
+By default, plugin will unwrap only `@media`, `@supports`, `@font-face` and `@document
 at-rules. You can add your custom at-rules to this list by `bubble` option:
 
 ```js
-postcss([ require('postcss-nested')({ bubble: ['phone'] }) ]
+postcss([ require('postcss-nested')({ bubble: ['phone'] }) ])
 ```
+
+### `preserveEmpty`
+
+By default, plugin will strip out any empty selector generated by intermediate
+nesting levels. You can set `preserveEmpty` to `true` to preserve them.
+
+```css
+.a {
+    .b {
+        color: black;
+    }
+}
+```
+
+Will be compiled to:
+
+```css
+.a { }
+.a .b {
+    color: black;
+}
+```
+
+This is especially useful if you want to export the empty classes with `postcss-modules`.

package/index.js

@@ -1,29 +1,43 @@
 var postcss = require('postcss');
 var parser = require('postcss-selector-parser');
 
-function concatNested(selector, parent) {
-    var replaced = false;
-    var nestingNodes = selector.nodes.filter(node => node.type === 'nesting');
-    nestingNodes.forEach(ampersand => {
-        ampersand.replaceWith(parent.clone());
-        replaced = true;
+function parse(str) {
+    var nodes;
+    var saver = parser(function (parsed) {
+        nodes = parsed;
     });
+    saver.processSync(str);
+    return nodes.at(0);
+}
 
-    if (!replaced) {
-        selector.prepend(parser.combinator({ value: ' ' }));
-        selector.prepend(parent.clone());
-    }
-
-    return selector;
+function replace(nodes, parent) {
+    var replaced = false;
+    nodes.each(function (i) {
+        if (i.type === 'nesting') {
+            i.replaceWith(parent.clone());
+            replaced = true;
+        } else if (i.nodes) {
+            if (replace(i, parent)) {
+                replaced = true;
+            }
+        }
+    });
+    return replaced;
 }
 
-function selectors(parent, node) {
+function selectors(parent, child) {
     var result = [];
     parent.selectors.forEach(function (i) {
-        var parsed = parser().process(i).res.first;
+        var parentNode = parse(i);
 
-        node.selectors.forEach(function (j) {
-            result.push(concatNested(parser().process(j).res.first, parsed));
+        child.selectors.forEach(function (j) {
+            var node = parse(j);
+            var replaced = replace(node, parentNode);
+            if (!replaced) {
+                node.prepend(parser.combinator({ value: ' ' }));
+                node.prepend(parentNode.clone());
+            }
+            result.push(node.toString());
         });
     });
     return result;
@@ -51,6 +65,8 @@ function atruleChilds(rule, atrule) {
             atruleChilds(rule, child);
         }
     });
+    if ( atrule.name === 'font-face' ) return;
+
     if ( children.length ) {
         var clone = rule.clone({ nodes: [] });
         for ( var i = 0; i < children.length; i++ ) {
@@ -60,7 +76,7 @@ function atruleChilds(rule, atrule) {
     }
 }
 
-function processRule(rule, bubble) {
+function processRule(rule, bubble, preserveEmpty) {
     var unwrapped = false;
     var after     = rule;
     rule.each(function (child) {
@@ -80,24 +96,25 @@ function processRule(rule, bubble) {
             }
         }
     });
-    if ( unwrapped ) {
+    if ( unwrapped && preserveEmpty !== true ) {
         rule.raws.semicolon = true;
         if ( rule.nodes.length === 0 ) rule.remove();
     }
 }
 
 module.exports = postcss.plugin('postcss-nested', function (opts) {
-    var bubble = ['media', 'supports', 'document'];
+    var bubble = ['media', 'supports', 'document', 'font-face'];
     if ( opts && opts.bubble ) {
         bubble = bubble.concat(opts.bubble.map(function (i) {
             return i.replace(/^@/, '');
         }));
     }
+    var preserveEmpty = opts ? opts.preserveEmpty : false;
 
     var process = function (node) {
         node.each(function (child) {
             if ( child.type === 'rule' ) {
-                processRule(child, bubble);
+                processRule(child, bubble, preserveEmpty);
             } else if ( child.type === 'atrule' ) {
                 process(child);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-nested",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it.",
   "keywords": [
     "postcss",
@@ -13,13 +13,14 @@
   "license": "MIT",
   "repository": "postcss/postcss-nested",
   "dependencies": {
-    "postcss": "^6.0.6",
-    "postcss-selector-parser": "^2.2.3"
+    "postcss": "^6.0.14",
+    "postcss-selector-parser": "^3.1.1"
   },
   "devDependencies": {
-    "eslint": "^4.2.0",
+    "eslint": "^4.13.0",
+    "eslint-ci": "^0.1.1",
     "eslint-config-postcss": "^2.0.2",
-    "jest": "^20.0.4"
+    "jest": "^21.2.1"
   },
   "jest": {
     "coverageThreshold": {
@@ -29,7 +30,7 @@
     }
   },
   "scripts": {
-    "test": "jest --coverage && eslint *.js"
+    "test": "jest --coverage && eslint-ci *.js"
   },
   "eslintConfig": {
     "extends": "eslint-config-postcss/es5",