refactor: use `postcss-values-parser` for `@import` at rule (#4435)

* update to postcss value parser for @import and at rule

* fix specs

* Add rule for @import url and fix specs

* fix more specs

* fix more specs

* import check

* fix specs and add more specs

* remove console.log

* review fixes

* update snapshots

* remove bad code

* fix spec

* remove code

* Add comment

* fix comment

* lint fix

src/language-css/parser-postcss.js

@@ -366,7 +366,7 @@ function parseNestedCSS(node) {
 
       if (name === "at-root") {
         if (/^\(\s*(without|with)\s*:[\s\S]+\)$/.test(params)) {
-          node.params = parseMediaQuery(params);
+          node.params = parseValue(params);
         } else {
           node.selector = parseSelector(params);
           delete node.params;
@@ -375,6 +375,11 @@ function parseNestedCSS(node) {
         return node;
       }
 
+      if (lowercasedName === "import") {
+        node.params = parseValue(params);
+        return node;
+      }
+
       if (
         [
           "namespace",
@@ -414,7 +419,7 @@ function parseNestedCSS(node) {
         return node;
       }
 
-      if (["import", "media", "custom-media"].indexOf(lowercasedName) !== -1) {
+      if (["media", "custom-media"].indexOf(lowercasedName) !== -1) {
         if (params.includes("#{")) {
           // Workaround for media at rule with scss interpolation
           return {

src/language-css/printer-postcss.js

@@ -150,7 +150,7 @@ function genericPrint(path, options, print) {
     }
     case "css-atrule": {
       const isDetachedRulesetCall =
-        node.params && /^\(\s*\)$/.test(node.params);
+        node.raws.params && /^\(\s*\)$/.test(node.raws.params);
 
       return concat([
         "@",
@@ -610,6 +610,19 @@ function genericPrint(path, options, print) {
         return group(indent(concat(parts)));
       }
 
+      // Indent is not needed for import url when url is very long
+      // and node has two groups
+      // when type is value-comma_group
+      // example @import url("verylongurl") projection,tv
+
+      if (
+        atRuleAncestorNode &&
+        atRuleAncestorNode.name === "import" &&
+        node.groups[0].value === "url" &&
+        node.groups.length === 2
+      ) {
+        return group(fill(parts));
+      }
       return group(indent(fill(parts)));
     }
     case "value-paren_group": {

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

@@ -2144,6 +2144,7 @@ exports[`import.css 1`] = `
 @import 'custom.css';
 @import url("chrome://communicator/skin/");
 @import "common.css" screen, projection;
+@import "common.css" screen projection;
 @import url('landscape.css') screen and (orientation:landscape);
 
 @import (multiple) "foo.less";
@@ -2210,6 +2211,7 @@ $dir: 'fonts';
   projection,
   tv;
 @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
 @import url('landscape.css') screen and (orientation:landscape);
 @import "rounded-corners", "text-shadow";
 @import 'rounded-corners', 'text-shadow';
@@ -2225,12 +2227,17 @@ $family: unquote("Droid+Sans");
 @import url(
 "foo.css"
 );
+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';
+@import url(
+"foo.css,800"
+);
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @import url("fineprint.css") print;
 @import url("bluish.css") projection, tv;
 @import "custom.css";
 @import url("chrome://communicator/skin/");
 @import "common.css" screen, projection;
+@import "common.css" screen projection;
 @import url("landscape.css") screen and (orientation: landscape);
 
 @import (multiple) "foo.less";
@@ -2288,6 +2295,8 @@ $dir: "fonts";
 @import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
   projection,
   tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css")
+  projection tv;
 @import url("landscape.css") screen and (orientation: landscape);
 @import "rounded-corners", "text-shadow";
 @import "rounded-corners", "text-shadow";
@@ -2301,6 +2310,8 @@ $family: unquote("Droid+Sans");
 @import url("foo bar baz.css");
 @import url("foo  bar  baz.css");
 @import url("foo.css");
+@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600";
+@import url("foo.css,800");
 
 `;
 

tests/css_atrule/import.css

@@ -3,6 +3,7 @@
 @import 'custom.css';
 @import url("chrome://communicator/skin/");
 @import "common.css" screen, projection;
+@import "common.css" screen projection;
 @import url('landscape.css') screen and (orientation:landscape);
 
 @import (multiple) "foo.less";
@@ -69,6 +70,7 @@ $dir: 'fonts';
   projection,
   tv;
 @import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection,tv;
+@import url("very-very-very-very-very-very-very-very-very-very-long-name.css") projection tv;
 @import url('landscape.css') screen and (orientation:landscape);
 @import "rounded-corners", "text-shadow";
 @import 'rounded-corners', 'text-shadow';
@@ -84,3 +86,7 @@ $family: unquote("Droid+Sans");
 @import url(
 "foo.css"
 );
+@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600';
+@import url(
+"foo.css,800"
+);

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

@@ -256,17 +256,27 @@ exports[`at-rules.css 1`] = `
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 @charset "utf-8"; /* comment 1 */
 
-@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print /* comment 4 */; /* comment 5 */
-@import /* comment 6 */ url("bluish.css") /* comment 7 */ projection /* comment 8 */,
+@import /* comment 2 */ url("fineprint.css") /* comment 3 */ print
+  /* comment 4 */; /* comment 5 */
+@import /* comment 6 */ url("bluish.css") /* comment 7 */ projection
+    /* comment 8 */,
   /* comment 9 */ tv /* comment 10 */;
 /* comment 11 */
-@import /* comment 12 */ /* comment 13 */ url("bluish.css") /* comment 14 */ /* comment 15 */ projection /* comment 16 */,
+@import /* comment 12 */ /* comment 13 */ url("bluish.css") /* comment 14 */
+    /* comment 15 */ projection /* comment 16 */,
   /* comment 17 */ tv /* comment 18 */; /* comment 19 */
 /* comment 20 */
-@import /* comment 21 */url("bluish.css") /* comment 22 */projection/* comment 23 */,
-  /* comment 24 */tv/* comment 25 */;
-@import /* comment 26 */"custom.css"/* comment 27 */; /* comment 28 */
-@import /* comment 29 */ url("landscape.css") /* comment 30 */ screen /* comment 31 */ and /* comment 32 */ (/* comment 33 */orientation/* comment 34 */: /* comment 35 */landscape/* comment 36 */) /* comment 37 */;
+@import /* comment 21 */ url("bluish.css") /* comment 22 */ projection
+    /* comment 23 */,
+  /* comment 24 */ tv /* comment 25 */;
+@import /* comment 26 */ "custom.css" /* comment 27 */; /* comment 28 */
+@import /* comment 29 */ url("landscape.css") /* comment 30 */ screen
+  /* comment 31 */ and /* comment 32 */
+  (
+    /* comment 33 */ orientation /* comment 34 */: /* comment 35 */ landscape
+      /* comment 36 */
+  )
+  /* comment 37 */;
 
 @namespace /* comment 38 */ url(http://www.w3.org/1999/xhtml) /* comment 39 */;
 @namespace /* comment 40 */ svg /* comment 41 */ url(http://www.w3.org/2000/svg) /* comment 42 */;