diff --git a/src/css/Stylesheet.ts b/src/css/Stylesheet.ts
index 200e73f582..d16af09293 100644
--- a/src/css/Stylesheet.ts
+++ b/src/css/Stylesheet.ts
@@ -163,7 +163,7 @@ class Atrule {
 	}
 
 	apply(node: Element, stack: Element[]) {
-		if (this.node.name === 'media') {
+		if (this.node.name === 'media' || this.node.name === 'supports') {
 			this.children.forEach(child => {
 				child.apply(node, stack);
 			});
@@ -199,6 +199,14 @@ class Atrule {
 			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
 			c = this.node.expression.end;
 			if (this.node.block.start - c > 0) code.remove(c, this.node.block.start);
+		} else if (this.node.name === 'supports') {
+			let c = this.node.start + 9;
+			if (this.node.expression.start - c > 1) code.overwrite(c, this.node.expression.start, ' ');
+			this.node.expression.children.forEach((query: Node) => {
+				// TODO minify queries
+				c = query.end;
+			});
+			code.remove(c, this.node.block.start);
 		}
 
 		// TODO other atrules
diff --git a/test/css/samples/supports-query/_config.js b/test/css/samples/supports-query/_config.js
new file mode 100644
index 0000000000..c66e0e5271
--- /dev/null
+++ b/test/css/samples/supports-query/_config.js
@@ -0,0 +1,3 @@
+export default {
+	cascade: false
+};
diff --git a/test/css/samples/supports-query/expected.css b/test/css/samples/supports-query/expected.css
new file mode 100644
index 0000000000..f76c91c4c4
--- /dev/null
+++ b/test/css/samples/supports-query/expected.css
@@ -0,0 +1 @@
+@supports (display: grid){.maybe-grid[svelte-xyz]{display:grid}}
\ No newline at end of file
diff --git a/test/css/samples/supports-query/input.html b/test/css/samples/supports-query/input.html
new file mode 100644
index 0000000000..776a7e9369
--- /dev/null
+++ b/test/css/samples/supports-query/input.html
@@ -0,0 +1,9 @@
+<div class='maybe-grid'>something with a nice layout</div>
+
+<style>
+	@supports (display: grid) {
+		.maybe-grid {
+			display: grid;
+		}
+	}
+</style>