diff --git a/changelog_unreleased/scss/11461.md b/changelog_unreleased/scss/11461.md new file mode 100644 index 000000000..720248387 --- /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 401f5320f..38e96a495 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 50977fa4a..63e24da25 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 000000000..042fdbb3b --- /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 000000000..0c94ceec9 --- /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 000000000..332074a45 --- /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-*;