Enable loose mode for postcss-values-parser (#1766)

Fixes https://github.com/shellscape/postcss-values-parser/issues/29

package.json

@@ -31,7 +31,7 @@
     "postcss-less": "^1.0.0",
     "postcss-media-query-parser": "^0.2.3",
     "postcss-selector-parser": "^2.2.3",
-    "postcss-values-parser": "^1.2.1",
+    "postcss-values-parser": "git://github.com/shellscape/postcss-values-parser.git#5e351360479116f3fe309602cdd15b0a233bc29f",
     "prettier": "^1.3.1",
     "rimraf": "^2.6.1",
     "rollup": "0.41.1",

src/parser.js

@@ -287,7 +287,7 @@ function parseNestedValue(node) {
 function parseValue(value) {
   const r = require;
   const valueParser = r("postcss-values-parser");
-  const result = valueParser(value).parse();
+  const result = valueParser(value, { loose: true }).parse();
   const parsedResult = parseNestedValue(result);
   return addTypePrefix(parsedResult, "value-");
 }

src/printer.js

@@ -2643,16 +2643,11 @@ function genericPrintNoParens(path, options, print, args) {
       const parts = [];
       for (let i = 0; i < n.groups.length; ++i) {
         parts.push(printed[i]);
-        if (i === 0 && n.groups[i].type === "value-operator") {
-          continue;
-        }
         if (
-          (i + 1 < n.groups.length && n.groups[i + 1].type === "value-colon") ||
-          n.groups[i].type === "value-colon"
+          i !== n.groups.length - 1 &&
+          n.groups[i + 1].raws &&
+          n.groups[i + 1].raws.before !== ""
         ) {
-          continue;
-        }
-        if (i !== n.groups.length - 1) {
           parts.push(line);
         }
       }
@@ -2660,26 +2655,22 @@ function genericPrintNoParens(path, options, print, args) {
       return group(concat(parts));
     }
     case "value-paren_group": {
-      if (!n.open) {
-        return group(join(concat([",", line]), path.map(print, "groups")));
-      }
-
       const parent = path.getParentNode();
-      if (
-        parent &&
-        parent.type === "value-func" &&
-        parent.value === "url" &&
-        n.groups.length === 1 &&
-        (n.groups[0].type === "value-string" ||
-          n.groups[0].type === "value-word")
-      ) {
+      const isURLCall =
+        parent && parent.type === "value-func" && parent.value === "url";
+
+      if (isURLCall) {
         return concat([
           n.open ? path.call(print, "open") : "",
-          join(", ", path.map(print, "groups")),
+          join(",", path.map(print, "groups")),
           n.close ? path.call(print, "close") : ""
         ]);
       }
 
+      if (!n.open) {
+        return group(join(concat([",", line]), path.map(print, "groups")));
+      }
+
       return group(
         concat([
           n.open ? path.call(print, "open") : "",

tests/css_loose/loose.js

@@ -0,0 +1,7 @@
+div {
+  height: calc(-0.5 * var(ei-table-cell-padding));
+  width: -webkit-calc(100% + 20px);
+  margin: -moz-calc(100% - 320px);
+  background: url(var(audience-network-checkbox-image)) center no-repeat;
+  background-image: url() center center no-repeat black;
+}

tests/stylefmt/custom-properties/__snapshots__/jsfmt.spec.js.snap

@@ -8,7 +8,7 @@ a{color:var      (        --mainColor     )     ; }
   --mainColor: #123456;
 }
 a {
-  color: var (--mainColor);
+  color: var(--mainColor);
 }
 
 `;

tests/stylefmt/font-shorthand/__snapshots__/jsfmt.spec.js.snap

@@ -7,9 +7,9 @@ exports[`font-shorthand.css 1`] = `
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .class {
-  font: normal normal 24px / 1 "myfont";
-  font: normal normal normal 12px / 20px myfont;
-  font: normal 300 0.875em / 1.3 "myfont", sans-serif;
+  font: normal normal 24px/1 "myfont";
+  font: normal normal normal 12px/20px myfont;
+  font: normal 300 0.875em/1.3 "myfont", sans-serif;
 }
 
 `;

tests/stylefmt/var-notation/__snapshots__/jsfmt.spec.js.snap

@@ -5,7 +5,7 @@ exports[`var-notation.css 1`] = `
 }
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 .foo {
-  margin: var (--n-gutterSize) 0 var (--gutterSize) var(--n-gutterSize);
+  margin: var(--n-gutterSize) 0 var(--gutterSize) var(--n-gutterSize);
 }
 
 `;

yarn.lock

@@ -2207,9 +2207,9 @@ postcss-selector-parser@^2.2.3:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-values-parser@^1.2.1:
+"postcss-values-parser@git://github.com/shellscape/postcss-values-parser.git#5e351360479116f3fe309602cdd15b0a233bc29f":
   version "1.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-1.2.2.tgz#f5eebdd7f6fe310e2e448b9cc03bfed8726ca271"
+  resolved "git://github.com/shellscape/postcss-values-parser.git#5e351360479116f3fe309602cdd15b0a233bc29f"
   dependencies:
     flatten "^1.0.2"
     indexes-of "^1.0.1"