refactor: at rules parse (#4023)

src/language-css/parser-postcss.js

@@ -310,26 +310,10 @@ function parseNestedCSS(node) {
         return node;
       }
 
-      if (
-        node.name === "charset" ||
-        node.name.toLowerCase() === "counter-style" ||
-        node.name.toLowerCase().endsWith("keyframes") ||
-        node.name.toLowerCase() === "page" ||
-        node.name.toLowerCase() === "font-feature-values" ||
-        node.name.toLowerCase() === "stylistic" ||
-        node.name.toLowerCase() === "historical-forms" ||
-        node.name.toLowerCase() === "styleset" ||
-        node.name.toLowerCase() === "character-variant" ||
-        node.name.toLowerCase() === "swash" ||
-        node.name.toLowerCase() === "ornaments" ||
-        node.name.toLowerCase() === "annotation"
-      ) {
-        node.params = params;
+      const name = node.name;
+      const lowercasedName = node.name.toLowerCase();
 
-        return node;
-      }
-
-      if (node.name === "warn" || node.name === "error") {
+      if (name === "warn" || name === "error") {
         node.params = {
           type: "media-unknown",
           value: params
@@ -338,14 +322,14 @@ function parseNestedCSS(node) {
         return node;
       }
 
-      if (node.name === "extend" || node.name === "nest") {
-        node.selector = parseSelector(node.params);
+      if (name === "extend" || name === "nest") {
+        node.selector = parseSelector(params);
         delete node.params;
 
         return node;
       }
 
-      if (node.name === "at-root") {
+      if (name === "at-root") {
         if (/^\(\s*(without|with)\s*:[\s\S]+\)$/.test(params)) {
           node.params = parseMediaQuery(params);
         } else {
@@ -357,18 +341,20 @@ function parseNestedCSS(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" ||
-        node.name === "define-mixin" ||
-        node.name === "add-mixin"
+        [
+          "if",
+          "else",
+          "for",
+          "each",
+          "while",
+          "debug",
+          "mixin",
+          "include",
+          "function",
+          "return",
+          "define-mixin",
+          "add-mixin"
+        ].indexOf(name) !== -1
       ) {
         // Remove unnecessary spaces in SCSS variable arguments
         params = params.replace(/(\$\S+?)\s+?\.\.\./, "$1...");
@@ -381,15 +367,7 @@ function parseNestedCSS(node) {
         return node;
       }
 
-      if (params.includes("#{")) {
-        // Workaround for media at rule with scss interpolation
-        return {
-          type: "media-unknown",
-          value: params
-        };
-      }
-
-      if (/^custom-selector$/i.test(node.name)) {
+      if (name === "custom-selector") {
         const customSelector = params.match(/:--\S+?\s+/)[0].trim();
 
         node.customSelector = customSelector;
@@ -399,7 +377,25 @@ function parseNestedCSS(node) {
         return node;
       }
 
-      node.params = parseMediaQuery(params);
+      if (
+        ["namespace", "import", "media", "supports", "custom-media"].indexOf(
+          lowercasedName
+        ) !== -1
+      ) {
+        if (params.includes("#{")) {
+          // Workaround for media at rule with scss interpolation
+          return {
+            type: "media-unknown",
+            value: params
+          };
+        }
+
+        node.params = parseMediaQuery(params);
+
+        return node;
+      }
+
+      node.params = params;
 
       return node;
     }

src/language-css/printer-postcss.js

@@ -127,10 +127,7 @@ function genericPrint(path, options, print) {
       const hasParams =
         node.params &&
         !(node.params.type === "media-query-list" && node.params.value === "");
-      const isDetachedRulesetCall =
-        hasParams &&
-        node.params.type === "media-query-list" &&
-        /^\(\s*\)$/.test(node.params.value);
+      const isDetachedRulesetCall = hasParams && /^\(\s*\)$/.test(node.params);
       const hasParensAround =
         node.value &&
         node.value.group.group.type === "value-paren_group" &&

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

@@ -176,11 +176,11 @@ one 'two' three {}
 @import "foo.css" screen and (orientation: landscape);
 
 @foo "one";
-@foo "one";
-@foo "one" two "three";
+@foo 'one';
+@foo "one" two 'three';
 @foo ("one");
-@foo ("one");
-@foo ("one" two "three");
+@foo ('one');
+@foo ("one" two 'three');
 
 one "two" three {
 }
@@ -364,12 +364,12 @@ one 'two' three {}
 @import 'foo.css' screen and (orientation: landscape);
 @import 'foo.css' screen and (orientation: landscape);
 
+@foo "one";
 @foo 'one';
-@foo 'one';
-@foo 'one' two 'three';
+@foo "one" two 'three';
+@foo ("one");
 @foo ('one');
-@foo ('one');
-@foo ('one' two 'three');
+@foo ("one" two 'three');
 
 one 'two' three {
 }