---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/postcss-plugins/postcss-simple-vars.css
---
# Input
```css
background-color: $$(style)Color;
background-color: $$(style)Color Color122;
color: @@color;
font: 100% $font-stack;
background-color: darken(@link-color, 10%);
border: 1px solid var(--border-color);
color: $(style)color;
color: @@(style) color123;
color: @@(style)color123;
```
# Prettier differences
```diff
@@ -1,9 +1,18 @@
-background-color: $$(style)Color;
-background-color: $$(style)Color Color122;
-color: @@color;
-font: 100% $font-stack;
-background-color: darken(@link-color, 10%);
-border: 1px solid var(--border-color);
-color: $(style) color;
-color: @@(style) color123;
-color: @@(style) color123;
+background-color: $$(style)Color
+;
+background-color: $$(style)Color Color122
+;
+color: @@color
+;
+font: 100% $font-stack
+;
+background-color: darken(@link-color, 10%)
+;
+border: 1px solid var(--border-color)
+;
+color: $(style)color
+;
+color: @@(style) color123
+;
+color: @@(style)color123
+;
```
# Output
```css
background-color: $$(style)Color
;
background-color: $$(style)Color Color122
;
color: @@color
;
font: 100% $font-stack
;
background-color: darken(@link-color, 10%)
;
border: 1px solid var(--border-color)
;
color: $(style)color
;
color: @@(style) color123
;
color: @@(style)color123
;
```
# Errors
```
postcss-simple-vars.css:1:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `$`
> 1 │ background-color: $$(style)Color;
│ ^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove $
postcss-simple-vars.css:1:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `(`
> 1 │ background-color: $$(style)Color;
│ ^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove (
postcss-simple-vars.css:1:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `style`
> 1 │ background-color: $$(style)Color;
│ ^^^^^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove style
postcss-simple-vars.css:1:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
> 1 │ background-color: $$(style)Color;
│ ^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove )
postcss-simple-vars.css:1:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `Color`
> 1 │ background-color: $$(style)Color;
│ ^^^^^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove Color
postcss-simple-vars.css:1:33 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
> 1 │ background-color: $$(style)Color;
│ ^
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
i Remove ;
postcss-simple-vars.css:2:20 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `$`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove $
postcss-simple-vars.css:2:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `(`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove (
postcss-simple-vars.css:2:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `style`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^^^^^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove style
postcss-simple-vars.css:2:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove )
postcss-simple-vars.css:2:28 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `Color`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^^^^^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove Color
postcss-simple-vars.css:2:42 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
1 │ background-color: $$(style)Color;
> 2 │ background-color: $$(style)Color Color122;
│ ^
3 │ color: @@color;
4 │ font: 100% $font-stack;
i Remove ;
postcss-simple-vars.css:3:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Unexpected value or character.
1 │ background-color: $$(style)Color;
2 │ background-color: $$(style)Color Color122;
> 3 │ color: @@color;
│ ^
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
i Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- current
- past
- future
postcss-simple-vars.css:3:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `color`
1 │ background-color: $$(style)Color;
2 │ background-color: $$(style)Color Color122;
> 3 │ color: @@color;
│ ^^^^^
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
i Remove color
postcss-simple-vars.css:3:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
1 │ background-color: $$(style)Color;
2 │ background-color: $$(style)Color Color122;
> 3 │ color: @@color;
│ ^
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
i Remove ;
postcss-simple-vars.css:4:7 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Unexpected value or character.
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
> 4 │ font: 100% $font-stack;
│ ^^^
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
i Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- current
- past
- future
postcss-simple-vars.css:4:12 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `$font-stack`
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
> 4 │ font: 100% $font-stack;
│ ^^^^^^^^^^^
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
i Remove $font-stack
postcss-simple-vars.css:4:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
2 │ background-color: $$(style)Color Color122;
3 │ color: @@color;
> 4 │ font: 100% $font-stack;
│ ^
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
i Remove ;
postcss-simple-vars.css:5:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `(`
3 │ color: @@color;
4 │ font: 100% $font-stack;
> 5 │ background-color: darken(@link-color, 10%);
│ ^
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
i Remove (
postcss-simple-vars.css:5:27 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `link-color`
3 │ color: @@color;
4 │ font: 100% $font-stack;
> 5 │ background-color: darken(@link-color, 10%);
│ ^^^^^^^^^^
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
i Remove link-color
postcss-simple-vars.css:5:39 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Expected a selector but instead found '10%)'.
3 │ color: @@color;
4 │ font: 100% $font-stack;
> 5 │ background-color: darken(@link-color, 10%);
│ ^^^^
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
i Expected a selector here.
3 │ color: @@color;
4 │ font: 100% $font-stack;
> 5 │ background-color: darken(@link-color, 10%);
│ ^^^^
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
postcss-simple-vars.css:5:43 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
3 │ color: @@color;
4 │ font: 100% $font-stack;
> 5 │ background-color: darken(@link-color, 10%);
│ ^
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
i Remove ;
postcss-simple-vars.css:6:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Unexpected value or character.
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- current
- past
- future
postcss-simple-vars.css:6:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `px`
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Remove px
postcss-simple-vars.css:6:22 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `(`
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Remove (
postcss-simple-vars.css:6:23 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `--border-color`
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^^^^^^^^^^^^^^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Remove --border-color
postcss-simple-vars.css:6:37 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Remove )
postcss-simple-vars.css:6:38 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
4 │ font: 100% $font-stack;
5 │ background-color: darken(@link-color, 10%);
> 6 │ border: 1px solid var(--border-color);
│ ^
7 │ color: $(style)color;
8 │ color: @@(style) color123;
i Remove ;
postcss-simple-vars.css:7:9 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `(`
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
> 7 │ color: $(style)color;
│ ^
8 │ color: @@(style) color123;
9 │ color: @@(style)color123;
i Remove (
postcss-simple-vars.css:7:10 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `style`
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
> 7 │ color: $(style)color;
│ ^^^^^
8 │ color: @@(style) color123;
9 │ color: @@(style)color123;
i Remove style
postcss-simple-vars.css:7:15 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
> 7 │ color: $(style)color;
│ ^
8 │ color: @@(style) color123;
9 │ color: @@(style)color123;
i Remove )
postcss-simple-vars.css:7:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `color`
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
> 7 │ color: $(style)color;
│ ^^^^^
8 │ color: @@(style) color123;
9 │ color: @@(style)color123;
i Remove color
postcss-simple-vars.css:7:21 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
5 │ background-color: darken(@link-color, 10%);
6 │ border: 1px solid var(--border-color);
> 7 │ color: $(style)color;
│ ^
8 │ color: @@(style) color123;
9 │ color: @@(style)color123;
i Remove ;
postcss-simple-vars.css:8:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Unexpected value or character.
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
> 8 │ color: @@(style) color123;
│ ^
9 │ color: @@(style)color123;
10 │
i Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- current
- past
- future
postcss-simple-vars.css:8:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `style`
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
> 8 │ color: @@(style) color123;
│ ^^^^^
9 │ color: @@(style)color123;
10 │
i Remove style
postcss-simple-vars.css:8:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
> 8 │ color: @@(style) color123;
│ ^
9 │ color: @@(style)color123;
10 │
i Remove )
postcss-simple-vars.css:8:18 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `color123`
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
> 8 │ color: @@(style) color123;
│ ^^^^^^^^
9 │ color: @@(style)color123;
10 │
i Remove color123
postcss-simple-vars.css:8:26 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
6 │ border: 1px solid var(--border-color);
7 │ color: $(style)color;
> 8 │ color: @@(style) color123;
│ ^
9 │ color: @@(style)color123;
10 │
i Remove ;
postcss-simple-vars.css:9:8 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× Unexpected value or character.
7 │ color: $(style)color;
8 │ color: @@(style) color123;
> 9 │ color: @@(style)color123;
│ ^
10 │
i Expected one of:
- hover
- focus
- active
- first-child
- last-child
- nth-child
- nth-last-child
- first-of-type
- last-of-type
- nth-of-type
- nth-last-of-type
- only-child
- only-of-type
- checked
- disabled
- enabled
- required
- optional
- valid
- invalid
- in-range
- out-of-range
- read-only
- read-write
- placeholder-shown
- default
- checked
- indeterminate
- blank
- empty
- root
- target
- lang
- not
- is
- where
- fullscreen
- link
- visited
- any-link
- local-link
- scope
- current
- past
- future
postcss-simple-vars.css:9:11 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `style`
7 │ color: $(style)color;
8 │ color: @@(style) color123;
> 9 │ color: @@(style)color123;
│ ^^^^^
10 │
i Remove style
postcss-simple-vars.css:9:16 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `)`
7 │ color: $(style)color;
8 │ color: @@(style) color123;
> 9 │ color: @@(style)color123;
│ ^
10 │
i Remove )
postcss-simple-vars.css:9:17 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `color123`
7 │ color: $(style)color;
8 │ color: @@(style) color123;
> 9 │ color: @@(style)color123;
│ ^^^^^^^^
10 │
i Remove color123
postcss-simple-vars.css:9:25 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
× expected `,` but instead found `;`
7 │ color: $(style)color;
8 │ color: @@(style) color123;
> 9 │ color: @@(style)color123;
│ ^
10 │
i Remove ;
```