diff --git a/crates/swc_css_minifier/src/compressor/mod.rs b/crates/swc_css_minifier/src/compressor/mod.rs
index 91cc31eb42de..922e895cf6ef 100644
--- a/crates/swc_css_minifier/src/compressor/mod.rs
+++ b/crates/swc_css_minifier/src/compressor/mod.rs
@@ -36,7 +36,7 @@ pub fn compressor() -> impl VisitMut {
 struct Compressor {
     ctx: Ctx,
     need_utf8_at_rule: bool,
-    in_supports_conidition: bool,
+    in_supports_condition: bool,
 }
 
 impl Compressor {
@@ -99,7 +99,7 @@ impl VisitMut for Compressor {
     }
 
     fn visit_mut_declaration(&mut self, n: &mut Declaration) {
-        if self.in_supports_conidition {
+        if self.in_supports_condition {
             n.visit_mut_children_with(self);
 
             return;
@@ -183,13 +183,13 @@ impl VisitMut for Compressor {
     }
 
     fn visit_mut_supports_condition(&mut self, n: &mut SupportsCondition) {
-        let old_in_support_condition = self.in_supports_conidition;
+        let old_in_support_condition = self.in_supports_condition;
 
-        self.in_supports_conidition = true;
+        self.in_supports_condition = true;
 
         n.visit_mut_children_with(self);
 
-        self.in_supports_conidition = old_in_support_condition;
+        self.in_supports_condition = old_in_support_condition;
 
         self.compress_supports_condition(n);
     }
@@ -221,7 +221,7 @@ impl VisitMut for Compressor {
 
         // Don't touch `@supports`, it can be used to check a browser's support for one
         // or more specific CSS features
-        if !self.in_supports_conidition {
+        if !self.in_supports_condition {
             self.compress_calc_sum(n);
         }
     }
@@ -229,6 +229,10 @@ impl VisitMut for Compressor {
     fn visit_mut_component_value(&mut self, n: &mut ComponentValue) {
         n.visit_mut_children_with(self);
 
+        if self.in_supports_condition {
+            return;
+        }
+
         self.compress_calc_sum_in_component_value(n);
 
         self.compress_alpha_value_in_component_value(n);
diff --git a/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/input.css b/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/input.css
index c4b52c08304d..3dbdf527f0fe 100644
--- a/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/input.css
+++ b/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/input.css
@@ -208,3 +208,10 @@
         color: red;
     }
 }
+
+@supports (animation: fade 3s cubic-bezier(0.25, 0.1, 0.25, 1)) {
+    a {
+        /* it is safe to compress inside block */
+        animation: fade 3s cubic-bezier(0.25, 0.1, 0.25, 1)
+    }
+}
diff --git a/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/output.min.css b/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/output.min.css
index 386cb10cdae3..beaa669541a1 100644
--- a/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/output.min.css
+++ b/crates/swc_css_minifier/tests/fixture/compress-at-rule/supports/output.min.css
@@ -1 +1 @@
-@supports(display:flex){a{color:red}}@supports(display:grid)and (display:flex){a{color:red}}@supports(display:grid)or (display:flex){a{color:red}}@supports(display:flex){a{color:red}}@supports(not (display:grid)){div{float:right}}@supports(transform-origin:5%5%){div{float:right}}@supports(display:grid)and (not (display:inline-grid)){div{float:right}}@supports(display:grid)and (display:flex){a{color:red}}@supports(display:flex)or (display:grid)or (display:table)or (display:inline-grid){div{color:red}}@supports(display:flex)and (display:grid)and (display:table)and (display:inline-grid){div{color:red}}@supports((display:flex)and (display:grid))or (display:table)or (display:inline-grid){div{color:red}}@supports((display:flex)or (display:grid))and (display:table)and (display:inline-grid){div{color:red}}@supports(display:flex)and ((display:grid)or (display:table))and (display:inline-grid){div{color:red}}@supports(display:flex)or ((display:grid)and (display:table))or (display:inline-grid){div{color:red}}@supports(display:flex)and (display:grid)and ((display:table)or (display:inline-grid)){div{color:red}}@supports(display:flex)or (display:grid)or ((display:table)and (display:inline-grid)){div{color:red}}@supports(display:flex!important){div{color:red}}@supports((display:grid)and (display:table))or ((display:flex)and (display:inline)){a{color:red}}@supports((display:grid)or (display:table))and ((display:flex)or (display:inline)){a{color:red}}@supports(display:grid)and (display:table)and (display:flex)and (display:inline){a{color:red}}@supports(display:grid)or (display:table)or (display:flex)or (display:inline){a{color:red}}@supports(display:grid)or (display:table)or ((display:flex)and (display:inline)){a{color:red}}@supports(display:grid)and (display:table)and ((display:flex)or (display:inline)){a{color:red}}@supports((display:grid)and (display:table))or (display:flex)or (display:inline){a{color:red}}@supports((display:grid)or (display:table))and (display:flex)and (display:inline){a{color:red}}@supports(display:grid)and (display:table)and (display:flex)and (display:inline-table){a{color:red}}@supports(display:grid)or (display:table)or (display:flex)or (display:inline-table){a{color:red}}@supports(display:grid)or ((display:table)and (display:flex))or (display:inline-table){a{color:red}}@supports(display:grid)and ((display:table)or (display:flex))and (display:inline-table){a{color:red}}
+@supports(display:flex){a{color:red}}@supports(display:grid)and (display:flex){a{color:red}}@supports(display:grid)or (display:flex){a{color:red}}@supports(display:flex){a{color:red}}@supports(not (display:grid)){div{float:right}}@supports(transform-origin:5%5%){div{float:right}}@supports(display:grid)and (not (display:inline-grid)){div{float:right}}@supports(display:grid)and (display:flex){a{color:red}}@supports(display:flex)or (display:grid)or (display:table)or (display:inline-grid){div{color:red}}@supports(display:flex)and (display:grid)and (display:table)and (display:inline-grid){div{color:red}}@supports((display:flex)and (display:grid))or (display:table)or (display:inline-grid){div{color:red}}@supports((display:flex)or (display:grid))and (display:table)and (display:inline-grid){div{color:red}}@supports(display:flex)and ((display:grid)or (display:table))and (display:inline-grid){div{color:red}}@supports(display:flex)or ((display:grid)and (display:table))or (display:inline-grid){div{color:red}}@supports(display:flex)and (display:grid)and ((display:table)or (display:inline-grid)){div{color:red}}@supports(display:flex)or (display:grid)or ((display:table)and (display:inline-grid)){div{color:red}}@supports(display:flex!important){div{color:red}}@supports((display:grid)and (display:table))or ((display:flex)and (display:inline)){a{color:red}}@supports((display:grid)or (display:table))and ((display:flex)or (display:inline)){a{color:red}}@supports(display:grid)and (display:table)and (display:flex)and (display:inline){a{color:red}}@supports(display:grid)or (display:table)or (display:flex)or (display:inline){a{color:red}}@supports(display:grid)or (display:table)or ((display:flex)and (display:inline)){a{color:red}}@supports(display:grid)and (display:table)and ((display:flex)or (display:inline)){a{color:red}}@supports((display:grid)and (display:table))or (display:flex)or (display:inline){a{color:red}}@supports((display:grid)or (display:table))and (display:flex)and (display:inline){a{color:red}}@supports(display:grid)and (display:table)and (display:flex)and (display:inline-table){a{color:red}}@supports(display:grid)or (display:table)or (display:flex)or (display:inline-table){a{color:red}}@supports(display:grid)or ((display:table)and (display:flex))or (display:inline-table){a{color:red}}@supports(display:grid)and ((display:table)or (display:flex))and (display:inline-table){a{color:red}}@supports(animation:fade 3s cubic-bezier(.25,.1,.25,1)){a{animation:fade 3s ease}}
diff --git a/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/input.css b/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/input.css
index abbdf4b2ec26..d9dd4ec7a68f 100644
--- a/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/input.css
+++ b/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/input.css
@@ -27,3 +27,9 @@
         background: red;
     }
 }
+
+@supports (width: calc(100px)) {
+    div {
+        background: red;
+    }
+}
diff --git a/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/output.min.css b/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/output.min.css
index decccfc404d0..0d0eb82e3d92 100644
--- a/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/output.min.css
+++ b/crates/swc_css_minifier/tests/fixture/compress-calc/supports-condition/output.min.css
@@ -1 +1 @@
-@supports(width:calc(100px + 100px)){div{background:red}}@supports(width:calc(0px*100)){div{background:red}}@supports(width:calc(0px + 0px)){div{background:red}}@supports(width:calc(100px*sqrt(9))){div{background:red}}
+@supports(width:calc(100px + 100px)){div{background:red}}@supports(width:calc(calc(100px + 100px))){div{background:red}}@supports(width:calc(0px*100)){div{background:red}}@supports(width:calc(0px + 0px)){div{background:red}}@supports(width:calc(100px*sqrt(9))){div{background:red}}@supports(width:calc(100px)){div{background:red}}