From 38e427de0962caf3d085b62bb54a0ead93b6edd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Tue, 7 Sep 2021 11:57:37 +0200 Subject: [PATCH 1/5] Consistently quote Sass modules strings Fixes #11053. --- changelog_unreleased/scss/11461.md | 42 +++++++++++++++++++ src/language-css/parser-postcss.js | 2 +- .../quotes/__snapshots__/jsfmt.spec.js.snap | 34 +++++++++++++++ tests/format/scss/quotes/jsfmt.spec.js | 2 + tests/format/scss/quotes/quotes.scss | 2 + 5 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 changelog_unreleased/scss/11461.md create mode 100644 tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap create mode 100644 tests/format/scss/quotes/jsfmt.spec.js create mode 100644 tests/format/scss/quotes/quotes.scss diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md new file mode 100644 index 000000000000..e470a4088597 --- /dev/null +++ b/changelog_unreleased/scss/11461.md @@ -0,0 +1,42 @@ + + +#### Consistently quote Sass modules strings (#11461 by @niksy) + + + + +```scss +// Input +@use "sass:math"; +@forward "list"; + +// Prettier stable +@use "sass:math"; +@forward "list"; + +// Prettier main +@use 'sass:math'; +@forward 'list'; +``` diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 71b466bc940f..7a47524391c4 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -525,7 +525,7 @@ function parseNestedCSS(node, options) { return node; } - if (lowercasedName === "import") { + if (["import", "use", "forward"].includes(lowercasedName)) { node.import = true; delete node.filename; node.params = parseValue(params, options); diff --git a/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap new file mode 100644 index 000000000000..ff900ce9ed15 --- /dev/null +++ b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,34 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`quotes.scss - {"singleQuote":true} format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 +singleQuote: true + | printWidth +=====================================input====================================== +@use "module"; +@forward "module"; + +=====================================output===================================== +@use 'module'; +@forward 'module'; + +================================================================================ +`; + +exports[`quotes.scss format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 + | printWidth +=====================================input====================================== +@use "module"; +@forward "module"; + +=====================================output===================================== +@use "module"; +@forward "module"; + +================================================================================ +`; diff --git a/tests/format/scss/quotes/jsfmt.spec.js b/tests/format/scss/quotes/jsfmt.spec.js new file mode 100644 index 000000000000..0c94ceec9417 --- /dev/null +++ b/tests/format/scss/quotes/jsfmt.spec.js @@ -0,0 +1,2 @@ +run_spec(__dirname, ["scss"]); +run_spec(__dirname, ["scss"], { singleQuote: true }); diff --git a/tests/format/scss/quotes/quotes.scss b/tests/format/scss/quotes/quotes.scss new file mode 100644 index 000000000000..9d6af808c126 --- /dev/null +++ b/tests/format/scss/quotes/quotes.scss @@ -0,0 +1,2 @@ +@use "module"; +@forward "module"; From 3f23e9f16b42ac69d45111a9015d667a16b76d07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Tue, 7 Sep 2021 15:48:43 +0200 Subject: [PATCH 2/5] Add module rule name check function --- src/language-css/parser-postcss.js | 3 ++- src/language-css/utils.js | 6 ++++++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 7a47524391c4..15faf582f47e 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -12,6 +12,7 @@ const { isSCSSNestedPropertyNode, isSCSSVariable, stringifyNode, + isModuleRuleName } = require("./utils.js"); const { locStart, locEnd } = require("./loc.js"); const { calculateLoc, replaceQuotesInInlineComments } = require("./loc.js"); @@ -525,7 +526,7 @@ function parseNestedCSS(node, options) { return node; } - if (["import", "use", "forward"].includes(lowercasedName)) { + if (isModuleRuleName(lowercasedName)) { node.import = true; delete node.filename; node.params = parseValue(params, options); diff --git a/src/language-css/utils.js b/src/language-css/utils.js index cb40d132f11d..8be984aed48a 100644 --- a/src/language-css/utils.js +++ b/src/language-css/utils.js @@ -28,6 +28,7 @@ const colorAdjusterFunctions = new Set([ "hwb", "hwba", ]); +const moduleRuleNames = new Set(["import", "use", "forward"]); function getAncestorCounter(path, typeOrTypes) { const types = Array.isArray(typeOrTypes) ? typeOrTypes : [typeOrTypes]; @@ -479,6 +480,10 @@ function isAtWordPlaceholderNode(node) { ); } +function isModuleRuleName(name) { + return moduleRuleNames.has(name); +} + module.exports = { getAncestorCounter, getAncestorNode, @@ -533,4 +538,5 @@ module.exports = { lastLineHasInlineComment, stringifyNode, isAtWordPlaceholderNode, + isModuleRuleName }; From a2054a97115814bce454ed752387aaf33dc89e32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Wed, 8 Sep 2021 08:56:55 +0200 Subject: [PATCH 3/5] Add more tests for `@use` and `@forward` --- .../quotes/__snapshots__/jsfmt.spec.js.snap | 86 +++++++++++++++++-- tests/format/scss/quotes/quotes.scss | 23 ++++- 2 files changed, 99 insertions(+), 10 deletions(-) diff --git a/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap index ff900ce9ed15..042fdbb3bf79 100644 --- a/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap +++ b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap @@ -7,12 +7,47 @@ printWidth: 80 singleQuote: true | printWidth =====================================input====================================== -@use "module"; -@forward "module"; +@use "library"; + +@use "library" with ( + $black: #222, + $border-radius: 0.1rem + $font-family: "Helvetica, sans-serif" +); + +@use "library" as *; + +@use "library" as f; + +@use "sass:map"; + +@forward "library"; + +@forward "library" show border, $border-color; + +@forward "library" hide gradient; + +@forward "library" as btn-*; =====================================output===================================== -@use 'module'; -@forward 'module'; +@use 'library'; + +@use 'library' with + ($black: #222, $border-radius: 0.1rem $font-family: 'Helvetica, sans-serif'); + +@use 'library' as *; + +@use 'library' as f; + +@use 'sass:map'; + +@forward 'library'; + +@forward 'library' show border, $border-color; + +@forward 'library' hide gradient; + +@forward 'library' as btn- *; ================================================================================ `; @@ -23,12 +58,47 @@ parsers: ["scss"] printWidth: 80 | printWidth =====================================input====================================== -@use "module"; -@forward "module"; +@use "library"; + +@use "library" with ( + $black: #222, + $border-radius: 0.1rem + $font-family: "Helvetica, sans-serif" +); + +@use "library" as *; + +@use "library" as f; + +@use "sass:map"; + +@forward "library"; + +@forward "library" show border, $border-color; + +@forward "library" hide gradient; + +@forward "library" as btn-*; =====================================output===================================== -@use "module"; -@forward "module"; +@use "library"; + +@use "library" with + ($black: #222, $border-radius: 0.1rem $font-family: "Helvetica, sans-serif"); + +@use "library" as *; + +@use "library" as f; + +@use "sass:map"; + +@forward "library"; + +@forward "library" show border, $border-color; + +@forward "library" hide gradient; + +@forward "library" as btn- *; ================================================================================ `; diff --git a/tests/format/scss/quotes/quotes.scss b/tests/format/scss/quotes/quotes.scss index 9d6af808c126..332074a453a5 100644 --- a/tests/format/scss/quotes/quotes.scss +++ b/tests/format/scss/quotes/quotes.scss @@ -1,2 +1,21 @@ -@use "module"; -@forward "module"; +@use "library"; + +@use "library" with ( + $black: #222, + $border-radius: 0.1rem + $font-family: "Helvetica, sans-serif" +); + +@use "library" as *; + +@use "library" as f; + +@use "sass:map"; + +@forward "library"; + +@forward "library" show border, $border-color; + +@forward "library" hide gradient; + +@forward "library" as btn-*; From bdc3e84f61ddd4d91d11afd1b96287ed97927ce7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Wed, 8 Sep 2021 09:30:12 +0200 Subject: [PATCH 4/5] Lint changelog --- changelog_unreleased/scss/11461.md | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md index e470a4088597..720248387efb 100644 --- a/changelog_unreleased/scss/11461.md +++ b/changelog_unreleased/scss/11461.md @@ -1,31 +1,5 @@ - - #### Consistently quote Sass modules strings (#11461 by @niksy) - - ```scss // Input From 9e3df9a34fb25c62570e659a246b1f5e7f921d92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Wed, 8 Sep 2021 10:24:31 +0200 Subject: [PATCH 5/5] Lint files --- src/language-css/parser-postcss.js | 2 +- src/language-css/utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/language-css/parser-postcss.js b/src/language-css/parser-postcss.js index 15faf582f47e..ba1aaddcb7b7 100644 --- a/src/language-css/parser-postcss.js +++ b/src/language-css/parser-postcss.js @@ -12,7 +12,7 @@ const { isSCSSNestedPropertyNode, isSCSSVariable, stringifyNode, - isModuleRuleName + isModuleRuleName, } = require("./utils.js"); const { locStart, locEnd } = require("./loc.js"); const { calculateLoc, replaceQuotesInInlineComments } = require("./loc.js"); diff --git a/src/language-css/utils.js b/src/language-css/utils.js index 8be984aed48a..9ef82fe86713 100644 --- a/src/language-css/utils.js +++ b/src/language-css/utils.js @@ -538,5 +538,5 @@ module.exports = { lastLineHasInlineComment, stringifyNode, isAtWordPlaceholderNode, - isModuleRuleName + isModuleRuleName, };