diff --git a/changelog_unreleased/css/17929.md b/changelog_unreleased/css/17929.md new file mode 100644 index 000000000..e625feb56 --- /dev/null +++ b/changelog_unreleased/css/17929.md @@ -0,0 +1,28 @@ +#### Fix selector been lowercased incorrectly inside css modules (#17929 by @kovsu) + + +```css +/* Input */ +:export { + nest: { + myColor: blue; + } + myColor: red; +} + +/* Prettier stable */ +:export { + nest: { + mycolor: blue; + } + myColor: red; +} + +/* Prettier main */ +:export { + nest: { + myColor: blue; + } + myColor: red; +} +``` diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js index 8b1e54905..4e8f9eb85 100644 --- a/src/language-css/printer-postcss.js +++ b/src/language-css/printer-postcss.js @@ -35,7 +35,7 @@ import { hasComposesNode, hasParensAroundNode, insideAtRuleNode, - insideICSSRuleNode, + insideIcssRuleNode, insideValueFunctionNode, isDetachedRulesetCallNode, isDetachedRulesetDeclarationNode, @@ -126,7 +126,7 @@ function genericPrint(path, options, print) { node.raws.before.replaceAll(/[\s;]/gu, ""), // Less variable (parentNode.type === "css-atrule" && parentNode.variable) || - insideICSSRuleNode(path) + insideIcssRuleNode(path) ? node.prop : maybeToLowerCase(node.prop), trimmedBetween.startsWith("//") ? " " : "", diff --git a/src/language-css/utils/index.js b/src/language-css/utils/index.js index 2d1555c9e..04b7816be 100644 --- a/src/language-css/utils/index.js +++ b/src/language-css/utils/index.js @@ -66,16 +66,19 @@ function insideValueFunctionNode(path, functionName) { return funcAncestorNode?.value?.toLowerCase() === functionName; } -function insideICSSRuleNode(path) { - const ruleAncestorNode = path.findAncestor( - (node) => node.type === "css-rule", - ); - const selector = ruleAncestorNode?.raws?.selector; +// https://github.com/css-modules/icss +function insideIcssRuleNode(path) { + return path.hasAncestor((node) => { + if (node.type !== "css-rule") { + return false; + } - return ( - selector && - (selector.startsWith(":import") || selector.startsWith(":export")) - ); + const selector = node.raws?.selector; + return ( + selector && + (selector.startsWith(":import") || selector.startsWith(":export")) + ); + }); } function insideAtRuleNode(path, atRuleNameOrAtRuleNames) { @@ -386,7 +389,7 @@ export { hasEmptyRawBefore, hasParensAroundNode, insideAtRuleNode, - insideICSSRuleNode, + insideIcssRuleNode, insideURLFunctionInImportAtRuleNode, insideValueFunctionNode, isAdditionNode, diff --git a/tests/format/css/modules/__snapshots__/format.test.js.snap b/tests/format/css/modules/__snapshots__/format.test.js.snap index 4539c16cd..f38cf1591 100644 --- a/tests/format/css/modules/__snapshots__/format.test.js.snap +++ b/tests/format/css/modules/__snapshots__/format.test.js.snap @@ -62,6 +62,13 @@ printWidth: 80 } } +:export { + nest: { + myColor: blue; + } + myColor: red; +} + =====================================output===================================== @value colors: './colors.css'; @value first, second, third from colors; @@ -119,5 +126,12 @@ printWidth: 80 } } +:export { + nest: { + myColor: blue; + } + myColor: red; +} + ================================================================================ `; diff --git a/tests/format/css/modules/modules.css b/tests/format/css/modules/modules.css index c721d6975..a8a03d7b8 100644 --- a/tests/format/css/modules/modules.css +++ b/tests/format/css/modules/modules.css @@ -53,3 +53,10 @@ transform: rotate(360deg); } } + +:export { + nest: { + myColor: blue; + } + myColor: red; +}