From 1c4da1e4411e5372aef634c02e6fd18deaf78893 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Nikoli=C4=87?= Date: Thu, 9 Sep 2021 06:18:12 +0200 Subject: [PATCH] Consistently quote Sass modules strings (#11461) * Consistently quote Sass modules strings Fixes #11053. * Add module rule name check function * Add more tests for `@use` and `@forward` * Lint changelog * Lint files Co-authored-by: sosukesuzuki --- changelog_unreleased/scss/11461.md | 16 +++ src/language-css/parser-postcss.js | 3 +- src/language-css/utils.js | 6 + .../quotes/__snapshots__/jsfmt.spec.js.snap | 104 ++++++++++++++++++ tests/format/scss/quotes/jsfmt.spec.js | 2 + tests/format/scss/quotes/quotes.scss | 21 ++++ 6 files changed, 151 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..720248387efb --- /dev/null +++ b/changelog_unreleased/scss/11461.md @@ -0,0 +1,16 @@ +#### 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 401f5320f7da..38e96a495df6 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 (lowercasedName === "import") { + 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 50977fa4ad76..63e24da2560f 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, }; 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..042fdbb3bf79 --- /dev/null +++ b/tests/format/scss/quotes/__snapshots__/jsfmt.spec.js.snap @@ -0,0 +1,104 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`quotes.scss - {"singleQuote":true} format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 +singleQuote: true + | printWidth +=====================================input====================================== +@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 '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- *; + +================================================================================ +`; + +exports[`quotes.scss format 1`] = ` +====================================options===================================== +parsers: ["scss"] +printWidth: 80 + | printWidth +=====================================input====================================== +@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 "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/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..332074a453a5 --- /dev/null +++ b/tests/format/scss/quotes/quotes.scss @@ -0,0 +1,21 @@ +@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-*;