Repository: prettier/prettier (JavaScript)

Issue:
CSS selectors must not be lowercased in styled-components that reference other
**Prettier 2.0.5**
[Playground link](https://prettier.io/playground/#N4Igxg9gdgLgprEAuc0DOMAEBlGBPAGzgBMBhCAWwAdoEsBeTDQkgOmIEsA3AAwB0omTBQCGAJwDmHKAFoxHCQAsYSTDIAsVAB4BuAQKEASYOVgjpcMQF9WHNAFEtVEVGIlMAMkzADQzDDEXNAAzCDEKVTEIGBF4AAoZAEYADgAGNwkASj1BTCsBHh0QABoQCCoYDnRkUHEogHcABXEENGQQEQJ6kTw20oAjQLAAazgYbGcwaQlkAIBXOFLlCgIAdUUOeDRJuGxWze5NvHawND6QaTRLGEbAiVFkYM6r0oArNC0AISHR8ZEKOAAGQsj2eixA7y02GmRAAinNonBQQQXiBnGIrmJ2v0RP04AQSmj5LBVhxiDBFMg0qUqFErqtAlR2rS4JiuEjSgBHBHwW7lNooERoGRQOAkEiEsRwbkcKW3ET3ETI1FXCgcWZiBalNAwuDwxHK8Exfqk8mUpAAJlKAXMBGm5AoDxQrIArIS5lcACq4gVPFHgrgLACSrjo2DA8gqAEFXLgWIarFYgA)
```sh
--parser babel
```

**Input:**
```jsx
const StyledComponent = styled.div`
  margin-right: -4px;

  ${Container}.isExpanded & {
    transform: rotate(-180deg);
  }
`;
```

**Output:**
```jsx
const StyledComponent = styled.div`
  margin-right: -4px;

  ${Container}.isexpanded & {
    transform: rotate(-180deg);
  }
`;

```

**Expected behavior:**

The input and output should be the same, keeping the selector `.isExpanded` case. The output breaks the style since HTML selectors are case-sensitive.


Hints:
This is the case with parser @typescript-eslint as well. Probably also with just eslint.
Can confirm with `typescript-eslint`, thought maybe I had the syntax wrong at first. 

Going to use `/* prettier-ignore */` for now.
bump. this issue arose for my styled-components heavy project when upgrading `eslint-config-prettier` from `6.15.0` to `8.3.0` and `eslint-plugin-prettier` from `3.1.4` to `3.4.0`
also, if it helps debug, the unwanted lowercasing only seems to happen on the first instance of a class name selector attached to an interpolation in the line. further class names are not lowercased: [playground](https://prettier.io/playground/#N4Igxg9gdgLgprEAuc0DOMAEBlGBPAGzgBMBhCAWwAdoEsBeTDQkgOmIEsA3AAwB0omTBQCGAJwDmHKAFoxHCQAsYSTDIAsVAB4BuAQKEASYCIBGYAL6swIinAKkRaOJgDUmY8TgAzKzbsOTi4AZJjABkKYMGIiUGjeEGIUqmIQMCLwABQyAIwAHAAMXhIAlHqCmBYCPDogADQgEFQwHOjIoOKpAO4ACuIIaMggIgRdIniDDaYxYADWcDDYVCJg0hLI0QCucA1wFKYkXsQAMrESmyIScABiiaIwLVDrKCKbMBD1IMoUBADqihx4GhlmA4NgBoDuIC8EMwGhJiBpM4xDAejEJKJkN4Rs4GgArNBaABCM3mi1scGO0jgWJxOxABK02DWRAAips0jSkNiCLiQMsxMihqYzPZPlR5LBfhxiDBFMhCg0JRBnL8YlQhhK4MiuDSGgBHDnwNFNQYvNAyKBwEgkT5iOCGjj2tGXTHcukNZwUDgbMTbT0suDszm03n09KmaWy+VIABMDWiIg4BDW5AobpA2oArJ9Ns4ACpmM08vlcbYASSgXlg2DA8maAEEq7gWKHnBYLEA)

Patch:
diff --git a/src/language-css/printer-postcss.js b/src/language-css/printer-postcss.js
--- a/src/language-css/printer-postcss.js
+++ b/src/language-css/printer-postcss.js
@@ -224,7 +224,9 @@ function genericPrint(path, options, print) {
         // If a Less file ends up being parsed with the SCSS parser, Less
         // variable declarations will be parsed as at-rules with names ending
         // with a colon, so keep the original case then.
-        isDetachedRulesetCallNode(node) || node.name.endsWith(":")
+        isDetachedRulesetCallNode(node) ||
+        node.name.endsWith(":") ||
+        isTemplatePlaceholderNode(node)
           ? node.name
           : maybeToLowerCase(node.name),
         node.params


Test patch:
diff --git a/tests/format/js/multiparser-css/__snapshots__/jsfmt.spec.js.snap b/tests/format/js/multiparser-css/__snapshots__/jsfmt.spec.js.snap
--- a/tests/format/js/multiparser-css/__snapshots__/jsfmt.spec.js.snap
+++ b/tests/format/js/multiparser-css/__snapshots__/jsfmt.spec.js.snap
@@ -363,6 +363,48 @@ export const Group = styled.div\`
 ================================================================================
 `;
 
+exports[`issue-8352.js format 1`] = `
+====================================options=====================================
+parsers: ["babel", "typescript", "flow"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+const StyledComponent = styled.div\`
+  margin-right: -4px;
+
+  \${Container}.isExpanded & {
+    transform: rotate(-180deg);
+  }
+\`;
+
+const StyledComponent2 = styled.div\`
+  margin-right: -4px;
+
+  \${abc}.camelCase + \${def}.camelCase & {
+    transform: rotate(-180deg);
+  }
+\`;
+
+=====================================output=====================================
+const StyledComponent = styled.div\`
+  margin-right: -4px;
+
+  \${Container}.isExpanded & {
+    transform: rotate(-180deg);
+  }
+\`;
+
+const StyledComponent2 = styled.div\`
+  margin-right: -4px;
+
+  \${abc}.camelCase + \${def}.camelCase & {
+    transform: rotate(-180deg);
+  }
+\`;
+
+================================================================================
+`;
+
 exports[`issue-9072.js format 1`] = `
 ====================================options=====================================
 parsers: ["babel", "typescript", "flow"]
diff --git a/tests/format/js/multiparser-css/issue-8352.js b/tests/format/js/multiparser-css/issue-8352.js
new file mode 100644
--- /dev/null
+++ b/tests/format/js/multiparser-css/issue-8352.js
@@ -0,0 +1,15 @@
+const StyledComponent = styled.div`
+  margin-right: -4px;
+
+  ${Container}.isExpanded & {
+    transform: rotate(-180deg);
+  }
+`;
+
+const StyledComponent2 = styled.div`
+  margin-right: -4px;
+
+  ${abc}.camelCase + ${def}.camelCase & {
+    transform: rotate(-180deg);
+  }
+`;