From f99aee8e464c5620ff5fe9cbbd2237f7ebd7633b Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Tue, 15 May 2018 01:24:34 +0530 Subject: [PATCH] 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 | 9 +++++-- src/language-css/printer-postcss.js | 15 +++++++++++- .../__snapshots__/jsfmt.spec.js.snap | 11 +++++++++ tests/css_atrule/import.css | 6 +++++ .../__snapshots__/jsfmt.spec.js.snap | 24 +++++++++++++------ 5 files changed, 55 insertions(+), 10 deletions(-) diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index cb30fb48..8edf39ef 100644 --- a/src/language-css/parser-postcss.js +++ b/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 { diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 95f2362c..e4e99f24 100644 --- a/src/language-css/printer-postcss.js +++ b/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": { diff --git a/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap b/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap index 848c77f8..f5ff885c 100644 --- a/tests/css_atrule/__snapshots__/jsfmt.spec.js.snap +++ b/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"); `; diff --git a/tests/css_atrule/import.css b/tests/css_atrule/import.css index a2f9cf99..02c2e4ac 100644 --- a/tests/css_atrule/import.css +++ b/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" +); diff --git a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap b/tests/css_comments/__snapshots__/jsfmt.spec.js.snap index b5450354..901a0e0c 100644 --- a/tests/css_comments/__snapshots__/jsfmt.spec.js.snap +++ b/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 */;