diff --git a/package.json b/package.json index 517ff555..448d08eb 100644 --- a/package.json +++ b/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", diff --git a/src/parser.js b/src/parser.js index 94fc3494..5cf4f0c8 100644 --- a/src/parser.js +++ b/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-"); } diff --git a/src/printer.js b/src/printer.js index b07082af..37db2f06 100644 --- a/src/printer.js +++ b/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") : "", diff --git a/tests/css_loose/loose.js b/tests/css_loose/loose.js new file mode 100644 index 00000000..ebb5ba45 --- /dev/null +++ b/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; +} diff --git a/tests/stylefmt/custom-properties/__snapshots__/jsfmt.spec.js.snap b/tests/stylefmt/custom-properties/__snapshots__/jsfmt.spec.js.snap index 16908421..c74d6b16 100644 --- a/tests/stylefmt/custom-properties/__snapshots__/jsfmt.spec.js.snap +++ b/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); } `; diff --git a/tests/stylefmt/font-shorthand/__snapshots__/jsfmt.spec.js.snap b/tests/stylefmt/font-shorthand/__snapshots__/jsfmt.spec.js.snap index 8ee60f0f..d8c132f1 100644 --- a/tests/stylefmt/font-shorthand/__snapshots__/jsfmt.spec.js.snap +++ b/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; } `; diff --git a/tests/stylefmt/var-notation/__snapshots__/jsfmt.spec.js.snap b/tests/stylefmt/var-notation/__snapshots__/jsfmt.spec.js.snap index 2e05ca29..efc3c0a0 100644 --- a/tests/stylefmt/var-notation/__snapshots__/jsfmt.spec.js.snap +++ b/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); } `; diff --git a/yarn.lock b/yarn.lock index 7e2b3664..5a5b39ba 100644 --- a/yarn.lock +++ b/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"