postcss-nested - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

 # Change Log
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 4.1
+* Add `unwrap` option.
+
 ## 4.0
@@ -5,0 +8,0 @@ * Use PostCSS 7 (by Aleks Hudochenkov).

index.js

@@ -55,3 +55,3 @@ var postcss = require('postcss')
 
-function atruleChilds (rule, atrule) {
+function atruleChilds (rule, atrule, bubbling) {
   var children = []
@@ -63,20 +63,20 @@ atrule.each(function (child) {
       children.push(child)
-    } else if (child.type === 'rule') {
+    } else if (child.type === 'rule' && bubbling) {
       child.selectors = selectors(rule, child)
     } else if (child.type === 'atrule') {
-      atruleChilds(rule, child)
+      atruleChilds(rule, child, bubbling)
     }
   })
-  if (atrule.name === 'font-face') return
-
-  if (children.length) {
-    var clone = rule.clone({ nodes: [] })
-    for (var i = 0; i < children.length; i++) {
-      clone.append(children[i])
+  if (bubbling) {
+    if (children.length) {
+      var clone = rule.clone({ nodes: [] })
+      for (var i = 0; i < children.length; i++) {
+        clone.append(children[i])
+      }
+      atrule.prepend(clone)
     }
-    atrule.prepend(clone)
   }
 }
 
-function processRule (rule, bubble, preserveEmpty) {
+function processRule (rule, bubble, unwrap, preserveEmpty) {
   var unwrapped = false
@@ -92,8 +92,14 @@ var after = rule
     } else if (child.type === 'atrule') {
-      if (bubble.indexOf(child.name) !== -1) {
+      if (bubble[child.name]) {
         unwrapped = true
-        atruleChilds(rule, child)
+        atruleChilds(rule, child, true)
         after = pickComment(child.prev(), after)
         after.after(child)
         after = child
+      } else if (unwrap[child.name]) {
+        unwrapped = true
+        atruleChilds(rule, child, false)
+        after = pickComment(child.prev(), after)
+        after.after(child)
+        after = child
       }
@@ -108,9 +114,21 @@ }
 
+function atruleNames (defaults, custom) {
+  var list = { }
+  var i, name
+  for (i = 0; i < defaults.length; i++) {
+    list[defaults[i]] = true
+  }
+  if (custom) {
+    for (i = 0; i < custom.length; i++) {
+      name = custom[i].replace(/^@/, '')
+      list[name] = true
+    }
+  }
+  return list
+}
+
 module.exports = postcss.plugin('postcss-nested', function (opts) {
-  var bubble = ['media', 'supports', 'document', 'font-face']
-  if (opts && opts.bubble) {
-    bubble = bubble.concat(opts.bubble.map(function (i) {
-      return i.replace(/^@/, '')
-    }))
-  }
+  if (!opts) opts = { }
+  var bubble = atruleNames(['media', 'supports'], opts.bubble)
+  var unwrap = atruleNames(['document', 'font-face', 'keyframes'], opts.unwrap)
   var preserveEmpty = opts ? opts.preserveEmpty : false
@@ -121,3 +139,3 @@
       if (child.type === 'rule') {
-        processRule(child, bubble, preserveEmpty)
+        processRule(child, bubble, unwrap, preserveEmpty)
       } else if (child.type === 'atrule') {
@@ -124,0 +142,0 @@ process(child)

package.json

 {
   "name": "postcss-nested",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "PostCSS plugin to unwrap nested rules like how Sass does it",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -77,4 +77,4 @@ # PostCSS Nested [![Build Status][ci-img]][ci]
 
-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:
+By default, plugin will bubble only `@media` and `@supports` at-rules.
+You can add your custom at-rules to this list by `bubble` option:
 
@@ -85,2 +85,47 @@ ```js
 
+```css
+/* input */
+a {
+  color: white;
+  @phone {
+    color: black;
+  }
+}
+/* output */
+a {
+  color: white;
+}
+@phone {
+  a {
+    color: black;
+  }
+}
+```
+
+### `unwrap`
+
+By default, plugin will unwrap only `@font-face`, `@keyframes` and `@document`
+at-rules. You can add your custom at-rules to this list by `unwrap` option:
+
+```js
+postcss([ require('postcss-nested')({ unwrap: ['phone'] }) ])
+```
+
+```css
+/* input */
+a {
+  color: white;
+  @phone {
+    color: black;
+  }
+}
+/* output */
+a {
+  color: white;
+}
+@phone {
+  color: black;
+}
+```
+
 ### `preserveEmpty`
@@ -87,0 +132,0 @@

No alert changes

Improved metrics

Total package byte prevSize

9723

increased by12.07%

Lines of code

132

increased by15.79%

Number of lines in readme file

152

increased by42.06%

No dependency changes