Fix ICSS detection for nested exports (#17929)

Co-authored-by: fisker <lionkay@gmail.com>

changelog_unreleased/css/17929.md

@@ -0,0 +1,28 @@
+#### Fix selector been lowercased incorrectly inside css modules (#17929 by @kovsu)
+
+<!-- prettier-ignore -->
+```css
+/* Input */
+:export {
+  nest: {
+    myColor: blue;
+  }
+  myColor: red;
+}
+
+/* Prettier stable */
+:export {
+  nest: {
+    mycolor: blue;
+  }
+  myColor: red;
+}
+
+/* Prettier main */
+:export {
+  nest: {
+    myColor: blue;
+  }
+  myColor: red;
+}
+```

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("//") ? " " : "",

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,

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;
+}
+
 ================================================================================
 `;

tests/format/css/modules/modules.css

@@ -53,3 +53,10 @@
     transform: rotate(360deg);
   }
 }
+
+:export {
+  nest: {
+    myColor: blue;
+  }
+  myColor: red;
+}