update tests & add recursive option to readme

README.md

@@ -249,6 +249,18 @@ postcss([
 ]).process(css);
 ```
 
+### Recursive
+
+Sort nested media queries recursivey
+
+```js
+postcss([
+  sortMediaQueries({
+    recursive: true,
+  })
+]).process(css);
+```
+
 ---
 
 ## Changelog

index.js

@@ -95,7 +95,7 @@ module.exports = (opts = {}) => {
         if (!atRulesKeys.length) return;
 
         sortAtRules(atRulesKeys).forEach(query => {
-          if (recursive) recursivelySort(atRules[query]);
+          if (!onlyTopLevel && recursive) recursivelySort(atRules[query]);
 
           localRoot.append(atRules[query]);
         });

index.test.js

@@ -50,6 +50,14 @@ it('[df] mixed #1', async () => {
   await run('mixed-desktop.in', 'mixed-desktop.out', { sort: 'desktop-first' });
 });
 
+it('use custom sort function', async () => {
+  await run('custom-sort.in', 'custom-sort.out', { sort: (a, b) => a.length < b.length }, []);
+});
+
+it('sort recursively', async () => {
+  await run('recursive-sort.in', 'recursive-sort.out', { recursive: true }, []);
+});
+
 it('[mf] configuration(mixed #1): unitlessMqAlwaysFirst: FALSE', async () => {
   const options = {
     configuration: {

test/custom-sort.in.css

@@ -0,0 +1,24 @@
+@media screen and (max-width: 640px) {
+  .s1m { color: #ccc }
+}
+@media tv {
+  .s1m { color: #ccc }
+}
+@media screen and (max-width: 980px) {
+  .s1m { color: #ccc }
+}
+@media screen and (max-width: 768px) {
+  .s1m { color: #ccc }
+}
+@media screen and (min-width: 640px) {
+  .s1m { color: #ccc }
+}
+@media screen and (min-width: 1280px) {
+  .s1m { color: #ccc }
+}
+@media print {
+  .s1m { color: #ccc }
+}
+@media screen and (max-width: 1280px) {
+  .s1m { color: #ccc }
+}

test/custom-sort.out.css

@@ -0,0 +1,16 @@
+@media screen and (max-width: 640px) {
+  .s1m { color: #ccc } }
+@media tv {
+  .s1m { color: #ccc } }
+@media screen and (max-width: 980px) {
+  .s1m { color: #ccc } }
+@media screen and (max-width: 768px) {
+  .s1m { color: #ccc } }
+@media screen and (min-width: 640px) {
+  .s1m { color: #ccc } }
+@media screen and (min-width: 1280px) {
+  .s1m { color: #ccc } }
+@media print {
+  .s1m { color: #ccc } }
+@media screen and (max-width: 1280px) {
+  .s1m { color: #ccc } }

test/recursive-sort.in.css

@@ -0,0 +1,39 @@
+@media (min-width: 700px) {
+  .a {
+    color: #00FF00;
+  }
+}
+
+@media print{
+  @media (min-width: 250px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+
+  @media (min-width: 150px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}
+
+@media print {
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+}
+
+@media (width >= 400px) {
+  .a {
+    color: #00FF00;
+  }
+}

test/recursive-sort.out.css

@@ -0,0 +1,30 @@
+@media (width >= 400px) {
+  .a {
+    color: #00FF00;
+  }
+}
+@media (min-width: 700px) {
+  .a {
+    color: #00FF00;
+  }
+}
+@media print {
+  @media (min-width: 150px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+  @media (min-width: 250px) {
+    .b {
+      color: #FF0000;
+    }
+  }
+  @media (min-width: 700px) {
+    .b {
+      color: #FF0000;
+    }
+    .b {
+      color: #FF0000;
+    }
+  }
+}