fix(css): at rules improve formatting and tests (#3828)

src/language-css/parser-postcss.js

@@ -168,10 +168,12 @@ const GLOBAL_SCSS_DIRECTIVE = "!global";
 function parseNestedCSS(node) {
   if (node && typeof node === "object") {
     delete node.parent;
+
     for (const key in node) {
       parseNestedCSS(node[key]);
     }
-    if (typeof node.selector === "string") {
+
+    if (typeof node.selector === "string" && node.selector.trim().length > 0) {
       const selector = node.raws.selector
         ? node.raws.selector.raw
         : node.selector;
@@ -194,11 +196,15 @@ function parseNestedCSS(node) {
           value: selector
         };
       }
+
+      return node;
     }
+
     if (
       node.type &&
       node.type !== "css-comment-yaml" &&
-      typeof node.value === "string"
+      typeof node.value === "string" &&
+      node.value.trim().length > 0
     ) {
       try {
         if (node.value.endsWith(DEFAULT_SCSS_DIRECTIVE)) {
@@ -218,26 +224,101 @@ function parseNestedCSS(node) {
           node.source
         );
       }
+
+      return node;
     }
-    if (node.type === "css-atrule" && typeof node.params === "string") {
+
+    if (
+      node.type === "css-atrule" &&
+      typeof node.params === "string" &&
+      node.params.trim().length > 0
+    ) {
+      if (
+        node.name === "charset" ||
+        node.name.toLowerCase() === "counter-style" ||
+        node.name.toLowerCase().endsWith("keyframes") ||
+        node.name.toLowerCase() === "page" ||
+        node.name.toLowerCase() === "font-feature-values"
+      ) {
+        return node;
+      }
+
       if (node.name === "warn" || node.name === "error") {
         node.params = {
           type: "media-unknown",
           value: node.params
         };
-      } else {
-        if (node.params.includes("#{")) {
-          // Workaround for media at rule with scss interpolation
-          return {
-            type: "media-unknown",
-            value: node.params
-          };
+
+        return node;
+      }
+
+      if (node.name === "extend") {
+        node.selector = parseSelector(node.params);
+        delete node.params;
+
+        return node;
+      }
+
+      if (node.name === "at-root") {
+        if (/^\(\s*(without|with)\s*:[\s\S]+\)$/.test(node.params)) {
+          node.params = parseMediaQuery(node.params);
+        } else {
+          node.selector = parseSelector(node.params);
+          delete node.params;
         }
 
-        node.params = parseMediaQuery(node.params);
+        return node;
       }
+
+      if (
+        node.name === "if" ||
+        node.name === "else" ||
+        node.name === "for" ||
+        node.name === "each" ||
+        node.name === "while" ||
+        node.name === "debug" ||
+        node.name === "mixin" ||
+        node.name === "include" ||
+        node.name === "function" ||
+        node.name === "return"
+      ) {
+        // Remove unnecessary spaces in SCSS variable arguments
+        node.params = node.params.replace(/\s+\.\.\./, "...");
+        // Remove unnecessary spaces before SCSS control, mixin and function directives
+        node.params = node.params.replace(/^(\S+)\s+\(/, "$1(");
+
+        node.value = parseValue(node.params);
+        delete node.params;
+
+        return node;
+      }
+
+      if (node.params.includes("#{")) {
+        // Workaround for media at rule with scss interpolation
+        return {
+          type: "media-unknown",
+          value: node.params
+        };
+      }
+
+      if (/^custom-selector$/i.test(node.name)) {
+        const customSelector = node.params.match(/:--\S+?\s+/)[0].trim();
+
+        node.customSelector = customSelector;
+        node.selector = parseSelector(
+          node.params.substring(customSelector.length)
+        );
+        delete node.params;
+
+        return node;
+      }
+
+      node.params = parseMediaQuery(node.params);
+
+      return node;
     }
   }
+
   return node;
 }