---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: js/multiparser-css/var.js
---

# Input

```js
const Something = styled.div`
  background: var(--${one}); /* ... */
  border: 1px solid var(--${two}); /* ... */
`;

const StyledPurchaseCard = styled(Card)`
  min-width: 200px;
  background-color: var(--${props => props.color});
  color: #fff;
`;

const v1 =  css`
prop: var(--global--color--${props.variant});
`;

const v2 = css`
        background-color: var(--global--color--${props.variant});

        &:hover {
          background-color: var(--global--color--${props.variant}__one);
        }
      `

export const StyledComponent = styled.div`
  grid-area:  area-${props => props.propName};
`

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -10,17 +10,17 @@
 `;
 
 const v1 = css`
-  prop: var(--global--color--${props.variant});
+prop: var(--global--color--${props.variant});
 `;
 
 const v2 = css`
-  background-color: var(--global--color--${props.variant});
+        background-color: var(--global--color--${props.variant});
 
-  &:hover {
-    background-color: var(--global--color--${props.variant}__one);
-  }
-`;
+        &:hover {
+          background-color: var(--global--color--${props.variant}__one);
+        }
+      `;
 
 export const StyledComponent = styled.div`
-  grid-area: area-${(props) => props.propName};
+  grid-area:  area-${(props) => props.propName};
 `;
```

# Output

```js
const Something = styled.div`
  background: var(--${one}); /* ... */
  border: 1px solid var(--${two}); /* ... */
`;

const StyledPurchaseCard = styled(Card)`
  min-width: 200px;
  background-color: var(--${(props) => props.color});
  color: #fff;
`;

const v1 = css`
prop: var(--global--color--${props.variant});
`;

const v2 = css`
        background-color: var(--global--color--${props.variant});

        &:hover {
          background-color: var(--global--color--${props.variant}__one);
        }
      `;

export const StyledComponent = styled.div`
  grid-area:  area-${(props) => props.propName};
`;
```