---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: js/multiparser-css/styled-components-multiple-expressions.js
---

# Input

```js
const Header = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
margin-left:5px;
}
`

const Header2 = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
margin-left:5px;
}
`

styled.div`${foo}-idle { }`

styled.div`${foo}-0-idle { }`

styled.div`
font-family: "${a}", "${b}";
`

```


# Prettier differences

```diff
--- Prettier
+++ Rome
@@ -1,27 +1,21 @@
 const Header = styled.div`
   ${something()}
   & > ${Child}:not(:first-child) {
-    margin-left: 5px;
-  }
+margin-left:5px;
+}
 `;
 
 const Header2 = styled.div`
   ${something()}
   & > ${Child}${Child2}:not(:first-child) {
-    margin-left: 5px;
-  }
+margin-left:5px;
+}
 `;
 
-styled.div`
-  ${foo}-idle {
-  }
-`;
+styled.div`${foo}-idle { }`;
 
-styled.div`
-  ${foo}-0-idle {
-  }
-`;
+styled.div`${foo}-0-idle { }`;
 
 styled.div`
-  font-family: "${a}", "${b}";
+font-family: "${a}", "${b}";
 `;
```

# Output

```js
const Header = styled.div`
  ${something()}
  & > ${Child}:not(:first-child) {
margin-left:5px;
}
`;

const Header2 = styled.div`
  ${something()}
  & > ${Child}${Child2}:not(:first-child) {
margin-left:5px;
}
`;

styled.div`${foo}-idle { }`;

styled.div`${foo}-0-idle { }`;

styled.div`
font-family: "${a}", "${b}";
`;
```