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

# Input

```css
@supports (display: grid) {
	div {
		display: grid;
	}
}

@supports (display: flex) {
	body {
		color: blue;
	}

	@media screen and (min-width: 900px) {
		article {
			display: flex;
		}
	}
}
@supports   (   display   :   flex   )   {}
@supports not (display: flex) {}
@SUPPORTS not (display: flex) {}
@supports (box-shadow: 0 0 2px black inset ) or (-moz-box-shadow: 0 0 2px black inset ) or (-webkit-box-shadow: 0 0 2px black inset ) or (-o-box-shadow: 0 0 2px black inset ) {}
@supports ( box-shadow: 0 0 2px black inset )

or
  ( -moz-box-shadow: 0 0 2px black inset ) or

  ( -webkit-box-shadow: 0 0 2px black inset ) or
  ( 
    -o-box-shadow: 0 0 2px black inset ) {

}
@supports   (   transition-property   :   color   )   or   (   (   animation-name   :   foo   )   and   (   transform   :    rotate(10deg)   )   )   {}
@supports(transition-property:color)or ((animation-name:foo)and (transform:rotate(10deg))){}
@supports ((
    display: flex)) {}
@supports (display: flex !important) {}
@supports NOT (display: flex) {}
@supports ((transition-property: color) OR (animation-name: foo)) AND (transform: rotate(10deg)) {}
@supports (transition-property: color) OR ((animation-name: foo) AND (transform: rotate(10deg))

) {}
@supports (NOT (display: flex)) {}

@supports selector(col || td) {
	col.selected || td {
		background: tan;
	}
}

@supports selector(
    :focus-visible
    ) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (
    --element(".minwidth")) {

}

@supports (ident: 1) {
	* { background: red; }
}

@supports ((ident: 1)) {
	* { background: red; }
}

@supports (ident: "str") {
	* { background: red; }
}

@supports ((ident: "str")) {
	* { background: red; }
}

@supports func(10, 20, 40) {
	* { background: red; }
}

@supports (func(10, 20, 40)) {
	* { background: red; }
}

@supports (   func(   10   ,   20   ,   40   )  ) {
	* { background: red; }
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white
		}
	}
}

@supports (--foo: green) {
	body {
		color: var(--varName);
	}
}

@supports not selector(:is(a, b)) {
	ul > li,
	ol > li {
		color: red;
	}
}

@supports selector(
    :nth-child(
    1n of a
    
    ,
     b)) {
	:is(
      :nth-child(1n of ul, ol) a,
      details > summary
  ) {
		color: red
	}
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white
		}
	}
}

@supports selector(:focus-visible) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (width: calc(100px)) {
	div {
		background: red;
	}
}

@supports (func(1)) {
	* { background: red; }
}

@supports (   selector(   col || td   )   ) {
	col.selected || td {
		background: tan;
	}
}

@supports (   func("example")   ) {
	* { background: red; }
}

@supports (   --var:   "test"   ) {
	* { background: red; }
}

@supports (--var) {
	* { background: red; }
}

@supports (--element(".minwidth")) {
	[--self] {
		background: greenyellow;
	}
}

```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
@supports (display: grid) {
	div {
		display: grid;
	}
}

@supports (display: flex) {
	body {
		color: blue;
	}

	@media screen and (min-width: 900px) {
		article {
			display: flex;
		}
	}
}
@supports (display: flex) {
}
@supports not (display: flex) {
}
@supports not (display: flex) {
}
@supports (box-shadow: 0 0 2px black inset) or
	(-moz-box-shadow: 0 0 2px black inset) or
	(-webkit-box-shadow: 0 0 2px black inset) or
	(-o-box-shadow: 0 0 2px black inset) {
}
@supports (box-shadow: 0 0 2px black inset) or
	(-moz-box-shadow: 0 0 2px black inset) or
	(-webkit-box-shadow: 0 0 2px black inset) or
	(-o-box-shadow: 0 0 2px black inset) {
}
@supports (transition-property: color) or
	((animation-name: foo) and (transform: rotate(10deg))) {
}
@supports (transition-property: color) or
	((animation-name: foo) and (transform: rotate(10deg))) {
}
@supports ((display: flex)) {
}
@supports (display: flex !important) {
}
@supports not (display: flex) {
}
@supports ((transition-property: color) or (animation-name: foo)) and
	(transform: rotate(10deg)) {
}
@supports (transition-property: color) or
	((animation-name: foo) and (transform: rotate(10deg))) {
}
@supports (not (display: flex)) {
}

@supports selector(col || td) {
	col.selected || td {
		background: tan;
	}
}

@supports selector(:focus-visible) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (--element(".minwidth")) {
}

@supports (ident: 1) {
	* {
		background: red;
	}
}

@supports ((ident: 1)) {
	* {
		background: red;
	}
}

@supports (ident: "str") {
	* {
		background: red;
	}
}

@supports ((ident: "str")) {
	* {
		background: red;
	}
}

@supports func(10, 20, 40) {
	* {
		background: red;
	}
}

@supports (func(10, 20, 40)) {
	* {
		background: red;
	}
}

@supports (func(10, 20, 40)) {
	* {
		background: red;
	}
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white;
		}
	}
}

@supports (--foo: green) {
	body {
		color: var(--varName);
	}
}

@supports not selector(:is(a, b)) {
	ul > li,
	ol > li {
		color: red;
	}
}

@supports selector(:nth-child(1n of a, b)) {
	:is(:nth-child(1n of ul, ol) a, details > summary) {
		color: red;
	}
}

@supports (animation-name: test) {
	@keyframes anim {
		from {
			color: black;
		}
		to {
			color: white;
		}
	}
}

@supports selector(:focus-visible) {
	a:focus-visible {
		background: yellow;
	}
}

@supports (width: calc(100px)) {
	div {
		background: red;
	}
}

@supports (func(1)) {
	* {
		background: red;
	}
}

@supports (selector(col || td)) {
	col.selected || td {
		background: tan;
	}
}

@supports (func("example")) {
	* {
		background: red;
	}
}

@supports (--var: "test") {
	* {
		background: red;
	}
}

@supports (--var) {
	* {
		background: red;
	}
}

@supports (--element(".minwidth")) {
	[--self] {
		background: greenyellow;
	}
}
```