diff --git a/package-lock.json b/package-lock.json
index 186c73818158..77189dac6fd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1051,19 +1051,19 @@
       }
     },
     "css-tree": {
-      "version": "1.0.0-alpha22",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha22.tgz",
-      "integrity": "sha1-M4oAbjMce0+dq3tq9Tns5W/3ivI=",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.2.tgz",
+      "integrity": "sha512-wCoWush5Aeo48GLhfHPbmvZs59Z+M7k5+B1xDnXbdWNcEF423DoFdqSWE0PM5aNk5nI5cp1q7ms36zGApY/sKQ==",
       "dev": true,
       "requires": {
-        "mdn-data": "^1.0.0",
-        "source-map": "^0.5.3"
+        "mdn-data": "2.0.14",
+        "source-map": "^0.6.1"
       },
       "dependencies": {
         "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
           "dev": true
         }
       }
@@ -2904,9 +2904,9 @@
       }
     },
     "mdn-data": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-1.2.0.tgz",
-      "integrity": "sha512-esDqNvsJB2q5V28+u7NdtdMg6Rmg4khQmAVSjUiX7BY/7haIv0K2yWM43hYp0or+3nvG7+UaTF1JHz31hgU1TA==",
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
+      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
       "dev": true
     },
     "mem": {
diff --git a/package.json b/package.json
index 4a5449c548d4..d42804c32b41 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
     "c8": "^5.0.1",
     "code-red": "^0.1.4",
     "codecov": "^3.5.0",
-    "css-tree": "1.0.0-alpha22",
+    "css-tree": "1.1.2",
     "eslint": "^7.15.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-svelte3": "^2.7.3",
diff --git a/test/css/samples/media-query-calc/expected.css b/test/css/samples/media-query-calc/expected.css
new file mode 100644
index 000000000000..7c53fa57a2b4
--- /dev/null
+++ b/test/css/samples/media-query-calc/expected.css
@@ -0,0 +1 @@
+@media(min-width: calc(400px - 100px)){.large-screen.svelte-xyz{display:block}}
\ No newline at end of file
diff --git a/test/css/samples/media-query-calc/input.svelte b/test/css/samples/media-query-calc/input.svelte
new file mode 100644
index 000000000000..12fe2354868b
--- /dev/null
+++ b/test/css/samples/media-query-calc/input.svelte
@@ -0,0 +1,9 @@
+<div class='large-screen'>animated</div>
+
+<style>
+	@media (min-width: calc(400px - 300px)) {
+		.large-screen {
+			display: block;
+		}
+	}
+</style>