---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: js/multiparser-css/colons-after-substitutions.js
---

# Input

```js
const Icon = styled.div`
  flex: none;
  transition:    fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover {
    fill:   rebeccapurple;
  }

  ${Link} :hover {
    fill: yellow;
  }

  ${media.smallDown}::before {}
`

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -1,17 +1,16 @@
 const Icon = styled.div`
   flex: none;
-  transition: fill 0.25s;
+  transition:    fill 0.25s;
   width: 48px;
   height: 48px;
 
   ${Link}:hover {
-    fill: rebeccapurple;
+    fill:   rebeccapurple;
   }
 
   ${Link} :hover {
     fill: yellow;
   }
 
-  ${media.smallDown}::before {
-  }
+  ${media.smallDown}::before {}
 `;
```

# Output

```js
const Icon = styled.div`
  flex: none;
  transition:    fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover {
    fill:   rebeccapurple;
  }

  ${Link} :hover {
    fill: yellow;
  }

  ${media.smallDown}::before {}
`;
```