---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: js/template-literals/styled-jsx-with-expressions.js
---

# Input

```js
<style jsx>{`
  div {
  display: ${expr};
    color: ${expr};
    ${expr};
    ${expr};
    background: red;
  animation: ${expr} 10s ease-out;
  }
  @media (${expr}) {
   div.${expr} {
    color: red;
   }
  ${expr} {
    color: red;
  }
  }
  @media (min-width: ${expr}) {
   div.${expr} {
    color: red;
   }
  all${expr} {
    color: red;
  }
  }
  @font-face {
    ${expr}
  }
`}</style>;

<style jsx>{`
  div {
  animation: linear ${seconds}s ease-out;
  }
`}</style>;

<style jsx>{`
  div {
  animation: 3s ease-in 1s ${foo => foo.getIterations()} reverse both paused slidein;
  }
`}</style>;

```


# Prettier differences

```diff
--- Prettier
+++ Rome
@@ -1,27 +1,27 @@
 <style jsx>{`
   div {
-    display: ${expr};
+  display: ${expr};
     color: ${expr};
     ${expr};
     ${expr};
     background: red;
-    animation: ${expr} 10s ease-out;
+  animation: ${expr} 10s ease-out;
   }
   @media (${expr}) {
-    div.${expr} {
-      color: red;
-    }
-    ${expr} {
-      color: red;
-    }
+   div.${expr} {
+    color: red;
+   }
+  ${expr} {
+    color: red;
+  }
   }
   @media (min-width: ${expr}) {
-    div.${expr} {
-      color: red;
-    }
-    all${expr} {
-      color: red;
-    }
+   div.${expr} {
+    color: red;
+   }
+  all${expr} {
+    color: red;
+  }
   }
   @font-face {
     ${expr}
@@ -30,13 +30,12 @@
 
 <style jsx>{`
   div {
-    animation: linear ${seconds}s ease-out;
+  animation: linear ${seconds}s ease-out;
   }
 `}</style>;
 
 <style jsx>{`
   div {
-    animation: 3s ease-in 1s ${(foo) => foo.getIterations()} reverse both paused
-      slidein;
+  animation: 3s ease-in 1s ${(foo) => foo.getIterations()} reverse both paused slidein;
   }
 `}</style>;
```

# Output

```js
<style jsx>{`
  div {
  display: ${expr};
    color: ${expr};
    ${expr};
    ${expr};
    background: red;
  animation: ${expr} 10s ease-out;
  }
  @media (${expr}) {
   div.${expr} {
    color: red;
   }
  ${expr} {
    color: red;
  }
  }
  @media (min-width: ${expr}) {
   div.${expr} {
    color: red;
   }
  all${expr} {
    color: red;
  }
  }
  @font-face {
    ${expr}
  }
`}</style>;

<style jsx>{`
  div {
  animation: linear ${seconds}s ease-out;
  }
`}</style>;

<style jsx>{`
  div {
  animation: 3s ease-in 1s ${(foo) => foo.getIterations()} reverse both paused slidein;
  }
`}</style>;
```

# Lines exceeding max width of 80 characters
```
   39:   animation: 3s ease-in 1s ${(foo) => foo.getIterations()} reverse both paused slidein;
```