---
source: crates/rome_formatter_test/src/snapshot_builder.rs
info:
  test_file: js/template-literals/css-prop.js
---

# Input

```js
function SomeComponent (props) {
  // Create styles as if you're calling css and the class will be applied to the component
  return (<div css={`
    color: blue;
    font-size: 17 px;

    &:hover {
      color: green;
    }

    & .some-class {
      font-size: 20px;
    }
  `}>
    This will be blue until hovered.
    <div className="some-class">
      This font size will be 20px
    </div>
  </div>)
}

const TestComponent = ({ children, ...props }) => (
  <div css={`color: white; background: black`}>
    {children}
  </div>
);

```


# Prettier differences

```diff
--- Prettier
+++ Rome
@@ -3,17 +3,17 @@
   return (
     <div
       css={`
-        color: blue;
-        font-size: 17 px;
+    color: blue;
+    font-size: 17 px;
 
-        &:hover {
-          color: green;
-        }
+    &:hover {
+      color: green;
+    }
 
-        & .some-class {
-          font-size: 20px;
-        }
-      `}
+    & .some-class {
+      font-size: 20px;
+    }
+  `}
     >
       This will be blue until hovered.
       <div className="some-class">This font size will be 20px</div>
@@ -22,12 +22,5 @@
 }
 
 const TestComponent = ({ children, ...props }) => (
-  <div
-    css={`
-      color: white;
-      background: black;
-    `}
-  >
-    {children}
-  </div>
+  <div css={`color: white; background: black`}>{children}</div>
 );
```

# Output

```js
function SomeComponent(props) {
  // Create styles as if you're calling css and the class will be applied to the component
  return (
    <div
      css={`
    color: blue;
    font-size: 17 px;

    &:hover {
      color: green;
    }

    & .some-class {
      font-size: 20px;
    }
  `}
    >
      This will be blue until hovered.
      <div className="some-class">This font size will be 20px</div>
    </div>
  );
}

const TestComponent = ({ children, ...props }) => (
  <div css={`color: white; background: black`}>{children}</div>
);
```

# Lines exceeding max width of 80 characters
```
    2:   // Create styles as if you're calling css and the class will be applied to the component
```