refactor: `parseNestedCSS` function (#4208)

src/language-css/parser-postcss.js

@@ -215,22 +215,78 @@ function parseNestedCSS(node) {
       parseNestedCSS(node[key]);
     }
 
-    if (typeof node.selector === "string" && node.selector.trim().length > 0) {
-      let selector = node.raws.selector
-        ? node.raws.selector.raw
-        : node.selector;
+    if (!node.type) {
+      return node;
+    }
 
-      if (node.raws.between && node.raws.between.trim()) {
+    if (!node.raws) {
+      node.raws = {};
+    }
+
+    let selector = "";
+
+    if (typeof node.selector === "string") {
+      selector =
+        node.raws.selector && node.raws.selector.raw
+          ? node.raws.selector.raw
+          : node.selector;
+
+      if (node.raws.between && node.raws.between.trim().length > 0) {
         selector += node.raws.between;
       }
 
+      node.raws.selector = selector;
+    }
+
+    let value = "";
+
+    if (typeof node.value === "string") {
+      value =
+        node.raws.value && node.raws.value.raw
+          ? node.raws.value.raw
+          : node.value;
+
+      value = value.trim();
+
+      node.raws.value = selector;
+    }
+
+    let params = "";
+
+    if (typeof node.params === "string") {
+      params =
+        node.raws.params && node.raws.params.raw
+          ? node.raws.params.raw
+          : node.params;
+
+      if (node.raws.afterName && node.raws.afterName.trim().length > 0) {
+        params = node.raws.afterName + params;
+      }
+
+      if (node.raws.between && node.raws.between.trim().length > 0) {
+        params = params + node.raws.between;
+      }
+
+      params = params.trim();
+
+      node.raws.params = params;
+    }
+
+    // Ignore LESS mixin declaration
+    if (selector.trim().length > 0) {
       if (selector.startsWith("@") && selector.endsWith(":")) {
         return node;
       }
 
+      // Ignore LESS mixins
+      if (node.mixin) {
+        node.selector = parseValue(selector);
+
+        return node;
+      }
+
       try {
         node.selector = parseSelector(selector);
-        node.raws.selector = selector;
       } catch (e) {
         // Fail silently. It's better to print it as is than to try and parse it
         // Note: A common failure is for SCSS nested properties. `background:
@@ -247,15 +303,8 @@ function parseNestedCSS(node) {
       return node;
     }
 
-    if (
-      node.type &&
-      node.type !== "css-comment-yaml" &&
-      typeof node.value === "string" &&
-      node.value.trim().length > 0
-    ) {
+    if (node.type !== "css-comment-yaml" && value.length > 0) {
       try {
-        let value = node.raws.value ? node.raws.value.raw : node.value;
-
         const defaultSCSSDirectiveIndex = value.match(DEFAULT_SCSS_DIRECTIVE);
 
         if (defaultSCSSDirectiveIndex) {
@@ -293,26 +342,7 @@ function parseNestedCSS(node) {
       return node;
     }
 
-    if (node.type === "css-atrule" && typeof node.params === "string") {
-      let params =
-        node.raws.params && node.raws.params.raw
-          ? node.raws.params.raw
-          : node.params;
-
-      if (node.raws.afterName.trim()) {
-        params = node.raws.afterName + params;
-      }
-
-      if (node.raws.between.trim()) {
-        params = params + node.raws.between;
-      }
-
-      params = params.trim();
-
-      if (params.length === 0) {
-        return node;
-      }
-
+    if (node.type === "css-atrule" && params.length > 0) {
       const name = node.name;
       const lowercasedName = node.name.toLowerCase();
 

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

@@ -357,7 +357,7 @@ $KeepScssVar: val;
   .Keep();
   .Keep(4px) !important;
   .Keep() when (@Keep=Keep);
-  .Keep() when (@Keep=12px);
+  .Keep() when (@Keep=12PX);
   .Keep() when (@Keep=Keep12PX);
 }
 

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

@@ -1329,12 +1329,12 @@ $var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment
   /* comment 20 */
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment 4 */
+$var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */; /* comment 4 */
 
 @mixin text-color {
   /* comment 5 */
   /* comment 6 */
-  $text-color/* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */ ; /* comment 11 */
+  $text-color/* comment 7 */ : /* comment 8 */ red /* comment 9 */ !default /* comment 10 */; /* comment 11 */
   /* comment 12 */
   color: $text-color;
 }
@@ -1342,7 +1342,7 @@ $var: /* comment 1 */ all /* comment 2 */ !default /* comment 3 */ ; /* comment
 .error {
   /* comment 13 */
   /* comment 14 */
-  $text-color/* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */ ; /* comment 19 */
+  $text-color/* comment 15 */ : /* comment 16 */ green /* comment 17 */ !global /* comment 18 */; /* comment 19 */
   /* comment 20 */
 }
 

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

@@ -2690,9 +2690,7 @@ div {
 header {
   background-color: blue;
 
-  .desktop-and-old-ie({
-    background-color: red;
-  });
+  .desktop-and-old-ie({background-color: red;});
 }
 
 header {