From 7b457fd3b8a3b747cf2483a359419d8ccdef49ef Mon Sep 17 00:00:00 2001 From: Evilebot Tnawi Date: Thu, 22 Feb 2018 12:49:03 +0300 Subject: [PATCH] refactor: at rules parse (#4023) --- src/language-css/parser-postcss.js | 84 +++++++++---------- src/language-css/printer-postcss.js | 5 +- .../__snapshots__/jsfmt.spec.js.snap | 16 ++-- 3 files changed, 49 insertions(+), 56 deletions(-) diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 15bcc793..66369729 100644 --- a/src/language-css/parser-postcss.js +++ b/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; } diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 0eaa773a..e2123c59 100644 --- a/src/language-css/printer-postcss.js +++ b/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" && diff --git a/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap b/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap index b1c27ac5..4f557987 100644 --- a/tests/css_quotes/__snapshots__/jsfmt.spec.js.snap +++ b/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 { }