---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/atrule/viewport.css
---

# Input

```css
@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
min-width: 640px;
max-width: 800px;
}

@viewport{
  min-width: 640px;
  max-width: 800px;
}

@viewport  {
  min-width: 640px;
  max-width: 800px;
}

@viewport
{
min-width
:
640px
;
max-width
:
800px
;
}

@viewport

{

min-width

:

640px

;

max-width

:

800px

;

}

```


# Prettier differences

```diff
--- Prettier
+++ Biome
@@ -1,29 +1,35 @@
-@viewport {
+@
+viewport {
   min-width: 640px;
   max-width: 800px;
 }
 
-@viewport {
+@
+viewport {
   min-width: 640px;
   max-width: 800px;
 }
 
-@viewport {
+@
+viewport {
   min-width: 640px;
   max-width: 800px;
 }
 
-@viewport {
+@
+viewport {
   min-width: 640px;
   max-width: 800px;
 }
 
-@viewport {
+@
+viewport {
   min-width: 640px;
   max-width: 800px;
 }
 
-@viewport {
+@
+viewport {
   min-width: 640px;
 
   max-width: 800px;
```

# Output

```css
@
viewport {
  min-width: 640px;
  max-width: 800px;
}

@
viewport {
  min-width: 640px;
  max-width: 800px;
}

@
viewport {
  min-width: 640px;
  max-width: 800px;
}

@
viewport {
  min-width: 640px;
  max-width: 800px;
}

@
viewport {
  min-width: 640px;
  max-width: 800px;
}

@
viewport {
  min-width: 640px;

  max-width: 800px;
}
```

# Errors
```
viewport.css:1:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
  > 1 │ @viewport {
      │  ^^^^^^^^
    2 │   min-width: 640px;
    3 │   max-width: 800px;
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
viewport.css:6:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    4 │ }
    5 │ 
  > 6 │ @viewport {
      │  ^^^^^^^^
    7 │ min-width: 640px;
    8 │ max-width: 800px;
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
viewport.css:11:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
     9 │ }
    10 │ 
  > 11 │ @viewport{
       │  ^^^^^^^^
    12 │   min-width: 640px;
    13 │   max-width: 800px;
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
viewport.css:16:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    14 │ }
    15 │ 
  > 16 │ @viewport  {
       │  ^^^^^^^^
    17 │   min-width: 640px;
    18 │   max-width: 800px;
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
viewport.css:21:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    19 │ }
    20 │ 
  > 21 │ @viewport
       │  ^^^^^^^^
    22 │ {
    23 │ min-width
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  
viewport.css:33:2 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Unexpected value or character.
  
    31 │ }
    32 │ 
  > 33 │ @viewport
       │  ^^^^^^^^
    34 │ 
    35 │ {
  
  i Expected one of:
  
  - charset
  - color-profile
  - container
  - counter-style
  - document
  - font-face
  - font-feature-values
  - font-palette-values
  - import
  - keyframes
  - layer
  - media
  - namespace
  - page
  - property
  - supports
  - viewport
  - scope
  

```