tests(css): postcss popular plugins (#3959)

src/language-css/parser-postcss.js

@@ -342,7 +342,9 @@ function parseNestedCSS(node) {
         node.name === "mixin" ||
         node.name === "include" ||
         node.name === "function" ||
-        node.name === "return"
+        node.name === "return" ||
+        node.name === "define-mixin" ||
+        node.name === "add-mixin"
       ) {
         // Remove unnecessary spaces in SCSS variable arguments
         node.params = node.params.replace(/(\$\S+?)\s+?\.\.\./, "$1...");

tests/css_postcss_plugins/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,134 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`postcss-mixins.css 1`] = `
+a {
+    @mixin $(theme)-colors;
+}
+
+@define-mixin icon $network, $color: blue {
+    .icon.is-$(network) {
+        color: $color;
+        @mixin-content;
+    }
+    .icon.is-$(network):hover {
+       color: white;
+       background: $color;
+   }
+}
+
+@mixin icon twitter {
+    background: url(twt.png);
+}
+@mixin icon youtube, red {
+    background: url(youtube.png);
+}
+
+.search {
+    @mixin icon search;
+}
+
+a {
+    color: black;
+    @mixin parent {
+        @mixin child;
+    }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+a {
+  @mixin $(theme)-colors;
+}
+
+@define-mixin icon $network, $color: blue {
+  .icon.is-$(network) {
+    color: $color;
+    @mixin-content;
+  }
+  .icon.is-$(network):hover {
+    color: white;
+    background: $color;
+  }
+}
+
+@mixin icon twitter {
+  background: url(twt.png);
+}
+@mixin icon youtube, red {
+  background: url(youtube.png);
+}
+
+.search {
+  @mixin icon search;
+}
+
+a {
+  color: black;
+  @mixin parent {
+    @mixin child;
+  }
+}
+
+`;
+
+exports[`postcss-nested.css 1`] = `
+.phone {
+    &_title {
+        width: 500px;
+        @media (max-width: 500px) {
+            width: auto;
+        }
+        body.is_dark & {
+            color: white;
+        }
+    }
+    img {
+        display: block;
+    }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.phone {
+  &_title {
+    width: 500px;
+    @media (max-width: 500px) {
+      width: auto;
+    }
+    body.is_dark & {
+      color: white;
+    }
+  }
+  img {
+    display: block;
+  }
+}
+
+`;
+
+exports[`postcss-nested-props.css 1`] = `
+.funky {
+    font: {
+        family: fantasy;
+        size: 30em;
+        weight: bold;
+    }
+}
+
+.funky {
+    font: 20px/24px fantasy {
+        weight: bold;
+    }
+}
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+.funky {
+  font: {
+    family: fantasy;
+    size: 30em;
+    weight: bold;
+  }
+}
+
+.funky {
+  font: 20px/24px fantasy {
+    weight: bold;
+  }
+}
+
+`;

tests/css_postcss_plugins/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, ["css"]);

tests/css_postcss_plugins/postcss-mixins.css

@@ -0,0 +1,32 @@
+a {
+    @mixin $(theme)-colors;
+}
+
+@define-mixin icon $network, $color: blue {
+    .icon.is-$(network) {
+        color: $color;
+        @mixin-content;
+    }
+    .icon.is-$(network):hover {
+       color: white;
+       background: $color;
+   }
+}
+
+@mixin icon twitter {
+    background: url(twt.png);
+}
+@mixin icon youtube, red {
+    background: url(youtube.png);
+}
+
+.search {
+    @mixin icon search;
+}
+
+a {
+    color: black;
+    @mixin parent {
+        @mixin child;
+    }
+}

tests/css_postcss_plugins/postcss-nested-props.css

@@ -0,0 +1,13 @@
+.funky {
+    font: {
+        family: fantasy;
+        size: 30em;
+        weight: bold;
+    }
+}
+
+.funky {
+    font: 20px/24px fantasy {
+        weight: bold;
+    }
+}

tests/css_postcss_plugins/postcss-nested.css

@@ -0,0 +1,14 @@
+.phone {
+    &_title {
+        width: 500px;
+        @media (max-width: 500px) {
+            width: auto;
+        }
+        body.is_dark & {
+            color: white;
+        }
+    }
+    img {
+        display: block;
+    }
+}