diff --git a/crates/swc_atoms/words.txt b/crates/swc_atoms/words.txt
index e9caaf1fd916..ab89e02087a7 100644
--- a/crates/swc_atoms/words.txt
+++ b/crates/swc_atoms/words.txt
@@ -1,5 +1,4 @@
 *
-*
 -infinity
 -moz-activehyperlinktext
 -moz-animation
@@ -12,8 +11,6 @@
 -moz-animation-play-state
 -moz-animation-timing-function
 -moz-any
--moz-any
--moz-any
 -moz-appearance
 -moz-backface-visibility
 -moz-background-origin
@@ -38,8 +35,6 @@
 -moz-buttonhoverface
 -moz-buttonhovertext
 -moz-calc
--moz-calc
--moz-calc
 -moz-cellhighlight
 -moz-cellhighlighttext
 -moz-column-count
@@ -59,9 +54,8 @@
 -moz-dialog
 -moz-dialogtext
 -moz-document
--moz-document
--moz-document
 -moz-dragtargetzone
+-moz-element
 -moz-eventreerow
 -moz-font-feature-settings
 -moz-font-language-override
@@ -71,8 +65,6 @@
 -moz-hyperlinktext
 -moz-hyphens
 -moz-keyframes
--moz-keyframes
--moz-keyframes
 -moz-mac-accentdarkestshadow
 -moz-mac-accentdarkshadow
 -moz-mac-accentface
diff --git a/crates/swc_css_ast/src/base.rs b/crates/swc_css_ast/src/base.rs
index 473088e3cbdd..9aca4f1f9bd5 100644
--- a/crates/swc_css_ast/src/base.rs
+++ b/crates/swc_css_ast/src/base.rs
@@ -4,9 +4,9 @@ use swc_common::{ast_node, util::take::Take, EqIgnoreSpan, Span};
 
 use crate::{
     AlphaValue, AnglePercentage, AtRule, CalcSum, CmykComponent, Color, ComplexSelector,
-    DashedIdent, Delimiter, Dimension, FrequencyPercentage, Hue, Ident, Integer, KeyframeBlock,
-    LayerName, LengthPercentage, Number, Percentage, Ratio, RelativeSelectorList, SelectorList,
-    Str, SupportsCondition, TimePercentage, TokenAndSpan, UnicodeRange, Url,
+    DashedIdent, Delimiter, Dimension, FrequencyPercentage, Hue, IdSelector, Ident, Integer,
+    KeyframeBlock, LayerName, LengthPercentage, Number, Percentage, Ratio, RelativeSelectorList,
+    SelectorList, Str, SupportsCondition, TimePercentage, TokenAndSpan, UnicodeRange, Url,
 };
 
 #[ast_node("Stylesheet")]
@@ -218,6 +218,8 @@ pub enum ComponentValue {
     SupportsCondition(Box<SupportsCondition>),
     #[tag("Declaration")]
     Declaration(Box<Declaration>),
+    #[tag("IdSelector")]
+    IdSelector(Box<IdSelector>),
 }
 
 impl From<StyleBlock> for ComponentValue {
diff --git a/crates/swc_css_codegen/src/ctx.rs b/crates/swc_css_codegen/src/ctx.rs
index 9b5601f2dd64..fdadc06934df 100644
--- a/crates/swc_css_codegen/src/ctx.rs
+++ b/crates/swc_css_codegen/src/ctx.rs
@@ -20,8 +20,9 @@ where
 
 #[derive(Debug, Default, Clone, Copy)]
 pub(crate) struct Ctx {
-    pub in_single_line_selectors: bool,
     pub allow_to_lowercase: bool,
+    pub is_dimension_unit: bool,
+    pub in_single_line_selectors: bool,
     pub in_list_of_component_values: bool,
 }
 
diff --git a/crates/swc_css_codegen/src/lib.rs b/crates/swc_css_codegen/src/lib.rs
index 96e41730282a..d76a18cb7eab 100644
--- a/crates/swc_css_codegen/src/lib.rs
+++ b/crates/swc_css_codegen/src/lib.rs
@@ -504,19 +504,7 @@ where
 
             if n.condition.is_some() {
                 space!(self);
-
-                if n.keyword.is_some() {
-                    emit!(
-                        &mut *self.with_ctx(Ctx {
-                            allow_to_lowercase: true,
-                            ..self.ctx
-                        }),
-                        n.keyword
-                    );
-                } else {
-                    write_raw!(self, "and");
-                }
-
+                write_raw!(self, "and");
                 space!(self);
             }
         }
@@ -586,54 +574,21 @@ where
 
     #[emitter]
     fn emit_media_not(&mut self, n: &MediaNot) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "not");
-        }
-
+        write_raw!(self, "not");
         space!(self);
         emit!(self, n.condition);
     }
 
     #[emitter]
     fn emit_media_and(&mut self, n: &MediaAnd) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "and");
-        }
-
+        write_raw!(self, "and");
         space!(self);
         emit!(self, n.condition);
     }
 
     #[emitter]
     fn emit_media_or(&mut self, n: &MediaOr) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "or");
-        }
-
+        write_raw!(self, "or");
         space!(self);
         emit!(self, n.condition);
     }
@@ -755,54 +710,21 @@ where
 
     #[emitter]
     fn emit_supports_not(&mut self, n: &SupportsNot) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "not");
-        }
-
+        write_raw!(self, "not");
         space!(self);
         emit!(self, n.condition);
     }
 
     #[emitter]
     fn emit_supports_and(&mut self, n: &SupportsAnd) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "and");
-        }
-
+        write_raw!(self, "and");
         space!(self);
         emit!(self, n.condition);
     }
 
     #[emitter]
     fn emit_support_or(&mut self, n: &SupportsOr) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "or");
-        }
-
+        write_raw!(self, "or");
         space!(self);
         emit!(self, n.condition);
     }
@@ -965,54 +887,21 @@ where
 
     #[emitter]
     fn emit_container_query_not(&mut self, n: &ContainerQueryNot) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "not");
-        }
-
+        write_raw!(self, "not");
         space!(self);
         emit!(self, n.query);
     }
 
     #[emitter]
     fn emit_container_query_and(&mut self, n: &ContainerQueryAnd) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "and");
-        }
-
+        write_raw!(self, "and");
         space!(self);
         emit!(self, n.query);
     }
 
     #[emitter]
     fn emit_container_query_or(&mut self, n: &ContainerQueryOr) -> Result {
-        if n.keyword.is_some() {
-            emit!(
-                &mut *self.with_ctx(Ctx {
-                    allow_to_lowercase: true,
-                    ..self.ctx
-                }),
-                n.keyword
-            );
-        } else {
-            write_raw!(self, "or");
-        }
-
+        write_raw!(self, "or");
         space!(self);
         emit!(self, n.query);
     }
@@ -1337,8 +1226,6 @@ where
             let minified = minify_string(&n.value);
 
             write_str!(self, n.span, &minified);
-        } else if let Some(raw) = &n.raw {
-            write_str!(self, n.span, raw);
         } else {
             let value = serialize_string(&n.value);
 
@@ -1470,6 +1357,7 @@ where
             ComponentValue::LayerName(n) => emit!(self, n),
             ComponentValue::Declaration(n) => emit!(self, n),
             ComponentValue::SupportsCondition(n) => emit!(self, n),
+            ComponentValue::IdSelector(n) => emit!(self, n),
         }
     }
 
@@ -1589,95 +1477,57 @@ where
 
     #[emitter]
     fn emit_ident(&mut self, n: &Ident) -> Result {
-        if self.config.minify {
-            let value = if self.ctx.allow_to_lowercase && self.config.minify {
-                Cow::Owned(n.value.to_ascii_lowercase())
-            } else {
-                Cow::Borrowed(&n.value)
-            };
-            let serialized = serialize_ident(&value, n.raw.as_deref(), true);
-
-            write_raw!(self, n.span, &serialized);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
+        let value = if self.ctx.allow_to_lowercase && self.config.minify {
+            Cow::Owned(n.value.to_ascii_lowercase())
         } else {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), false);
+            Cow::Borrowed(&n.value)
+        };
 
+        let serialized = serialize_ident(&value, self.config.minify);
+
+        // The unit of a <dimension-token> may need escaping to disambiguate with
+        // scientific notation.
+        // Old browser hacks with `\0` and other - IE
+        if self.ctx.is_dimension_unit {
+            write_raw!(self, n.span, &serialize_dimension_unit(&serialized));
+        } else {
             write_raw!(self, n.span, &serialized);
         }
     }
 
     #[emitter]
     fn emit_custom_ident(&mut self, n: &CustomIdent) -> Result {
-        if self.config.minify {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), true);
-
-            write_raw!(self, n.span, &serialized);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), false);
+        let serialized = serialize_ident(&n.value, self.config.minify);
 
-            write_raw!(self, n.span, &serialized);
-        }
+        write_raw!(self, n.span, &serialized);
     }
 
     #[emitter]
     fn emit_dashed_ident(&mut self, n: &DashedIdent) -> Result {
-        if self.config.minify {
-            write_raw!(self, lo_span_offset!(n.span, 2), "--");
-
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), true);
-
-            write_raw!(self, n.span, &serialized);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            write_raw!(self, lo_span_offset!(n.span, 2), "--");
+        write_raw!(self, lo_span_offset!(n.span, 2), "--");
 
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), false);
+        let serialized = serialize_ident(&n.value, self.config.minify);
 
-            write_raw!(self, n.span, &serialized);
-        }
+        write_raw!(self, n.span, &serialized);
     }
 
     #[emitter]
     fn emit_extension_name(&mut self, n: &ExtensionName) -> Result {
-        if self.config.minify {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), true);
-
-            write_raw!(self, n.span, &serialized);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), false);
+        let serialized = serialize_ident(&n.value, self.config.minify);
 
-            write_raw!(self, n.span, &serialized);
-        }
+        write_raw!(self, n.span, &serialized);
     }
 
     #[emitter]
     fn emit_custom_highlight_name(&mut self, n: &CustomHighlightName) -> Result {
-        if self.config.minify {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), true);
+        let serialized = serialize_ident(&n.value, self.config.minify);
 
-            write_raw!(self, n.span, &serialized);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            let serialized = serialize_ident(&n.value, n.raw.as_deref(), true);
-
-            write_raw!(self, n.span, &serialized);
-        }
+        write_raw!(self, n.span, &serialized);
     }
 
     #[emitter]
     fn emit_custom_property_name(&mut self, n: &CustomPropertyName) -> Result {
-        if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            write_raw!(self, n.span, &n.value);
-        }
+        write_raw!(self, n.span, &n.value);
     }
 
     #[emitter]
@@ -1736,6 +1586,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1748,6 +1599,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1760,6 +1612,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1772,6 +1625,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1784,6 +1638,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1796,6 +1651,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1808,6 +1664,7 @@ where
         emit!(self, n.value);
         emit!(
             &mut *self.with_ctx(Ctx {
+                is_dimension_unit: true,
                 allow_to_lowercase: true,
                 ..self.ctx
             }),
@@ -1817,13 +1674,7 @@ where
 
     #[emitter]
     fn emit_integer(&mut self, n: &Integer) -> Result {
-        if self.config.minify {
-            write_raw!(self, n.span, &n.value.to_string());
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
-        } else {
-            write_raw!(self, n.span, &n.value.to_string());
-        }
+        write_raw!(self, n.span, &n.value.to_string());
     }
 
     #[emitter]
@@ -1832,8 +1683,6 @@ where
             let minified = minify_numeric(n.value);
 
             write_raw!(self, n.span, &minified);
-        } else if let Some(raw) = &n.raw {
-            write_raw!(self, n.span, raw);
         } else {
             write_raw!(self, n.span, &n.value.to_string());
         }
@@ -1877,8 +1726,6 @@ where
             let minified = minify_hex_color(&n.value);
 
             hex_color.push_str(&minified);
-        } else if let Some(raw) = &n.raw {
-            hex_color.push_str(raw);
         } else {
             hex_color.push_str(&n.value);
         }
@@ -2128,25 +1975,7 @@ where
 
     #[emitter]
     fn emit_url_value_raw(&mut self, n: &UrlValueRaw) -> Result {
-        if self.config.minify {
-            let mut url = String::with_capacity(n.value.len());
-
-            url.push_str(&n.value);
-
-            write_str!(self, n.span, &url);
-        } else if let Some(raw) = &n.raw {
-            let mut url = String::with_capacity(raw.len());
-
-            url.push_str(raw);
-
-            write_str!(self, n.span, &url);
-        } else {
-            let mut url = String::with_capacity(n.value.len());
-
-            url.push_str(&n.value);
-
-            write_str!(self, n.span, &url);
-        }
+        write_str!(self, n.span, &serialize_url(&n.value));
     }
 
     #[emitter]
@@ -2494,42 +2323,27 @@ where
 
     #[emitter]
     fn emit_an_plus_b_notation(&mut self, n: &AnPlusBNotation) -> Result {
-        if self.config.minify {
-            let mut an_plus_b_minified = String::with_capacity(4);
+        let mut an_plus_b = String::with_capacity(4);
 
-            if let Some(a) = &n.a {
-                if *a == -1 {
-                    an_plus_b_minified.push('-');
-                } else if *a != 1 {
-                    an_plus_b_minified.push_str(&a.to_string());
-                }
-
-                an_plus_b_minified.push('n');
-            }
-
-            if let Some(b) = &n.b {
-                if *b >= 0 && n.a.is_some() {
-                    an_plus_b_minified.push('+');
-                }
-
-                an_plus_b_minified.push_str(&b.to_string());
+        if let Some(a) = &n.a {
+            if *a == -1 {
+                an_plus_b.push('-');
+            } else if *a != 1 {
+                an_plus_b.push_str(&a.to_string());
             }
 
-            write_raw!(self, n.span, &an_plus_b_minified);
-        } else {
-            let mut an_plus_b = String::with_capacity(4);
-
-            if let Some(a_raw) = &n.a_raw {
-                an_plus_b.push_str(a_raw);
-                an_plus_b.push('n');
-            }
+            an_plus_b.push('n');
+        }
 
-            if let Some(b_raw) = &n.b_raw {
-                an_plus_b.push_str(b_raw);
+        if let Some(b) = &n.b {
+            if *b >= 0 && n.a.is_some() {
+                an_plus_b.push('+');
             }
 
-            write_raw!(self, n.span, &an_plus_b);
+            an_plus_b.push_str(&b.to_string());
         }
+
+        write_raw!(self, n.span, &an_plus_b);
     }
 
     #[emitter]
@@ -2828,13 +2642,11 @@ fn serialize_string(value: &str) -> String {
                 minified.push_str(from_utf8(bytes).unwrap());
             }
             // If the character is '"' (U+0022) or "\" (U+005C), the escaped character.
-            // We avoid escaping `"` to better string compression - we count the quantity of
-            // quotes to choose the best default quotes
             '\\' => {
                 minified.push_str("\\\\");
             }
             '"' => {
-                minified.push_str("\\\"");
+                minified.push('\"');
             }
             // Otherwise, the character itself.
             _ => {
@@ -2846,6 +2658,53 @@ fn serialize_string(value: &str) -> String {
     format!("\"{}\"", minified.replace('"', "\\\""))
 }
 
+fn serialize_url(value: &str) -> String {
+    let mut new_value = String::with_capacity(value.len());
+
+    for c in value.chars() {
+        match c {
+            '\x01'..='\x1F' | '\x7F' => {
+                static HEX_DIGITS: &[u8; 16] = b"0123456789abcdef";
+
+                let b3;
+                let b4;
+                let char_as_u8 = c as u8;
+
+                let bytes = if char_as_u8 > 0x0f {
+                    let high = (char_as_u8 >> 4) as usize;
+                    let low = (char_as_u8 & 0x0f) as usize;
+
+                    b4 = [b'\\', HEX_DIGITS[high], HEX_DIGITS[low], b' '];
+
+                    &b4[..]
+                } else {
+                    b3 = [b'\\', HEX_DIGITS[c as usize], b' '];
+
+                    &b3[..]
+                };
+
+                new_value.push_str(from_utf8(bytes).unwrap());
+            }
+            '(' | ')' | '"' | '\'' => {
+                new_value.push('\\');
+                new_value.push(c)
+            }
+            '\\' => {
+                new_value.push_str("\\\\");
+            }
+            _ if c.is_whitespace() => {
+                new_value.push('\\');
+                new_value.push(c)
+            }
+            _ => {
+                new_value.push(c);
+            }
+        };
+    }
+
+    new_value
+}
+
 fn minify_string(value: &str) -> String {
     let mut minified = String::with_capacity(value.len());
 
@@ -2911,3 +2770,42 @@ fn minify_string(value: &str) -> String {
         format!("\"{}\"", minified.replace('"', "\\\""))
     }
 }
+
+fn serialize_dimension_unit(value: &str) -> Cow<'_, str> {
+    // Fast-path
+    let need_escape = (value.len() >= 2
+        && value.as_bytes()[0] == b'e'
+        && (b'0'..=b'9').contains(&value.as_bytes()[1]))
+        || value.contains(|c| c == char::REPLACEMENT_CHARACTER);
+
+    if !need_escape {
+        return Cow::Borrowed(value);
+    }
+
+    let mut result = String::with_capacity(value.len());
+    let mut chars = value.chars().enumerate().peekable();
+
+    while let Some((i, c)) = chars.next() {
+        match c {
+            // Old browser hacks with `\0` and other - IE
+            char::REPLACEMENT_CHARACTER => {
+                result.push_str("\\0");
+            }
+            // The unit of a <dimension-token> may need escaping to disambiguate with scientific
+            // notation.
+            'e' if i == 0 => {
+                if matches!(chars.peek(), Some((_, '0'..='9'))) {
+                    result.push(c);
+                    result.push_str("\\3");
+                } else {
+                    result.push(c);
+                }
+            }
+            _ => {
+                result.push(c);
+            }
+        }
+    }
+
+    Cow::Owned(result)
+}
diff --git a/crates/swc_css_codegen/tests/fixture.rs b/crates/swc_css_codegen/tests/fixture.rs
index 84bcd6a5a9a8..85bbe8e7f75a 100644
--- a/crates/swc_css_codegen/tests/fixture.rs
+++ b/crates/swc_css_codegen/tests/fixture.rs
@@ -212,13 +212,6 @@ impl VisitMut for NormalizeTest {
         n.raw = None;
     }
 
-    fn visit_mut_important_flag(&mut self, n: &mut ImportantFlag) {
-        n.visit_mut_children_with(self);
-
-        n.value.value = n.value.value.to_lowercase().into();
-        n.value.raw = None;
-    }
-
     // TODO - we should parse only some properties as `<integer>`, but it requires
     // more work, let's postpone it to avoid breaking code
     fn visit_mut_component_value(&mut self, n: &mut ComponentValue) {
@@ -239,18 +232,30 @@ impl VisitMut for NormalizeTest {
     fn visit_mut_ident(&mut self, n: &mut Ident) {
         n.visit_mut_children_with(self);
 
+        n.value = n
+            .value
+            .replace('\0', &char::REPLACEMENT_CHARACTER.to_string())
+            .into();
         n.raw = None;
     }
 
     fn visit_mut_custom_ident(&mut self, n: &mut CustomIdent) {
         n.visit_mut_children_with(self);
 
+        n.value = n
+            .value
+            .replace('\0', &char::REPLACEMENT_CHARACTER.to_string())
+            .into();
         n.raw = None;
     }
 
     fn visit_mut_dashed_ident(&mut self, n: &mut DashedIdent) {
         n.visit_mut_children_with(self);
 
+        n.value = n
+            .value
+            .replace('\0', &char::REPLACEMENT_CHARACTER.to_string())
+            .into();
         n.raw = None;
     }
 
@@ -269,6 +274,10 @@ impl VisitMut for NormalizeTest {
     fn visit_mut_str(&mut self, n: &mut Str) {
         n.visit_mut_children_with(self);
 
+        n.value = n
+            .value
+            .replace('\0', &char::REPLACEMENT_CHARACTER.to_string())
+            .into();
         n.raw = None;
     }
 
@@ -278,38 +287,6 @@ impl VisitMut for NormalizeTest {
         n.raw = None;
     }
 
-    fn visit_mut_declaration(&mut self, n: &mut Declaration) {
-        n.visit_mut_children_with(self);
-
-        if let DeclarationName::Ident(name) = &mut n.name {
-            name.value = name.value.to_lowercase().into();
-        }
-    }
-
-    fn visit_mut_pseudo_class_selector(&mut self, n: &mut PseudoClassSelector) {
-        n.visit_mut_children_with(self);
-
-        n.name.value = n.name.value.to_lowercase().into();
-    }
-
-    fn visit_mut_pseudo_element_selector(&mut self, n: &mut PseudoElementSelector) {
-        n.visit_mut_children_with(self);
-
-        n.name.value = n.name.value.to_lowercase().into();
-    }
-
-    fn visit_mut_tag_name_selector(&mut self, n: &mut TagNameSelector) {
-        n.visit_mut_children_with(self);
-
-        n.name.value.value = n.name.value.value.to_lowercase().into();
-    }
-
-    fn visit_mut_attribute_selector_modifier(&mut self, n: &mut AttributeSelectorModifier) {
-        n.visit_mut_children_with(self);
-
-        n.value.value = n.value.value.to_lowercase().into();
-    }
-
     fn visit_mut_an_plus_b_notation(&mut self, n: &mut AnPlusBNotation) {
         n.visit_mut_children_with(self);
 
@@ -322,42 +299,6 @@ impl VisitMut for NormalizeTest {
         }
     }
 
-    fn visit_mut_length(&mut self, n: &mut Length) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
-    fn visit_mut_angle(&mut self, n: &mut Angle) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
-    fn visit_mut_time(&mut self, n: &mut Time) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
-    fn visit_mut_frequency(&mut self, n: &mut Frequency) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
-    fn visit_mut_resolution(&mut self, n: &mut Resolution) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
-    fn visit_mut_flex(&mut self, n: &mut Flex) {
-        n.visit_mut_children_with(self);
-
-        n.unit.value = n.unit.value.to_lowercase().into();
-    }
-
     fn visit_mut_token_and_span(&mut self, n: &mut TokenAndSpan) {
         n.visit_mut_children_with(self);
 
@@ -741,8 +682,8 @@ fn parse_again(input: PathBuf) {
             err.to_diagnostics(&handler).emit();
         }
 
-        stylesheet.visit_mut_with(&mut DropSpan);
-        parsed.visit_mut_with(&mut DropSpan);
+        stylesheet.visit_mut_with(&mut NormalizeTest);
+        parsed.visit_mut_with(&mut NormalizeTest);
 
         assert_eq!(stylesheet, parsed);
 
@@ -750,11 +691,3 @@ fn parse_again(input: PathBuf) {
     })
     .unwrap();
 }
-
-struct DropSpan;
-
-impl VisitMut for DropSpan {
-    fn visit_mut_span(&mut self, n: &mut Span) {
-        *n = Default::default()
-    }
-}
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/color-profile/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/color-profile/output.css
index ae0886356a66..1bf67473330f 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/color-profile/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/color-profile/output.css
@@ -1,7 +1,7 @@
 @color-profile --swop5c {
-  src: url('https://example.org/SWOP2006_Coated5v2.icc');
+  src: url("https://example.org/SWOP2006_Coated5v2.icc");
 }
 @color-profile --fogra55beta {
-  src: url('https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc');
+  src: url("https://example.org/2020_13.003_FOGRA55beta_CL_Profile.icc");
   prop: value;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/container/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/container/output.css
index 9b1a281c4113..f17adada9fb2 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/container/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/container/output.css
@@ -26,11 +26,11 @@ aside {
 }
 .media-object {
   display: grid;
-  grid-template: 'img' auto 'content' auto/ 100%;
+  grid-template: "img" auto "content" auto/ 100%;
 }
 @container my-layout (inline-size > 45em) {
   .media-object {
-    grid-template: 'img content' auto/ auto 1fr;
+    grid-template: "img content" auto/ auto 1fr;
   }
 }
 @container card (inline-size > 30em) and style(--responsive: true) {
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/counter-style/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/counter-style/output.css
index d2f88a7dd26b..353fc7a736ad 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/counter-style/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/counter-style/output.css
@@ -1,6 +1,6 @@
 @counter-style thumbs {
   system: cyclic;
-  symbols: "\1F44D";
+  symbols: "👍";
   suffix: " ";
 }
 ul {
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/import/1/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/import/1/output.css
index 83ce01894d5e..6c4896b293f3 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/import/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/import/1/output.css
@@ -1,9 +1,9 @@
-@import 'custom.css';
+@import "custom.css";
 @import url("chrome://communicator/skin/");
 @import url("fineprint.css") print;
 @import url("bluish.css") speech;
 @import "common.css" screen;
-@import url('landscape.css') screen and (orientation: landscape);
+@import url("landscape.css") screen and (orientation: landscape);
 @import url("narrow.css") handheld and (max-width: 400px);
 @import "narrow.css" handheld and (max-width: 400px);
 @import url("tabs.css") layer(framework);
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/1/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/1/output.css
index 3bca1e4ca665..fdc66c5ebfcc 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/1/output.css
@@ -1,8 +1,8 @@
 @keyframes slidein {
   from {
-    transform: translateX(0%);
+    transform: translatex(0%);
   }
   to {
-    transform: translateX(100%);
+    transform: translatex(100%);
   }
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/2/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/2/output.css
index 7704998bc6b1..53a46c64dfa7 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/2/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/2/output.css
@@ -1,8 +1,8 @@
 @keyframes "foo" {
   from {
-    transform: translateX(0%);
+    transform: translatex(0%);
   }
   to {
-    transform: translateX(100%);
+    transform: translatex(100%);
   }
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/3/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/3/output.css
index 492dfba217d4..0b5f4e27c3d0 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/3/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/keyframes/3/output.css
@@ -7,10 +7,10 @@
   }
 }
 @keyframes ONE_TWO_THREE {
-  FROM {
-    transform: translateX(0%);
+  from {
+    transform: translatex(0%);
   }
-  TO {
-    transform: translateX(100%);
+  to {
+    transform: translatex(100%);
   }
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css
index 8aa886dedb14..bb7c979e6696 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/media/4/output.css
@@ -1,5 +1,5 @@
-@\media screen {}
-@\media \screen {}
+@media screen {}
+@media screen {}
 @media all {}
 @media screen {}
 @media print {}
@@ -91,9 +91,9 @@
 @media ((min-width: 800px) and (min-width: 800px)) or (min-width: 800px) {}
 @media (min-width: 800px) and ((min-width: 800px) or (min-width: 800px)) {}
 @media NOT all {}
-@media ONLY screen AND (color) {}
-@media ((min-width: 800px) AND (min-width: 800px)) OR (min-width: 800px) {}
-@media (min-width: 800px) AND ((min-width: 800px) OR (min-width: 800px)) {}
+@media ONLY screen and (color) {}
+@media ((min-width: 800px) and (min-width: 800px)) or (min-width: 800px) {}
+@media (min-width: 800px) and ((min-width: 800px) or (min-width: 800px)) {}
 @media{}
 @media{}
 @media not (min-width: 100px) {}
@@ -111,9 +111,9 @@
 @media func(100px) {}
 @media screen and func(100px) {}
 @media (max-width: 650px), calc(150px + 150px) {}
-@MEDIA ALL {}
-@MEDIA (PREFERS-reduced-motion: no-preference) {
-  :ROOT {
+@media ALL {}
+@media (PREFERS-reduced-motion: no-preference) {
+  :root {
     scroll-behavior: smooth;
   }
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/property/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/property/output.css
index 1becf32d6eff..f7ef55e41c75 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/property/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/property/output.css
@@ -1,5 +1,5 @@
 @property --property-name {
-  syntax: '<color>';
+  syntax: "<color>";
   inherits: false;
   initial-value: #c0ffee;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css b/crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css
index 4bd5600b5ece..8a73b1f6678b 100644
--- a/crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/at-rules/supports/1/output.css
@@ -20,16 +20,16 @@
     background: red;
   }
 }
-@supports selector(A > B) {}
+@supports selector(a > b) {}
 @supports (display: grid) and (not (display: inline-grid)) {}
 @supports (display: table-cell) and (display: list-item) and (display: contents) {}
 @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) {}
 @supports (--foo: green) {}
 @supports not selector(:is(a, b)) {}
-@supports selector(:nth-child(1n of a, b)) {}
-@supports (display: flex) and selector(:nth-child(1n of a, b)) {}
-@supports selector(:nth-child(1n of a, b)) and (display: flex) {}
+@supports selector(:nth-child(n of a, b)) {}
+@supports (display: flex) and selector(:nth-child(n of a, b)) {}
+@supports selector(:nth-child(n of a, b)) and (display: flex) {}
 @supports ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) or (display: -webkit-box) {}
 @supports ((display: flex) and (display: -webkit-box) and (display: -webkit-flex) and (display: -moz-box) and (display: -ms-flexbox)) and (display: -webkit-box) {}
 @supports ((display: flex) and (display: -webkit-box) and (display: -webkit-flex) and (display: -moz-box) and (display: -ms-flexbox)) or (display: -webkit-box) {}
-@supports NOT (NOT (Transform-origin: 2px)) {}
+@supports not (not (transform-origin: 2px)) {}
diff --git a/crates/swc_css_codegen/tests/fixture/declaration/important/output.css b/crates/swc_css_codegen/tests/fixture/declaration/important/output.css
index d472cc2d1c69..67dc9a2a46a9 100644
--- a/crates/swc_css_codegen/tests/fixture/declaration/important/output.css
+++ b/crates/swc_css_codegen/tests/fixture/declaration/important/output.css
@@ -7,8 +7,8 @@ div {
   color: red !important;
   color: red !important;
   color: red !important;
-  color: red !IMPORTANT;
-  color: red !iMpOrTaNt;
+  color: red !important;
+  color: red !important;
 }
 a {
   b: c !important;
diff --git a/crates/swc_css_codegen/tests/fixture/function/1/output.css b/crates/swc_css_codegen/tests/fixture/function/1/output.css
index 86b6e1f40cca..113e184b3efc 100644
--- a/crates/swc_css_codegen/tests/fixture/function/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/function/1/output.css
@@ -1,6 +1,6 @@
 div {
   color: rgb(255, 255, 255);
-  color: rgb(255, 255, 255, .5);
+  color: rgb(255, 255, 255, 0.5);
   color: rgb(255 255 255);
-  color: rgb(255 255 255/ .5);
+  color: rgb(255 255 255/ 0.5);
 }
diff --git a/crates/swc_css_codegen/tests/fixture/function/2/output.css b/crates/swc_css_codegen/tests/fixture/function/2/output.css
index 04f24dc2c62c..ae5bfbbc4021 100644
--- a/crates/swc_css_codegen/tests/fixture/function/2/output.css
+++ b/crates/swc_css_codegen/tests/fixture/function/2/output.css
@@ -3,7 +3,7 @@ div {
   width: calc(100px + 100px);
   width: calc(100px * 2);
   width: calc(100px / 2);
-  width: CALC(100px / 2);
-  WIDTH: CALC(100px / 2);
+  width: calc(100px / 2);
+  width: calc(100px / 2);
   font-size: max(10 * (1vw + 1vh) / 2, 12px);
 }
diff --git a/crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.css b/crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.css
index db55ad771087..bc8ace055bc6 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/bootstrap_5_1_3/output.css
@@ -2344,17 +2344,17 @@ textarea.form-control-lg {
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
   opacity: 0.65;
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+  transform: scale(0.85) translatey(-0.5rem) translatex(0.15rem);
 }
 .form-floating > .form-control:focus ~ label, 
 .form-floating > .form-control:not(:placeholder-shown) ~ label, 
 .form-floating > .form-select ~ label {
   opacity: 0.65;
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+  transform: scale(0.85) translatey(-0.5rem) translatex(0.15rem);
 }
 .form-floating > .form-control:-webkit-autofill ~ label {
   opacity: 0.65;
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+  transform: scale(0.85) translatey(-0.5rem) translatex(0.15rem);
 }
 .input-group {
   position: relative;
@@ -5707,11 +5707,11 @@ fieldset:disabled .btn {
 }
 .carousel-item-next:not(.carousel-item-start), 
 .active.carousel-item-end {
-  transform: translateX(100%);
+  transform: translatex(100%);
 }
 .carousel-item-prev:not(.carousel-item-end), 
 .active.carousel-item-start {
-  transform: translateX(-100%);
+  transform: translatex(-100%);
 }
 .carousel-fade .carousel-item {
   opacity: 0;
@@ -5975,14 +5975,14 @@ fieldset:disabled .btn {
   left: 0;
   width: 400px;
   border-right: 1px solid rgba(0, 0, 0, 0.2);
-  transform: translateX(-100%);
+  transform: translatex(-100%);
 }
 .offcanvas-end {
   top: 0;
   right: 0;
   width: 400px;
   border-left: 1px solid rgba(0, 0, 0, 0.2);
-  transform: translateX(100%);
+  transform: translatex(100%);
 }
 .offcanvas-top {
   top: 0;
@@ -5991,7 +5991,7 @@ fieldset:disabled .btn {
   height: 30vh;
   max-height: 100%;
   border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  transform: translateY(-100%);
+  transform: translatey(-100%);
 }
 .offcanvas-bottom {
   right: 0;
@@ -5999,7 +5999,7 @@ fieldset:disabled .btn {
   height: 30vh;
   max-height: 100%;
   border-top: 1px solid rgba(0, 0, 0, 0.2);
-  transform: translateY(100%);
+  transform: translatey(100%);
 }
 .offcanvas.show {
   transform: none;
@@ -6406,10 +6406,10 @@ fieldset:disabled .btn {
   transform: translate(-50%, -50%) !important;
 }
 .translate-middle-x {
-  transform: translateX(-50%) !important;
+  transform: translatex(-50%) !important;
 }
 .translate-middle-y {
-  transform: translateY(-50%) !important;
+  transform: translatey(-50%) !important;
 }
 .border {
   border: 1px solid #dee2e6 !important;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/bulma_0_9_3/output.css b/crates/swc_css_codegen/tests/fixture/packages/bulma_0_9_3/output.css
index cdff8cebc383..110ab8f3922c 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/bulma_0_9_3/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/bulma_0_9_3/output.css
@@ -177,7 +177,7 @@ fieldset[disabled] .pagination-ellipsis {
   left: 50%;
   position: absolute;
   top: 50%;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform: translatex(-50%) translatey(-50%) rotate(45deg);
   transform-origin: center center;
 }
 .delete::before, 
@@ -2859,7 +2859,7 @@ div.icon-text {
   left: 50%;
   position: absolute;
   top: 50%;
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
+  transform: translatex(-50%) translatey(-50%) rotate(45deg);
   transform-origin: center center;
 }
 .tag:not(body).is-delete::before {
@@ -4272,7 +4272,7 @@ fieldset[disabled] .select select:hover {
 }
 .breadcrumb li + li::before {
   color: #b5b5b5;
-  content: "\0002f";
+  content: "/";
 }
 .breadcrumb ul, 
 .breadcrumb ol {
@@ -4305,16 +4305,16 @@ fieldset[disabled] .select select:hover {
   font-size: 1.5rem;
 }
 .breadcrumb.has-arrow-separator li + li::before {
-  content: "\02192";
+  content: "→";
 }
 .breadcrumb.has-bullet-separator li + li::before {
-  content: "\02022";
+  content: "•";
 }
 .breadcrumb.has-dot-separator li + li::before {
-  content: "\000b7";
+  content: "·";
 }
 .breadcrumb.has-succeeds-separator li + li::before {
-  content: "\0227B";
+  content: "≻";
 }
 .card {
   background-color: white;
@@ -5605,13 +5605,13 @@ body.has-navbar-fixed-bottom {
   background-color: rgba(0, 0, 0, 0.05);
 }
 .navbar-burger.is-active span:nth-child(1) {
-  transform: translateY(5px) rotate(45deg);
+  transform: translatey(5px) rotate(45deg);
 }
 .navbar-burger.is-active span:nth-child(2) {
   opacity: 0;
 }
 .navbar-burger.is-active span:nth-child(3) {
-  transform: translateY(-5px) rotate(-45deg);
+  transform: translatey(-5px) rotate(-45deg);
 }
 .navbar-menu {
   display: none;
@@ -5838,7 +5838,7 @@ a.navbar-item.is-active,
   .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
     opacity: 1;
     pointer-events: auto;
-    transform: translateY(0);
+    transform: translatey(0);
   }
   .navbar-menu {
     flex-grow: 1;
@@ -5891,7 +5891,7 @@ a.navbar-item.is-active,
     opacity: 0;
     pointer-events: none;
     top: calc(100% + (-4px));
-    transform: translateY(-5px);
+    transform: translatey(-5px);
     transition-duration: 86ms;
     transition-property: opacity, transform;
   }
diff --git a/crates/swc_css_codegen/tests/fixture/packages/foundation_6_7_4/output.css b/crates/swc_css_codegen/tests/fixture/packages/foundation_6_7_4/output.css
index 4780a23f0498..005f1becd832 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/foundation_6_7_4/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/foundation_6_7_4/output.css
@@ -231,7 +231,7 @@ button {
   line-height: 1;
   cursor: auto;
 }
-[data-whatinput='mouse'] button {
+[data-whatinput="mouse"] button {
   outline: 0;
 }
 pre {
@@ -251,20 +251,20 @@ textarea {
 .is-hidden {
   display: none !important;
 }
-[type='text'], 
-[type='password'], 
-[type='date'], 
-[type='datetime'], 
-[type='datetime-local'], 
-[type='month'], 
-[type='week'], 
-[type='email'], 
-[type='number'], 
-[type='search'], 
-[type='tel'], 
-[type='time'], 
-[type='url'], 
-[type='color'], 
+[type="text"], 
+[type="password"], 
+[type="date"], 
+[type="datetime"], 
+[type="datetime-local"], 
+[type="month"], 
+[type="week"], 
+[type="email"], 
+[type="number"], 
+[type="search"], 
+[type="tel"], 
+[type="time"], 
+[type="url"], 
+[type="color"], 
 textarea {
   display: block;
   -webkit-box-sizing: border-box;
@@ -291,20 +291,20 @@ textarea {
   -moz-appearance: none;
   appearance: none;
 }
-[type='text']:focus, 
-[type='password']:focus, 
-[type='date']:focus, 
-[type='datetime']:focus, 
-[type='datetime-local']:focus, 
-[type='month']:focus, 
-[type='week']:focus, 
-[type='email']:focus, 
-[type='number']:focus, 
-[type='search']:focus, 
-[type='tel']:focus, 
-[type='time']:focus, 
-[type='url']:focus, 
-[type='color']:focus, 
+[type="text"]:focus, 
+[type="password"]:focus, 
+[type="date"]:focus, 
+[type="datetime"]:focus, 
+[type="datetime-local"]:focus, 
+[type="month"]:focus, 
+[type="week"]:focus, 
+[type="email"]:focus, 
+[type="number"]:focus, 
+[type="search"]:focus, 
+[type="tel"]:focus, 
+[type="time"]:focus, 
+[type="url"]:focus, 
+[type="color"]:focus, 
 textarea:focus {
   outline: none;
   border: 1px solid #8a8a8a;
@@ -329,14 +329,14 @@ textarea[readonly] {
   background-color: #e6e6e6;
   cursor: not-allowed;
 }
-[type='submit'], 
-[type='button'] {
+[type="submit"], 
+[type="button"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border-radius: 0;
 }
-input[type='search'] {
+input[type="search"] {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
 }
@@ -355,28 +355,28 @@ input[type='search'] {
 ::placeholder {
   color: #cacaca;
 }
-[type='file'], 
-[type='checkbox'], 
-[type='radio'] {
+[type="file"], 
+[type="checkbox"], 
+[type="radio"] {
   margin: 0 0 1rem;
 }
-[type='checkbox'] + label, 
-[type='radio'] + label {
+[type="checkbox"] + label, 
+[type="radio"] + label {
   display: inline-block;
   vertical-align: baseline;
   margin-left: 0.5rem;
   margin-right: 1rem;
   margin-bottom: 0;
 }
-[type='checkbox'] + label[for], 
-[type='radio'] + label[for] {
+[type="checkbox"] + label[for], 
+[type="radio"] + label[for] {
   cursor: pointer;
 }
-label > [type='checkbox'], 
-label > [type='radio'] {
+label > [type="checkbox"], 
+label > [type="radio"] {
   margin-right: 0.5rem;
 }
-[type='file'] {
+[type="file"] {
   width: 100%;
 }
 label {
@@ -521,7 +521,7 @@ select {
   font-weight: normal;
   line-height: 1.5;
   color: #0a0a0a;
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="32" height="24" viewBox="0 0 32 24"><polygon points="0,0 32,0 16,24" style="fill: rgb%28138, 138, 138%29"></polygon></svg>');
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"32\" height=\"24\" viewBox=\"0 0 32 24\"><polygon points=\"0,0 32,0 16,24\" style=\"fill: rgb%28138, 138, 138%29\"></polygon></svg>");
   background-origin: content-box;
   background-position: right -1rem center;
   background-repeat: no-repeat;
@@ -961,9 +961,9 @@ code,
     content: " (" attr(href) ")";
   }
   .ir a:after, 
-  a[href^='javascript:']:after, 
-  a[href^='#']:after {
-    content: '';
+  a[href^="javascript:"]:after, 
+  a[href^="#"]:after {
+    content: "";
   }
   abbr[title]:after {
     content: " (" attr(title) ")";
@@ -3245,7 +3245,7 @@ code,
   text-align: center;
   cursor: pointer;
 }
-[data-whatinput='mouse'] .button {
+[data-whatinput="mouse"] .button {
   outline: 0;
 }
 .button.tiny {
@@ -3555,7 +3555,7 @@ code,
   height: 0;
   border-style: solid;
   border-width: 0.4em;
-  content: '';
+  content: "";
   border-bottom-width: 0;
   border-color: #fefefe transparent transparent;
   position: relative;
@@ -3618,7 +3618,7 @@ a.button:focus {
 .button-group::before, 
 .button-group::after {
   display: table;
-  content: ' ';
+  content: " ";
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -4094,7 +4094,7 @@ a.button:focus {
   color: #8a8a8a;
   cursor: pointer;
 }
-[data-whatinput='mouse'] .close-button {
+[data-whatinput="mouse"] .close-button {
   outline: 0;
 }
 .close-button:hover, 
@@ -4218,9 +4218,9 @@ a.button:focus {
 .slider-handle {
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  -ms-transform: translatey(-50%);
+  transform: translatey(-50%);
   left: 0;
   z-index: 1;
   cursor: -webkit-grab;
@@ -4235,7 +4235,7 @@ a.button:focus {
   -ms-touch-action: manipulation;
   touch-action: manipulation;
 }
-[data-whatinput='mouse'] .slider-handle {
+[data-whatinput="mouse"] .slider-handle {
   outline: 0;
 }
 .slider-handle:hover {
@@ -4272,9 +4272,9 @@ a.button:focus {
   left: 50%;
   width: 1.4rem;
   height: 1.4rem;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+  -webkit-transform: translatex(-50%);
+  -ms-transform: translatex(-50%);
+  transform: translatex(-50%);
 }
 .switch {
   position: relative;
@@ -4323,7 +4323,7 @@ input + .switch-paddle {
   background: #fefefe;
   -webkit-transition: all 0.25s ease-out;
   transition: all 0.25s ease-out;
-  content: '';
+  content: "";
 }
 input:checked ~ .switch-paddle {
   background: #1779ba;
@@ -4335,16 +4335,16 @@ input:disabled ~ .switch-paddle {
   cursor: not-allowed;
   opacity: 0.5;
 }
-[data-whatinput='mouse'] input:focus ~ .switch-paddle {
+[data-whatinput="mouse"] input:focus ~ .switch-paddle {
   outline: 0;
 }
 .switch-active, 
 .switch-inactive {
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  -ms-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .switch-active {
   left: 8%;
@@ -4534,7 +4534,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .breadcrumbs::before, 
 .breadcrumbs::after {
   display: table;
-  content: ' ';
+  content: " ";
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -4706,7 +4706,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .pagination::before, 
 .pagination::after {
   display: table;
-  content: ' ';
+  content: " ";
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -4760,7 +4760,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 }
 .pagination .ellipsis::after {
   padding: 0.1875rem 0.625rem;
-  content: '\2026';
+  content: "…";
   color: #0a0a0a;
 }
 .pagination-previous a::before, 
@@ -4802,16 +4802,16 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   height: 0;
   border-style: solid;
   border-width: 0.75rem;
-  content: '';
+  content: "";
   border-top-width: 0;
   border-color: transparent transparent #0a0a0a;
   bottom: 100%;
 }
 .tooltip.bottom.align-center::before {
   left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+  -webkit-transform: translatex(-50%);
+  -ms-transform: translatex(-50%);
+  transform: translatex(-50%);
 }
 .tooltip.top::before {
   display: block;
@@ -4819,7 +4819,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   height: 0;
   border-style: solid;
   border-width: 0.75rem;
-  content: '';
+  content: "";
   border-bottom-width: 0;
   border-color: #0a0a0a transparent transparent;
   top: 100%;
@@ -4827,9 +4827,9 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 }
 .tooltip.top.align-center::before {
   left: 50%;
-  -webkit-transform: translateX(-50%);
-  -ms-transform: translateX(-50%);
-  transform: translateX(-50%);
+  -webkit-transform: translatex(-50%);
+  -ms-transform: translatex(-50%);
+  transform: translatex(-50%);
 }
 .tooltip.left::before {
   display: block;
@@ -4837,7 +4837,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   height: 0;
   border-style: solid;
   border-width: 0.75rem;
-  content: '';
+  content: "";
   border-right-width: 0;
   border-color: transparent transparent transparent #0a0a0a;
   left: 100%;
@@ -4845,9 +4845,9 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .tooltip.left.align-center::before {
   bottom: auto;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  -ms-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .tooltip.right::before {
   display: block;
@@ -4855,7 +4855,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   height: 0;
   border-style: solid;
   border-width: 0.75rem;
-  content: '';
+  content: "";
   border-left-width: 0;
   border-color: transparent #0a0a0a transparent transparent;
   right: 100%;
@@ -4864,9 +4864,9 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .tooltip.right.align-center::before {
   bottom: auto;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  -ms-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .tooltip.align-top::before {
   bottom: auto;
@@ -5030,15 +5030,15 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .orbit-next {
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  -ms-transform: translatey(-50%);
+  transform: translatey(-50%);
   z-index: 10;
   padding: 1rem;
   color: #fefefe;
 }
-[data-whatinput='mouse'] .orbit-previous, 
-[data-whatinput='mouse'] .orbit-next {
+[data-whatinput="mouse"] .orbit-previous, 
+[data-whatinput="mouse"] .orbit-next {
   outline: 0;
 }
 .orbit-previous:hover, 
@@ -5062,7 +5062,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   margin-bottom: 0.8rem;
   text-align: center;
 }
-[data-whatinput='mouse'] .orbit-bullets {
+[data-whatinput="mouse"] .orbit-bullets {
   outline: 0;
 }
 .orbit-bullets button {
@@ -5113,7 +5113,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
 .tabs::before, 
 .tabs::after {
   display: table;
-  content: ' ';
+  content: " ";
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
@@ -5156,7 +5156,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   line-height: 1;
   color: #1779ba;
 }
-[data-whatinput='mouse'] .tabs-title > a {
+[data-whatinput="mouse"] .tabs-title > a {
   outline: 0;
 }
 .tabs-title > a:hover {
@@ -5164,7 +5164,7 @@ table.hover:not(.unstriped) tr:nth-of-type(even):hover {
   color: #1468a0;
 }
 .tabs-title > a:focus, 
-.tabs-title > a[aria-selected='true'] {
+.tabs-title > a[aria-selected="true"] {
   background: #e6e6e6;
   color: #1779ba;
 }
@@ -5225,7 +5225,7 @@ a.thumbnail image {
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
 }
-[data-whatinput='mouse'] .menu li {
+[data-whatinput="mouse"] .menu li {
   outline: 0;
 }
 .menu a, 
@@ -5572,7 +5572,7 @@ a.thumbnail image {
   background: #fefefe;
   -webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
   box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
-  content: '';
+  content: "";
 }
 .menu-icon:hover::after {
   background: #cacaca;
@@ -5597,7 +5597,7 @@ a.thumbnail image {
   background: #0a0a0a;
   -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
   box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
-  content: '';
+  content: "";
 }
 .menu-icon.dark:hover::after {
   background: #8a8a8a;
@@ -5630,7 +5630,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-bottom-width: 0;
   border-color: #1779ba transparent transparent;
   position: absolute;
@@ -5646,7 +5646,7 @@ a.thumbnail image {
   right: auto;
   left: 1rem;
 }
-.accordion-menu .is-accordion-submenu-parent[aria-expanded='true'] > a::after {
+.accordion-menu .is-accordion-submenu-parent[aria-expanded="true"] > a::after {
   -webkit-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
   transform: rotate(180deg);
@@ -5674,17 +5674,17 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-bottom-width: 0;
   border-color: #1779ba transparent transparent;
   top: 0;
   bottom: 0;
   margin: auto;
 }
-.submenu-toggle[aria-expanded='true']::after {
-  -webkit-transform: scaleY(-1);
-  -ms-transform: scaleY(-1);
-  transform: scaleY(-1);
+.submenu-toggle[aria-expanded="true"]::after {
+  -webkit-transform: scaley(-1);
+  -ms-transform: scaley(-1);
+  transform: scaley(-1);
   -webkit-transform-origin: 50% 50%;
   -ms-transform-origin: 50% 50%;
   transform-origin: 50% 50%;
@@ -5729,14 +5729,14 @@ a.thumbnail image {
 .drilldown .is-drilldown-submenu.is-active {
   z-index: 1;
   display: block;
-  -webkit-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  -ms-transform: translatex(-100%);
+  transform: translatex(-100%);
 }
 .drilldown .is-drilldown-submenu.is-closing {
-  -webkit-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  -ms-transform: translatex(100%);
+  transform: translatex(100%);
 }
 .drilldown .is-drilldown-submenu a {
   padding: 0.7rem 1rem;
@@ -5757,7 +5757,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-right-width: 0;
   border-color: transparent transparent transparent #1779ba;
   position: absolute;
@@ -5771,7 +5771,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-right-width: 0;
   border-color: transparent transparent transparent #1779ba;
   right: 1rem;
@@ -5783,7 +5783,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-left-width: 0;
   border-color: transparent #1779ba transparent transparent;
   right: auto;
@@ -5795,7 +5795,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-left-width: 0;
   border-color: transparent #1779ba transparent transparent;
   display: inline-block;
@@ -5822,14 +5822,14 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-bottom-width: 0;
   border-color: #1779ba transparent transparent;
   right: 5px;
   left: auto;
   margin-top: -3px;
 }
-[data-whatinput='mouse'] .dropdown.menu a {
+[data-whatinput="mouse"] .dropdown.menu a {
   outline: 0;
 }
 .dropdown.menu > li > a {
@@ -5867,7 +5867,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-left-width: 0;
   border-color: transparent #1779ba transparent transparent;
   right: auto;
@@ -5879,7 +5879,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-right-width: 0;
   border-color: transparent transparent transparent #1779ba;
 }
@@ -5904,7 +5904,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-bottom-width: 0;
     border-color: #1779ba transparent transparent;
     right: 5px;
@@ -5932,7 +5932,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-left-width: 0;
     border-color: transparent #1779ba transparent transparent;
     right: auto;
@@ -5944,7 +5944,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-right-width: 0;
     border-color: transparent transparent transparent #1779ba;
   }
@@ -5970,7 +5970,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-bottom-width: 0;
     border-color: #1779ba transparent transparent;
     right: 5px;
@@ -5998,7 +5998,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-left-width: 0;
     border-color: transparent #1779ba transparent transparent;
     right: auto;
@@ -6010,7 +6010,7 @@ a.thumbnail image {
     height: 0;
     border-style: solid;
     border-width: 6px;
-    content: '';
+    content: "";
     border-right-width: 0;
     border-color: transparent transparent transparent #1779ba;
   }
@@ -6070,7 +6070,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-left-width: 0;
   border-color: transparent #1779ba transparent transparent;
   right: auto;
@@ -6082,7 +6082,7 @@ a.thumbnail image {
   height: 0;
   border-style: solid;
   border-width: 6px;
-  content: '';
+  content: "";
   border-right-width: 0;
   border-color: transparent transparent transparent #1779ba;
 }
@@ -6140,7 +6140,7 @@ a.thumbnail image {
   backface-visibility: hidden;
   background: #e6e6e6;
 }
-[data-whatinput='mouse'] .off-canvas {
+[data-whatinput="mouse"] .off-canvas {
   outline: 0;
 }
 .off-canvas.is-transition-push {
@@ -6172,7 +6172,7 @@ a.thumbnail image {
   backface-visibility: hidden;
   background: #e6e6e6;
 }
-[data-whatinput='mouse'] .off-canvas-absolute {
+[data-whatinput="mouse"] .off-canvas-absolute {
   outline: 0;
 }
 .off-canvas-absolute.is-transition-push {
@@ -6200,14 +6200,14 @@ a.thumbnail image {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   width: 250px;
-  -webkit-transform: translateX(-250px);
-  -ms-transform: translateX(-250px);
-  transform: translateX(-250px);
+  -webkit-transform: translatex(-250px);
+  -ms-transform: translatex(-250px);
+  transform: translatex(-250px);
 }
 .off-canvas-content .off-canvas.position-left {
-  -webkit-transform: translateX(-250px);
-  -ms-transform: translateX(-250px);
-  transform: translateX(-250px);
+  -webkit-transform: translatex(-250px);
+  -ms-transform: translatex(-250px);
+  transform: translatex(-250px);
 }
 .off-canvas-content .off-canvas.position-left.is-transition-overlap.is-open {
   -webkit-transform: translate(0, 0);
@@ -6215,9 +6215,9 @@ a.thumbnail image {
   transform: translate(0, 0);
 }
 .off-canvas-content.is-open-left.has-transition-push {
-  -webkit-transform: translateX(250px);
-  -ms-transform: translateX(250px);
-  transform: translateX(250px);
+  -webkit-transform: translatex(250px);
+  -ms-transform: translatex(250px);
+  transform: translatex(250px);
 }
 .position-left.is-transition-push {
   -webkit-box-shadow: inset -13px 0 20px -13px rgba(10, 10, 10, 0.25);
@@ -6230,14 +6230,14 @@ a.thumbnail image {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   width: 250px;
-  -webkit-transform: translateX(250px);
-  -ms-transform: translateX(250px);
-  transform: translateX(250px);
+  -webkit-transform: translatex(250px);
+  -ms-transform: translatex(250px);
+  transform: translatex(250px);
 }
 .off-canvas-content .off-canvas.position-right {
-  -webkit-transform: translateX(250px);
-  -ms-transform: translateX(250px);
-  transform: translateX(250px);
+  -webkit-transform: translatex(250px);
+  -ms-transform: translatex(250px);
+  transform: translatex(250px);
 }
 .off-canvas-content .off-canvas.position-right.is-transition-overlap.is-open {
   -webkit-transform: translate(0, 0);
@@ -6245,9 +6245,9 @@ a.thumbnail image {
   transform: translate(0, 0);
 }
 .off-canvas-content.is-open-right.has-transition-push {
-  -webkit-transform: translateX(-250px);
-  -ms-transform: translateX(-250px);
-  transform: translateX(-250px);
+  -webkit-transform: translatex(-250px);
+  -ms-transform: translatex(-250px);
+  transform: translatex(-250px);
 }
 .position-right.is-transition-push {
   -webkit-box-shadow: inset 13px 0 20px -13px rgba(10, 10, 10, 0.25);
@@ -6260,14 +6260,14 @@ a.thumbnail image {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   height: 250px;
-  -webkit-transform: translateY(-250px);
-  -ms-transform: translateY(-250px);
-  transform: translateY(-250px);
+  -webkit-transform: translatey(-250px);
+  -ms-transform: translatey(-250px);
+  transform: translatey(-250px);
 }
 .off-canvas-content .off-canvas.position-top {
-  -webkit-transform: translateY(-250px);
-  -ms-transform: translateY(-250px);
-  transform: translateY(-250px);
+  -webkit-transform: translatey(-250px);
+  -ms-transform: translatey(-250px);
+  transform: translatey(-250px);
 }
 .off-canvas-content .off-canvas.position-top.is-transition-overlap.is-open {
   -webkit-transform: translate(0, 0);
@@ -6275,9 +6275,9 @@ a.thumbnail image {
   transform: translate(0, 0);
 }
 .off-canvas-content.is-open-top.has-transition-push {
-  -webkit-transform: translateY(250px);
-  -ms-transform: translateY(250px);
-  transform: translateY(250px);
+  -webkit-transform: translatey(250px);
+  -ms-transform: translatey(250px);
+  transform: translatey(250px);
 }
 .position-top.is-transition-push {
   -webkit-box-shadow: inset 0 -13px 20px -13px rgba(10, 10, 10, 0.25);
@@ -6290,14 +6290,14 @@ a.thumbnail image {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   height: 250px;
-  -webkit-transform: translateY(250px);
-  -ms-transform: translateY(250px);
-  transform: translateY(250px);
+  -webkit-transform: translatey(250px);
+  -ms-transform: translatey(250px);
+  transform: translatey(250px);
 }
 .off-canvas-content .off-canvas.position-bottom {
-  -webkit-transform: translateY(250px);
-  -ms-transform: translateY(250px);
-  transform: translateY(250px);
+  -webkit-transform: translatey(250px);
+  -ms-transform: translatey(250px);
+  transform: translatey(250px);
 }
 .off-canvas-content .off-canvas.position-bottom.is-transition-overlap.is-open {
   -webkit-transform: translate(0, 0);
@@ -6305,9 +6305,9 @@ a.thumbnail image {
   transform: translate(0, 0);
 }
 .off-canvas-content.is-open-bottom.has-transition-push {
-  -webkit-transform: translateY(-250px);
-  -ms-transform: translateY(-250px);
-  transform: translateY(-250px);
+  -webkit-transform: translatey(-250px);
+  -ms-transform: translatey(-250px);
+  transform: translatey(-250px);
 }
 .position-bottom.is-transition-push {
   -webkit-box-shadow: inset 0 13px 20px -13px rgba(10, 10, 10, 0.25);
@@ -6615,7 +6615,7 @@ html.is-reveal-open body {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
-[data-whatinput='mouse'] .reveal {
+[data-whatinput="mouse"] .reveal {
   outline: 0;
 }
 @media print, screen and (min-width: 40em) {
@@ -6874,7 +6874,7 @@ html.is-reveal-open body {
 .clearfix::before, 
 .clearfix::after {
   display: table;
-  content: ' ';
+  content: " ";
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/material-components-web_13_0_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/material-components-web_13_0_0/output.css
index dee6368b4eba..0d36da5d9a2d 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/material-components-web_13_0_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/material-components-web_13_0_0/output.css
@@ -78,8 +78,8 @@
   transition: -webkit-transform 300ms ease;
   transition: transform 300ms ease;
   transition: transform 300ms ease, -webkit-transform 300ms ease;
-  -webkit-transform: translateY(0);
-  transform: translateY(0);
+  -webkit-transform: translatey(0);
+  transform: translatey(0);
 }
 .mdc-banner--closing {
   transition: height 250ms ease;
@@ -106,8 +106,8 @@
   display: flex;
   min-height: 52px;
   position: absolute;
-  -webkit-transform: translateY(-100%);
-  transform: translateY(-100%);
+  -webkit-transform: translatey(-100%);
+  transform: translatey(-100%);
   width: 100%;
 }
 .mdc-banner__graphic-text-wrapper {
@@ -130,8 +130,8 @@
 .mdc-banner__icon {
   position: relative;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .mdc-banner__text {
   margin-left: 24px;
@@ -314,8 +314,8 @@
   height: 48px;
   left: 0;
   right: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .mdc-button__label + .mdc-button__icon {
   margin-left: 8px;
@@ -1375,30 +1375,30 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {
   0%, 68.2% {
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0);
+    -webkit-transform: scalex(0);
+    transform: scalex(0);
   }
   68.2% {
     -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
   }
   100% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
+    -webkit-transform: scalex(1);
+    transform: scalex(1);
   }
 }
 @keyframes mdc-checkbox-unchecked-indeterminate-mixedmark {
   0%, 68.2% {
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0);
+    -webkit-transform: scalex(0);
+    transform: scalex(0);
   }
   68.2% {
     -webkit-animation-timing-function: cubic-bezier(0, 0, 0, 1);
     animation-timing-function: cubic-bezier(0, 0, 0, 1);
   }
   100% {
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
+    -webkit-transform: scalex(1);
+    transform: scalex(1);
   }
 }
 @-webkit-keyframes mdc-checkbox-checked-unchecked-checkmark-path {
@@ -1541,13 +1541,13 @@ svg.mdc-button__icon {
   0% {
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
+    -webkit-transform: scalex(1);
+    transform: scalex(1);
     opacity: 1;
   }
   32.8%, 100% {
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0);
+    -webkit-transform: scalex(0);
+    transform: scalex(0);
     opacity: 0;
   }
 }
@@ -1555,13 +1555,13 @@ svg.mdc-button__icon {
   0% {
     -webkit-animation-timing-function: linear;
     animation-timing-function: linear;
-    -webkit-transform: scaleX(1);
-    transform: scaleX(1);
+    -webkit-transform: scalex(1);
+    transform: scalex(1);
     opacity: 1;
   }
   32.8%, 100% {
-    -webkit-transform: scaleX(0);
-    transform: scaleX(0);
+    -webkit-transform: scalex(0);
+    transform: scalex(0);
     opacity: 0;
   }
 }
@@ -1644,8 +1644,8 @@ svg.mdc-button__icon {
 .mdc-checkbox__mixedmark {
   width: 100%;
   height: 0;
-  -webkit-transform: scaleX(0) rotate(0deg);
-  transform: scaleX(0) rotate(0deg);
+  -webkit-transform: scalex(0) rotate(0deg);
+  transform: scalex(0) rotate(0deg);
   border-width: 1px;
   border-style: solid;
   opacity: 0;
@@ -1746,8 +1746,8 @@ svg.mdc-button__icon {
   opacity: 1;
 }
 .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
-  -webkit-transform: scaleX(1) rotate(-45deg);
-  transform: scaleX(1) rotate(-45deg);
+  -webkit-transform: scalex(1) rotate(-45deg);
+  transform: scalex(1) rotate(-45deg);
 }
 .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__checkmark, 
 .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__checkmark {
@@ -1760,8 +1760,8 @@ svg.mdc-button__icon {
 }
 .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background .mdc-checkbox__mixedmark, 
 .mdc-checkbox__native-control[data-indeterminate=true] ~ .mdc-checkbox__background .mdc-checkbox__mixedmark {
-  -webkit-transform: scaleX(1) rotate(0deg);
-  transform: scaleX(1) rotate(0deg);
+  -webkit-transform: scalex(1) rotate(0deg);
+  transform: scalex(1) rotate(0deg);
   opacity: 1;
 }
 .mdc-checkbox.mdc-checkbox--upgraded .mdc-checkbox__background, 
@@ -2118,8 +2118,8 @@ svg.mdc-button__icon {
   height: 48px;
   left: 0;
   right: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .mdc-chip--exit {
   transition: opacity 75ms cubic-bezier(0.4, 0, 0.2, 1), width 150ms cubic-bezier(0, 0, 0.2, 1), padding 100ms linear, margin 100ms linear;
@@ -2840,8 +2840,8 @@ svg.mdc-button__icon {
   margin-right: 1px;
 }
 .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-106%) scale(0.75);
-  transform: translateY(-106%) scale(0.75);
+  -webkit-transform: translatey(-106%) scale(0.75);
+  transform: translatey(-106%) scale(0.75);
 }
 .mdc-floating-label--shake {
   -webkit-animation: mdc-floating-label-shake-float-above-standard 250ms 1;
@@ -2849,46 +2849,46 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-standard {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-106%) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-106%) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-standard {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-106%) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-106%) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-106%) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-106%) scale(0.75);
   }
 }
 .mdc-line-ripple::before, 
@@ -2905,8 +2905,8 @@ svg.mdc-button__icon {
   z-index: 1;
 }
 .mdc-line-ripple::after {
-  -webkit-transform: scaleX(0);
-  transform: scaleX(0);
+  -webkit-transform: scalex(0);
+  transform: scalex(0);
   border-bottom-width: 2px;
   opacity: 0;
   z-index: 2;
@@ -2917,8 +2917,8 @@ svg.mdc-button__icon {
   transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), opacity 180ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .mdc-line-ripple--active::after {
-  -webkit-transform: scaleX(1);
-  transform: scaleX(1);
+  -webkit-transform: scalex(1);
+  transform: scalex(1);
   opacity: 1;
 }
 .mdc-line-ripple--deactivating::after {
@@ -3067,8 +3067,8 @@ svg.mdc-button__icon {
 }
 .mdc-select .mdc-floating-label {
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
   pointer-events: none;
 }
 .mdc-select .mdc-select__anchor {
@@ -3169,8 +3169,8 @@ svg.mdc-button__icon {
   cursor: pointer;
 }
 .mdc-select__anchor .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-106%) scale(0.75);
-  transform: translateY(-106%) scale(0.75);
+  -webkit-transform: translatey(-106%) scale(0.75);
+  transform: translatey(-106%) scale(0.75);
 }
 .mdc-select__selected-text-container {
   display: flex;
@@ -3488,16 +3488,16 @@ svg.mdc-button__icon {
   height: 56px;
 }
 .mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-37.25px) scale(1);
-  transform: translateY(-37.25px) scale(1);
+  -webkit-transform: translatey(-37.25px) scale(1);
+  transform: translatey(-37.25px) scale(1);
 }
 .mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-34.75px) scale(0.75);
-  transform: translateY(-34.75px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) scale(0.75);
+  transform: translatey(-34.75px) scale(0.75);
 }
 .mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -3509,46 +3509,46 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-select-outlined-56px {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-select-outlined-56px {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
 }
 .mdc-select--outlined .mdc-notched-outline .mdc-notched-outline__leading {
@@ -3670,16 +3670,16 @@ svg.mdc-button__icon {
   animation: mdc-floating-label-shake-float-above-select-outlined 250ms 1;
 }
 .mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-37.25px) scale(1);
-  transform: translateY(-37.25px) scale(1);
+  -webkit-transform: translatey(-37.25px) scale(1);
+  transform: translatey(-37.25px) scale(1);
 }
 .mdc-select--outlined .mdc-select__anchor .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-34.75px) scale(0.75);
-  transform: translateY(-34.75px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) scale(0.75);
+  transform: translatey(-34.75px) scale(0.75);
 }
 .mdc-select--outlined .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -3754,28 +3754,28 @@ svg.mdc-button__icon {
   right: 36px;
 }
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-37.25px) translateX(-32px) scale(1);
-  transform: translateY(-37.25px) translateX(-32px) scale(1);
+  -webkit-transform: translatey(-37.25px) translatex(-32px) scale(1);
+  transform: translatey(-37.25px) translatex(-32px) scale(1);
 }
 [dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above, 
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above[dir=rtl] {
-  -webkit-transform: translateY(-37.25px) translateX(32px) scale(1);
-  transform: translateY(-37.25px) translateX(32px) scale(1);
+  -webkit-transform: translatey(-37.25px) translatex(32px) scale(1);
+  transform: translatey(-37.25px) translatex(32px) scale(1);
 }
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-34.75px) translateX(-32px) scale(0.75);
-  transform: translateY(-34.75px) translateX(-32px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) translatex(-32px) scale(0.75);
+  transform: translatey(-34.75px) translatex(-32px) scale(0.75);
 }
 [dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 [dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl], 
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
-  -webkit-transform: translateY(-34.75px) translateX(32px) scale(0.75);
-  transform: translateY(-34.75px) translateX(32px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) translatex(32px) scale(0.75);
+  transform: translatey(-34.75px) translatex(32px) scale(0.75);
 }
 .mdc-select--outlined.mdc-select--with-leading-icon.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -3787,46 +3787,46 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px {
   0% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px {
   0% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
 }
 [dir=rtl] .mdc-select--outlined.mdc-select--with-leading-icon, 
@@ -3838,46 +3838,46 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl {
   0% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-select-outlined-leading-icon-56px-rtl {
   0% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
 }
 .mdc-select--outlined.mdc-select--with-leading-icon .mdc-select__anchor :not(.mdc-notched-outline--notched) .mdc-notched-outline__notch {
@@ -4568,16 +4568,16 @@ svg.mdc-button__icon {
   height: 36px;
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-27.25px) scale(1);
-  transform: translateY(-27.25px) scale(1);
+  -webkit-transform: translatey(-27.25px) scale(1);
+  transform: translatey(-27.25px) scale(1);
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-24.75px) scale(0.75);
-  transform: translateY(-24.75px) scale(0.75);
+  -webkit-transform: translatey(-24.75px) scale(0.75);
+  transform: translatey(-24.75px) scale(0.75);
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__anchor .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -4589,46 +4589,46 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-select-outlined-36px {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-select-outlined-36px {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
 }
 .mdc-data-table__pagination-rows-per-page-select .mdc-select__dropdown-icon {
@@ -5375,33 +5375,33 @@ svg.mdc-button__icon {
   pointer-events: none;
 }
 .mdc-drawer--animate {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  transform: translatex(-100%);
 }
 [dir=rtl] .mdc-drawer--animate, 
 .mdc-drawer--animate[dir=rtl] {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  transform: translatex(100%);
 }
 .mdc-drawer--opening {
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+  -webkit-transform: translatex(0);
+  transform: translatex(0);
   transition-duration: 250ms;
 }
 [dir=rtl] .mdc-drawer--opening, 
 .mdc-drawer--opening[dir=rtl] {
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+  -webkit-transform: translatex(0);
+  transform: translatex(0);
 }
 .mdc-drawer--closing {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  transform: translatex(-100%);
   transition-duration: 200ms;
 }
 [dir=rtl] .mdc-drawer--closing, 
 .mdc-drawer--closing[dir=rtl] {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  transform: translatex(100%);
 }
 .mdc-drawer__header {
   flex-shrink: 0;
@@ -6944,350 +6944,350 @@ svg.mdc-button__icon {
 }
 @-webkit-keyframes mdc-linear-progress-primary-indeterminate-translate {
   0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   20% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   59.15% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(83.67142%);
-    transform: translateX(83.67142%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%));
-    transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%));
+    -webkit-transform: translatex(83.67142%);
+    transform: translatex(83.67142%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-half, 83.67142%));
+    transform: translatex(var(--mdc-linear-progress-primary-half, 83.67142%));
   }
   100% {
-    -webkit-transform: translateX(200.611057%);
-    transform: translateX(200.611057%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%));
-    transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%));
+    -webkit-transform: translatex(200.611057%);
+    transform: translatex(200.611057%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-full, 200.611057%));
+    transform: translatex(var(--mdc-linear-progress-primary-full, 200.611057%));
   }
 }
 @keyframes mdc-linear-progress-primary-indeterminate-translate {
   0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   20% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   59.15% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(83.67142%);
-    transform: translateX(83.67142%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%));
-    transform: translateX(var(--mdc-linear-progress-primary-half, 83.67142%));
+    -webkit-transform: translatex(83.67142%);
+    transform: translatex(83.67142%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-half, 83.67142%));
+    transform: translatex(var(--mdc-linear-progress-primary-half, 83.67142%));
   }
   100% {
-    -webkit-transform: translateX(200.611057%);
-    transform: translateX(200.611057%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%));
-    transform: translateX(var(--mdc-linear-progress-primary-full, 200.611057%));
+    -webkit-transform: translatex(200.611057%);
+    transform: translatex(200.611057%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-full, 200.611057%));
+    transform: translatex(var(--mdc-linear-progress-primary-full, 200.611057%));
   }
 }
 @-webkit-keyframes mdc-linear-progress-primary-indeterminate-scale {
   0% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   36.65% {
     -webkit-animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
     animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   69.15% {
     -webkit-animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
     animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-    -webkit-transform: scaleX(0.661479);
-    transform: scaleX(0.661479);
+    -webkit-transform: scalex(0.661479);
+    transform: scalex(0.661479);
   }
   100% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
 }
 @keyframes mdc-linear-progress-primary-indeterminate-scale {
   0% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   36.65% {
     -webkit-animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
     animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1);
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   69.15% {
     -webkit-animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
     animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1);
-    -webkit-transform: scaleX(0.661479);
-    transform: scaleX(0.661479);
+    -webkit-transform: scalex(0.661479);
+    transform: scalex(0.661479);
   }
   100% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
 }
 @-webkit-keyframes mdc-linear-progress-secondary-indeterminate-translate {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
     animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   25% {
     -webkit-animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
     animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    -webkit-transform: translateX(37.651913%);
-    transform: translateX(37.651913%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
+    -webkit-transform: translatex(37.651913%);
+    transform: translatex(37.651913%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
+    transform: translatex(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
   }
   48.35% {
     -webkit-animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
     animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    -webkit-transform: translateX(84.386165%);
-    transform: translateX(84.386165%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%));
-    transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%));
+    -webkit-transform: translatex(84.386165%);
+    transform: translatex(84.386165%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-half, 84.386165%));
+    transform: translatex(var(--mdc-linear-progress-secondary-half, 84.386165%));
   }
   100% {
-    -webkit-transform: translateX(160.277782%);
-    transform: translateX(160.277782%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%));
-    transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%));
+    -webkit-transform: translatex(160.277782%);
+    transform: translatex(160.277782%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-full, 160.277782%));
+    transform: translatex(var(--mdc-linear-progress-secondary-full, 160.277782%));
   }
 }
 @keyframes mdc-linear-progress-secondary-indeterminate-translate {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
     animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   25% {
     -webkit-animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
     animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    -webkit-transform: translateX(37.651913%);
-    transform: translateX(37.651913%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
+    -webkit-transform: translatex(37.651913%);
+    transform: translatex(37.651913%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
+    transform: translatex(var(--mdc-linear-progress-secondary-quarter, 37.651913%));
   }
   48.35% {
     -webkit-animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
     animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    -webkit-transform: translateX(84.386165%);
-    transform: translateX(84.386165%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%));
-    transform: translateX(var(--mdc-linear-progress-secondary-half, 84.386165%));
+    -webkit-transform: translatex(84.386165%);
+    transform: translatex(84.386165%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-half, 84.386165%));
+    transform: translatex(var(--mdc-linear-progress-secondary-half, 84.386165%));
   }
   100% {
-    -webkit-transform: translateX(160.277782%);
-    transform: translateX(160.277782%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%));
-    transform: translateX(var(--mdc-linear-progress-secondary-full, 160.277782%));
+    -webkit-transform: translatex(160.277782%);
+    transform: translatex(160.277782%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-full, 160.277782%));
+    transform: translatex(var(--mdc-linear-progress-secondary-full, 160.277782%));
   }
 }
 @-webkit-keyframes mdc-linear-progress-secondary-indeterminate-scale {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
     animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   19.15% {
     -webkit-animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
     animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
-    -webkit-transform: scaleX(0.457104);
-    transform: scaleX(0.457104);
+    -webkit-transform: scalex(0.457104);
+    transform: scalex(0.457104);
   }
   44.15% {
     -webkit-animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
     animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
-    -webkit-transform: scaleX(0.72796);
-    transform: scaleX(0.72796);
+    -webkit-transform: scalex(0.72796);
+    transform: scalex(0.72796);
   }
   100% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
 }
 @keyframes mdc-linear-progress-secondary-indeterminate-scale {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
     animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
   19.15% {
     -webkit-animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
     animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315);
-    -webkit-transform: scaleX(0.457104);
-    transform: scaleX(0.457104);
+    -webkit-transform: scalex(0.457104);
+    transform: scalex(0.457104);
   }
   44.15% {
     -webkit-animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
     animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);
-    -webkit-transform: scaleX(0.72796);
-    transform: scaleX(0.72796);
+    -webkit-transform: scalex(0.72796);
+    transform: scalex(0.72796);
   }
   100% {
-    -webkit-transform: scaleX(0.08);
-    transform: scaleX(0.08);
+    -webkit-transform: scalex(0.08);
+    transform: scalex(0.08);
   }
 }
 @-webkit-keyframes mdc-linear-progress-buffering {
   from {
-    -webkit-transform: rotate(180deg) translateX(-10px);
-    transform: rotate(180deg) translateX(-10px);
+    -webkit-transform: rotate(180deg) translatex(-10px);
+    transform: rotate(180deg) translatex(-10px);
   }
 }
 @keyframes mdc-linear-progress-buffering {
   from {
-    -webkit-transform: rotate(180deg) translateX(-10px);
-    transform: rotate(180deg) translateX(-10px);
+    -webkit-transform: rotate(180deg) translatex(-10px);
+    transform: rotate(180deg) translatex(-10px);
   }
 }
 @-webkit-keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
   0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   20% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   59.15% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(-83.67142%);
-    transform: translateX(-83.67142%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
-    transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
+    -webkit-transform: translatex(-83.67142%);
+    transform: translatex(-83.67142%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
+    transform: translatex(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
   }
   100% {
-    -webkit-transform: translateX(-200.611057%);
-    transform: translateX(-200.611057%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
-    transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
+    -webkit-transform: translatex(-200.611057%);
+    transform: translatex(-200.611057%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
+    transform: translatex(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
   }
 }
 @keyframes mdc-linear-progress-primary-indeterminate-translate-reverse {
   0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   20% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   59.15% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(-83.67142%);
-    transform: translateX(-83.67142%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
-    transform: translateX(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
+    -webkit-transform: translatex(-83.67142%);
+    transform: translatex(-83.67142%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
+    transform: translatex(var(--mdc-linear-progress-primary-half-neg, -83.67142%));
   }
   100% {
-    -webkit-transform: translateX(-200.611057%);
-    transform: translateX(-200.611057%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
-    transform: translateX(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
+    -webkit-transform: translatex(-200.611057%);
+    transform: translatex(-200.611057%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
+    transform: translatex(var(--mdc-linear-progress-primary-full-neg, -200.611057%));
   }
 }
 @-webkit-keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
     animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   25% {
     -webkit-animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
     animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    -webkit-transform: translateX(-37.651913%);
-    transform: translateX(-37.651913%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
+    -webkit-transform: translatex(-37.651913%);
+    transform: translatex(-37.651913%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
+    transform: translatex(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
   }
   48.35% {
     -webkit-animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
     animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    -webkit-transform: translateX(-84.386165%);
-    transform: translateX(-84.386165%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
-    transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
+    -webkit-transform: translatex(-84.386165%);
+    transform: translatex(-84.386165%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
+    transform: translatex(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
   }
   100% {
-    -webkit-transform: translateX(-160.277782%);
-    transform: translateX(-160.277782%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
-    transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
+    -webkit-transform: translatex(-160.277782%);
+    transform: translatex(-160.277782%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
+    transform: translatex(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
   }
 }
 @keyframes mdc-linear-progress-secondary-indeterminate-translate-reverse {
   0% {
     -webkit-animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
     animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
+    -webkit-transform: translatex(0);
+    transform: translatex(0);
   }
   25% {
     -webkit-animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
     animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-    -webkit-transform: translateX(-37.651913%);
-    transform: translateX(-37.651913%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
-    transform: translateX(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
+    -webkit-transform: translatex(-37.651913%);
+    transform: translatex(-37.651913%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
+    transform: translatex(var(--mdc-linear-progress-secondary-quarter-neg, -37.651913%));
   }
   48.35% {
     -webkit-animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
     animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-    -webkit-transform: translateX(-84.386165%);
-    transform: translateX(-84.386165%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
-    transform: translateX(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
+    -webkit-transform: translatex(-84.386165%);
+    transform: translatex(-84.386165%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
+    transform: translatex(var(--mdc-linear-progress-secondary-half-neg, -84.386165%));
   }
   100% {
-    -webkit-transform: translateX(-160.277782%);
-    transform: translateX(-160.277782%);
-    -webkit-transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
-    transform: translateX(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
+    -webkit-transform: translatex(-160.277782%);
+    transform: translatex(-160.277782%);
+    -webkit-transform: translatex(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
+    transform: translatex(var(--mdc-linear-progress-secondary-full-neg, -160.277782%));
   }
 }
 @-webkit-keyframes mdc-linear-progress-buffering-reverse {
   from {
-    -webkit-transform: translateX(-10px);
-    transform: translateX(-10px);
+    -webkit-transform: translatex(-10px);
+    transform: translatex(-10px);
   }
 }
 @keyframes mdc-linear-progress-buffering-reverse {
   from {
-    -webkit-transform: translateX(-10px);
-    transform: translateX(-10px);
+    -webkit-transform: translatex(-10px);
+    transform: translatex(-10px);
   }
 }
 .mdc-linear-progress {
   position: relative;
   width: 100%;
   height: 4px;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
+  -webkit-transform: translatez(0);
+  transform: translatez(0);
   outline: 1px solid transparent;
   overflow: hidden;
   transition: opacity 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
@@ -7332,8 +7332,8 @@ svg.mdc-button__icon {
   transition: flex-basis 250ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
 }
 .mdc-linear-progress__primary-bar {
-  -webkit-transform: scaleX(0);
-  transform: scaleX(0);
+  -webkit-transform: scalex(0);
+  transform: scalex(0);
 }
 .mdc-linear-progress__secondary-bar {
   display: none;
@@ -10294,8 +10294,8 @@ a.mdc-list-item {
   display: none;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 [dir=rtl] .mdc-menu__selection-group .mdc-menu__selection-group-icon, 
 .mdc-menu__selection-group .mdc-menu__selection-group-icon[dir=rtl] {
@@ -10852,8 +10852,8 @@ a.mdc-list-item {
   height: 48px;
   left: 0;
   right: 0;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
 }
 .mdc-segmented-button__segment .mdc-segmented-button__segment--touch {
   margin-top: 0px;
@@ -11088,8 +11088,8 @@ a.mdc-list-item {
   height: 4px;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
   width: 100%;
 }
 .mdc-slider .mdc-slider__track--active, 
@@ -11160,8 +11160,8 @@ a.mdc-list-item {
   left: 50%;
   pointer-events: none;
   position: absolute;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
+  -webkit-transform: translatex(-50%);
+  transform: translatex(-50%);
 }
 .mdc-slider .mdc-slider__value-indicator {
   transition: -webkit-transform 100ms 0ms cubic-bezier(0.4, 0, 1, 1);
@@ -11186,8 +11186,8 @@ a.mdc-list-item {
   height: 0;
   left: 50%;
   position: absolute;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
+  -webkit-transform: translatex(-50%);
+  transform: translatex(-50%);
   width: 0;
 }
 .mdc-slider .mdc-slider__value-indicator::after {
@@ -11684,39 +11684,39 @@ a.mdc-list-item {
   transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
   transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
   transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+  -webkit-transform: translatex(0);
+  transform: translatex(0);
 }
 .mdc-switch__track::after {
   transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  transform: translatex(-100%);
 }
 [dir=rtl] .mdc-switch__track::after, 
 .mdc-switch__track[dir=rtl]::after {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  transform: translatex(100%);
 }
 .mdc-switch--selected .mdc-switch__track::before {
   transition: -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  transform: translatex(100%);
 }
 [dir=rtl] .mdc-switch--selected .mdc-switch__track::before, 
 .mdc-switch--selected .mdc-switch__track[dir=rtl]::before {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  transform: translatex(-100%);
 }
 .mdc-switch--selected .mdc-switch__track::after {
   transition: -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
   transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
   transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+  -webkit-transform: translatex(0);
+  transform: translatex(0);
 }
 .mdc-switch__handle-track {
   height: 100%;
@@ -11728,8 +11728,8 @@ a.mdc-list-item {
   transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
   left: 0;
   right: auto;
-  -webkit-transform: translateX(0);
-  transform: translateX(0);
+  -webkit-transform: translatex(0);
+  transform: translatex(0);
 }
 [dir=rtl] .mdc-switch__handle-track, 
 .mdc-switch__handle-track[dir=rtl] {
@@ -11737,21 +11737,21 @@ a.mdc-list-item {
   right: 0;
 }
 .mdc-switch--selected .mdc-switch__handle-track {
-  -webkit-transform: translateX(100%);
-  transform: translateX(100%);
+  -webkit-transform: translatex(100%);
+  transform: translatex(100%);
 }
 [dir=rtl] .mdc-switch--selected .mdc-switch__handle-track, 
 .mdc-switch--selected .mdc-switch__handle-track[dir=rtl] {
-  -webkit-transform: translateX(-100%);
-  transform: translateX(-100%);
+  -webkit-transform: translatex(-100%);
+  transform: translatex(-100%);
 }
 .mdc-switch__handle {
   display: flex;
   pointer-events: auto;
   position: absolute;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
   left: 0;
   right: auto;
 }
@@ -12635,8 +12635,8 @@ a.mdc-list-item {
 }
 .mdc-text-field .mdc-floating-label {
   top: 50%;
-  -webkit-transform: translateY(-50%);
-  transform: translateY(-50%);
+  -webkit-transform: translatey(-50%);
+  transform: translatey(-50%);
   pointer-events: none;
 }
 .mdc-text-field__input {
@@ -12855,8 +12855,8 @@ a.mdc-list-item {
   right: 16px;
 }
 .mdc-text-field--filled .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-106%) scale(0.75);
-  transform: translateY(-106%) scale(0.75);
+  -webkit-transform: translatey(-106%) scale(0.75);
+  transform: translatey(-106%) scale(0.75);
 }
 .mdc-text-field--filled.mdc-text-field--no-label .mdc-text-field__input {
   height: 100%;
@@ -12880,16 +12880,16 @@ a.mdc-list-item {
   overflow: visible;
 }
 .mdc-text-field--outlined .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-37.25px) scale(1);
-  transform: translateY(-37.25px) scale(1);
+  -webkit-transform: translatey(-37.25px) scale(1);
+  transform: translatey(-37.25px) scale(1);
 }
 .mdc-text-field--outlined .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-34.75px) scale(0.75);
-  transform: translateY(-34.75px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) scale(0.75);
+  transform: translatey(-34.75px) scale(0.75);
 }
 .mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -12901,46 +12901,46 @@ a.mdc-list-item {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-text-field-outlined {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-34.75px) scale(0.75);
   }
 }
 .mdc-text-field--outlined .mdc-text-field__input {
@@ -13120,8 +13120,8 @@ a.mdc-list-item {
   display: none;
 }
 .mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-10.25px) scale(0.75);
-  transform: translateY(-10.25px) scale(0.75);
+  -webkit-transform: translatey(-10.25px) scale(0.75);
+  transform: translatey(-10.25px) scale(0.75);
 }
 .mdc-text-field--textarea.mdc-text-field--filled .mdc-floating-label--shake {
   -webkit-animation: mdc-floating-label-shake-float-above-textarea-filled 250ms 1;
@@ -13129,46 +13129,46 @@ a.mdc-list-item {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-textarea-filled {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-10.25px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-10.25px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-textarea-filled {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-10.25px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-10.25px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-10.25px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-10.25px) scale(0.75);
   }
 }
 .mdc-text-field--textarea.mdc-text-field--filled .mdc-text-field__input {
@@ -13183,16 +13183,16 @@ a.mdc-list-item {
   padding-top: 0;
 }
 .mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-27.25px) scale(1);
-  transform: translateY(-27.25px) scale(1);
+  -webkit-transform: translatey(-27.25px) scale(1);
+  transform: translatey(-27.25px) scale(1);
 }
 .mdc-text-field--textarea.mdc-text-field--outlined .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-24.75px) scale(0.75);
-  transform: translateY(-24.75px) scale(0.75);
+  -webkit-transform: translatey(-24.75px) scale(0.75);
+  transform: translatey(-24.75px) scale(0.75);
 }
 .mdc-text-field--textarea.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--textarea.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -13204,46 +13204,46 @@ a.mdc-list-item {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-textarea-outlined {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-textarea-outlined {
   0% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(-4% - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(-4% - 0%)) translatey(-24.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
-    transform: translateX(calc(0 - 0%)) translateY(-24.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
+    transform: translatex(calc(0 - 0%)) translatey(-24.75px) scale(0.75);
   }
 }
 .mdc-text-field--textarea.mdc-text-field--outlined .mdc-text-field__input {
@@ -13287,34 +13287,34 @@ a.mdc-list-item {
   resize: both;
 }
 .mdc-text-field--filled .mdc-text-field__resizer {
-  -webkit-transform: translateY(-1px);
-  transform: translateY(-1px);
+  -webkit-transform: translatey(-1px);
+  transform: translatey(-1px);
 }
 .mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field__input, 
 .mdc-text-field--filled .mdc-text-field__resizer .mdc-text-field-character-counter {
-  -webkit-transform: translateY(1px);
-  transform: translateY(1px);
+  -webkit-transform: translatey(1px);
+  transform: translatey(1px);
 }
 .mdc-text-field--outlined .mdc-text-field__resizer {
-  -webkit-transform: translateX(-1px) translateY(-1px);
-  transform: translateX(-1px) translateY(-1px);
+  -webkit-transform: translatex(-1px) translatey(-1px);
+  transform: translatex(-1px) translatey(-1px);
 }
 [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer, 
 .mdc-text-field--outlined .mdc-text-field__resizer[dir=rtl] {
-  -webkit-transform: translateX(1px) translateY(-1px);
-  transform: translateX(1px) translateY(-1px);
+  -webkit-transform: translatex(1px) translatey(-1px);
+  transform: translatex(1px) translatey(-1px);
 }
 .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input, 
 .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter {
-  -webkit-transform: translateX(1px) translateY(1px);
-  transform: translateX(1px) translateY(1px);
+  -webkit-transform: translatex(1px) translatey(1px);
+  transform: translatex(1px) translatey(1px);
 }
 [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input, 
 [dir=rtl] .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter, 
 .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field__input[dir=rtl], 
 .mdc-text-field--outlined .mdc-text-field__resizer .mdc-text-field-character-counter[dir=rtl] {
-  -webkit-transform: translateX(-1px) translateY(1px);
-  transform: translateX(-1px) translateY(1px);
+  -webkit-transform: translatex(-1px) translatey(1px);
+  transform: translatex(-1px) translatey(1px);
 }
 .mdc-text-field--with-leading-icon {
   padding-left: 0;
@@ -13351,28 +13351,28 @@ a.mdc-list-item {
   max-width: calc(100% - 60px);
 }
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-37.25px) translateX(-32px) scale(1);
-  transform: translateY(-37.25px) translateX(-32px) scale(1);
+  -webkit-transform: translatey(-37.25px) translatex(-32px) scale(1);
+  transform: translatey(-37.25px) translatex(-32px) scale(1);
 }
 [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above, 
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above[dir=rtl] {
-  -webkit-transform: translateY(-37.25px) translateX(32px) scale(1);
-  transform: translateY(-37.25px) translateX(32px) scale(1);
+  -webkit-transform: translatey(-37.25px) translatex(32px) scale(1);
+  transform: translatey(-37.25px) translatex(32px) scale(1);
 }
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-floating-label--float-above {
   font-size: 0.75rem;
 }
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-  -webkit-transform: translateY(-34.75px) translateX(-32px) scale(0.75);
-  transform: translateY(-34.75px) translateX(-32px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) translatex(-32px) scale(0.75);
+  transform: translatey(-34.75px) translatex(-32px) scale(0.75);
 }
 [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl], 
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above[dir=rtl] {
-  -webkit-transform: translateY(-34.75px) translateX(32px) scale(0.75);
-  transform: translateY(-34.75px) translateX(32px) scale(0.75);
+  -webkit-transform: translatey(-34.75px) translatex(32px) scale(0.75);
+  transform: translatey(-34.75px) translatex(32px) scale(0.75);
 }
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined.mdc-notched-outline--upgraded .mdc-floating-label--float-above, 
 .mdc-text-field--with-leading-icon.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
@@ -13384,46 +13384,46 @@ a.mdc-list-item {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
   0% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon {
   0% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - 32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - 32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - 32px)) translatey(-34.75px) scale(0.75);
   }
 }
 [dir=rtl] .mdc-text-field--with-leading-icon.mdc-text-field--outlined, 
@@ -13435,46 +13435,46 @@ a.mdc-list-item {
 }
 @-webkit-keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
   0% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
 }
 @keyframes mdc-floating-label-shake-float-above-text-field-outlined-leading-icon-rtl {
   0% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
   33% {
     -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
     animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-    -webkit-transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   66% {
     -webkit-animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
     animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-    -webkit-transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(-4% - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(-4% - -32px)) translatey(-34.75px) scale(0.75);
   }
   100% {
-    -webkit-transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
-    transform: translateX(calc(0 - -32px)) translateY(-34.75px) scale(0.75);
+    -webkit-transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
+    transform: translatex(calc(0 - -32px)) translatey(-34.75px) scale(0.75);
   }
 }
 .mdc-text-field--with-trailing-icon {
@@ -14241,8 +14241,8 @@ a.mdc-list-item {
   position: absolute;
   height: 24px;
   width: 24px;
-  -webkit-transform: rotate(35deg) skewY(20deg) scaleX(0.9396926208);
-  transform: rotate(35deg) skewY(20deg) scaleX(0.9396926208);
+  -webkit-transform: rotate(35deg) skewy(20deg) scalex(0.9396926208);
+  transform: rotate(35deg) skewy(20deg) scalex(0.9396926208);
 }
 .mdc-tooltip__caret-surface-top .mdc-elevation-overlay, 
 .mdc-tooltip__caret-surface-bottom .mdc-elevation-overlay {
diff --git a/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
index 7758e039460d..0f945df52b08 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/mvp_1_8_0/output.css
@@ -142,7 +142,7 @@ nav ul li ul {
   display: none;
   height: auto;
   left: -2px;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   position: absolute;
   top: 1.7rem;
   white-space: nowrap;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css b/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
index 39e49a7b0633..39c82bf86146 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/pure_2_0_6/output.css
@@ -254,7 +254,7 @@ html {
 }
 .pure-u-1-8, 
 .pure-u-3-24 {
-  width: 12.5000%;
+  width: 12.5%;
 }
 .pure-u-1-6, 
 .pure-u-4-24 {
@@ -279,7 +279,7 @@ html {
 }
 .pure-u-3-8, 
 .pure-u-9-24 {
-  width: 37.5000%;
+  width: 37.5%;
 }
 .pure-u-2-5 {
   width: 40%;
@@ -307,7 +307,7 @@ html {
 }
 .pure-u-5-8, 
 .pure-u-15-24 {
-  width: 62.5000%;
+  width: 62.5%;
 }
 .pure-u-2-3, 
 .pure-u-16-24 {
@@ -332,7 +332,7 @@ html {
 }
 .pure-u-7-8, 
 .pure-u-21-24 {
-  width: 87.5000%;
+  width: 87.5%;
 }
 .pure-u-11-12, 
 .pure-u-22-24 {
@@ -384,25 +384,25 @@ html {
   font-family: inherit;
   font-size: 100%;
   padding: 0.5em 1em;
-  color: rgba(0, 0, 0, 0.80);
+  color: rgba(0, 0, 0, 0.8);
   border: none rgba(0, 0, 0, 0);
-  background-color: #E6E6E6;
+  background-color: #e6e6e6;
   text-decoration: none;
   border-radius: 2px;
 }
 .pure-button-hover, 
 .pure-button:hover, 
 .pure-button:focus {
-  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.10)));
-  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.10));
+  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(40%, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.1)));
+  background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.1));
 }
 .pure-button:focus {
   outline: 0;
 }
 .pure-button-active, 
 .pure-button:active {
-  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.20) inset;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.20) inset;
+  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 0 6px rgba(0, 0, 0, 0.2) inset;
   border-color: #000;
 }
 .pure-button[disabled], 
@@ -412,7 +412,7 @@ html {
 .pure-button-disabled:active {
   border: none;
   background-image: none;
-  opacity: 0.40;
+  opacity: 0.4;
   cursor: not-allowed;
   -webkit-box-shadow: none;
   box-shadow: none;
@@ -498,17 +498,17 @@ a.pure-button-selected {
 .pure-form select:focus, 
 .pure-form textarea:focus {
   outline: 0;
-  border-color: #129FEA;
+  border-color: #129fea;
 }
 .pure-form input:not([type]):focus {
   outline: 0;
-  border-color: #129FEA;
+  border-color: #129fea;
 }
 .pure-form input[type="file"]:focus, 
 .pure-form input[type="radio"]:focus, 
 .pure-form input[type="checkbox"]:focus {
-  outline: thin solid #129FEA;
-  outline: 1px auto #129FEA;
+  outline: thin solid #129fea;
+  outline: 1px auto #129fea;
 }
 .pure-form .pure-checkbox, 
 .pure-form .pure-radio {
@@ -825,11 +825,11 @@ a.pure-button-selected {
 }
 .pure-menu-has-children > .pure-menu-link:after {
   padding-left: 0.5em;
-  content: "\25B8";
+  content: "▸";
   font-size: small;
 }
 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
-  content: "\25BE";
+  content: "▾";
 }
 .pure-menu-scrollable {
   overflow-y: scroll;
@@ -845,18 +845,18 @@ a.pure-button-selected {
   white-space: nowrap;
   overflow-y: hidden;
   overflow-x: auto;
-  padding: .5em 0;
+  padding: 0.5em 0;
 }
 .pure-menu-separator, 
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
   background-color: #ccc;
   height: 1px;
-  margin: .3em 0;
+  margin: 0.3em 0;
 }
 .pure-menu-horizontal .pure-menu-separator {
   width: 1px;
   height: 1.3em;
-  margin: 0 .3em;
+  margin: 0 0.3em;
 }
 .pure-menu-horizontal .pure-menu-children .pure-menu-separator {
   display: block;
@@ -874,10 +874,10 @@ a.pure-button-selected {
 }
 .pure-menu-link, 
 .pure-menu-heading {
-  padding: .5em 1em;
+  padding: 0.5em 1em;
 }
 .pure-menu-disabled {
-  opacity: .5;
+  opacity: 0.5;
 }
 .pure-menu-disabled .pure-menu-link:hover {
   background-color: transparent;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/sanitize_css_13_0_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/sanitize_css_13_0_0/output.css
index 5de68ee03792..90ef40632cc8 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/sanitize_css_13_0_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/sanitize_css_13_0_0/output.css
@@ -38,7 +38,7 @@
   padding: 0;
 }
 :where(nav li)::before {
-  content: "\200B";
+  content: "​";
   float: left;
 }
 :where(pre) {
diff --git a/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css b/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
index e76c03e18fc1..4980e59ca996 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/tachyons_4_12_0/output.css
@@ -7,7 +7,7 @@ body {
 }
 h1 {
   font-size: 2em;
-  margin: .67em 0;
+  margin: 0.67em 0;
 }
 hr {
   box-sizing: content-box;
@@ -94,7 +94,7 @@ button:-moz-focusring,
   outline: 1px dotted ButtonText;
 }
 fieldset {
-  padding: .35em .75em .625em;
+  padding: 0.35em 0.75em 0.625em;
 }
 legend {
   box-sizing: border-box;
@@ -331,76 +331,76 @@ img {
   border-color: #fff;
 }
 .b--white-90 {
-  border-color: rgba(255, 255, 255, .9);
+  border-color: rgba(255, 255, 255, 0.9);
 }
 .b--white-80 {
-  border-color: rgba(255, 255, 255, .8);
+  border-color: rgba(255, 255, 255, 0.8);
 }
 .b--white-70 {
-  border-color: rgba(255, 255, 255, .7);
+  border-color: rgba(255, 255, 255, 0.7);
 }
 .b--white-60 {
-  border-color: rgba(255, 255, 255, .6);
+  border-color: rgba(255, 255, 255, 0.6);
 }
 .b--white-50 {
-  border-color: rgba(255, 255, 255, .5);
+  border-color: rgba(255, 255, 255, 0.5);
 }
 .b--white-40 {
-  border-color: rgba(255, 255, 255, .4);
+  border-color: rgba(255, 255, 255, 0.4);
 }
 .b--white-30 {
-  border-color: rgba(255, 255, 255, .3);
+  border-color: rgba(255, 255, 255, 0.3);
 }
 .b--white-20 {
-  border-color: rgba(255, 255, 255, .2);
+  border-color: rgba(255, 255, 255, 0.2);
 }
 .b--white-10 {
-  border-color: rgba(255, 255, 255, .1);
+  border-color: rgba(255, 255, 255, 0.1);
 }
 .b--white-05 {
-  border-color: rgba(255, 255, 255, .05);
+  border-color: rgba(255, 255, 255, 0.05);
 }
 .b--white-025 {
-  border-color: rgba(255, 255, 255, .025);
+  border-color: rgba(255, 255, 255, 0.025);
 }
 .b--white-0125 {
-  border-color: rgba(255, 255, 255, .0125);
+  border-color: rgba(255, 255, 255, 0.0125);
 }
 .b--black-90 {
-  border-color: rgba(0, 0, 0, .9);
+  border-color: rgba(0, 0, 0, 0.9);
 }
 .b--black-80 {
-  border-color: rgba(0, 0, 0, .8);
+  border-color: rgba(0, 0, 0, 0.8);
 }
 .b--black-70 {
-  border-color: rgba(0, 0, 0, .7);
+  border-color: rgba(0, 0, 0, 0.7);
 }
 .b--black-60 {
-  border-color: rgba(0, 0, 0, .6);
+  border-color: rgba(0, 0, 0, 0.6);
 }
 .b--black-50 {
-  border-color: rgba(0, 0, 0, .5);
+  border-color: rgba(0, 0, 0, 0.5);
 }
 .b--black-40 {
-  border-color: rgba(0, 0, 0, .4);
+  border-color: rgba(0, 0, 0, 0.4);
 }
 .b--black-30 {
-  border-color: rgba(0, 0, 0, .3);
+  border-color: rgba(0, 0, 0, 0.3);
 }
 .b--black-20 {
-  border-color: rgba(0, 0, 0, .2);
+  border-color: rgba(0, 0, 0, 0.2);
 }
 .b--black-10 {
-  border-color: rgba(0, 0, 0, .1);
+  border-color: rgba(0, 0, 0, 0.1);
 }
 .b--black-05 {
-  border-color: rgba(0, 0, 0, .05);
+  border-color: rgba(0, 0, 0, 0.05);
 }
 .b--black-025 {
-  border-color: rgba(0, 0, 0, .025);
+  border-color: rgba(0, 0, 0, 0.025);
 }
 .b--black-0125 {
-  border-color: rgba(0, 0, 0, .0125);
+  border-color: rgba(0, 0, 0, 0.0125);
 }
 .b--dark-red {
   border-color: #e7040f;
@@ -493,13 +493,13 @@ img {
   border-radius: 0;
 }
 .br1 {
-  border-radius: .125rem;
+  border-radius: 0.125rem;
 }
 .br2 {
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 }
 .br3 {
-  border-radius: .5rem;
+  border-radius: 0.5rem;
 }
 .br4 {
   border-radius: 1rem;
@@ -551,13 +551,13 @@ img {
   border-width: 0;
 }
 .bw1 {
-  border-width: .125rem;
+  border-width: 0.125rem;
 }
 .bw2 {
-  border-width: .25rem;
+  border-width: 0.25rem;
 }
 .bw3 {
-  border-width: .5rem;
+  border-width: 0.5rem;
 }
 .bw4 {
   border-width: 1rem;
@@ -578,19 +578,19 @@ img {
   border-left-width: 0;
 }
 .shadow-1 {
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
+  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
 }
 .shadow-2 {
-  box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
+  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
 }
 .shadow-3 {
-  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
+  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
 }
 .shadow-4 {
-  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
+  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .shadow-5 {
-  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
+  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
 }
 .pre {
   overflow-x: auto;
@@ -872,7 +872,7 @@ img {
   float: none;
 }
 .sans-serif {
-  font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
 }
 .serif {
   font-family: georgia, times, serif;
@@ -888,13 +888,13 @@ code,
   font-family: Consolas, monaco, monospace;
 }
 .courier {
-  font-family: 'Courier Next', courier, monospace;
+  font-family: "Courier Next", courier, monospace;
 }
 .helvetica {
-  font-family: 'helvetica neue', helvetica, sans-serif;
+  font-family: "helvetica neue", helvetica, sans-serif;
 }
 .avenir {
-  font-family: 'avenir next', avenir, sans-serif;
+  font-family: "avenir next", avenir, sans-serif;
 }
 .athelas {
   font-family: athelas, georgia, serif;
@@ -1017,13 +1017,13 @@ code,
   height: inherit;
 }
 .tracked {
-  letter-spacing: .1em;
+  letter-spacing: 0.1em;
 }
 .tracked-tight {
-  letter-spacing: -.05em;
+  letter-spacing: -0.05em;
 }
 .tracked-mega {
-  letter-spacing: .25em;
+  letter-spacing: 0.25em;
 }
 .lh-solid {
   line-height: 1;
@@ -1036,20 +1036,20 @@ code,
 }
 .link {
   text-decoration: none;
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .link:link, 
 .link:visited {
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .link:hover {
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .link:active {
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .link:focus {
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
   outline: 1px dotted currentColor;
 }
 .list {
@@ -1206,37 +1206,37 @@ code,
   opacity: 1;
 }
 .o-90 {
-  opacity: .9;
+  opacity: 0.9;
 }
 .o-80 {
-  opacity: .8;
+  opacity: 0.8;
 }
 .o-70 {
-  opacity: .7;
+  opacity: 0.7;
 }
 .o-60 {
-  opacity: .6;
+  opacity: 0.6;
 }
 .o-50 {
-  opacity: .5;
+  opacity: 0.5;
 }
 .o-40 {
-  opacity: .4;
+  opacity: 0.4;
 }
 .o-30 {
-  opacity: .3;
+  opacity: 0.3;
 }
 .o-20 {
-  opacity: .2;
+  opacity: 0.2;
 }
 .o-10 {
-  opacity: .1;
+  opacity: 0.1;
 }
 .o-05 {
-  opacity: .05;
+  opacity: 0.05;
 }
 .o-025 {
-  opacity: .025;
+  opacity: 0.025;
 }
 .o-0 {
   opacity: 0;
@@ -1270,61 +1270,61 @@ code,
   transform: rotate(315deg);
 }
 .black-90 {
-  color: rgba(0, 0, 0, .9);
+  color: rgba(0, 0, 0, 0.9);
 }
 .black-80 {
-  color: rgba(0, 0, 0, .8);
+  color: rgba(0, 0, 0, 0.8);
 }
 .black-70 {
-  color: rgba(0, 0, 0, .7);
+  color: rgba(0, 0, 0, 0.7);
 }
 .black-60 {
-  color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, 0.6);
 }
 .black-50 {
-  color: rgba(0, 0, 0, .5);
+  color: rgba(0, 0, 0, 0.5);
 }
 .black-40 {
-  color: rgba(0, 0, 0, .4);
+  color: rgba(0, 0, 0, 0.4);
 }
 .black-30 {
-  color: rgba(0, 0, 0, .3);
+  color: rgba(0, 0, 0, 0.3);
 }
 .black-20 {
-  color: rgba(0, 0, 0, .2);
+  color: rgba(0, 0, 0, 0.2);
 }
 .black-10 {
-  color: rgba(0, 0, 0, .1);
+  color: rgba(0, 0, 0, 0.1);
 }
 .black-05 {
-  color: rgba(0, 0, 0, .05);
+  color: rgba(0, 0, 0, 0.05);
 }
 .white-90 {
-  color: rgba(255, 255, 255, .9);
+  color: rgba(255, 255, 255, 0.9);
 }
 .white-80 {
-  color: rgba(255, 255, 255, .8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .white-70 {
-  color: rgba(255, 255, 255, .7);
+  color: rgba(255, 255, 255, 0.7);
 }
 .white-60 {
-  color: rgba(255, 255, 255, .6);
+  color: rgba(255, 255, 255, 0.6);
 }
 .white-50 {
-  color: rgba(255, 255, 255, .5);
+  color: rgba(255, 255, 255, 0.5);
 }
 .white-40 {
-  color: rgba(255, 255, 255, .4);
+  color: rgba(255, 255, 255, 0.4);
 }
 .white-30 {
-  color: rgba(255, 255, 255, .3);
+  color: rgba(255, 255, 255, 0.3);
 }
 .white-20 {
-  color: rgba(255, 255, 255, .2);
+  color: rgba(255, 255, 255, 0.2);
 }
 .white-10 {
-  color: rgba(255, 255, 255, .1);
+  color: rgba(255, 255, 255, 0.1);
 }
 .black {
   color: #000;
@@ -1438,61 +1438,61 @@ code,
   color: inherit;
 }
 .bg-black-90 {
-  background-color: rgba(0, 0, 0, .9);
+  background-color: rgba(0, 0, 0, 0.9);
 }
 .bg-black-80 {
-  background-color: rgba(0, 0, 0, .8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 .bg-black-70 {
-  background-color: rgba(0, 0, 0, .7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 .bg-black-60 {
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .bg-black-50 {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .bg-black-40 {
-  background-color: rgba(0, 0, 0, .4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .bg-black-30 {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 .bg-black-20 {
-  background-color: rgba(0, 0, 0, .2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .bg-black-10 {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 .bg-black-05 {
-  background-color: rgba(0, 0, 0, .05);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 .bg-white-90 {
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .bg-white-80 {
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
 }
 .bg-white-70 {
-  background-color: rgba(255, 255, 255, .7);
+  background-color: rgba(255, 255, 255, 0.7);
 }
 .bg-white-60 {
-  background-color: rgba(255, 255, 255, .6);
+  background-color: rgba(255, 255, 255, 0.6);
 }
 .bg-white-50 {
-  background-color: rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 .bg-white-40 {
-  background-color: rgba(255, 255, 255, .4);
+  background-color: rgba(255, 255, 255, 0.4);
 }
 .bg-white-30 {
-  background-color: rgba(255, 255, 255, .3);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 .bg-white-20 {
-  background-color: rgba(255, 255, 255, .2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 .bg-white-10 {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .bg-black {
   background-color: #000;
@@ -1675,112 +1675,112 @@ code,
   color: #fff;
 }
 .hover-black-90:hover {
-  color: rgba(0, 0, 0, .9);
+  color: rgba(0, 0, 0, 0.9);
 }
 .hover-black-90:focus {
-  color: rgba(0, 0, 0, .9);
+  color: rgba(0, 0, 0, 0.9);
 }
 .hover-black-80:hover {
-  color: rgba(0, 0, 0, .8);
+  color: rgba(0, 0, 0, 0.8);
 }
 .hover-black-80:focus {
-  color: rgba(0, 0, 0, .8);
+  color: rgba(0, 0, 0, 0.8);
 }
 .hover-black-70:hover {
-  color: rgba(0, 0, 0, .7);
+  color: rgba(0, 0, 0, 0.7);
 }
 .hover-black-70:focus {
-  color: rgba(0, 0, 0, .7);
+  color: rgba(0, 0, 0, 0.7);
 }
 .hover-black-60:hover {
-  color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, 0.6);
 }
 .hover-black-60:focus {
-  color: rgba(0, 0, 0, .6);
+  color: rgba(0, 0, 0, 0.6);
 }
 .hover-black-50:hover {
-  color: rgba(0, 0, 0, .5);
+  color: rgba(0, 0, 0, 0.5);
 }
 .hover-black-50:focus {
-  color: rgba(0, 0, 0, .5);
+  color: rgba(0, 0, 0, 0.5);
 }
 .hover-black-40:hover {
-  color: rgba(0, 0, 0, .4);
+  color: rgba(0, 0, 0, 0.4);
 }
 .hover-black-40:focus {
-  color: rgba(0, 0, 0, .4);
+  color: rgba(0, 0, 0, 0.4);
 }
 .hover-black-30:hover {
-  color: rgba(0, 0, 0, .3);
+  color: rgba(0, 0, 0, 0.3);
 }
 .hover-black-30:focus {
-  color: rgba(0, 0, 0, .3);
+  color: rgba(0, 0, 0, 0.3);
 }
 .hover-black-20:hover {
-  color: rgba(0, 0, 0, .2);
+  color: rgba(0, 0, 0, 0.2);
 }
 .hover-black-20:focus {
-  color: rgba(0, 0, 0, .2);
+  color: rgba(0, 0, 0, 0.2);
 }
 .hover-black-10:hover {
-  color: rgba(0, 0, 0, .1);
+  color: rgba(0, 0, 0, 0.1);
 }
 .hover-black-10:focus {
-  color: rgba(0, 0, 0, .1);
+  color: rgba(0, 0, 0, 0.1);
 }
 .hover-white-90:hover {
-  color: rgba(255, 255, 255, .9);
+  color: rgba(255, 255, 255, 0.9);
 }
 .hover-white-90:focus {
-  color: rgba(255, 255, 255, .9);
+  color: rgba(255, 255, 255, 0.9);
 }
 .hover-white-80:hover {
-  color: rgba(255, 255, 255, .8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .hover-white-80:focus {
-  color: rgba(255, 255, 255, .8);
+  color: rgba(255, 255, 255, 0.8);
 }
 .hover-white-70:hover {
-  color: rgba(255, 255, 255, .7);
+  color: rgba(255, 255, 255, 0.7);
 }
 .hover-white-70:focus {
-  color: rgba(255, 255, 255, .7);
+  color: rgba(255, 255, 255, 0.7);
 }
 .hover-white-60:hover {
-  color: rgba(255, 255, 255, .6);
+  color: rgba(255, 255, 255, 0.6);
 }
 .hover-white-60:focus {
-  color: rgba(255, 255, 255, .6);
+  color: rgba(255, 255, 255, 0.6);
 }
 .hover-white-50:hover {
-  color: rgba(255, 255, 255, .5);
+  color: rgba(255, 255, 255, 0.5);
 }
 .hover-white-50:focus {
-  color: rgba(255, 255, 255, .5);
+  color: rgba(255, 255, 255, 0.5);
 }
 .hover-white-40:hover {
-  color: rgba(255, 255, 255, .4);
+  color: rgba(255, 255, 255, 0.4);
 }
 .hover-white-40:focus {
-  color: rgba(255, 255, 255, .4);
+  color: rgba(255, 255, 255, 0.4);
 }
 .hover-white-30:hover {
-  color: rgba(255, 255, 255, .3);
+  color: rgba(255, 255, 255, 0.3);
 }
 .hover-white-30:focus {
-  color: rgba(255, 255, 255, .3);
+  color: rgba(255, 255, 255, 0.3);
 }
 .hover-white-20:hover {
-  color: rgba(255, 255, 255, .2);
+  color: rgba(255, 255, 255, 0.2);
 }
 .hover-white-20:focus {
-  color: rgba(255, 255, 255, .2);
+  color: rgba(255, 255, 255, 0.2);
 }
 .hover-white-10:hover {
-  color: rgba(255, 255, 255, .1);
+  color: rgba(255, 255, 255, 0.1);
 }
 .hover-white-10:focus {
-  color: rgba(255, 255, 255, .1);
+  color: rgba(255, 255, 255, 0.1);
 }
 .hover-inherit:hover, 
 .hover-inherit:focus {
@@ -1859,112 +1859,112 @@ code,
   background-color: transparent;
 }
 .hover-bg-black-90:hover {
-  background-color: rgba(0, 0, 0, .9);
+  background-color: rgba(0, 0, 0, 0.9);
 }
 .hover-bg-black-90:focus {
-  background-color: rgba(0, 0, 0, .9);
+  background-color: rgba(0, 0, 0, 0.9);
 }
 .hover-bg-black-80:hover {
-  background-color: rgba(0, 0, 0, .8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 .hover-bg-black-80:focus {
-  background-color: rgba(0, 0, 0, .8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 .hover-bg-black-70:hover {
-  background-color: rgba(0, 0, 0, .7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 .hover-bg-black-70:focus {
-  background-color: rgba(0, 0, 0, .7);
+  background-color: rgba(0, 0, 0, 0.7);
 }
 .hover-bg-black-60:hover {
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .hover-bg-black-60:focus {
-  background-color: rgba(0, 0, 0, .6);
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .hover-bg-black-50:hover {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .hover-bg-black-50:focus {
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 .hover-bg-black-40:hover {
-  background-color: rgba(0, 0, 0, .4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .hover-bg-black-40:focus {
-  background-color: rgba(0, 0, 0, .4);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 .hover-bg-black-30:hover {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 .hover-bg-black-30:focus {
-  background-color: rgba(0, 0, 0, .3);
+  background-color: rgba(0, 0, 0, 0.3);
 }
 .hover-bg-black-20:hover {
-  background-color: rgba(0, 0, 0, .2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .hover-bg-black-20:focus {
-  background-color: rgba(0, 0, 0, .2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 .hover-bg-black-10:hover {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 .hover-bg-black-10:focus {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 .hover-bg-white-90:hover {
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .hover-bg-white-90:focus {
-  background-color: rgba(255, 255, 255, .9);
+  background-color: rgba(255, 255, 255, 0.9);
 }
 .hover-bg-white-80:hover {
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
 }
 .hover-bg-white-80:focus {
-  background-color: rgba(255, 255, 255, .8);
+  background-color: rgba(255, 255, 255, 0.8);
 }
 .hover-bg-white-70:hover {
-  background-color: rgba(255, 255, 255, .7);
+  background-color: rgba(255, 255, 255, 0.7);
 }
 .hover-bg-white-70:focus {
-  background-color: rgba(255, 255, 255, .7);
+  background-color: rgba(255, 255, 255, 0.7);
 }
 .hover-bg-white-60:hover {
-  background-color: rgba(255, 255, 255, .6);
+  background-color: rgba(255, 255, 255, 0.6);
 }
 .hover-bg-white-60:focus {
-  background-color: rgba(255, 255, 255, .6);
+  background-color: rgba(255, 255, 255, 0.6);
 }
 .hover-bg-white-50:hover {
-  background-color: rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 .hover-bg-white-50:focus {
-  background-color: rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 .hover-bg-white-40:hover {
-  background-color: rgba(255, 255, 255, .4);
+  background-color: rgba(255, 255, 255, 0.4);
 }
 .hover-bg-white-40:focus {
-  background-color: rgba(255, 255, 255, .4);
+  background-color: rgba(255, 255, 255, 0.4);
 }
 .hover-bg-white-30:hover {
-  background-color: rgba(255, 255, 255, .3);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 .hover-bg-white-30:focus {
-  background-color: rgba(255, 255, 255, .3);
+  background-color: rgba(255, 255, 255, 0.3);
 }
 .hover-bg-white-20:hover {
-  background-color: rgba(255, 255, 255, .2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 .hover-bg-white-20:focus {
-  background-color: rgba(255, 255, 255, .2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 .hover-bg-white-10:hover {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .hover-bg-white-10:focus {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .hover-dark-red:hover {
   color: #e7040f;
@@ -2274,10 +2274,10 @@ code,
   padding: 0;
 }
 .pa1 {
-  padding: .25rem;
+  padding: 0.25rem;
 }
 .pa2 {
-  padding: .5rem;
+  padding: 0.5rem;
 }
 .pa3 {
   padding: 1rem;
@@ -2298,10 +2298,10 @@ code,
   padding-left: 0;
 }
 .pl1 {
-  padding-left: .25rem;
+  padding-left: 0.25rem;
 }
 .pl2 {
-  padding-left: .5rem;
+  padding-left: 0.5rem;
 }
 .pl3 {
   padding-left: 1rem;
@@ -2322,10 +2322,10 @@ code,
   padding-right: 0;
 }
 .pr1 {
-  padding-right: .25rem;
+  padding-right: 0.25rem;
 }
 .pr2 {
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 }
 .pr3 {
   padding-right: 1rem;
@@ -2346,10 +2346,10 @@ code,
   padding-bottom: 0;
 }
 .pb1 {
-  padding-bottom: .25rem;
+  padding-bottom: 0.25rem;
 }
 .pb2 {
-  padding-bottom: .5rem;
+  padding-bottom: 0.5rem;
 }
 .pb3 {
   padding-bottom: 1rem;
@@ -2370,10 +2370,10 @@ code,
   padding-top: 0;
 }
 .pt1 {
-  padding-top: .25rem;
+  padding-top: 0.25rem;
 }
 .pt2 {
-  padding-top: .5rem;
+  padding-top: 0.5rem;
 }
 .pt3 {
   padding-top: 1rem;
@@ -2395,12 +2395,12 @@ code,
   padding-bottom: 0;
 }
 .pv1 {
-  padding-top: .25rem;
-  padding-bottom: .25rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
 }
 .pv2 {
-  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
 }
 .pv3 {
   padding-top: 1rem;
@@ -2427,12 +2427,12 @@ code,
   padding-right: 0;
 }
 .ph1 {
-  padding-left: .25rem;
-  padding-right: .25rem;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
 }
 .ph2 {
-  padding-left: .5rem;
-  padding-right: .5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
 }
 .ph3 {
   padding-left: 1rem;
@@ -2458,10 +2458,10 @@ code,
   margin: 0;
 }
 .ma1 {
-  margin: .25rem;
+  margin: 0.25rem;
 }
 .ma2 {
-  margin: .5rem;
+  margin: 0.5rem;
 }
 .ma3 {
   margin: 1rem;
@@ -2482,10 +2482,10 @@ code,
   margin-left: 0;
 }
 .ml1 {
-  margin-left: .25rem;
+  margin-left: 0.25rem;
 }
 .ml2 {
-  margin-left: .5rem;
+  margin-left: 0.5rem;
 }
 .ml3 {
   margin-left: 1rem;
@@ -2506,10 +2506,10 @@ code,
   margin-right: 0;
 }
 .mr1 {
-  margin-right: .25rem;
+  margin-right: 0.25rem;
 }
 .mr2 {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }
 .mr3 {
   margin-right: 1rem;
@@ -2530,10 +2530,10 @@ code,
   margin-bottom: 0;
 }
 .mb1 {
-  margin-bottom: .25rem;
+  margin-bottom: 0.25rem;
 }
 .mb2 {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 .mb3 {
   margin-bottom: 1rem;
@@ -2554,10 +2554,10 @@ code,
   margin-top: 0;
 }
 .mt1 {
-  margin-top: .25rem;
+  margin-top: 0.25rem;
 }
 .mt2 {
-  margin-top: .5rem;
+  margin-top: 0.5rem;
 }
 .mt3 {
   margin-top: 1rem;
@@ -2579,12 +2579,12 @@ code,
   margin-bottom: 0;
 }
 .mv1 {
-  margin-top: .25rem;
-  margin-bottom: .25rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
 }
 .mv2 {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 .mv3 {
   margin-top: 1rem;
@@ -2611,12 +2611,12 @@ code,
   margin-right: 0;
 }
 .mh1 {
-  margin-left: .25rem;
-  margin-right: .25rem;
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
 }
 .mh2 {
-  margin-left: .5rem;
-  margin-right: .5rem;
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 .mh3 {
   margin-left: 1rem;
@@ -2760,10 +2760,10 @@ code,
   background-color: #f4f4f4;
 }
 .stripe-light:nth-child(odd) {
-  background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
 }
 .stripe-dark:nth-child(odd) {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 .strike {
   text-decoration: line-through;
@@ -2822,10 +2822,10 @@ code,
   font-size: 1rem;
 }
 .f6 {
-  font-size: .875rem;
+  font-size: 0.875rem;
 }
 .f7 {
-  font-size: .75rem;
+  font-size: 0.75rem;
 }
 .measure {
   max-width: 30em;
@@ -2891,34 +2891,34 @@ code,
 }
 .dim {
   opacity: 1;
-  transition: opacity .15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 .dim:hover, 
 .dim:focus {
-  opacity: .5;
-  transition: opacity .15s ease-in;
+  opacity: 0.5;
+  transition: opacity 0.15s ease-in;
 }
 .dim:active {
-  opacity: .8;
-  transition: opacity .15s ease-out;
+  opacity: 0.8;
+  transition: opacity 0.15s ease-out;
 }
 .glow {
-  transition: opacity .15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 .glow:hover, 
 .glow:focus {
   opacity: 1;
-  transition: opacity .15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 .hide-child .child {
   opacity: 0;
-  transition: opacity .15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 .hide-child:hover .child, 
 .hide-child:focus .child, 
 .hide-child:active .child {
   opacity: 1;
-  transition: opacity .15s ease-in;
+  transition: opacity 0.15s ease-in;
 }
 .underline-hover:hover, 
 .underline-hover:focus {
@@ -2928,11 +2928,11 @@ code,
   -moz-osx-font-smoothing: grayscale;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  transition: -webkit-transform .25s ease-out;
-  transition: transform .25s ease-out;
-  transition: transform .25s ease-out, -webkit-transform .25s ease-out;
+  -webkit-transform: translatez(0);
+  transform: translatez(0);
+  transition: -webkit-transform 0.25s ease-out;
+  transition: transform 0.25s ease-out;
+  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
 }
 .grow:hover, 
 .grow:focus {
@@ -2940,18 +2940,18 @@ code,
   transform: scale(1.05);
 }
 .grow:active {
-  -webkit-transform: scale(.90);
-  transform: scale(.90);
+  -webkit-transform: scale(0.9);
+  transform: scale(0.9);
 }
 .grow-large {
   -moz-osx-font-smoothing: grayscale;
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
-  transition: -webkit-transform .25s ease-in-out;
-  transition: transform .25s ease-in-out;
-  transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
+  -webkit-transform: translatez(0);
+  transform: translatez(0);
+  transition: -webkit-transform 0.25s ease-in-out;
+  transition: transform 0.25s ease-in-out;
+  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
 }
 .grow-large:hover, 
 .grow-large:focus {
@@ -2959,8 +2959,8 @@ code,
   transform: scale(1.2);
 }
 .grow-large:active {
-  -webkit-transform: scale(.95);
-  transform: scale(.95);
+  -webkit-transform: scale(0.95);
+  transform: scale(0.95);
 }
 .pointer:hover {
   cursor: pointer;
@@ -2968,11 +2968,11 @@ code,
 .shadow-hover {
   cursor: pointer;
   position: relative;
-  transition: all .5s cubic-bezier(.165, .84, .44, 1);
+  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 .shadow-hover::after {
-  content: '';
-  box-shadow: 0 0 16px 2px rgba(0, 0, 0, .2);
+  content: "";
+  box-shadow: 0 0 16px 2px rgba(0, 0, 0, 0.2);
   border-radius: inherit;
   opacity: 0;
   position: absolute;
@@ -2981,7 +2981,7 @@ code,
   width: 100%;
   height: 100%;
   z-index: -1;
-  transition: opacity .5s cubic-bezier(.165, .84, .44, 1);
+  transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 .shadow-hover:hover::after, 
 .shadow-hover:focus::after {
@@ -2990,7 +2990,7 @@ code,
 .bg-animate, 
 .bg-animate:hover, 
 .bg-animate:focus {
-  transition: background-color .15s ease-in-out;
+  transition: background-color 0.15s ease-in-out;
 }
 .z-0 {
   z-index: 0;
@@ -3062,15 +3062,15 @@ code,
 }
 .nested-links a {
   color: #357edd;
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .nested-links a:hover {
   color: #96ccff;
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .nested-links a:focus {
   color: #96ccff;
-  transition: color .15s ease-in;
+  transition: color 0.15s ease-in;
 }
 .debug * {
   outline: 1px solid gold;
@@ -3082,16 +3082,16 @@ code,
   outline: 1px solid black;
 }
 .debug-grid {
-  background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left;
+  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
 }
 .debug-grid-16 {
-  background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left;
+  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
 }
 .debug-grid-8-solid {
-  background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left;
+  background: white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
 }
 .debug-grid-16-solid {
-  background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left;
+  background: white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
 }
 @media screen and (min-width: 30em) {
   .aspect-ratio-ns {
@@ -3204,13 +3204,13 @@ code,
     border-radius: 0;
   }
   .br1-ns {
-    border-radius: .125rem;
+    border-radius: 0.125rem;
   }
   .br2-ns {
-    border-radius: .25rem;
+    border-radius: 0.25rem;
   }
   .br3-ns {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
   }
   .br4-ns {
     border-radius: 1rem;
@@ -3262,13 +3262,13 @@ code,
     border-width: 0;
   }
   .bw1-ns {
-    border-width: .125rem;
+    border-width: 0.125rem;
   }
   .bw2-ns {
-    border-width: .25rem;
+    border-width: 0.25rem;
   }
   .bw3-ns {
-    border-width: .5rem;
+    border-width: 0.5rem;
   }
   .bw4-ns {
     border-width: 1rem;
@@ -3289,19 +3289,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-ns {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-2-ns {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-3-ns {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-4-ns {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .shadow-5-ns {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .top-0-ns {
     top: 0;
@@ -3660,13 +3660,13 @@ code,
     height: inherit;
   }
   .tracked-ns {
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
   }
   .tracked-tight-ns {
-    letter-spacing: -.05em;
+    letter-spacing: -0.05em;
   }
   .tracked-mega-ns {
-    letter-spacing: .25em;
+    letter-spacing: 0.25em;
   }
   .lh-solid-ns {
     line-height: 1;
@@ -3856,10 +3856,10 @@ code,
     padding: 0;
   }
   .pa1-ns {
-    padding: .25rem;
+    padding: 0.25rem;
   }
   .pa2-ns {
-    padding: .5rem;
+    padding: 0.5rem;
   }
   .pa3-ns {
     padding: 1rem;
@@ -3880,10 +3880,10 @@ code,
     padding-left: 0;
   }
   .pl1-ns {
-    padding-left: .25rem;
+    padding-left: 0.25rem;
   }
   .pl2-ns {
-    padding-left: .5rem;
+    padding-left: 0.5rem;
   }
   .pl3-ns {
     padding-left: 1rem;
@@ -3904,10 +3904,10 @@ code,
     padding-right: 0;
   }
   .pr1-ns {
-    padding-right: .25rem;
+    padding-right: 0.25rem;
   }
   .pr2-ns {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
   }
   .pr3-ns {
     padding-right: 1rem;
@@ -3928,10 +3928,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-ns {
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
   }
   .pb2-ns {
-    padding-bottom: .5rem;
+    padding-bottom: 0.5rem;
   }
   .pb3-ns {
     padding-bottom: 1rem;
@@ -3952,10 +3952,10 @@ code,
     padding-top: 0;
   }
   .pt1-ns {
-    padding-top: .25rem;
+    padding-top: 0.25rem;
   }
   .pt2-ns {
-    padding-top: .5rem;
+    padding-top: 0.5rem;
   }
   .pt3-ns {
     padding-top: 1rem;
@@ -3977,12 +3977,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-ns {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
   .pv2-ns {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   .pv3-ns {
     padding-top: 1rem;
@@ -4009,12 +4009,12 @@ code,
     padding-right: 0;
   }
   .ph1-ns {
-    padding-left: .25rem;
-    padding-right: .25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
   }
   .ph2-ns {
-    padding-left: .5rem;
-    padding-right: .5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
   .ph3-ns {
     padding-left: 1rem;
@@ -4040,10 +4040,10 @@ code,
     margin: 0;
   }
   .ma1-ns {
-    margin: .25rem;
+    margin: 0.25rem;
   }
   .ma2-ns {
-    margin: .5rem;
+    margin: 0.5rem;
   }
   .ma3-ns {
     margin: 1rem;
@@ -4064,10 +4064,10 @@ code,
     margin-left: 0;
   }
   .ml1-ns {
-    margin-left: .25rem;
+    margin-left: 0.25rem;
   }
   .ml2-ns {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
   .ml3-ns {
     margin-left: 1rem;
@@ -4088,10 +4088,10 @@ code,
     margin-right: 0;
   }
   .mr1-ns {
-    margin-right: .25rem;
+    margin-right: 0.25rem;
   }
   .mr2-ns {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
   .mr3-ns {
     margin-right: 1rem;
@@ -4112,10 +4112,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-ns {
-    margin-bottom: .25rem;
+    margin-bottom: 0.25rem;
   }
   .mb2-ns {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
   .mb3-ns {
     margin-bottom: 1rem;
@@ -4136,10 +4136,10 @@ code,
     margin-top: 0;
   }
   .mt1-ns {
-    margin-top: .25rem;
+    margin-top: 0.25rem;
   }
   .mt2-ns {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
   }
   .mt3-ns {
     margin-top: 1rem;
@@ -4161,12 +4161,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-ns {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
   .mv2-ns {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
   .mv3-ns {
     margin-top: 1rem;
@@ -4193,12 +4193,12 @@ code,
     margin-right: 0;
   }
   .mh1-ns {
-    margin-left: .25rem;
-    margin-right: .25rem;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
   }
   .mh2-ns {
-    margin-left: .5rem;
-    margin-right: .5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
   }
   .mh3-ns {
     margin-left: 1rem;
@@ -4382,10 +4382,10 @@ code,
     font-size: 1rem;
   }
   .f6-ns {
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
   .f7-ns {
-    font-size: .75rem;
+    font-size: 0.75rem;
   }
   .measure-ns {
     max-width: 30em;
@@ -4558,13 +4558,13 @@ code,
     border-radius: 0;
   }
   .br1-m {
-    border-radius: .125rem;
+    border-radius: 0.125rem;
   }
   .br2-m {
-    border-radius: .25rem;
+    border-radius: 0.25rem;
   }
   .br3-m {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
   }
   .br4-m {
     border-radius: 1rem;
@@ -4616,13 +4616,13 @@ code,
     border-width: 0;
   }
   .bw1-m {
-    border-width: .125rem;
+    border-width: 0.125rem;
   }
   .bw2-m {
-    border-width: .25rem;
+    border-width: 0.25rem;
   }
   .bw3-m {
-    border-width: .5rem;
+    border-width: 0.5rem;
   }
   .bw4-m {
     border-width: 1rem;
@@ -4643,19 +4643,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-m {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-2-m {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-3-m {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-4-m {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .shadow-5-m {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .top-0-m {
     top: 0;
@@ -5014,13 +5014,13 @@ code,
     height: inherit;
   }
   .tracked-m {
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
   }
   .tracked-tight-m {
-    letter-spacing: -.05em;
+    letter-spacing: -0.05em;
   }
   .tracked-mega-m {
-    letter-spacing: .25em;
+    letter-spacing: 0.25em;
   }
   .lh-solid-m {
     line-height: 1;
@@ -5210,10 +5210,10 @@ code,
     padding: 0;
   }
   .pa1-m {
-    padding: .25rem;
+    padding: 0.25rem;
   }
   .pa2-m {
-    padding: .5rem;
+    padding: 0.5rem;
   }
   .pa3-m {
     padding: 1rem;
@@ -5234,10 +5234,10 @@ code,
     padding-left: 0;
   }
   .pl1-m {
-    padding-left: .25rem;
+    padding-left: 0.25rem;
   }
   .pl2-m {
-    padding-left: .5rem;
+    padding-left: 0.5rem;
   }
   .pl3-m {
     padding-left: 1rem;
@@ -5258,10 +5258,10 @@ code,
     padding-right: 0;
   }
   .pr1-m {
-    padding-right: .25rem;
+    padding-right: 0.25rem;
   }
   .pr2-m {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
   }
   .pr3-m {
     padding-right: 1rem;
@@ -5282,10 +5282,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-m {
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
   }
   .pb2-m {
-    padding-bottom: .5rem;
+    padding-bottom: 0.5rem;
   }
   .pb3-m {
     padding-bottom: 1rem;
@@ -5306,10 +5306,10 @@ code,
     padding-top: 0;
   }
   .pt1-m {
-    padding-top: .25rem;
+    padding-top: 0.25rem;
   }
   .pt2-m {
-    padding-top: .5rem;
+    padding-top: 0.5rem;
   }
   .pt3-m {
     padding-top: 1rem;
@@ -5331,12 +5331,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-m {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
   .pv2-m {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   .pv3-m {
     padding-top: 1rem;
@@ -5363,12 +5363,12 @@ code,
     padding-right: 0;
   }
   .ph1-m {
-    padding-left: .25rem;
-    padding-right: .25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
   }
   .ph2-m {
-    padding-left: .5rem;
-    padding-right: .5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
   .ph3-m {
     padding-left: 1rem;
@@ -5394,10 +5394,10 @@ code,
     margin: 0;
   }
   .ma1-m {
-    margin: .25rem;
+    margin: 0.25rem;
   }
   .ma2-m {
-    margin: .5rem;
+    margin: 0.5rem;
   }
   .ma3-m {
     margin: 1rem;
@@ -5418,10 +5418,10 @@ code,
     margin-left: 0;
   }
   .ml1-m {
-    margin-left: .25rem;
+    margin-left: 0.25rem;
   }
   .ml2-m {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
   .ml3-m {
     margin-left: 1rem;
@@ -5442,10 +5442,10 @@ code,
     margin-right: 0;
   }
   .mr1-m {
-    margin-right: .25rem;
+    margin-right: 0.25rem;
   }
   .mr2-m {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
   .mr3-m {
     margin-right: 1rem;
@@ -5466,10 +5466,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-m {
-    margin-bottom: .25rem;
+    margin-bottom: 0.25rem;
   }
   .mb2-m {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
   .mb3-m {
     margin-bottom: 1rem;
@@ -5490,10 +5490,10 @@ code,
     margin-top: 0;
   }
   .mt1-m {
-    margin-top: .25rem;
+    margin-top: 0.25rem;
   }
   .mt2-m {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
   }
   .mt3-m {
     margin-top: 1rem;
@@ -5515,12 +5515,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-m {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
   .mv2-m {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
   .mv3-m {
     margin-top: 1rem;
@@ -5547,12 +5547,12 @@ code,
     margin-right: 0;
   }
   .mh1-m {
-    margin-left: .25rem;
-    margin-right: .25rem;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
   }
   .mh2-m {
-    margin-left: .5rem;
-    margin-right: .5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
   }
   .mh3-m {
     margin-left: 1rem;
@@ -5736,10 +5736,10 @@ code,
     font-size: 1rem;
   }
   .f6-m {
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
   .f7-m {
-    font-size: .75rem;
+    font-size: 0.75rem;
   }
   .measure-m {
     max-width: 30em;
@@ -5912,13 +5912,13 @@ code,
     border-radius: 0;
   }
   .br1-l {
-    border-radius: .125rem;
+    border-radius: 0.125rem;
   }
   .br2-l {
-    border-radius: .25rem;
+    border-radius: 0.25rem;
   }
   .br3-l {
-    border-radius: .5rem;
+    border-radius: 0.5rem;
   }
   .br4-l {
     border-radius: 1rem;
@@ -5970,13 +5970,13 @@ code,
     border-width: 0;
   }
   .bw1-l {
-    border-width: .125rem;
+    border-width: 0.125rem;
   }
   .bw2-l {
-    border-width: .25rem;
+    border-width: 0.25rem;
   }
   .bw3-l {
-    border-width: .5rem;
+    border-width: 0.5rem;
   }
   .bw4-l {
     border-width: 1rem;
@@ -5997,19 +5997,19 @@ code,
     border-left-width: 0;
   }
   .shadow-1-l {
-    box-shadow: 0 0 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-2-l {
-    box-shadow: 0 0 8px 2px rgba(0, 0, 0, .2);
+    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-3-l {
-    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
   }
   .shadow-4-l {
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .shadow-5-l {
-    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, .2);
+    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
   }
   .top-0-l {
     top: 0;
@@ -6368,13 +6368,13 @@ code,
     height: inherit;
   }
   .tracked-l {
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
   }
   .tracked-tight-l {
-    letter-spacing: -.05em;
+    letter-spacing: -0.05em;
   }
   .tracked-mega-l {
-    letter-spacing: .25em;
+    letter-spacing: 0.25em;
   }
   .lh-solid-l {
     line-height: 1;
@@ -6564,10 +6564,10 @@ code,
     padding: 0;
   }
   .pa1-l {
-    padding: .25rem;
+    padding: 0.25rem;
   }
   .pa2-l {
-    padding: .5rem;
+    padding: 0.5rem;
   }
   .pa3-l {
     padding: 1rem;
@@ -6588,10 +6588,10 @@ code,
     padding-left: 0;
   }
   .pl1-l {
-    padding-left: .25rem;
+    padding-left: 0.25rem;
   }
   .pl2-l {
-    padding-left: .5rem;
+    padding-left: 0.5rem;
   }
   .pl3-l {
     padding-left: 1rem;
@@ -6612,10 +6612,10 @@ code,
     padding-right: 0;
   }
   .pr1-l {
-    padding-right: .25rem;
+    padding-right: 0.25rem;
   }
   .pr2-l {
-    padding-right: .5rem;
+    padding-right: 0.5rem;
   }
   .pr3-l {
     padding-right: 1rem;
@@ -6636,10 +6636,10 @@ code,
     padding-bottom: 0;
   }
   .pb1-l {
-    padding-bottom: .25rem;
+    padding-bottom: 0.25rem;
   }
   .pb2-l {
-    padding-bottom: .5rem;
+    padding-bottom: 0.5rem;
   }
   .pb3-l {
     padding-bottom: 1rem;
@@ -6660,10 +6660,10 @@ code,
     padding-top: 0;
   }
   .pt1-l {
-    padding-top: .25rem;
+    padding-top: 0.25rem;
   }
   .pt2-l {
-    padding-top: .5rem;
+    padding-top: 0.5rem;
   }
   .pt3-l {
     padding-top: 1rem;
@@ -6685,12 +6685,12 @@ code,
     padding-bottom: 0;
   }
   .pv1-l {
-    padding-top: .25rem;
-    padding-bottom: .25rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
   }
   .pv2-l {
-    padding-top: .5rem;
-    padding-bottom: .5rem;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
   }
   .pv3-l {
     padding-top: 1rem;
@@ -6717,12 +6717,12 @@ code,
     padding-right: 0;
   }
   .ph1-l {
-    padding-left: .25rem;
-    padding-right: .25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
   }
   .ph2-l {
-    padding-left: .5rem;
-    padding-right: .5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
   }
   .ph3-l {
     padding-left: 1rem;
@@ -6748,10 +6748,10 @@ code,
     margin: 0;
   }
   .ma1-l {
-    margin: .25rem;
+    margin: 0.25rem;
   }
   .ma2-l {
-    margin: .5rem;
+    margin: 0.5rem;
   }
   .ma3-l {
     margin: 1rem;
@@ -6772,10 +6772,10 @@ code,
     margin-left: 0;
   }
   .ml1-l {
-    margin-left: .25rem;
+    margin-left: 0.25rem;
   }
   .ml2-l {
-    margin-left: .5rem;
+    margin-left: 0.5rem;
   }
   .ml3-l {
     margin-left: 1rem;
@@ -6796,10 +6796,10 @@ code,
     margin-right: 0;
   }
   .mr1-l {
-    margin-right: .25rem;
+    margin-right: 0.25rem;
   }
   .mr2-l {
-    margin-right: .5rem;
+    margin-right: 0.5rem;
   }
   .mr3-l {
     margin-right: 1rem;
@@ -6820,10 +6820,10 @@ code,
     margin-bottom: 0;
   }
   .mb1-l {
-    margin-bottom: .25rem;
+    margin-bottom: 0.25rem;
   }
   .mb2-l {
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
   .mb3-l {
     margin-bottom: 1rem;
@@ -6844,10 +6844,10 @@ code,
     margin-top: 0;
   }
   .mt1-l {
-    margin-top: .25rem;
+    margin-top: 0.25rem;
   }
   .mt2-l {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
   }
   .mt3-l {
     margin-top: 1rem;
@@ -6869,12 +6869,12 @@ code,
     margin-bottom: 0;
   }
   .mv1-l {
-    margin-top: .25rem;
-    margin-bottom: .25rem;
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
   }
   .mv2-l {
-    margin-top: .5rem;
-    margin-bottom: .5rem;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
   }
   .mv3-l {
     margin-top: 1rem;
@@ -6901,12 +6901,12 @@ code,
     margin-right: 0;
   }
   .mh1-l {
-    margin-left: .25rem;
-    margin-right: .25rem;
+    margin-left: 0.25rem;
+    margin-right: 0.25rem;
   }
   .mh2-l {
-    margin-left: .5rem;
-    margin-right: .5rem;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
   }
   .mh3-l {
     margin-left: 1rem;
@@ -7090,10 +7090,10 @@ code,
     font-size: 1rem;
   }
   .f6-l {
-    font-size: .875rem;
+    font-size: 0.875rem;
   }
   .f7-l {
-    font-size: .75rem;
+    font-size: 0.75rem;
   }
   .measure-l {
     max-width: 30em;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/basic-usage/output.css b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/basic-usage/output.css
index 6454a85a81bb..de6257bbaae4 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/basic-usage/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/basic-usage/output.css
@@ -257,46 +257,46 @@
 }
 .translate-x-5 {
   --tw-translate-x: 1.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .-translate-x-4 {
   --tw-translate-x: -1rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .translate-y-6 {
   --tw-translate-y: 1.5rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .-translate-x-3 {
   --tw-translate-x: -0.75rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .rotate-3 {
   --tw-rotate: 3deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .skew-y-12 {
   --tw-skew-y: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .skew-x-12 {
   --tw-skew-x: 12deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .scale-95 {
   --tw-scale-x: 0.95;
   --tw-scale-y: 0.95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .-scale-x-100 {
   --tw-scale-x: -1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewx(var(--tw-skew-x)) skewy(var(--tw-skew-y)) scalex(var(--tw-scale-x)) scaley(var(--tw-scale-y));
 }
 .transform-none {
   transform: none;
@@ -674,7 +674,7 @@
   vertical-align: middle;
 }
 .font-sans {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 .text-2xl {
   font-size: 1.5rem;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/collapse-adjacent-rules/output.css b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/collapse-adjacent-rules/output.css
index e7e8dd8649f8..6e504cad79ac 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/collapse-adjacent-rules/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/collapse-adjacent-rules/output.css
@@ -1,10 +1,10 @@
 @font-face{
-  font-family: 'Poppins';
-  src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
+  font-family: "Poppins";
+  src: url("/fonts/Poppins.woff2") format("woff2"), url("/fonts/Poppins.woff") format("woff");
 }
 @font-face{
-  font-family: 'Proxima Nova';
-  src: url('/fonts/ProximaNova.woff2') format('woff2'), url('/fonts/ProximaNova.woff') format('woff');
+  font-family: "Proxima Nova";
+  src: url("/fonts/ProximaNova.woff2") format("woff2"), url("/fonts/ProximaNova.woff") format("woff");
 }
 *, 
 ::before, 
@@ -53,12 +53,12 @@
   --tw-backdrop-sepia: ;
 }
 @font-face{
-  font-family: 'Inter';
-  src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
+  font-family: "Inter";
+  src: url("/fonts/Inter.woff2") format("woff2"), url("/fonts/Inter.woff") format("woff");
 }
 @font-face{
-  font-family: 'Gilroy';
-  src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
+  font-family: "Gilroy";
+  src: url("/fonts/Gilroy.woff2") format("woff2"), url("/fonts/Gilroy.woff") format("woff");
 }
 @page{
   margin: 1cm;
diff --git a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/variants/output.css b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/variants/output.css
index 9e9460e58e7d..5dd73c28d862 100644
--- a/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/variants/output.css
+++ b/crates/swc_css_codegen/tests/fixture/packages/tailwindcss/variants/output.css
@@ -611,12 +611,12 @@
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-[dir='ltr'] .ltr\:shadow-md {
+[dir="ltr"] .ltr\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-[dir='rtl'] .rtl\:shadow-md {
+[dir="rtl"] .rtl\:shadow-md {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -717,14 +717,14 @@
   }
 }
 @media (min-width: 1536px) {
-  .\32xl\:shadow-md {
+  .\32 xl\:shadow-md {
     --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
         0 2px 4px -2px var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   }
   @media (prefers-reduced-motion: no-preference) {
-    .dark .\32xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
+    .dark .\32 xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within {
       --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
       --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
             0 2px 4px -2px var(--tw-shadow-color);
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/attribute/1/output.css b/crates/swc_css_codegen/tests/fixture/selectors/attribute/1/output.css
index 61f3eef04746..b9fd61f0ef3e 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/attribute/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/attribute/1/output.css
@@ -9,9 +9,9 @@
 [href$=".org"] {}
 [href*="example"] {}
 [href*="insensitive" i] {}
-[href*="insensitive" I] {}
+[href*="insensitive" i] {}
+[href*="cAsE" s] {}
 [href*="cAsE" s] {}
-[href*="cAsE" S] {}
 [foo|att=val] {}
 [*|att] {}
 [*|att] {}
@@ -31,5 +31,5 @@ a[class="test"] {}
 [🐈] {}
 [🐈=🐈] {}
 [🐈|🐈=🐈] {}
-[frame=hsides I] {}
-[href*="cAsE" S] {}
+[frame=hsides i] {}
+[href*="cAsE" s] {}
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/class/output.css b/crates/swc_css_codegen/tests/fixture/selectors/class/output.css
index 1ceb8ad6fd9e..e98c0c106a3d 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/class/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/class/output.css
@@ -1,12 +1,12 @@
-.\10FFF abc:after {
-  content: '\\10FFF abc';
+.𐿿abc:after {
+  content: "\\10FFF abc";
 }
-.\10FFFFabc:after {
-  content: '\\10FFFFabc';
+.􏿿abc:after {
+  content: "\\10FFFFabc";
 }
-.\10FFFF abc:after {
-  content: '\\10FFFF abc';
+.􏿿abc:after {
+  content: "\\10FFFF abc";
 }
-.\FEFF:after {
-  content: '\uFEFF';
+.:after {
+  content: "uFEFF";
 }
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/combinator/output.css b/crates/swc_css_codegen/tests/fixture/selectors/combinator/output.css
index f63845bdf010..854e339008e4 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/combinator/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/combinator/output.css
@@ -1,5 +1,5 @@
 .class > a {}
-a #foo > [foo='bar'], 
+a #foo > [foo="bar"], 
 .FOO {}
 body article p {}
 article > p {}
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/an_plus_b/output.css b/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/an_plus_b/output.css
index a08031b7e595..ea2bd6684b77 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/an_plus_b/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/an_plus_b/output.css
@@ -7,16 +7,16 @@ p:nth-child(7) {
 p:nth-child(5n) {
   color: blue;
 }
-p:nth-child(n + 7) {
+p:nth-child(n+7) {
   color: blue;
 }
-p:nth-child(3n + 4) {
+p:nth-child(3n+4) {
   color: blue;
 }
 p:nth-child(3n+4) {
   color: blue;
 }
-p:nth-child(-n + 3) {
+p:nth-child(-n+3) {
   color: blue;
 }
 p:nth-child(-n+3) {
@@ -25,61 +25,61 @@ p:nth-child(-n+3) {
 p:nth-child(n) {
   color: blue;
 }
-p:nth-child(+n) {
+p:nth-child(n) {
   color: blue;
 }
 p:nth-child(-n) {
   color: blue;
 }
-p:NTH-CHILD(1) {
+p:nth-child(1) {
   color: blue;
 }
-p:nth-child(2n + 1) {
+p:nth-child(2n+1) {
   color: blue;
 }
-p:nth-child(2n + 1) {
+p:nth-child(2n+1) {
   color: blue;
 }
-p:nth-child(+2n + 1) {
+p:nth-child(2n+1) {
   color: blue;
 }
-p:nth-child(-2n + 1) {
+p:nth-child(-2n+1) {
   color: blue;
 }
-p:nth-child(2n + 1) {
+p:nth-child(2n+1) {
   color: blue;
 }
-p:nth-child(n + 1) {
+p:nth-child(n+1) {
   color: blue;
 }
-p:nth-child(+n + 1) {
+p:nth-child(n+1) {
   color: blue;
 }
-p:nth-child(-n + 1) {
+p:nth-child(-n+1) {
   color: blue;
 }
 p:nth-child(0n+3) {
   color: blue;
 }
-p:nth-child(+0n+3) {
+p:nth-child(0n+3) {
   color: blue;
 }
-p:nth-child(-0n+3) {
+p:nth-child(0n+3) {
   color: blue;
 }
-p:nth-child(1n + 1) {
+p:nth-child(n+1) {
   color: blue;
 }
-p:nth-child(+1n + 1) {
+p:nth-child(n+1) {
   color: blue;
 }
-p:nth-child(-1n + 1) {
+p:nth-child(-n+1) {
   color: blue;
 }
 p:nth-child(even) {
   color: blue;
 }
-p:nth-child(EVEN) {
+p:nth-child(even) {
   color: blue;
 }
 p:nth-child(2n) {
@@ -91,10 +91,10 @@ p:nth-child(1) {
 p:nth-child(0n+1) {
   color: blue;
 }
-p:nth-child(-0n+1) {
+p:nth-child(0n+1) {
   color: blue;
 }
-p:nth-child(+0n+1) {
+p:nth-child(0n+1) {
   color: blue;
 }
 p:nth-child(0n+5) {
@@ -103,13 +103,13 @@ p:nth-child(0n+5) {
 p:nth-child(0n-5) {
   color: blue;
 }
-p:nth-child(-1n+3) {
+p:nth-child(-n+3) {
   color: blue;
 }
-p:nth-child(+1n+3) {
+p:nth-child(n+3) {
   color: blue;
 }
-p:nth-child(1n+3) {
+p:nth-child(n+3) {
   color: blue;
 }
 p:nth-child(n+3) {
@@ -118,10 +118,10 @@ p:nth-child(n+3) {
 p:nth-child(-n+3) {
   color: blue;
 }
-p:nth-child(+n+3) {
+p:nth-child(n+3) {
   color: blue;
 }
-p:nth-child(+n-3) {
+p:nth-child(n-3) {
   color: blue;
 }
 p:nth-child(0n-3) {
@@ -130,16 +130,16 @@ p:nth-child(0n-3) {
 p:nth-child(0n+3) {
   color: blue;
 }
-p:nth-child(-0n-3) {
+p:nth-child(0n-3) {
   color: blue;
 }
-p:nth-child(+0n-3) {
+p:nth-child(0n-3) {
   color: blue;
 }
 p:nth-child(n+0) {
   color: blue;
 }
-p:nth-child(+n+0) {
+p:nth-child(n+0) {
   color: blue;
 }
 p:nth-child(-n+0) {
@@ -151,7 +151,7 @@ p:nth-child(5n+0) {
 p:nth-child(-5n+0) {
   color: blue;
 }
-p:nth-child(+5n+0) {
+p:nth-child(5n+0) {
   color: blue;
 }
 p:nth-child(-2n+1) {
@@ -166,16 +166,16 @@ p:nth-last-col(2n+1) {
 p:nth-col(2n+1) {
   color: blue;
 }
-p:nth-child(n - 0) {
+p:nth-child(n+0) {
   color: blue;
 }
-p:nth-child(n + 0) {
+p:nth-child(n+0) {
   color: blue;
 }
 p:nth-child(5) {
   color: blue;
 }
-p:nth-child(+5) {
+p:nth-child(5) {
   color: blue;
 }
 p:nth-child(-5) {
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/has/output.css b/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/has/output.css
index 906c166a44ca..cb38129c046e 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/has/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/pseudo-class/has/output.css
@@ -15,6 +15,6 @@ a:has(   <>  img, > img) {}
 a:has(> img, <>  img) {}
 a:has(> img, <>  img   ) {}
 a:has(> img,    <>  img   , > img) {}
-A:HAS(> IMG) {
-  COLOR: RED;
+a:has(> img) {
+  color: RED;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/selectors/type/output.css b/crates/swc_css_codegen/tests/fixture/selectors/type/output.css
index f34c47c9f313..978603bd9eae 100644
--- a/crates/swc_css_codegen/tests/fixture/selectors/type/output.css
+++ b/crates/swc_css_codegen/tests/fixture/selectors/type/output.css
@@ -4,7 +4,7 @@ foo|* {}
 |h1 {}
 *|h1 {}
 h1 {}
-BODY {}
-HTML {}
-TD {}
-TEMPLATE {}
+body {}
+html {}
+td {}
+template {}
diff --git a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
index 0ab2b0dba783..f1c994bb9160 100644
--- a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
+++ b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.css
@@ -7,13 +7,13 @@
 .selector {
   [;property: value;];}
 @media \\0 screen {}
-@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
+@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
   .selector {}
 }
 body:empty .selector {}
 body:last-child .selector, 
 x:-moz-any-link {}
-@media \0 all {}
+@media �all {}
 body:last-child .selector, 
 x:-moz-any-link, 
 x:default {}
@@ -22,8 +22,8 @@ body:not(:-moz-handler-blocked) .selector {}
 @media screen and (min--moz-device-pixel-ratio: 0) {}
 _::-moz-progress-bar, 
 body:last-child .selector {}
-@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {}
-@media all and (-moz-images-in-menus: 0) and (min-resolution: .001dpcm) {}
+@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {}
+@media all and (-moz-images-in-menus: 0) and (min-resolution: 0.001dpcm) {}
 @media all and (min--moz-device-pixel-ratio: 0) {
   @media (min-width: 0px) {}
 }
@@ -39,31 +39,31 @@ body:last-child .selector {}
 @supports (-moz-appearance: meterbar) and (image-orientation: 90deg) {}
 @supports (-moz-appearance: meterbar) and (all: initial) {}
 @supports (-moz-appearance: meterbar) and (list-style-type: japanese-formal) {}
-@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 3e1dpcm) {}
+@media all and (min--moz-device-pixel-ratio: 0) and (min-resolution: 30dpcm) {}
 @supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {}
 _:-moz-tree-row(hover), 
 .selector {}
 _::selection, 
-.selector:not([attr*='']) {}
+.selector:not([attr*=""]) {}
 @supports (-webkit-appearance: none) {}
 * html .selector {}
 .unused-class.selector {}
 html > body .selector {}
 *:first-child + html .selector {}
 .selector, 
-x:-IE7 {}
+x:-ie7 {}
 * + html .selector {}
 body *.selector {}
 .selector\  {}
 html > body .selector {}
 head ~ body .selector {}
 _::selection, 
-.selector:not([attr*='']) {}
+.selector:not([attr*=""]) {}
 :root .selector {}
 body:last-child .selector {}
 body:nth-of-type(1) .selector {}
 body:first-of-type .selector {}
-.selector:not([attr*='']) {}
+.selector:not([attr*=""]) {}
 .selector {
   _property: value;
 }
@@ -71,10 +71,10 @@ body:first-of-type .selector {}
   -property: value;
 }
 .selector {
-  property: value\9;
+  property: value\9 ;
 }
 .selector {
-  property: value\9;
+  property: value\9 ;
 }
 .selector {
   !property: value;color: red;
@@ -138,8 +138,8 @@ body:first-of-type .selector {}
   property: value !ie;
 }
 @media screen\9  {}
-@media \0screen\,screen\9  {}
-@media \0screen {}
+@media �screen\,screen\9  {}
+@media �screen {}
 @media screen and (min-width: 0\0) {}
 _:-ms-input-placeholder, 
 :root .selector {}
@@ -159,12 +159,12 @@ html:first-child .selector {}
 _:-o-prefocus, 
 body:last-child .selector {}
 @media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {}
-@media (min-resolution: .001dpcm) {
+@media (min-resolution: 0.001dpcm) {
   _:-o-prefocus, 
   .selector {}
 }
 *|html[xmlns*=""] .selector {}
-@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
+@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
   .selector {}
 }
 .selector:not(*:root) {}
@@ -195,7 +195,7 @@ div {
 }
 selector {
   property: value;
-  p\roperty: normal-value;
+  property: normal-value;
 }
 div {
   color: red;
diff --git a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.min.css b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.min.css
index 01650183d473..64af84592206 100644
--- a/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.min.css
+++ b/crates/swc_css_codegen/tests/fixture/style-blocks-contents/hacks/output.min.css
@@ -1 +1 @@
-.selector:not(*:root){}@media screen and (min-width:0\0){}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}@media \\0 screen {}@media all and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.selector{}}body:empty .selector{}body:last-child .selector,x:-moz-any-link{}@media \0 all{}body:last-child .selector,x:-moz-any-link,x:default{}body:not(:-moz-handler-blocked) .selector{}@media screen and (-moz-images-in-menus:0){}@media screen and (min--moz-device-pixel-ratio:0){}_::-moz-progress-bar,body:last-child .selector{}@media all and (min--moz-device-pixel-ratio:0)and (min-resolution:.001dpcm){}@media all and (-moz-images-in-menus:0)and (min-resolution:.001dpcm){}@media all and (min--moz-device-pixel-ratio:0){@media(min-width:0px){}}@media all and (-moz-images-in-menus:0){@media(min-width:0px){}}@supports(-moz-appearance:meterbar){}_::-moz-range-track,body:last-child .selector{}@supports(-moz-appearance:meterbar)and (display:flex){}@supports(-moz-appearance:meterbar)and (cursor:zoom-in){}@supports(-moz-appearance:meterbar)and (background-attachment:local){}@supports(-moz-appearance:meterbar)and (image-orientation:90deg){}@supports(-moz-appearance:meterbar)and (all:initial){}@supports(-moz-appearance:meterbar)and (list-style-type:japanese-formal){}@media all and (min--moz-device-pixel-ratio:0)and (min-resolution:30dpcm){}@supports(-moz-appearance:meterbar)and (background-blend-mode:difference,normal){}_:-moz-tree-row(hover),.selector{}_::selection,.selector:not([attr*=""]){}@supports(-webkit-appearance:none){}* html .selector{}.unused-class.selector{}html>body .selector{}*:first-child+html .selector{}.selector,x:-ie7{}*+html .selector{}body *.selector{}.selector\ {}html>body .selector{}head~body .selector{}_::selection,.selector:not([attr*=""]){}:root .selector{}body:last-child .selector{}body:nth-of-type(1) .selector{}body:first-of-type .selector{}.selector:not([attr*=""]){}.selector{_property:value}.selector{-property:value}.selector{property:value\9}.selector{property:value\9}.selector{!property: value;color:red}.selector{$property: value;color:red}.selector{&property: value;color:red}.selector{*property: value;color:red}.selector{)property: value;color:red}.selector{=property: value;color:red}.selector{%property: value;color:red}.selector{+property: value;color:red}.selector{color:red;@property: value;}.selector{,property: value;color:red}.selector{.property: value;color:red}.selector{/property: value;color:red}.selector{`property: value;color:red}.selector{]property: value;color:red}.selector{#property: value;color:red}.selector{~property: value;color:red}.selector{?property: value;color:red}.selector{:property: value;color:red}.selector{|property: value;color:red}.selector{property:value !ie}@media screen\9{}@media \0screen\,screen\9 {}@media \0screen{}@media screen and (min-width:0\0){}_:-ms-input-placeholder,:root .selector{}_:-ms-fullscreen,:root .selector{}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){}@media screen{@media(min-width:0px){}}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}html:first-child .selector{}_:-o-prefocus,body:last-child .selector{}@media all and (-webkit-min-device-pixel-ratio:1e4),not all and (-webkit-min-device-pixel-ratio:0){}@media(min-resolution:.001dpcm){_:-o-prefocus,.selector{}}*|html[xmlns*=""] .selector{}@media all and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.selector{}}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}@media screen and (min-width:0\0){}@media screen{@media(min-width:0px){}}html:first-child .selector{}html[xmlns*=""] body:last-child .selector{}html[xmlns*=""]:root .selector{}*|html[xmlns*=""] .selector{}_::-moz-svg-foreign-content,:root .selector{}@media \\0 screen {}a{*color : black;_background:white;font-size:big;$(var)-size: 100%;}a{*b:c}div{color:red}selector{property:value;property:normal-value}div{color:red}
+.selector:not(*:root){}@media screen and (min-width:0\0){}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}@media \\0 screen {}@media all and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.selector{}}body:empty .selector{}body:last-child .selector,x:-moz-any-link{}@media �all{}body:last-child .selector,x:-moz-any-link,x:default{}body:not(:-moz-handler-blocked) .selector{}@media screen and (-moz-images-in-menus:0){}@media screen and (min--moz-device-pixel-ratio:0){}_::-moz-progress-bar,body:last-child .selector{}@media all and (min--moz-device-pixel-ratio:0)and (min-resolution:.001dpcm){}@media all and (-moz-images-in-menus:0)and (min-resolution:.001dpcm){}@media all and (min--moz-device-pixel-ratio:0){@media(min-width:0px){}}@media all and (-moz-images-in-menus:0){@media(min-width:0px){}}@supports(-moz-appearance:meterbar){}_::-moz-range-track,body:last-child .selector{}@supports(-moz-appearance:meterbar)and (display:flex){}@supports(-moz-appearance:meterbar)and (cursor:zoom-in){}@supports(-moz-appearance:meterbar)and (background-attachment:local){}@supports(-moz-appearance:meterbar)and (image-orientation:90deg){}@supports(-moz-appearance:meterbar)and (all:initial){}@supports(-moz-appearance:meterbar)and (list-style-type:japanese-formal){}@media all and (min--moz-device-pixel-ratio:0)and (min-resolution:30dpcm){}@supports(-moz-appearance:meterbar)and (background-blend-mode:difference,normal){}_:-moz-tree-row(hover),.selector{}_::selection,.selector:not([attr*=""]){}@supports(-webkit-appearance:none){}* html .selector{}.unused-class.selector{}html>body .selector{}*:first-child+html .selector{}.selector,x:-ie7{}*+html .selector{}body *.selector{}.selector\ {}html>body .selector{}head~body .selector{}_::selection,.selector:not([attr*=""]){}:root .selector{}body:last-child .selector{}body:nth-of-type(1) .selector{}body:first-of-type .selector{}.selector:not([attr*=""]){}.selector{_property:value}.selector{-property:value}.selector{property:value\9}.selector{property:value\9}.selector{!property: value;color:red}.selector{$property: value;color:red}.selector{&property: value;color:red}.selector{*property: value;color:red}.selector{)property: value;color:red}.selector{=property: value;color:red}.selector{%property: value;color:red}.selector{+property: value;color:red}.selector{color:red;@property: value;}.selector{,property: value;color:red}.selector{.property: value;color:red}.selector{/property: value;color:red}.selector{`property: value;color:red}.selector{]property: value;color:red}.selector{#property: value;color:red}.selector{~property: value;color:red}.selector{?property: value;color:red}.selector{:property: value;color:red}.selector{|property: value;color:red}.selector{property:value !ie}@media screen\9{}@media �screen\,screen\9{}@media �screen{}@media screen and (min-width:0\0){}_:-ms-input-placeholder,:root .selector{}_:-ms-fullscreen,:root .selector{}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){}@media screen{@media(min-width:0px){}}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}html:first-child .selector{}_:-o-prefocus,body:last-child .selector{}@media all and (-webkit-min-device-pixel-ratio:1e4),not all and (-webkit-min-device-pixel-ratio:0){}@media(min-resolution:.001dpcm){_:-o-prefocus,.selector{}}*|html[xmlns*=""] .selector{}@media all and (-webkit-min-device-pixel-ratio:0)and (min-resolution:.001dpcm){.selector{}}.selector:not(*:root){}@supports(-webkit-appearance:none){}.selector{(;property: value;);}.selector{[;property: value;];}@media screen and (min-width:0\0){}@media screen{@media(min-width:0px){}}html:first-child .selector{}html[xmlns*=""] body:last-child .selector{}html[xmlns*=""]:root .selector{}*|html[xmlns*=""] .selector{}_::-moz-svg-foreign-content,:root .selector{}@media \\0 screen {}a{*color : black;_background:white;font-size:big;$(var)-size: 100%;}a{*b:c}div{color:red}selector{property:value;property:normal-value}div{color:red}
diff --git a/crates/swc_css_codegen/tests/fixture/values/color/function/output.css b/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
index b2a40ee435eb..0193452dd1ea 100644
--- a/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/color/function/output.css
@@ -1,12 +1,12 @@
 div {
   color: rgb(255, 255, 255);
   color: hwb(1.5708rad 20% 10% / 0.7);
-  color: hsla(30, 100%, 50%, .3);
+  color: hsla(30, 100%, 50%, 0.3);
   color: hsl(30, 100%, 50%);
   color: rgb(214, 122, 127);
-  border: 4mm ridge rgba(170, 50, 220, .6);
-  border-color: red rgba(170, 50, 220, .6) green;
-  border-color: red yellow green hsla(60, 90%, 50%, .8);
+  border: 4mm ridge rgba(170, 50, 220, 0.6);
+  border-color: red rgba(170, 50, 220, 0.6) green;
+  border-color: red yellow green hsla(60, 90%, 50%, 0.8);
   prop: rgb(255, 255, 255) rgb(255, 255, 255);
 }
 .rgb-and-rgba {
@@ -14,7 +14,7 @@ div {
   color: rgba(34, 12, 64, 0.6);
   color: rgb(34 12 64/ 0.6);
   color: rgba(34 12 64/ 0.3);
-  color: rgb(34.0 12 64/ 60%);
+  color: rgb(34 12 64/ 60%);
   color: rgba(34.6 12 64/ 30%);
 }
 .hsl-and-hsla {
@@ -22,7 +22,7 @@ div {
   color: hsla(30, 100%, 50%, 0.6);
   color: hsl(30 100% 50% / 0.6);
   color: hsla(30 100% 50% / 0.6);
-  color: hsl(30.0 100% 50% / 60%);
+  color: hsl(30 100% 50% / 60%);
   color: hsla(30.2 100% 50% / 60%);
 }
 .hwb {
@@ -30,5 +30,5 @@ div {
   color: hwb(90 10% 10% / 0.5);
   color: hwb(90deg 10% 10%);
   color: hwb(1.5708rad 60% 0%);
-  color: hwb(.25turn 0% 40% / 50%);
+  color: hwb(0.25turn 0% 40% / 50%);
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.css b/crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.css
index 640ab64953ad..0ea2d0a6158f 100644
--- a/crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/color/hex-color/output.css
@@ -1,8 +1,8 @@
 div {
   color: #fff;
   color: #ffffff;
-  color: #FFF;
-  color: #FFFFFF;
+  color: #fff;
+  color: #ffffff;
   color: #dc143c;
   color: #ff0000;
   color: #ff0000ff;
@@ -22,6 +22,6 @@ div {
   border: thick double #32a1ce;
 }
 .bar {
-  color: #123abcFF;
-  color: #123F;
+  color: #123abcff;
+  color: #123f;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/dimension/input.css b/crates/swc_css_codegen/tests/fixture/values/dimension/input.css
index 9e6e403c45db..a0e1b37efb5a 100644
--- a/crates/swc_css_codegen/tests/fixture/values/dimension/input.css
+++ b/crates/swc_css_codegen/tests/fixture/values/dimension/input.css
@@ -17,3 +17,12 @@ div {
     width: 100PX;
     TRANSFORM: ROTATE(45DEG);
 }
+
+a {
+    width: 10e\30px;
+    width: 10e\31px;
+    width: 10e\32px;
+    width: 10e\39px;
+    width: 10e\40px;
+    width: 10ae\32px;
+}
\ No newline at end of file
diff --git a/crates/swc_css_codegen/tests/fixture/values/dimension/output.css b/crates/swc_css_codegen/tests/fixture/values/dimension/output.css
index 204523a778a4..9c0010fc3754 100644
--- a/crates/swc_css_codegen/tests/fixture/values/dimension/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/dimension/output.css
@@ -11,6 +11,14 @@ div {
   width: 0.00254cm;
 }
 .foo {
-  width: 100PX;
-  TRANSFORM: ROTATE(45DEG);
+  width: 100px;
+  transform: rotate(45deg);
+}
+a {
+  width: 10e\30px;
+  width: 10e\31px;
+  width: 10e\32px;
+  width: 10e\39px;
+  width: 10e\@px;
+  width: 10ae2px;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/dimension/output.min.css b/crates/swc_css_codegen/tests/fixture/values/dimension/output.min.css
index e162f57488ec..ccf9fd95465f 100644
--- a/crates/swc_css_codegen/tests/fixture/values/dimension/output.min.css
+++ b/crates/swc_css_codegen/tests/fixture/values/dimension/output.min.css
@@ -1 +1 @@
-div{padding:10px 10px;border:1px solid black;transition:top 1s ease-out.5s;text-shadow:1px 1px 2px black,0 0 1em red}.fpp{padding:__ident__px __ident__}.class{width:.00254cm}.foo{width:100px;transform:rotate(45deg)}
+div{padding:10px 10px;border:1px solid black;transition:top 1s ease-out.5s;text-shadow:1px 1px 2px black,0 0 1em red}.fpp{padding:__ident__px __ident__}.class{width:.00254cm}.foo{width:100px;transform:rotate(45deg)}a{width:10e\30px;width:10e\31px;width:10e\32px;width:10e\39px;width:10e\@px;width:10ae2px}
diff --git a/crates/swc_css_codegen/tests/fixture/values/function/basic/output.css b/crates/swc_css_codegen/tests/fixture/values/function/basic/output.css
index 76b8d83379da..295942f5921a 100644
--- a/crates/swc_css_codegen/tests/fixture/values/function/basic/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/function/basic/output.css
@@ -17,7 +17,7 @@ div {
 }
 @font-face{
   font-family: examplefont;
-  src: local(Example Font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype");
+  src: local(Example Font), url("examplefont.woff") format("woff"), url("examplefont.otf") format("opentype");
 }
 .three {
   background-color: var(--my-var, var(--my-background, pink));
diff --git a/crates/swc_css_codegen/tests/fixture/values/ident/output.css b/crates/swc_css_codegen/tests/fixture/values/ident/output.css
index 8ae2f0141817..c1482dd8a5c7 100644
--- a/crates/swc_css_codegen/tests/fixture/values/ident/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/ident/output.css
@@ -1,38 +1,38 @@
 :root {
-  --fg-c\olor: blue;
-  --fg-\color-other: blue;
+  --fg-color: blue;
+  --fg-\c olor-other: blue;
   --Foo: blue;
 }
 .box {
-  back\ground-color: \rebeccap\urple;
-  back\ground-color: var(--fg-c\olor);
+  background-color: rebeccapurple;
+  background-color: var(--fg-color);
   border-radius: 10px;
-  width: 100\p\x;
+  width: 100px;
   height: 100px;
 }
-.b\ox:hover {
+.box:hover {
   animation-name: rotate\ rotate;
   animation-duration: 0.7s;
 }
-@ke\yframes rotate\ rotate {
+@keyframes rotate\ rotate {
   0% {
-    transform: ro\tate(0);
+    transform: rotate(0);
   }
   100% {
     transform: rotate(360deg);
   }
 }
-@ke\yframes ro\tate {
+@keyframes rotate {
   0% {
-    transform: ro\tate(0);
+    transform: rotate(0);
   }
   100% {
     transform: rotate(360deg);
   }
 }
-@ke\yframes rotat\e  {
+@keyframes rotat\e  {
   0% {
-    transform: ro\tate(0);
+    transform: rotate(0);
   }
   100% {
     transform: rotate(360deg);
@@ -50,5 +50,5 @@
   }
 }
 body {
-  margin: \-\1\p\x;
+  margin: -\1 px;
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/number/output.css b/crates/swc_css_codegen/tests/fixture/values/number/output.css
index 5ea42a858445..2ce7e95c8338 100644
--- a/crates/swc_css_codegen/tests/fixture/values/number/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/number/output.css
@@ -6,76 +6,76 @@ div {
 }
 div {
   property: 10;
-  property: +10;
+  property: 10;
   property: -10;
   property: 0.1;
-  property: +0.1;
+  property: 0.1;
   property: -0.1;
-  property: -.1;
-  property: +.1;
+  property: -0.1;
+  property: 0.1;
   property: 0;
   property: 10;
-  property: .10;
+  property: 0.1;
   property: 12.34;
   property: 0.1;
-  property: 1.0;
-  property: 0.0;
-  property: +0.0;
-  property: -0.0;
-  property: .0;
-  property: 1.200000;
-  property: 1.2e2;
-  property: 1e2;
-  property: .2e2;
-  property: 1.2E2;
-  property: 1.2e+2;
-  property: 1.2e-2;
+  property: 1;
+  property: 0;
+  property: 0;
+  property: -0;
+  property: 0;
+  property: 1.2;
+  property: 120;
+  property: 100;
+  property: 20;
+  property: 120;
+  property: 120;
+  property: 0.012;
   property: -1;
   property: -1.2;
-  property: .2;
-  property: -.2;
-  property: +.2;
-  property: -1.2e3;
+  property: 0.2;
+  property: -0.2;
+  property: 0.2;
+  property: -1200;
+  property: 1.75;
   property: 1.75;
-  property: +1.75;
-  property: 1e0;
-  property: 1e1;
-  property: 1e+1;
-  property: 1e-1;
-  property: 1e-10;
-  property: 1 +2;
+  property: 1;
+  property: 10;
+  property: 10;
+  property: 0.1;
+  property: 0.0000000001;
+  property: 1 2;
   property: 1 -2;
   property: 4.01;
   property: -456.8;
-  property: .60;
-  property: .0060;
-  property: 10e3;
-  property: -3.4e-2;
-  property: 0.5600000000;
-  property: 10e6;
+  property: 0.6;
+  property: 0.006;
+  property: 10000;
+  property: -0.034;
+  property: 0.56;
+  property: 10000000;
   property: 10000000;
-  property: 0.0;
-  property: -0.0;
-  property: +0.0;
-  property: 0.00;
-  property: 1e0;
-  property: 1e1;
-  property: 1e2;
-  property: 1e3;
-  property: 1e4;
-  property: 1e5;
-  property: 1e-0;
-  property: 1e-1;
-  property: 1e-2;
-  property: 1e-3;
-  property: 1e-4;
-  property: 1e-5;
-  property: -1e-0;
-  property: -1e-1;
-  property: -1e-2;
-  property: -1e-3;
-  property: -1e-4;
-  property: -1e-5;
+  property: 0;
+  property: -0;
+  property: 0;
+  property: 0;
+  property: 1;
+  property: 10;
+  property: 100;
+  property: 1000;
+  property: 10000;
+  property: 100000;
+  property: 1;
+  property: 0.1;
+  property: 0.01;
+  property: 0.001;
+  property: 0.0001;
+  property: 0.00001;
+  property: -1;
+  property: -0.1;
+  property: -0.01;
+  property: -0.001;
+  property: -0.0001;
+  property: -0.00001;
   property: 0.1;
   property: 0.01;
   property: 0.001;
@@ -90,12 +90,12 @@ div {
   property: 0.000005;
   property: 0.000015;
   property: 0.00001543;
-  property: 0.00001543000;
-  property: 000000;
-  property: +000000;
-  property: -000000;
-  property: 100.1e-5;
-  property: 100.1e-6;
+  property: 0.00001543;
+  property: 0;
+  property: 0;
+  property: 0;
+  property: 0.001001;
+  property: 0.0001001;
   property: 10001000000;
 }
 div {
diff --git a/crates/swc_css_codegen/tests/fixture/values/percentage/output.css b/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
index 7c64df461c67..9bb405a08060 100644
--- a/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/percentage/output.css
@@ -18,7 +18,7 @@ div {
   background: rgba(0, 0, 0, 0) image-set(url("image.png") 1x) repeat scroll 0% 0%;
 }
 div {
-  width: 100.00%;
+  width: 100%;
   width: 100.01%;
 }
 div {
@@ -26,26 +26,26 @@ div {
   width: 0.1%;
   width: 100%;
   width: 100.5%;
-  width: 100.1000%;
-  width: 1e0%;
-  width: 1e1%;
-  width: 1e2%;
-  width: 10e-1%;
-  width: 10e-5%;
-  width: 10e+2%;
-  width: 12e+2%;
-  width: +0%;
+  width: 100.1%;
+  width: 1%;
+  width: 10%;
+  width: 100%;
+  width: 1%;
+  width: 0.0001%;
+  width: 1000%;
+  width: 1200%;
+  width: 0%;
   width: -0%;
-  width: +0000%;
-  width: 0000%;
+  width: 0%;
+  width: 0%;
+  width: 10.5%;
   width: 10.5%;
-  width: 10.5000%;
-  width: 10.0%;
-  width: 0.0%;
-  width: -0.0%;
-  width: 10.0e2%;
-  width: 10.0e5%;
-  width: 10.0E5%;
+  width: 10%;
+  width: 0%;
+  width: -0%;
+  width: 1000%;
+  width: 1000000%;
+  width: 1000000%;
 }
 .geist-list {
   display: flex;
diff --git a/crates/swc_css_codegen/tests/fixture/values/string/output.css b/crates/swc_css_codegen/tests/fixture/values/string/output.css
index 3b4ddcc4ef6d..4b9ba47053a7 100644
--- a/crates/swc_css_codegen/tests/fixture/values/string/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/string/output.css
@@ -1,41 +1,41 @@
 div {
-  content: '⬇';
+  content: "⬇";
   content: "😀";
-  content: "\'test\'";
-  content: "\\'test\'";
-  content: "\\\\'test\'";
-  content: '"string" is string';
+  content: "'test'";
+  content: "\\'test'";
+  content: "\\\\'test'";
+  content: "\"string\" is string";
+  content: "'string' is string";
+  content: "\"string\" is string";
   content: "'string' is string";
-  content: '\"string\" is string';
-  content: '\'string\' is string';
   content: "\"string\" is string";
-  content: "\'string\' is string";
-  content: '\'string\' is \"string\"';
-  content: "\'string\' is \"string\"";
-  content: "'test' \'test\'";
-  content: '"test" \"test\"';
+  content: "'string' is string";
+  content: "'string' is \"string\"";
+  content: "'string' is \"string\"";
+  content: "'test' 'test'";
+  content: "\"test\" \"test\"";
+  content: "'test'";
   content: "'test'";
-  content: "\'test\'";
   content: "\"test\"";
-  content: '\'test\'';
-  content: '\'test\'';
-  content: '\"test\"';
-  content: "\22string\22";
-  content: '\27string\27';
-  content: "This string has a \Aline break in it.";
-  content: "This string has a \A line break in it.";
-  content: "This string has a \00000Aline break in it.";
-  content: "This string has a \00000A line break in it.";
+  content: "'test'";
+  content: "'test'";
+  content: "\"test\"";
+  content: "\"string\"";
+  content: "'string'";
+  content: "This string has a \a line break in it.";
+  content: "This string has a \a line break in it.";
+  content: "This string has a \a line break in it.";
+  content: "This string has a \a line break in it.";
   content: "\"test\" \"test\" \"test\" 'test'";
-  content: "\"test\" \"test\" \"test\" \'test\'";
-  content: "\'test\' \'test\' \'test\' \"test\"";
-  content: '\"test\" \"test\" \"test\" \'test\'';
-  content: '\'test\' \'test\' \'test\' "test"';
-  content: '\'test\' \'test\' \'test\' \"test\"';
-  content: '\\\'test\\\' \\\'test\\\' \\\'test\\\' \\\"test\\\"';
-  background: url('http://example.com/foo\'bar.jpg');
-  background: url('http://example.com/foo\"bar.jpg');
-  background: url("http://example.com/foo\'bar.jpg");
+  content: "\"test\" \"test\" \"test\" 'test'";
+  content: "'test' 'test' 'test' \"test\"";
+  content: "\"test\" \"test\" \"test\" 'test'";
+  content: "'test' 'test' 'test' \"test\"";
+  content: "'test' 'test' 'test' \"test\"";
+  content: "\\'test\\' \\'test\\' \\'test\\' \\\"test\\\"";
+  background: url("http://example.com/foo'bar.jpg");
+  background: url("http://example.com/foo\"bar.jpg");
+  background: url("http://example.com/foo'bar.jpg");
   background: url("http://example.com/foo\"bar.jpg");
 }
 div {
@@ -48,12 +48,8 @@ div {
   prop: name "test";
 }
 .foo {
-  content: 'string \
-is string';
+  content: "string is string";
 }
 .foo {
-  content: 'stri\
-ng\
- is stri\
-ng';
+  content: "string is string";
 }
diff --git a/crates/swc_css_codegen/tests/fixture/values/url/1/input.css b/crates/swc_css_codegen/tests/fixture/values/url/1/input.css
index d89c6d8dfefb..48991fe04a64 100644
--- a/crates/swc_css_codegen/tests/fixture/values/url/1/input.css
+++ b/crates/swc_css_codegen/tests/fixture/values/url/1/input.css
@@ -67,3 +67,8 @@ div {
 .foo {
     background: url(foo bar);
 }
+
+.bar {
+    background: url(foo\\\\bar);
+    background: url("foo\\\\bar");
+}
diff --git a/crates/swc_css_codegen/tests/fixture/values/url/1/output.css b/crates/swc_css_codegen/tests/fixture/values/url/1/output.css
index 5c87d7219ba0..b705c6acadde 100644
--- a/crates/swc_css_codegen/tests/fixture/values/url/1/output.css
+++ b/crates/swc_css_codegen/tests/fixture/values/url/1/output.css
@@ -1,11 +1,11 @@
 div {
   background: url(https://example.com/image.png);
-  background: URL(https://example.com/image.png);
-  background: \URL(https://example.com/image.png);
+  background: url(https://example.com/image.png);
+  background: url(https://example.com/image.png);
+  background: url("https://example.com/image.png");
+  background: url("https://example.com/image.png");
+  background: url("https://example.com/image.png");
   background: url("https://example.com/image.png");
-  background: url('https://example.com/image.png');
-  background: URL('https://example.com/image.png');
-  background: \URL('https://example.com/image.png');
   background: url(data:image/png;base64,iRxVB0);
   background: url(#IDofSVGpath);
   background: url("//aa.com/img.svg" prefetch);
@@ -13,36 +13,28 @@ div {
   background: url("http://example.com/image.svg" param(--color var(--primary-color)));
   background: url();
   background: url("");
-  background: url('');
+  background: url("");
   --foo: "http://www.example.com/pinkish.gif";
   background: src("http://www.example.com/pinkish.gif");
-  background: SRC("http://www.example.com/pinkish.gif");
+  background: src("http://www.example.com/pinkish.gif");
   background: src(var(--foo));
-  background: url(   https://example.com/image.png   );
-  background: u\rl(   https://example.com/image.png   );
-  background: url(   
-    https://example.com/image.png
-    );
-  background: url(
-
-
-https://example.com/image.png
-
-
-    );
-  background: url(image.png\D799);
+  background: url(https://example.com/image.png);
+  background: url(https://example.com/image.png);
+  background: url(https://example.com/image.png);
+  background: url(https://example.com/image.png);
+  background: url(image.png힙);
 }
 div {
   background: url(foo.img) red;
 }
 * {
-  background: url('foo');
-  background: url('f o');
-  background: url('f  o');
-  background: url('foo)');
-  background: url('(foo');
-  background: url('(foo)');
-  background: url('\"foo\"');
+  background: url("foo");
+  background: url("f o");
+  background: url("f  o");
+  background: url("foo)");
+  background: url("(foo");
+  background: url("(foo)");
+  background: url("\"foo\"");
 }
 .bar {
   background: url(http://example.com/image.svg param(--color var(--primary-color)));
@@ -56,3 +48,7 @@ div {
 .foo {
   background: url(foo bar);
 }
+.bar {
+  background: url(foo\\\\bar);
+  background: url("foo\\\\bar");
+}
diff --git a/crates/swc_css_codegen/tests/fixture/values/url/1/output.min.css b/crates/swc_css_codegen/tests/fixture/values/url/1/output.min.css
index bc74529286bb..413898717559 100644
--- a/crates/swc_css_codegen/tests/fixture/values/url/1/output.min.css
+++ b/crates/swc_css_codegen/tests/fixture/values/url/1/output.min.css
@@ -1 +1 @@
-div{background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url(data:image/png;base64,iRxVB0);background:url(#IDofSVGpath);background:url("//aa.com/img.svg"prefetch);background:url("//aa.com/img.svg"foo bar baz func(test));background:url("http://example.com/image.svg"param(--color var(--primary-color)));background:url();background:url("");background:url("");--foo:"http://www.example.com/pinkish.gif";background:src("http://www.example.com/pinkish.gif");background:src("http://www.example.com/pinkish.gif");background:src(var(--foo));background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(image.png힙)}div{background:url(foo.img)red}*{background:url("foo");background:url("f o");background:url("f  o");background:url("foo)");background:url("(foo");background:url("(foo)");background:url('"foo"')}.bar{background:url(http://example.com/image.svg param(--color var(--primary-color)))}.baz{background:url("http://example.com/image.svg"param(--color var(--primary-color)))}.foo{background:url(__ident__)}.foo{background:url(foo bar)}
+div{background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url("https://example.com/image.png");background:url(data:image/png;base64,iRxVB0);background:url(#IDofSVGpath);background:url("//aa.com/img.svg"prefetch);background:url("//aa.com/img.svg"foo bar baz func(test));background:url("http://example.com/image.svg"param(--color var(--primary-color)));background:url();background:url("");background:url("");--foo:"http://www.example.com/pinkish.gif";background:src("http://www.example.com/pinkish.gif");background:src("http://www.example.com/pinkish.gif");background:src(var(--foo));background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(https://example.com/image.png);background:url(image.png힙)}div{background:url(foo.img)red}*{background:url("foo");background:url("f o");background:url("f  o");background:url("foo)");background:url("(foo");background:url("(foo)");background:url('"foo"')}.bar{background:url(http://example.com/image.svg param(--color var(--primary-color)))}.baz{background:url("http://example.com/image.svg"param(--color var(--primary-color)))}.foo{background:url(__ident__)}.foo{background:url(foo bar)}.bar{background:url(foo\\\\bar);background:url("foo\\\\bar")}
diff --git a/crates/swc_css_compat/tests/color-hex-alpha/input.expect.css b/crates/swc_css_compat/tests/color-hex-alpha/input.expect.css
index ce45e740254d..266dea7eb486 100644
--- a/crates/swc_css_compat/tests/color-hex-alpha/input.expect.css
+++ b/crates/swc_css_compat/tests/color-hex-alpha/input.expect.css
@@ -6,7 +6,7 @@ body {
   color: #fc0;
   color: #0000ff;
   color: rgba(0, 0, 255, 0);
-  color: #FFFFFF;
+  color: #ffffff;
   content: "#f00";
   content: "#0000ff00";
 }
diff --git a/crates/swc_css_compat/tests/color-legacy/input.expect.css b/crates/swc_css_compat/tests/color-legacy/input.expect.css
index 49cdb8cf1b8d..cf0cc6e6351d 100644
--- a/crates/swc_css_compat/tests/color-legacy/input.expect.css
+++ b/crates/swc_css_compat/tests/color-legacy/input.expect.css
@@ -1,7 +1,7 @@
 .test-rgb {
   color: rgb(178, 34, 34);
   color: rgba(178, 34, 34, 1);
-  color: rgba(178, 34, 34, .5);
+  color: rgba(178, 34, 34, 0.5);
   color: rgba(178, 34, 34, 1);
   color: rgba(178, 34, 34, 0.5);
   color: rgba(178, 34, 34, var(--alpha-50));
@@ -9,10 +9,10 @@
 }
 .test-rgba {
   color: rgb(178, 34, 34);
-  color: rgbA(178, 34, 34, 1);
-  color: rgba(178, 34, 34, .5);
-  color: rgba(178, 34, 34, VaR(--alpha-50));
-  color: rgba(178, 34, 34, CaLC(1 / 2));
+  color: rgba(178, 34, 34, 1);
+  color: rgba(178, 34, 34, 0.5);
+  color: rgba(178, 34, 34, var(--alpha-50));
+  color: rgba(178, 34, 34, calc(1 / 2));
 }
 .test-rgb-percentages {
   color: rgb(179, 34, 34);
@@ -24,7 +24,7 @@
   color: hsl(120, 100%, 50%);
   color: hsl(120, 100%, 50%);
   color: hsla(120, 100%, 50%, 1);
-  color: hsla(120, 100%, 50%, .5);
+  color: hsla(120, 100%, 50%, 0.5);
   color: hsla(120, 100%, 50%, 1);
   color: hsla(120, 100%, 50%, 0.5);
   color: hsl(120, 100%, 50%);
@@ -37,7 +37,7 @@
 .test-hsla {
   color: hsl(120, 100%, 50%);
   color: hsla(120, 100%, 50%, 1);
-  color: hsla(120, 100%, 50%, .5);
+  color: hsla(120, 100%, 50%, 0.5);
   color: hsla(120, 100%, 50%, 1);
   color: hsla(120, 100%, 50%, 0.5);
   color: hsla(120, 100%, 50%, var(--alpha-50));
@@ -47,7 +47,7 @@
   color: hwb(0deg 0% 0%);
   color: hwb(0 0% 0%);
   color: hwb(0 0% 0% / 1);
-  color: hwb(0 0% 0% / .5);
+  color: hwb(0 0% 0% / 0.5);
   color: hwb(0 0% 0% / 100%);
   color: hwb(0 0% 0% / 50%);
 }
@@ -79,7 +79,7 @@
 .test-ignore {
   color: rgba(0, 0, 0, 0.1);
   color: rgba(0, 0, 0, 0.2);
-  color: rGB(178, 34, 34);
+  color: rgb(178, 34, 34);
 }
 .order-0 {
   order: rgba(178, 34, 34, 1) !important;
@@ -115,7 +115,7 @@
   --some-var: rgba(178 34 34 / 1);
 }
 .content {
-  content: 'rgba(178 34 34 / 1)';
+  content: "rgba(178 34 34 / 1)";
 }
 @supports (order: rgba(178 34 34/ 1)) {
   .support {
@@ -156,7 +156,7 @@
   --some-var: hsl(120 100% 50% / 1);
 }
 .content {
-  content: 'hsl(120 100% 50% / 1)';
+  content: "hsl(120 100% 50% / 1)";
 }
 @supports (order: hsl(120 100% 50% / 1)) {
   .support {
diff --git a/crates/swc_css_compat/tests/media-query-ranges/input.expect.css b/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
index f42502b0c6e7..ebe4878d5e74 100644
--- a/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
+++ b/crates/swc_css_compat/tests/media-query-ranges/input.expect.css
@@ -100,7 +100,7 @@
     color: red;
   }
 }
-@media screen and ((min-resolution: .5dppx) and (max-resolution: 2.5dppx)) {
+@media screen and ((min-resolution: 0.5dppx) and (max-resolution: 2.5dppx)) {
   a {
     color: red;
   }
@@ -155,7 +155,7 @@
     color: red;
   }
 }
-@media screen and (min-width: -0.58px) and (max-width: .99px) {
+@media screen and (min-width: -0.58px) and (max-width: 0.99px) {
   a {
     color: red;
   }
@@ -280,7 +280,7 @@
     color: red;
   }
 }
-@media screen and (device-width) and ((min-device-width: .08px) and (max-device-width: 0.68px)) {
+@media screen and (device-width) and ((min-device-width: 0.08px) and (max-device-width: 0.68px)) {
   a {
     color: red;
   }
@@ -300,7 +300,7 @@
     color: red;
   }
 }
-@media screen and (device-height) and ((min-device-height: .08px) and (max-device-height: 0.68px)) {
+@media screen and (device-height) and ((min-device-height: 0.08px) and (max-device-height: 0.68px)) {
   a {
     color: red;
   }
@@ -390,7 +390,7 @@
     color: red;
   }
 }
-@media screen and (width) and ((min-width: .08px) and (max-width: 0.68px)) {
+@media screen and (width) and ((min-width: 0.08px) and (max-width: 0.68px)) {
   a {
     color: red;
   }
@@ -410,7 +410,7 @@
     color: red;
   }
 }
-@media screen and (height) and ((min-height: .08px) and (max-height: 0.68px)) {
+@media screen and (height) and ((min-height: 0.08px) and (max-height: 0.68px)) {
   a {
     color: red;
   }
diff --git a/crates/swc_css_compat/tests/nesting/basic/input.expect.css b/crates/swc_css_compat/tests/nesting/basic/input.expect.css
index 3542ee38d433..0a9aba106350 100644
--- a/crates/swc_css_compat/tests/nesting/basic/input.expect.css
+++ b/crates/swc_css_compat/tests/nesting/basic/input.expect.css
@@ -65,7 +65,7 @@ figure > figcaption {
   background: hsl(0 0% 0% / 50%);
 }
 figure > figcaption > p {
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 .foo {
   color: blue;
@@ -186,7 +186,7 @@ figure > figcaption {
   background: hsl(0 0% 0% / 50%);
 }
 figure > figcaption > p {
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 @layer base {
   html {
diff --git a/crates/swc_css_compat/tests/selector-not/input.expect.css b/crates/swc_css_compat/tests/selector-not/input.expect.css
index 263a3adc020f..19cac683b14b 100644
--- a/crates/swc_css_compat/tests/selector-not/input.expect.css
+++ b/crates/swc_css_compat/tests/selector-not/input.expect.css
@@ -2,7 +2,7 @@ body {
   order: 1;
 }
 body, 
-Not {
+not {
   order: 2;
 }
 em[attr=:not],
@@ -23,7 +23,7 @@ em[not="abc"] {
 :not(a):not(b) {
   order: 7;
 }
-:nOt(a):nOt(b) {
+:not(a):not(b) {
   order: 7.1;
 }
 tag:not(.class):not(.class2) {
diff --git a/crates/swc_css_lints/src/rules/color_no_invalid_hex.rs b/crates/swc_css_lints/src/rules/color_no_invalid_hex.rs
index 6b8e732503ce..70dc89a544ad 100644
--- a/crates/swc_css_lints/src/rules/color_no_invalid_hex.rs
+++ b/crates/swc_css_lints/src/rules/color_no_invalid_hex.rs
@@ -24,6 +24,7 @@ impl Visit for ColorNoInvalidHex {
         }
 
         let message = format!("Unexpected invalid hex color '#{}'.", value);
+
         self.ctx.report(hex_color, message);
 
         hex_color.visit_children_with(self);
diff --git a/crates/swc_css_lints/tests/rules/fail/color-no-invalid-hex/output.swc-stderr b/crates/swc_css_lints/tests/rules/fail/color-no-invalid-hex/output.swc-stderr
index 35a6773aa8f2..7e2a19abfebc 100644
--- a/crates/swc_css_lints/tests/rules/fail/color-no-invalid-hex/output.swc-stderr
+++ b/crates/swc_css_lints/tests/rules/fail/color-no-invalid-hex/output.swc-stderr
@@ -14,19 +14,3 @@
    :              ^^^
  7 | }
    `----
-
-  x Unexpected invalid hex color '#12345abcdefg'.
-    ,-[$DIR/tests/rules/fail/color-no-invalid-hex/input.css:9:1]
-  9 | a {
- 10 |     color: #12345abcdefg;
-    :            ^^^^^^^^^^^^^
- 11 | }
-    `----
-
-  x Unexpected invalid hex color '#xyz'.
-    ,-[$DIR/tests/rules/fail/color-no-invalid-hex/input.css:13:1]
- 13 | a {
- 14 |     color: #xyz;
-    :            ^^^^
- 15 | }
-    `----
diff --git a/crates/swc_css_minifier/src/compressor/mod.rs b/crates/swc_css_minifier/src/compressor/mod.rs
index 6541243638a7..a287550b4f63 100644
--- a/crates/swc_css_minifier/src/compressor/mod.rs
+++ b/crates/swc_css_minifier/src/compressor/mod.rs
@@ -42,7 +42,7 @@ struct Compressor {
 impl Compressor {
     #[inline]
     fn is_ident_shorter_than_str(&self, input: &str) -> bool {
-        let escaped = serialize_ident(input, None, true);
+        let escaped = serialize_ident(input, true);
 
         // escaped: without double quotes, so need plus 2 here
         escaped.len() < input.len() + 2
diff --git a/crates/swc_css_minifier/src/compressor/url.rs b/crates/swc_css_minifier/src/compressor/url.rs
index 6a5135d45b91..f5e700a25dbd 100644
--- a/crates/swc_css_minifier/src/compressor/url.rs
+++ b/crates/swc_css_minifier/src/compressor/url.rs
@@ -16,36 +16,27 @@ impl Compressor {
         }
 
         if let Some(UrlValue::Str(Str { value, span, .. })) = url.value.as_deref() {
-            let mut escaped = String::with_capacity(value.len());
-            let mut has_escaped = false;
+            let mut counter = 0;
 
             for c in value.chars() {
+                if counter == 2 {
+                    return;
+                }
+
                 match c {
                     '(' | ')' | '"' | '\'' => {
-                        if has_escaped {
-                            return;
-                        }
-
-                        has_escaped = true;
-                        escaped.push('\\');
-                        escaped.push(c)
+                        counter += 1;
                     }
                     _ if c.is_whitespace() => {
-                        if has_escaped {
-                            return;
-                        }
-
-                        has_escaped = true;
-                        escaped.push('\\');
-                        escaped.push(c)
+                        counter += 1;
                     }
-                    _ => escaped.push(c),
+                    _ => {}
                 }
             }
 
             url.value = Some(Box::new(UrlValue::Raw(UrlValueRaw {
                 span: *span,
-                value: escaped.into(),
+                value: value.clone(),
                 raw: None,
             })));
         }
diff --git a/crates/swc_css_minifier/tests/fixture/compress-at-rule/import/output.min.css b/crates/swc_css_minifier/tests/fixture/compress-at-rule/import/output.min.css
index 62ce8e1116b7..f97c7e96c98a 100644
--- a/crates/swc_css_minifier/tests/fixture/compress-at-rule/import/output.min.css
+++ b/crates/swc_css_minifier/tests/fixture/compress-at-rule/import/output.min.css
@@ -1 +1 @@
-@import"custom.css";@import"custom.css";@import"custom.css";@import"custom.css";@import"custom.css";@import"custo\\(m.css";@import"custom.css"screen and (orientation:landscape);@import"fallback-layout.css"supports(not (display:flex));@import"mystyle.css"supports(display:flex);@import"mystyle.css"supports((display:flex));
+@import"custom.css";@import"custom.css";@import"custom.css";@import"custom.css";@import"custom.css";@import"custo(m.css";@import"custom.css"screen and (orientation:landscape);@import"fallback-layout.css"supports(not (display:flex));@import"mystyle.css"supports(display:flex);@import"mystyle.css"supports((display:flex));
diff --git a/crates/swc_css_modules/tests/fixture/basic-css-style-sheet.compiled.css b/crates/swc_css_modules/tests/fixture/basic-css-style-sheet.compiled.css
index c6d6741bf35f..f77ce61038a1 100644
--- a/crates/swc_css_modules/tests/fixture/basic-css-style-sheet.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/basic-css-style-sheet.compiled.css
@@ -18,7 +18,7 @@
   a: b c d;
 }
 .__local__class {
-  content: "\F10C";
+  content: "";
 }
 @media only screen and (max-width: 600px) {
   body {
@@ -26,11 +26,11 @@
   }
 }
 .__local__class {
-  content: "\2193";
-  content: "\2193\2193";
-  content: "\2193 \2193";
-  content: "\2193\2193\2193";
-  content: "\2193 \2193 \2193";
+  content: "↓";
+  content: "↓↓";
+  content: "↓↓";
+  content: "↓↓↓";
+  content: "↓↓↓";
 }
 .__local__-top {}
 .__local__-top {}
@@ -55,13 +55,13 @@
 .__local__u-m00002b {}
 #__local__u-m\+ {}
 body {
-  font-family: '微软雅黑';
+  font-family: "微软雅黑";
 }
 .__local__myStyle {
-  content: '\e901';
+  content: "";
 }
 .__local__myStyle {
-  content: '\E901';
+  content: "";
 }
 .__local__♫ {}
 .__local__\:\`\( {}
@@ -84,23 +84,23 @@ body {
   };
 }
 .__local__test {
-  content: "\2014\A0";
-  content: "\2014 \A0";
-  content: "\A0 \2014";
-  content: "\A0\2014";
-  margin-top: 1px\9;
+  content: "— ";
+  content: "— ";
+  content: " —";
+  content: " —";
+  margin-top: 1px\9 ;
   background-color: #000\9;
 }
 .__local__light.__local__on .__local__bulb:before {
-  content: '💡';
+  content: "💡";
 }
 .__local__base64 {
   background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==);
 }
-a[href=''] {
+a[href=""] {
   color: red;
 }
-a[href='' i] {
+a[href="" i] {
   color: red;
 }
 a[href=""] {
diff --git a/crates/swc_css_modules/tests/fixture/basic.compiled.css b/crates/swc_css_modules/tests/fixture/basic.compiled.css
index aaff46c920d2..3b4b050b8344 100644
--- a/crates/swc_css_modules/tests/fixture/basic.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/basic.compiled.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import 'imported.css';
+@import "imported.css";
 .__local__class {
   color: red;
   background: url("./url/img.png");
@@ -19,7 +19,7 @@
   a: b c d;
 }
 .__local__class {
-  content: "\F10C";
+  content: "";
 }
 @media only screen and (max-width: 600px) {
   body {
@@ -27,11 +27,11 @@
   }
 }
 .__local__class {
-  content: "\2193";
-  content: "\2193\2193";
-  content: "\2193 \2193";
-  content: "\2193\2193\2193";
-  content: "\2193 \2193 \2193";
+  content: "↓";
+  content: "↓↓";
+  content: "↓↓";
+  content: "↓↓↓";
+  content: "↓↓↓";
 }
 .__local__-top {}
 .__local__-top {}
@@ -56,13 +56,13 @@
 .__local__u-m00002b {}
 #__local__u-m\+ {}
 body {
-  font-family: '微软雅黑';
+  font-family: "微软雅黑";
 }
 .__local__myStyle {
-  content: '\e901';
+  content: "";
 }
 .__local__myStyle {
-  content: '\E901';
+  content: "";
 }
 .__local__♫ {}
 .__local__\:\`\( {}
@@ -85,23 +85,23 @@ body {
   };
 }
 .__local__test {
-  content: "\2014\A0";
-  content: "\2014 \A0";
-  content: "\A0 \2014";
-  content: "\A0\2014";
-  margin-top: 1px\9;
+  content: "— ";
+  content: "— ";
+  content: " —";
+  content: " —";
+  margin-top: 1px\9 ;
   background-color: #000\9;
 }
 .__local__light.__local__on .__local__bulb:before {
-  content: '💡';
+  content: "💡";
 }
 .__local__base64 {
   background: url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAhxJREFUSA3tk71rU1EYxnMTEoJUkowWwdJ2akEHBfGjCiIF6ZylVUKSm2TqZLGI+A/oIu2UXm8C4lAyF4SWji0tdFLo1Eo7VN0SaBEhH7e/Nz0nPTfGOjiaCyfPc5734zlfCQT6X/8E/vUErL81KBaL9y3LSnued5PcITjUOwR3gsFg2bbtjYt6/NGgXC4P1et1l2aPLmpAbD0SidjpdPqgV15PA9d17zQajU8UxHQRK/4G35Q5pveAK8LlI1ZjPMnlcltnyvnvbwaO41xvtVqy7YHztMACq5xnlb9EY3dRdvcGo1kj5wR+t1AofDG0gM+A875E8DNjRCexsrV8Pj9ZqVQitVrtqejxePxjMpmss5hVTB4buXvMb2DyU2tBTRS+BjvNlVYUpPl7iuVO3Gq1uoQx1FtSOW1gPgp5ZWrdBtNmUDgv5asgxQ8F1af5vhY0YjyjuWC3wTszKJz7GBOkcFlQfW2ONq4FjWi+Hj6DRCKxQOK2TlY4x92EuYd5dvMAbYIzfikau3pu5tJ8KxaLLfo0cyKci7tK4TZjUMcoXAmHwzle0Q/RaC5P1GFMyVx9R9Fo9HYqlTrSgqDvFelAqVQa5hmuMR/WGtjAaBdjwBoDQ0ZsnwVMZjKZ9n0Zem8DSeDPdrnZbL6F2l3NOvUYNZk4oVDoRTabPe4EDNJzB0ZcjAYxeoZ2i3FNxQ7BHYw/cB/fldaH//UETgHHO8S44KbfXgAAAABJRU5ErkJggg==);
 }
-a[href=''] {
+a[href=""] {
   color: red;
 }
-a[href='' i] {
+a[href="" i] {
   color: red;
 }
 a[href=""] {
diff --git a/crates/swc_css_modules/tests/fixture/es-module/source.compiled.css b/crates/swc_css_modules/tests/fixture/es-module/source.compiled.css
index b2ba0f462d5a..ddc31aa65c13 100644
--- a/crates/swc_css_modules/tests/fixture/es-module/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/es-module/source.compiled.css
@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@import './imported.css';
+@import "./imported.css";
 .__local__class {
   color: red;
   background: url("./img.png");
diff --git a/crates/swc_css_modules/tests/fixture/import/import-multiple-with-layer.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-multiple-with-layer.compiled.css
index c6dca5b23fb3..a8cca84bc9c6 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-multiple-with-layer.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-multiple-with-layer.compiled.css
@@ -1,5 +1,5 @@
-@import url('./test.css') layer(base);
-@import url('./relative.css') layer(base);
+@import url("./test.css") layer(base);
+@import url("./relative.css") layer(base);
 @layer base {
   .__local__foo {
     color: red;
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-layer-and-supports.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-layer-and-supports.compiled.css
index cc63ebeb4c93..cb1f07e58a75 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-layer-and-supports.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-layer-and-supports.compiled.css
@@ -1 +1 @@
-@import url('./test.css') layer(base);
+@import url("./test.css") layer(base);
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-layer-unnamed.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-layer-unnamed.compiled.css
index 6b4900f05f4d..6a9ce76dbfea 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-layer-unnamed.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-layer-unnamed.compiled.css
@@ -1 +1 @@
-@import url('./test.css') layer;
+@import url("./test.css") layer;
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-layer.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-layer.compiled.css
index e4a00c21dd7e..22ef5b98482a 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-layer.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-layer.compiled.css
@@ -1,4 +1,4 @@
-@import url('./test.css') layer(base);
+@import url("./test.css") layer(base);
 @layer base {
   .__local__foo {
     color: red;
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-media.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-media.compiled.css
index c0139dc37bb5..90731e307dfc 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-media.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-media.compiled.css
@@ -1 +1 @@
-@import url('./test.css') screen and (max-width: 1200px);
+@import url("./test.css") screen and (max-width: 1200px);
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-supports-and-media.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-supports-and-media.compiled.css
index b784d2426de1..9a34085c7598 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-supports-and-media.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-supports-and-media.compiled.css
@@ -1 +1 @@
-@import url('./test.css') supports(display: grid) screen and (max-width: 1200px);
+@import url("./test.css") supports(display: grid) screen and (max-width: 1200px);
diff --git a/crates/swc_css_modules/tests/fixture/import/import-with-supports.compiled.css b/crates/swc_css_modules/tests/fixture/import/import-with-supports.compiled.css
index d0a0b354ef88..2e9eadd744f2 100644
--- a/crates/swc_css_modules/tests/fixture/import/import-with-supports.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import-with-supports.compiled.css
@@ -1 +1 @@
-@import url('./test.css') supports(display: grid);
+@import url("./test.css") supports(display: grid);
diff --git a/crates/swc_css_modules/tests/fixture/import/import.compiled.css b/crates/swc_css_modules/tests/fixture/import/import.compiled.css
index 4c70ddf7a202..e802fef47672 100644
--- a/crates/swc_css_modules/tests/fixture/import/import.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/import.compiled.css
@@ -1,29 +1,27 @@
 @import url(test.css);
-@import url('test.css');
 @import url("test.css");
-@IMPORT url(test.css);
-@import URL(test.css);
-@import url(test.css );
-@import url( test.css);
-@import url( test.css );
-@import url(
-  test.css
-);
+@import url("test.css");
+@import url(test.css);
+@import url(test.css);
+@import url(test.css);
+@import url(test.css);
+@import url(test.css);
+@import url(test.css);
 @import url();
-@import url('');
+@import url("");
 @import url("");
 @import "test.css";
-@import 'test.css';
-@import '';
+@import "test.css";
+@import "";
 @import "";
 @import "   ";
 @import "
 ";
 @import url();
-@import url('');
+@import url("");
 @import url("");
 @import url(test.css) screen and (orientation: landscape);
-@import url(test.css) SCREEN AND (ORIENTATION: LANDSCAPE);
+@import url(test.css) SCREEN and (ORIENTATION: LANDSCAPE);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test.css) screen and (orientation: landscape);
 @import url(test-media.css) screen and (orientation: landscape);
@@ -41,90 +39,79 @@
 @import foo-bar;
 @import-normalize;
 @import url('http://') :root {}
-@import url('query.css?foo=1&bar=1');
-@import url('other-query.css?foo=1&bar=1#hash');
-@import url('other-query.css?foo=1&bar=1#hash') screen and (orientation: landscape);
-@import url('https://fonts.googleapis.com/css?family=Roboto');
-@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC');
-@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto');
+@import url("query.css?foo=1&bar=1");
+@import url("other-query.css?foo=1&bar=1#hash");
+@import url("other-query.css?foo=1&bar=1#hash") screen and (orientation: landscape);
+@import url("https://fonts.googleapis.com/css?family=Roboto");
+@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC");
+@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC|Roboto");
 .__local__class {
   a: b c d;
 }
 .__local__foo {
-  @import 'path.css';
+  @import "path.css";
 }
-@import url('./relative.css');
-@import url('../import/top-relative.css');
+@import url("./relative.css");
+@import url("../import/top-relative.css");
 @import url(~package/tilde.css);
 @import url(~aliasesImport/alias.css);
-@import url('./url.css');
+@import url("./url.css");
 .__local__background {
-  background: url('./img.png');
+  background: url("./img.png");
 }
 @import url(./test.css);
-@import './te\
-st.css';
-@import './te\
-\
-\
-st.css';
-@import url('./te\
-st.css');
-@import url('./te\
-\
-\
-st.css');
+@import "./test.css";
+@import "./test.css";
+@import url("./test.css");
+@import url("./test.css");
+@import "./te'st.css";
+@import url("./te'st.css");
 @import "./te'st.css";
 @import url("./te'st.css");
-@import './te\'st.css';
-@import url('./te\'st.css');
-@import './test test.css';
-@import url('./test test.css');
-@import './test\ test.css';
-@import url('./test\ test.css');
-@import './test%20test.css';
-@import url('./test%20test.css');
-@import './\74\65\73\74.css';
-@import url('./\74\65\73\74.css');
-@import './t\65\73\74.css';
-@import url('./t\65\73\74.css');
+@import "./test test.css";
+@import url("./test test.css");
+@import "./test test.css";
+@import url("./test test.css");
+@import "./test%20test.css";
+@import url("./test%20test.css");
+@import "./test.css";
+@import url("./test.css");
+@import "./test.css";
+@import url("./test.css");
 @import url(./test\ test.css);
-@import url(./t\65st%20test.css);
-@import url('./t\65st%20test.css');
-@import url("./t\65st%20test.css");
-@import "./t\65st%20test.css";
-@import './t\65st%20test.css';
-@import url(                 test.css                      );
+@import url(./test%20test.css);
+@import url("./test%20test.css");
+@import url("./test%20test.css");
+@import "./test%20test.css";
+@import "./test%20test.css";
+@import url(test.css);
 @import nourl(test.css);
-@import '\
-\
-\
-';
-@import url('!!../../helpers/string-loader.js?esModule=false!~package/tilde.css');
+@import "";
+@import url("!!../../helpers/string-loader.js?esModule=false!~package/tilde.css");
 @import url(test.css?foo=bar);
 @import url(test.css?foo=bar#hash);
 @import url(test.css?#hash);
 @import "test.css" supports(display: flex);
 @import "test.css" supports(display: flex) screen and (orientation: landscape);
-@import url('something.css');
-@import url('something.css');
-@import url('something.css?foo=bar');
-@import url('something.css?foo=bar');
-@import url('something.css?foo=bar#hash');
-@import url('something.css?foo=bar#hash');
-@import url('something.css?foo=bar');
-@import url('something.css?bar=foo');
-@import url('something.css?foo=bar#one');
-@import url('something.css?foo=bar#two');
-@import url('something.css?foo=1&bar=2');
-@import url('something.css?foo=2&bar=1');
+@import url("something.css");
+@import url("something.css");
+@import url("something.css?foo=bar");
+@import url("something.css?foo=bar");
+@import url("something.css?foo=bar#hash");
+@import url("something.css?foo=bar#hash");
+@import url("something.css?foo=bar");
+@import url("something.css?bar=foo");
+@import url("something.css?foo=bar#one");
+@import url("something.css?foo=bar#two");
+@import url("something.css?foo=1&bar=2");
+@import url("something.css?foo=2&bar=1");
 @import "   ./test.css   ";
-@import url('   ./test.css   ');
-@import url(   ./test.css   );
+@import url("   ./test.css   ");
+@import url(./test.css);
 @import "./my.scss";
-@import url('   https://fonts.googleapis.com/css?family=Roboto   ');
-@import url('!!../../helpers/string-loader.js?esModule=false!');
-@import url('   !!../../helpers/string-loader.js?esModule=false!~package/tilde.css   ');
+@import url("   https://fonts.googleapis.com/css?family=Roboto   ");
+@import url("!!../../helpers/string-loader.js?esModule=false!");
+@import url("   !!../../helpers/string-loader.js?esModule=false!~package/tilde.css   ");
 @import url(data:text/css;charset=utf-8,a%20%7B%0D%0A%20%20color%3A%20red%3B%0D%0A%7D);
 @import url(package/first.css);
 @import url(package/second.css);
@@ -143,7 +130,7 @@ st.css');
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
 @import url("./test.css") screen and (min-width: 400px);
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
-@import url("./test.css") LAYER(DEFAULT) SUPPORTS(DISPLAY: FLEX) SCREEN AND (MIN-WIDTH: 400PX);
+@import url("./test.css") layer(DEFAULT) supports(display: FLEX) SCREEN and (MIN-WIDTH: 400px);
 @import url("./test.css") layer(default) supports(display: flex) screen and (min-width: 400px);
 @import url(test.css);
 @import url(test.css);
@@ -154,7 +141,7 @@ st.css');
 @import url("./import-with-supports.css") supports(display: flex);
 @import url("./import-with-supports.css") supports(((display: flex)));
 @import url("./deep-import-with-supports.css") supports(display: flex);
-@import url('./test.css') supports(display: grid);
+@import url("./test.css") supports(display: grid);
 @import url("./import-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px);
 @import url("./import-deep-with-supports-and-media.css") supports(display: flex) screen and (min-width: 400px);
 @import url("./test.css") layer(framework);
diff --git a/crates/swc_css_modules/tests/fixture/import/order-3.compiled.css b/crates/swc_css_modules/tests/fixture/import/order-3.compiled.css
index 0de521ae824d..d98a09322513 100644
--- a/crates/swc_css_modules/tests/fixture/import/order-3.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/order-3.compiled.css
@@ -1,4 +1,4 @@
-@import url('./order-3-1.css') screen and (orientation: landscape);
+@import url("./order-3-1.css") screen and (orientation: landscape);
 .__local__order-3 {
   color: red;
 }
diff --git a/crates/swc_css_modules/tests/fixture/import/order-4-2.compiled.css b/crates/swc_css_modules/tests/fixture/import/order-4-2.compiled.css
index 849bcb437833..745d1cd0559e 100644
--- a/crates/swc_css_modules/tests/fixture/import/order-4-2.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/order-4-2.compiled.css
@@ -1,5 +1,5 @@
-@import url('./order-4-2-1.css');
-@import url('./order-4-2-2.css') (orientation: landscape);
+@import url("./order-4-2-1.css");
+@import url("./order-4-2-2.css") (orientation: landscape);
 .__local__order-4-2 {
   color: red;
 }
diff --git a/crates/swc_css_modules/tests/fixture/import/order-4.compiled.css b/crates/swc_css_modules/tests/fixture/import/order-4.compiled.css
index e8af6809819c..715b55b78367 100644
--- a/crates/swc_css_modules/tests/fixture/import/order-4.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/order-4.compiled.css
@@ -1,5 +1,5 @@
-@import url('./order-4-1.css') (min-width: 1000px);
-@import url('./order-4-2.css') (min-width: 2000px);
+@import url("./order-4-1.css") (min-width: 1000px);
+@import url("./order-4-2.css") (min-width: 2000px);
 .__local__order-4 {
   color: red;
 }
diff --git a/crates/swc_css_modules/tests/fixture/import/order.compiled.css b/crates/swc_css_modules/tests/fixture/import/order.compiled.css
index 77f6b74615c9..079252bcbd8e 100644
--- a/crates/swc_css_modules/tests/fixture/import/order.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/order.compiled.css
@@ -1,14 +1,14 @@
-@import url('./order-1.css');
+@import url("./order-1.css");
 @import url(http://example.com/style.css);
-@import url('./order-2.css');
+@import url("./order-2.css");
 @import url(http://example.com/style.css);
-@import url('./order-1.css');
+@import url("./order-1.css");
 @import url(http://example.com/style.css);
-@import url('./order-2.css') screen and (min-width: 2000px);
+@import url("./order-2.css") screen and (min-width: 2000px);
 @import url(http://example.com/style.css);
-@import url('./order-3.css');
+@import url("./order-3.css");
 @import url(http://example.com/style.css);
-@import url('./order-4.css') screen;
+@import url("./order-4.css") screen;
 div {
   width: 100%;
   height: 200px;
diff --git a/crates/swc_css_modules/tests/fixture/import/test-media.compiled.css b/crates/swc_css_modules/tests/fixture/import/test-media.compiled.css
index 7168dfbde698..f218ade4e158 100644
--- a/crates/swc_css_modules/tests/fixture/import/test-media.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/test-media.compiled.css
@@ -1,4 +1,4 @@
-@import url('test-nested-media.css') (min-width: 100px);
+@import url("test-nested-media.css") (min-width: 100px);
 .__local__test {
   c: c;
 }
diff --git a/crates/swc_css_modules/tests/fixture/import/url.compiled.css b/crates/swc_css_modules/tests/fixture/import/url.compiled.css
index 0fff09cb9076..832ee869a621 100644
--- a/crates/swc_css_modules/tests/fixture/import/url.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/import/url.compiled.css
@@ -1,3 +1,3 @@
 .__local__background-imported {
-  background: url('./img.png');
+  background: url("./img.png");
 }
diff --git a/crates/swc_css_modules/tests/fixture/modules/tests-cases/issue-589/source.compiled.css b/crates/swc_css_modules/tests/fixture/modules/tests-cases/issue-589/source.compiled.css
index f3ed67a14f65..d53b8006066f 100644
--- a/crates/swc_css_modules/tests/fixture/modules/tests-cases/issue-589/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/modules/tests-cases/issue-589/source.compiled.css
@@ -1,4 +1,4 @@
 body:before {
-  content: '';
-  background: url('!!file-loader?esModule=false!./img.png');
+  content: "";
+  background: url("!!file-loader?esModule=false!./img.png");
 }
diff --git a/crates/swc_css_modules/tests/fixture/modules/tests-cases/keyframes-and-animation/source.compiled.css b/crates/swc_css_modules/tests/fixture/modules/tests-cases/keyframes-and-animation/source.compiled.css
index e30ba4589c9d..643b63e187e5 100644
--- a/crates/swc_css_modules/tests/fixture/modules/tests-cases/keyframes-and-animation/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/modules/tests-cases/keyframes-and-animation/source.compiled.css
@@ -3,21 +3,21 @@
 }
 @keyframes __local__bounce {
   0% {
-    transform: translateY(-100%);
+    transform: translatey(-100%);
     opacity: 0;
   }
   5% {
-    transform: translateY(-100%);
+    transform: translatey(-100%);
     opacity: 0;
   }
 }
 @-webkit-keyframes __local__bounce2 {
   0% {
-    transform: translateY(-100%);
+    transform: translatey(-100%);
     opacity: 0;
   }
   5% {
-    transform: translateY(-100%);
+    transform: translatey(-100%);
     opacity: 0;
   }
 }
diff --git a/crates/swc_css_modules/tests/fixture/modules/tests-cases/media-2/source.compiled.css b/crates/swc_css_modules/tests/fixture/modules/tests-cases/media-2/source.compiled.css
index 770975480937..422b15eebc00 100644
--- a/crates/swc_css_modules/tests/fixture/modules/tests-cases/media-2/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/modules/tests-cases/media-2/source.compiled.css
@@ -1,6 +1,6 @@
 @value small from './file.css';
 @media small {
   .__local__header {
-    box-shadow: 0 0 4px #1F4F7F;
+    box-shadow: 0 0 4px #1f4f7f;
   }
 }
diff --git a/crates/swc_css_modules/tests/fixture/modules/tests-cases/media/source.compiled.css b/crates/swc_css_modules/tests/fixture/modules/tests-cases/media/source.compiled.css
index b982461b3c73..824ac25d2ab5 100644
--- a/crates/swc_css_modules/tests/fixture/modules/tests-cases/media/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/modules/tests-cases/media/source.compiled.css
@@ -1,6 +1,6 @@
 @value small: (max-width: 599px);
 @media small {
   .__local__header {
-    box-shadow: 0 0 4px #1F4F7F;
+    box-shadow: 0 0 4px #1f4f7f;
   }
 }
diff --git a/crates/swc_css_modules/tests/fixture/modules/tests-cases/urls/source.compiled.css b/crates/swc_css_modules/tests/fixture/modules/tests-cases/urls/source.compiled.css
index 20d3722a1402..2662edf96f3b 100644
--- a/crates/swc_css_modules/tests/fixture/modules/tests-cases/urls/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/modules/tests-cases/urls/source.compiled.css
@@ -2,13 +2,13 @@
   background: url(./img.png);
   background: url("./img.png");
   background: url("./img img.png");
-  background: url('./img img.png');
-  background: url('./img.png');
+  background: url("./img img.png");
+  background: url("./img.png");
   background: url("./img.png#?iefix");
   background: url("#hash");
   background: url("#");
   background: url(data:image/png;base64,AAA);
   background: url(http://example.com/image.jpg);
   background: url(//example.com/image.png);
-  background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) url(./img.png) url('./img img.png') xyz;
+  background: green url(data:image/png;base64,AAA) url(http://example.com/image.jpg) url(//example.com/image.png) url(./img.png) url("./img img.png") xyz;
 }
diff --git a/crates/swc_css_modules/tests/fixture/nested-import/source.compiled.css b/crates/swc_css_modules/tests/fixture/nested-import/source.compiled.css
index 7709b85ad202..0976e53b88f1 100644
--- a/crates/swc_css_modules/tests/fixture/nested-import/source.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/nested-import/source.compiled.css
@@ -1,5 +1,5 @@
-@import './imported.css';
-@import './other-imported.css';
+@import "./imported.css";
+@import "./other-imported.css";
 .__local__foo {
   color: red;
   color: rgb(0 0 100% / 90%);
diff --git a/crates/swc_css_modules/tests/fixture/other-loader-query.compiled.css b/crates/swc_css_modules/tests/fixture/other-loader-query.compiled.css
index 2e3c2142b233..b20185e69c5c 100644
--- a/crates/swc_css_modules/tests/fixture/other-loader-query.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/other-loader-query.compiled.css
@@ -1,3 +1,3 @@
 .__local__example {
-  background-image: url('./url/image.svg?color=%23BAAFDB%3F#foo');
+  background-image: url("./url/image.svg?color=%23BAAFDB%3F#foo");
 }
diff --git a/crates/swc_css_modules/tests/fixture/url/imported.compiled.css b/crates/swc_css_modules/tests/fixture/url/imported.compiled.css
index 132ad339268d..1abddc9d9aea 100644
--- a/crates/swc_css_modules/tests/fixture/url/imported.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/url/imported.compiled.css
@@ -1,3 +1,3 @@
 .__local__bar {
-  background: url('./img-from-imported.png');
+  background: url("./img-from-imported.png");
 }
diff --git a/crates/swc_css_modules/tests/fixture/url/url-unresolved.compiled.css b/crates/swc_css_modules/tests/fixture/url/url-unresolved.compiled.css
index 231b288a4889..5a324be5af2a 100644
--- a/crates/swc_css_modules/tests/fixture/url/url-unresolved.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/url/url-unresolved.compiled.css
@@ -1,3 +1,3 @@
 .__local__class {
-  background: url('unresolved.png');
+  background: url("unresolved.png");
 }
diff --git a/crates/swc_css_modules/tests/fixture/url/url.compiled.css b/crates/swc_css_modules/tests/fixture/url/url.compiled.css
index 0f44fdcd8d54..a8b66734d592 100644
--- a/crates/swc_css_modules/tests/fixture/url/url.compiled.css
+++ b/crates/swc_css_modules/tests/fixture/url/url.compiled.css
@@ -1,6 +1,6 @@
 @import "./imported.css";
 .__local__class {
-  background: url('./img.png');
+  background: url("./img.png");
 }
 .__local__class {
   background: url("./img.png");
@@ -15,13 +15,13 @@
   background: url("./img.png");
 }
 .__local__class {
-  background: green url('./img.png') xyz;
+  background: green url("./img.png") xyz;
 }
 .__local__class {
   background: green url("./img.png") xyz;
 }
 .__local__class {
-  background: green url( ./img.png ) xyz;
+  background: green url(./img.png) xyz;
 }
 .__local__class {
   background: green url(~package/img.png) url(./other-img.png) xyz;
@@ -30,7 +30,7 @@
   background: green url("./img img.png") xyz;
 }
 .__local__class {
-  background: green url('./img img.png') xyz;
+  background: green url("./img img.png") xyz;
 }
 .__local__class {
   background: green url(/img.png) xyz;
@@ -45,19 +45,19 @@
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2042%2026%27%20fill%3D%27%2523007aff%27%3E%3Crect%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%271%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2711%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2712%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3Crect%20y%3D%2722%27%20width%3D%274%27%20height%3D%274%27%2F%3E%3Crect%20x%3D%278%27%20y%3D%2723%27%20width%3D%2734%27%20height%3D%272%27%2F%3E%3C%2Fsvg%3E");
 }
 .__local__class {
-  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="0" /><feOffset dx="1" dy="2" result="offsetblur" /><feFlood flood-color="rgba(255,255,255,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
+  filter: url("data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"filter\"><feGaussianBlur in=\"SourceAlpha\" stdDeviation=\"0\" /><feOffset dx=\"1\" dy=\"2\" result=\"offsetblur\" /><feFlood flood-color=\"rgba(255,255,255,1)\" /><feComposite in2=\"offsetblur\" operator=\"in\" /><feMerge><feMergeNode /><feMergeNode in=\"SourceGraphic\" /></feMerge></filter></svg>#filter");
 }
 .__local__class {
-  filter: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%3Cfilter%20id%3D%5C%22filter%5C%22%3E%3CfeGaussianBlur%20in%3D%5C%22SourceAlpha%5C%22%20stdDeviation%3D%5C%220%5C%22%20%2F%3E%3CfeOffset%20dx%3D%5C%221%5C%22%20dy%3D%5C%222%5C%22%20result%3D%5C%22offsetblur%5C%22%20%2F%3E%3CfeFlood%20flood-color%3D%5C%22rgba(255%2C255%2C255%2C1)%5C%22%20%2F%3E%3CfeComposite%20in2%3D%5C%22offsetblur%5C%22%20operator%3D%5C%22in%5C%22%20%2F%3E%3CfeMerge%3E%3CfeMergeNode%20%2F%3E%3CfeMergeNode%20in%3D%5C%22SourceGraphic%5C%22%20%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E%23filter');
+  filter: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%5C%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%5C%22%3E%3Cfilter%20id%3D%5C%22filter%5C%22%3E%3CfeGaussianBlur%20in%3D%5C%22SourceAlpha%5C%22%20stdDeviation%3D%5C%220%5C%22%20%2F%3E%3CfeOffset%20dx%3D%5C%221%5C%22%20dy%3D%5C%222%5C%22%20result%3D%5C%22offsetblur%5C%22%20%2F%3E%3CfeFlood%20flood-color%3D%5C%22rgba(255%2C255%2C255%2C1)%5C%22%20%2F%3E%3CfeComposite%20in2%3D%5C%22offsetblur%5C%22%20operator%3D%5C%22in%5C%22%20%2F%3E%3CfeMerge%3E%3CfeMergeNode%20%2F%3E%3CfeMergeNode%20in%3D%5C%22SourceGraphic%5C%22%20%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3C%2Fsvg%3E%23filter");
 }
 .__local__highlight {
   filter: url(#highlight);
 }
 .__local__highlight {
-  filter: url('#line-marker');
+  filter: url("#line-marker");
 }
 @font-face{
-  src: url(./font.woff) format('woff'), url('./font.woff2') format('woff2'), url("./font.eot") format('eot'), url(~package/font.ttf) format('truetype'), url("./font with spaces.eot") format("embedded-opentype"), url('./font.svg#svgFontName') format('svg'), url('./font.woff2?foo=bar') format('woff2'), url("./font.eot?#iefix") format('embedded-opentype'), url("./font with spaces.eot?#iefix") format('embedded-opentype');
+  src: url(./font.woff) format("woff"), url("./font.woff2") format("woff2"), url("./font.eot") format("eot"), url(~package/font.ttf) format("truetype"), url("./font with spaces.eot") format("embedded-opentype"), url("./font.svg#svgFontName") format("svg"), url("./font.woff2?foo=bar") format("woff2"), url("./font.eot?#iefix") format("embedded-opentype"), url("./font with spaces.eot?#iefix") format("embedded-opentype");
 }
 @media (min-width: 500px) {
   body {
@@ -68,32 +68,31 @@ a {
   content: "do not use url(path)";
 }
 b {
-  content: 'do not "use" url(path)';
+  content: "do not \"use\" url(path)";
 }
 @keyframes __local__anim {
   background: green url('./img.png') xyz;
 }
 .__local__a {
-  background-image: -webkit-image-set(url('./img1x.png') 1x, url('./img2x.png') 2x);
+  background-image: -webkit-image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
 }
 .__local__a {
-  background-image: image-set(url('./img1x.png') 1x, url('./img2x.png') 2x);
+  background-image: image-set(url("./img1x.png") 1x, url("./img2x.png") 2x);
 }
 .__local__class {
   background: green url() xyz;
 }
 .__local__class {
-  background: green url('') xyz;
+  background: green url("") xyz;
 }
 .__local__class {
   background: green url("") xyz;
 }
 .__local__class {
-  background: green url('   ') xyz;
+  background: green url("   ") xyz;
 }
 .__local__class {
-  background: green url(
-  ) xyz;
+  background: green url() xyz;
 }
 .__local__class {
   background: green url(https://raw.githubusercontent.com/webpack/media/master/logo/icon.png) xyz;
@@ -117,7 +116,7 @@ b {
   background: url("./img.png?");
 }
 .__local__class {
-  background-image: url('./img.png') url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url('./img.png');
+  background-image: url("./img.png") url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 42 26' fill='%23007aff'><rect width='4' height='4'/><rect x='8' y='1' width='34' height='2'/><rect y='11' width='4' height='4'/><rect x='8' y='12' width='34' height='2'/><rect y='22' width='4' height='4'/><rect x='8' y='23' width='34' height='2'/></svg>") url("./img.png");
 }
 .__local__class {
   background: ___CSS_LOADER_URL___;
@@ -128,19 +127,19 @@ b {
   background: ___CSS_LOADER_IMPORT___99999___;
 }
 .__local__pure-url {
-  background: url('img-simple.png');
+  background: url("img-simple.png");
 }
 .__local__root-relative {
-  background: url('/url/img-simple.png');
+  background: url("/url/img-simple.png");
 }
 .__local__above-below {
-  background: url('../url/img-simple.png');
+  background: url("../url/img-simple.png");
 }
 .__local__tilde {
-  background: url('~package/img.png');
+  background: url("~package/img.png");
 }
 .__local__aliases {
-  background: url('~aliasesImg/img.png');
+  background: url("~aliasesImg/img.png");
 }
 a {
   background: url(./nested/img.png);
@@ -153,17 +152,17 @@ a {
 }
 .__local__class {
   background-image: -webkit-image-set();
-  background-image: -webkit-image-set('');
+  background-image: -webkit-image-set("");
   background-image: image-set();
-  background-image: image-set('');
+  background-image: image-set("");
   background-image: image-set("");
   background-image: image-set("" 1x);
   background-image: image-set(url());
   background-image: image-set(url());
-  background-image: image-set(URL());
-  background-image: image-set(url(''));
+  background-image: image-set(url());
   background-image: image-set(url(""));
-  background-image: image-set(url('') 1x);
+  background-image: image-set(url(""));
+  background-image: image-set(url("") 1x);
   background-image: image-set(1x);
   background-image: image-set(1x);
   background: image-set(calc(1rem + 1px) 1x);
@@ -201,21 +200,14 @@ a {
   background: url("./img'img.png");
   background: url("./img(img.png");
   background: url("./img)img.png");
-  background: url('./img img.png');
+  background: url("./img img.png");
   background: url("./img img.png");
 }
 .__local__class.__local__class.__local__class {
-  background: url('./img\
-(img.png');
-  background: url('./img\
-(img.png');
-  background: url('./img\
-(img.png');
-  background: url('./img\
-\
-\
-\
-(img.png');
+  background: url("./img(img.png");
+  background: url("./img(img.png");
+  background: url("./img(img.png");
+  background: url("./img(img.png");
 }
 .__local__other-test-case {
   background: url("./img%27%27%27img.png");
@@ -232,40 +224,40 @@ a {
   background: url(./img%20img.png);
 }
 .__local__qqq {
-  background: url('img.png');
+  background: url("img.png");
 }
 .__local__www {
-  background: url("./img\'\'\'img.png");
-  background: url("./img\'\(\)\ img.png");
-  background: url("./img\'img.png");
-  background: url("./img\(img.png");
-  background: url("./img\)img.png");
-  background: url("./img\ img.png");
-  background: url("./\69\6D\67.png");
-  background: url(./\69\6D\67.png);
-  background: url("./img\27img.png");
-  background: url("./img\'\28%29 img.png");
-  background: url(./img\'\28%29\ img.png);
-}
-.__local__class {
-  background: url('./something.png');
-  background: url('./something.png');
-  background: url('./something.png?foo=bar');
-  background: url('./something.png?foo=bar');
-  background: url('./something.png?foo=bar#hash');
-  background: url('./something.png?foo=bar#hash');
-  background: url('./something.png?foo=bar');
-  background: url('./something.png?bar=foo');
-  background: url('./something.png?foo=bar#foo');
-  background: url('./something.png?bar=foo#bar');
-  background: url('./something.png?foo=1&bar=2');
-  background: url('./something.png?foo=2&bar=1');
+  background: url("./img'''img.png");
+  background: url("./img'() img.png");
+  background: url("./img'img.png");
+  background: url("./img(img.png");
+  background: url("./img)img.png");
+  background: url("./img img.png");
+  background: url("./img.png");
+  background: url(./img.png);
+  background: url("./img'img.png");
+  background: url("./img'(%29 img.png");
+  background: url(./img\'\(%29\ img.png);
+}
+.__local__class {
+  background: url("./something.png");
+  background: url("./something.png");
+  background: url("./something.png?foo=bar");
+  background: url("./something.png?foo=bar");
+  background: url("./something.png?foo=bar#hash");
+  background: url("./something.png?foo=bar#hash");
+  background: url("./something.png?foo=bar");
+  background: url("./something.png?bar=foo");
+  background: url("./something.png?foo=bar#foo");
+  background: url("./something.png?bar=foo#bar");
+  background: url("./something.png?foo=1&bar=2");
+  background: url("./something.png?foo=2&bar=1");
 }
 .__local__base {
   background: url("data:image/svg+xml;charset=UTF-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20width%3D%22191px%22%20height%3D%22191px%22%20viewBox%3D%220%200%20191%20191%22%20enable-background%3D%22new%200%200%20191%20191%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M95.5%2C0C42.8%2C0%2C0%2C42.8%2C0%2C95.5S42.8%2C191%2C95.5%2C191S191%2C148.2%2C191%2C95.5S148.2%2C0%2C95.5%2C0z%20M95.5%2C187.6%0A%09c-50.848%2C0-92.1-41.25-92.1-92.1c0-50.848%2C41.252-92.1%2C92.1-92.1c50.85%2C0%2C92.1%2C41.252%2C92.1%2C92.1%0A%09C187.6%2C146.35%2C146.35%2C187.6%2C95.5%2C187.6z%22%2F%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M92.9%2C10v8.6H91v-6.5c-0.1%2C0.1-0.2%2C0.2-0.4%2C0.3c-0.2%2C0.1-0.3%2C0.2-0.4%2C0.2c-0.1%2C0-0.3%2C0.1-0.5%2C0.2%0A%09%09c-0.2%2C0.1-0.3%2C0.1-0.5%2C0.1v-1.6c0.5-0.1%2C0.9-0.3%2C1.4-0.5c0.5-0.2%2C0.8-0.5%2C1.2-0.7h1.1V10z%22%2F%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M97.1%2C17.1h3.602v1.5h-5.6V18c0-0.4%2C0.1-0.8%2C0.2-1.2c0.1-0.4%2C0.3-0.6%2C0.5-0.9c0.2-0.3%2C0.5-0.5%2C0.7-0.7%0A%09%09c0.2-0.2%2C0.5-0.4%2C0.7-0.6c0.199-0.2%2C0.5-0.3%2C0.6-0.5c0.102-0.2%2C0.301-0.3%2C0.5-0.5c0.2-0.2%2C0.2-0.3%2C0.301-0.5%0A%09%09c0.101-0.2%2C0.101-0.3%2C0.101-0.5c0-0.4-0.101-0.6-0.3-0.8c-0.2-0.2-0.4-0.3-0.801-0.3c-0.699%2C0-1.399%2C0.3-2.101%2C0.9v-1.6%0A%09%09c0.7-0.5%2C1.5-0.7%2C2.5-0.7c0.399%2C0%2C0.8%2C0.1%2C1.101%2C0.2c0.301%2C0.1%2C0.601%2C0.3%2C0.899%2C0.5c0.3%2C0.2%2C0.399%2C0.5%2C0.5%2C0.8%0A%09%09c0.101%2C0.3%2C0.2%2C0.6%2C0.2%2C1s-0.102%2C0.7-0.2%2C1c-0.099%2C0.3-0.3%2C0.6-0.5%2C0.8c-0.2%2C0.2-0.399%2C0.5-0.7%2C0.7c-0.3%2C0.2-0.5%2C0.4-0.8%2C0.6%0A%09%09c-0.2%2C0.1-0.399%2C0.3-0.5%2C0.4s-0.3%2C0.3-0.5%2C0.4s-0.2%2C0.3-0.3%2C0.4C97.1%2C17%2C97.1%2C17%2C97.1%2C17.1z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M15%2C95.4c0%2C0.7-0.1%2C1.4-0.2%2C2c-0.1%2C0.6-0.4%2C1.1-0.7%2C1.5C13.8%2C99.3%2C13.4%2C99.6%2C12.9%2C99.8s-1%2C0.3-1.5%2C0.3%0A%09%09c-0.7%2C0-1.3-0.1-1.8-0.3v-1.5c0.4%2C0.3%2C1%2C0.4%2C1.6%2C0.4c0.6%2C0%2C1.1-0.2%2C1.5-0.7c0.4-0.5%2C0.5-1.1%2C0.5-1.9l0%2C0%0A%09%09C12.8%2C96.7%2C12.3%2C96.9%2C11.5%2C96.9c-0.3%2C0-0.7-0.102-1-0.2c-0.3-0.101-0.5-0.3-0.8-0.5c-0.3-0.2-0.4-0.5-0.5-0.8%0A%09%09c-0.1-0.3-0.2-0.7-0.2-1c0-0.4%2C0.1-0.8%2C0.2-1.2c0.1-0.4%2C0.3-0.7%2C0.6-0.9c0.3-0.2%2C0.6-0.5%2C0.9-0.6c0.3-0.1%2C0.8-0.2%2C1.2-0.2%0A%09%09c0.5%2C0%2C0.9%2C0.1%2C1.2%2C0.3c0.3%2C0.2%2C0.7%2C0.4%2C0.9%2C0.8s0.5%2C0.7%2C0.6%2C1.2S15%2C94.8%2C15%2C95.4z%20M13.1%2C94.4c0-0.2%2C0-0.4-0.1-0.6%0A%09%09c-0.1-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.1-0.3-0.1-0.5-0.1c-0.2%2C0-0.3%2C0-0.4%2C0.1s-0.3%2C0.2-0.3%2C0.3%0A%09%09c0%2C0.1-0.2%2C0.3-0.2%2C0.4c0%2C0.1-0.1%2C0.4-0.1%2C0.6c0%2C0.2%2C0%2C0.4%2C0.1%2C0.6c0.1%2C0.2%2C0.1%2C0.3%2C0.2%2C0.4c0.1%2C0.1%2C0.2%2C0.2%2C0.4%2C0.3%0A%09%09c0.2%2C0.1%2C0.3%2C0.1%2C0.5%2C0.1c0.2%2C0%2C0.3%2C0%2C0.4-0.1s0.2-0.2%2C0.3-0.3c0.1-0.1%2C0.2-0.2%2C0.2-0.4C13%2C94.7%2C13.1%2C94.6%2C13.1%2C94.4z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M176%2C99.7V98.1c0.6%2C0.4%2C1.2%2C0.602%2C2%2C0.602c0.5%2C0%2C0.8-0.102%2C1.1-0.301c0.301-0.199%2C0.4-0.5%2C0.4-0.801%0A%09%09c0-0.398-0.2-0.699-0.5-0.898c-0.3-0.2-0.8-0.301-1.3-0.301h-0.802V95h0.701c1.101%2C0%2C1.601-0.4%2C1.601-1.1c0-0.7-0.4-1-1.302-1%0A%09%09c-0.6%2C0-1.1%2C0.2-1.6%2C0.5v-1.5c0.6-0.3%2C1.301-0.4%2C2.1-0.4c0.9%2C0%2C1.5%2C0.2%2C2%2C0.6s0.701%2C0.9%2C0.701%2C1.5c0%2C1.1-0.601%2C1.8-1.701%2C2.1l0%2C0%0A%09%09c0.602%2C0.1%2C1.102%2C0.3%2C1.4%2C0.6s0.5%2C0.8%2C0.5%2C1.3c0%2C0.801-0.3%2C1.4-0.9%2C1.9c-0.6%2C0.5-1.398%2C0.7-2.398%2C0.7%0A%09%09C177.2%2C100.1%2C176.5%2C100%2C176%2C99.7z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cg%3E%0A%09%3Cpath%20fill%3D%22%23636363%22%20d%3D%22M98.5%2C179.102c0%2C0.398-0.1%2C0.799-0.2%2C1.199C98.2%2C180.7%2C98%2C181%2C97.7%2C181.2s-0.601%2C0.5-0.9%2C0.601%0A%09%09c-0.3%2C0.1-0.7%2C0.199-1.2%2C0.199c-0.5%2C0-0.9-0.1-1.3-0.3c-0.4-0.2-0.7-0.399-0.9-0.8c-0.2-0.4-0.5-0.7-0.6-1.2%0A%09%09c-0.1-0.5-0.2-1-0.2-1.601c0-0.699%2C0.1-1.399%2C0.3-2c0.2-0.601%2C0.4-1.101%2C0.8-1.5c0.4-0.399%2C0.7-0.699%2C1.2-1c0.5-0.3%2C1-0.3%2C1.6-0.3%0A%09%09c0.6%2C0%2C1.2%2C0.101%2C1.5%2C0.199v1.5c-0.4-0.199-0.9-0.399-1.4-0.399c-0.3%2C0-0.6%2C0.101-0.8%2C0.2c-0.2%2C0.101-0.5%2C0.3-0.7%2C0.5%0A%09%09c-0.2%2C0.199-0.3%2C0.5-0.4%2C0.8c-0.1%2C0.301-0.2%2C0.7-0.2%2C1.101l0%2C0c0.4-0.601%2C1-0.8%2C1.8-0.8c0.3%2C0%2C0.7%2C0.1%2C0.9%2C0.199%0A%09%09c0.2%2C0.101%2C0.5%2C0.301%2C0.7%2C0.5c0.199%2C0.2%2C0.398%2C0.5%2C0.5%2C0.801C98.5%2C178.2%2C98.5%2C178.7%2C98.5%2C179.102z%20M96.7%2C179.2%0A%09%09c0-0.899-0.4-1.399-1.1-1.399c-0.2%2C0-0.3%2C0-0.5%2C0.1c-0.2%2C0.101-0.3%2C0.201-0.4%2C0.301c-0.1%2C0.101-0.2%2C0.199-0.2%2C0.4%0A%09%09c0%2C0.199-0.1%2C0.299-0.1%2C0.5c0%2C0.199%2C0%2C0.398%2C0.1%2C0.6s0.1%2C0.3%2C0.2%2C0.5c0.1%2C0.199%2C0.2%2C0.199%2C0.4%2C0.3c0.2%2C0.101%2C0.3%2C0.101%2C0.5%2C0.101%0A%09%09c0.2%2C0%2C0.3%2C0%2C0.5-0.101c0.2-0.101%2C0.301-0.199%2C0.301-0.3c0-0.1%2C0.199-0.301%2C0.199-0.399C96.6%2C179.7%2C96.7%2C179.4%2C96.7%2C179.2z%22%2F%3E%0A%3C%2Fg%3E%0A%3Ccircle%20fill%3D%22%23636363%22%20cx%3D%2295%22%20cy%3D%2295%22%20r%3D%227%22%2F%3E%0A%3C%2Fsvg%3E%0A") 50% 50% / 191px no-repeat;
 }
 .__local__strange {
-  background: url('%2E/img.png');
+  background: url("%2E/img.png");
 }
 .__local__my-background {
   background-image: url("/guide/img/banWord/addCoinDialogTitleBg.png");
@@ -275,10 +267,10 @@ a {
   background-image: image-set(url('./img.png', 'foo', './img.png', url('./img.png')) 1x, url("./img2x.png") 2x);
 }
 .__local__button {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" style="stroke: rgb(223,224,225); stroke-width: 2px; fill: none; stroke-dasharray: 6px 3px" /></svg>');
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><rect width=\"100%\" height=\"100%\" style=\"stroke: rgb(223,224,225); stroke-width: 2px; fill: none; stroke-dasharray: 6px 3px\" /></svg>");
 }
 .__local__qqq {
-  background: url('!!../../helpers/url-loader.js?esModule=false!~package/img-single.png?ignore-asset-modules');
+  background: url("!!../../helpers/url-loader.js?esModule=false!~package/img-single.png?ignore-asset-modules");
 }
 .__local__class {
   background: url("img.png");
@@ -299,5 +291,5 @@ a {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
 }
 .__local__bar {
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect fill="gray" width="5" height="5" y="0" x="0" /></svg>');
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\"><rect fill=\"gray\" width=\"5\" height=\"5\" y=\"0\" x=\"0\" /></svg>");
 }
diff --git a/crates/swc_css_modules/tests/with-compat/vercel/007/output.css b/crates/swc_css_modules/tests/with-compat/vercel/007/output.css
index 2ce7f3f82811..41055d6c19e2 100644
--- a/crates/swc_css_modules/tests/with-compat/vercel/007/output.css
+++ b/crates/swc_css_modules/tests/with-compat/vercel/007/output.css
@@ -9,10 +9,10 @@
 .__local__iconButton:disabled {
   cursor: not-allowed;
 }
-.__local__iconButton[data-open='true'] {
+.__local__iconButton[data-open="true"] {
   --icon-rotation: 180deg;
 }
-.__local__iconButton[data-open='true'] .__local__chevron {
+.__local__iconButton[data-open="true"] .__local__chevron {
   transform: rotate(var(--icon-rotation));
 }
 .__local__iconButton > span {
diff --git a/crates/swc_css_parser/src/parser/values_and_units/mod.rs b/crates/swc_css_parser/src/parser/values_and_units/mod.rs
index 22dbf72676e8..93aafd5c3566 100644
--- a/crates/swc_css_parser/src/parser/values_and_units/mod.rs
+++ b/crates/swc_css_parser/src/parser/values_and_units/mod.rs
@@ -1616,6 +1616,20 @@ where
 
                 self.input.skip_ws();
             }
+            js_word!("element") | js_word!("-moz-element") => {
+                self.input.skip_ws();
+
+                let id_selector = self.try_parse_variable_function(
+                    |parser, _| Ok(Some(ComponentValue::IdSelector(parser.parse()?))),
+                    &mut false,
+                )?;
+
+                if let Some(id_selector) = id_selector {
+                    values.push(id_selector);
+
+                    self.input.skip_ws();
+                }
+            }
             js_word!("selector") if self.ctx.in_supports_at_rule => {
                 self.input.skip_ws();
 
@@ -2435,11 +2449,20 @@ where
         }
 
         match bump!(self) {
-            Token::Hash { value, raw, .. } => Ok(HexColor {
-                span,
-                value: value.to_ascii_lowercase(),
-                raw: Some(raw),
-            }),
+            Token::Hash { value, raw, .. } => {
+                if value.chars().any(|x| !x.is_ascii_hexdigit()) {
+                    return Err(Error::new(
+                        span,
+                        ErrorKind::Unexpected("character in hex color"),
+                    ));
+                }
+
+                Ok(HexColor {
+                    span,
+                    value: value.to_ascii_lowercase(),
+                    raw: Some(raw),
+                })
+            }
             _ => {
                 unreachable!()
             }
diff --git a/crates/swc_css_parser/tests/fixture/function/element/input.css b/crates/swc_css_parser/tests/fixture/function/element/input.css
new file mode 100644
index 000000000000..cad8595a9157
--- /dev/null
+++ b/crates/swc_css_parser/tests/fixture/function/element/input.css
@@ -0,0 +1,6 @@
+a {
+    background: element(#css-source) no-repeat;
+    background: element(var(--foo)) no-repeat;
+    background: -moz-element(#css-source) no-repeat;
+    background: -moz-element(var(--foo)) no-repeat;
+}
\ No newline at end of file
diff --git a/crates/swc_css_parser/tests/fixture/function/element/output.json b/crates/swc_css_parser/tests/fixture/function/element/output.json
new file mode 100644
index 000000000000..442e600e4bb9
--- /dev/null
+++ b/crates/swc_css_parser/tests/fixture/function/element/output.json
@@ -0,0 +1,394 @@
+{
+  "type": "Stylesheet",
+  "span": {
+    "start": 1,
+    "end": 206,
+    "ctxt": 0
+  },
+  "rules": [
+    {
+      "type": "QualifiedRule",
+      "span": {
+        "start": 1,
+        "end": 206,
+        "ctxt": 0
+      },
+      "prelude": {
+        "type": "SelectorList",
+        "span": {
+          "start": 1,
+          "end": 2,
+          "ctxt": 0
+        },
+        "children": [
+          {
+            "type": "ComplexSelector",
+            "span": {
+              "start": 1,
+              "end": 2,
+              "ctxt": 0
+            },
+            "children": [
+              {
+                "type": "CompoundSelector",
+                "span": {
+                  "start": 1,
+                  "end": 2,
+                  "ctxt": 0
+                },
+                "nestingSelector": null,
+                "typeSelector": {
+                  "type": "TagNameSelector",
+                  "span": {
+                    "start": 1,
+                    "end": 2,
+                    "ctxt": 0
+                  },
+                  "name": {
+                    "type": "WqName",
+                    "span": {
+                      "start": 1,
+                      "end": 2,
+                      "ctxt": 0
+                    },
+                    "prefix": null,
+                    "value": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 1,
+                        "end": 2,
+                        "ctxt": 0
+                      },
+                      "value": "a",
+                      "raw": "a"
+                    }
+                  }
+                },
+                "subclassSelectors": []
+              }
+            ]
+          }
+        ]
+      },
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 3,
+          "end": 206,
+          "ctxt": 0
+        },
+        "name": {
+          "type": "PreservedToken",
+          "span": {
+            "start": 3,
+            "end": 4,
+            "ctxt": 0
+          },
+          "token": "LBrace"
+        },
+        "value": [
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 9,
+              "end": 51,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 9,
+                "end": 19,
+                "ctxt": 0
+              },
+              "value": "background",
+              "raw": "background"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 21,
+                  "end": 41,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "Ident",
+                  "span": {
+                    "start": 21,
+                    "end": 28,
+                    "ctxt": 0
+                  },
+                  "value": "element",
+                  "raw": "element"
+                },
+                "value": [
+                  {
+                    "type": "IdSelector",
+                    "span": {
+                      "start": 29,
+                      "end": 40,
+                      "ctxt": 0
+                    },
+                    "text": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 29,
+                        "end": 40,
+                        "ctxt": 0
+                      },
+                      "value": "css-source",
+                      "raw": "css-source"
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "Ident",
+                "span": {
+                  "start": 42,
+                  "end": 51,
+                  "ctxt": 0
+                },
+                "value": "no-repeat",
+                "raw": "no-repeat"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 57,
+              "end": 98,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 57,
+                "end": 67,
+                "ctxt": 0
+              },
+              "value": "background",
+              "raw": "background"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 69,
+                  "end": 88,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "Ident",
+                  "span": {
+                    "start": 69,
+                    "end": 76,
+                    "ctxt": 0
+                  },
+                  "value": "element",
+                  "raw": "element"
+                },
+                "value": [
+                  {
+                    "type": "Function",
+                    "span": {
+                      "start": 77,
+                      "end": 87,
+                      "ctxt": 0
+                    },
+                    "name": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 77,
+                        "end": 80,
+                        "ctxt": 0
+                      },
+                      "value": "var",
+                      "raw": "var"
+                    },
+                    "value": [
+                      {
+                        "type": "DashedIdent",
+                        "span": {
+                          "start": 81,
+                          "end": 86,
+                          "ctxt": 0
+                        },
+                        "value": "foo",
+                        "raw": "--foo"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "Ident",
+                "span": {
+                  "start": 89,
+                  "end": 98,
+                  "ctxt": 0
+                },
+                "value": "no-repeat",
+                "raw": "no-repeat"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 104,
+              "end": 151,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 104,
+                "end": 114,
+                "ctxt": 0
+              },
+              "value": "background",
+              "raw": "background"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 116,
+                  "end": 141,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "Ident",
+                  "span": {
+                    "start": 116,
+                    "end": 128,
+                    "ctxt": 0
+                  },
+                  "value": "-moz-element",
+                  "raw": "-moz-element"
+                },
+                "value": [
+                  {
+                    "type": "IdSelector",
+                    "span": {
+                      "start": 129,
+                      "end": 140,
+                      "ctxt": 0
+                    },
+                    "text": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 129,
+                        "end": 140,
+                        "ctxt": 0
+                      },
+                      "value": "css-source",
+                      "raw": "css-source"
+                    }
+                  }
+                ]
+              },
+              {
+                "type": "Ident",
+                "span": {
+                  "start": 142,
+                  "end": 151,
+                  "ctxt": 0
+                },
+                "value": "no-repeat",
+                "raw": "no-repeat"
+              }
+            ],
+            "important": null
+          },
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 157,
+              "end": 203,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "Ident",
+              "span": {
+                "start": 157,
+                "end": 167,
+                "ctxt": 0
+              },
+              "value": "background",
+              "raw": "background"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 169,
+                  "end": 193,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "Ident",
+                  "span": {
+                    "start": 169,
+                    "end": 181,
+                    "ctxt": 0
+                  },
+                  "value": "-moz-element",
+                  "raw": "-moz-element"
+                },
+                "value": [
+                  {
+                    "type": "Function",
+                    "span": {
+                      "start": 182,
+                      "end": 192,
+                      "ctxt": 0
+                    },
+                    "name": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 182,
+                        "end": 185,
+                        "ctxt": 0
+                      },
+                      "value": "var",
+                      "raw": "var"
+                    },
+                    "value": [
+                      {
+                        "type": "DashedIdent",
+                        "span": {
+                          "start": 186,
+                          "end": 191,
+                          "ctxt": 0
+                        },
+                        "value": "foo",
+                        "raw": "--foo"
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "Ident",
+                "span": {
+                  "start": 194,
+                  "end": 203,
+                  "ctxt": 0
+                },
+                "value": "no-repeat",
+                "raw": "no-repeat"
+              }
+            ],
+            "important": null
+          }
+        ]
+      }
+    }
+  ]
+}
diff --git a/crates/swc_css_parser/tests/fixture/function/element/span.swc-stderr b/crates/swc_css_parser/tests/fixture/function/element/span.swc-stderr
new file mode 100644
index 000000000000..77c309dc75dc
--- /dev/null
+++ b/crates/swc_css_parser/tests/fixture/function/element/span.swc-stderr
@@ -0,0 +1,512 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: element(#css-source) no-repeat;
+ 3 | |       background: element(var(--foo)) no-repeat;
+ 4 | |       background: -moz-element(#css-source) no-repeat;
+ 5 | |       background: -moz-element(var(--foo)) no-repeat;
+ 6 | `-> }
+   `----
+
+  x Rule
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: element(#css-source) no-repeat;
+ 3 | |       background: element(var(--foo)) no-repeat;
+ 4 | |       background: -moz-element(#css-source) no-repeat;
+ 5 | |       background: -moz-element(var(--foo)) no-repeat;
+ 6 | `-> }
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: element(#css-source) no-repeat;
+ 3 | |       background: element(var(--foo)) no-repeat;
+ 4 | |       background: -moz-element(#css-source) no-repeat;
+ 5 | |       background: -moz-element(var(--foo)) no-repeat;
+ 6 | `-> }
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x WqName
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   : ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | ,-> a {
+ 2 | |       background: element(#css-source) no-repeat;
+ 3 | |       background: element(var(--foo)) no-repeat;
+ 4 | |       background: -moz-element(#css-source) no-repeat;
+ 5 | |       background: -moz-element(var(--foo)) no-repeat;
+ 6 | `-> }
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+   :   ^
+ 2 |     background: element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :     ^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :     ^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                 ^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                         ^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x IdSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                         ^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                         ^^^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                                      ^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:1:1]
+ 1 | a {
+ 2 |     background: element(#css-source) no-repeat;
+   :                                      ^^^^^^^^^
+ 3 |     background: element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                 ^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                         ^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                         ^^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                         ^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                             ^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x DashedIdent
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                             ^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                                     ^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:2:1]
+ 2 |     background: element(#css-source) no-repeat;
+ 3 |     background: element(var(--foo)) no-repeat;
+   :                                     ^^^^^^^^^
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :     ^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :     ^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                 ^^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                              ^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x IdSelector
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                              ^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                              ^^^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                                           ^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:3:1]
+ 3 |     background: element(var(--foo)) no-repeat;
+ 4 |     background: -moz-element(#css-source) no-repeat;
+   :                                           ^^^^^^^^^
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 6 | }
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :     ^^^^^^^^^^
+ 6 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                 ^^^^^^^^^^^^^^^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                 ^^^^^^^^^^^^
+ 6 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                              ^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Function
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                              ^^^^^^^^^^
+ 6 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                              ^^^
+ 6 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                                  ^^^^^
+ 6 | }
+   `----
+
+  x DashedIdent
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                                  ^^^^^
+ 6 | }
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                                          ^^^^^^^^^
+ 6 | }
+   `----
+
+  x Ident
+   ,-[$DIR/tests/fixture/function/element/input.css:4:1]
+ 4 |     background: -moz-element(#css-source) no-repeat;
+ 5 |     background: -moz-element(var(--foo)) no-repeat;
+   :                                          ^^^^^^^^^
+ 6 | }
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/input.css b/crates/swc_css_parser/tests/fixture/hex-colors/input.css
index f7a6a6960260..72c2614de9d0 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/input.css
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/input.css
@@ -13,6 +13,6 @@ a {
   color: #1;
   color: #FF;
   color: #123456789;
-  color: #xyz;
+  color: #abc;
   color: #aa\61;
 }
diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/output.json b/crates/swc_css_parser/tests/fixture/hex-colors/output.json
index f0bc9888aa62..2c8e0067fb93 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/output.json
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/output.json
@@ -546,8 +546,8 @@
                   "end": 253,
                   "ctxt": 0
                 },
-                "value": "xyz",
-                "raw": "xyz"
+                "value": "abc",
+                "raw": "abc"
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/fixture/hex-colors/span.swc-stderr b/crates/swc_css_parser/tests/fixture/hex-colors/span.swc-stderr
index 2feb83f8fe57..2aff6418b6fe 100644
--- a/crates/swc_css_parser/tests/fixture/hex-colors/span.swc-stderr
+++ b/crates/swc_css_parser/tests/fixture/hex-colors/span.swc-stderr
@@ -16,7 +16,7 @@
  13 | |     color: #1;
  14 | |     color: #FF;
  15 | |     color: #123456789;
- 16 | |     color: #xyz;
+ 16 | |     color: #abc;
  17 | |     color: #aa\61;
  18 | `-> }
     `----
@@ -38,7 +38,7 @@
  13 | |     color: #1;
  14 | |     color: #FF;
  15 | |     color: #123456789;
- 16 | |     color: #xyz;
+ 16 | |     color: #abc;
  17 | |     color: #aa\61;
  18 | `-> }
     `----
@@ -60,7 +60,7 @@
  13 | |     color: #1;
  14 | |     color: #FF;
  15 | |     color: #123456789;
- 16 | |     color: #xyz;
+ 16 | |     color: #abc;
  17 | |     color: #aa\61;
  18 | `-> }
     `----
@@ -131,7 +131,7 @@
  13 | |     color: #1;
  14 | |     color: #FF;
  15 | |     color: #123456789;
- 16 | |     color: #xyz;
+ 16 | |     color: #abc;
  17 | |     color: #aa\61;
  18 | `-> }
     `----
@@ -876,7 +876,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :   ^^^^^^^^^^^^^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x Declaration
@@ -884,7 +884,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :   ^^^^^^^^^^^^^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x DeclarationName
@@ -892,7 +892,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :   ^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x Ident
@@ -900,7 +900,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :   ^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x ComponentValue
@@ -908,7 +908,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :          ^^^^^^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x Color
@@ -916,7 +916,7 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :          ^^^^^^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x HexColor
@@ -924,13 +924,13 @@
  14 |   color: #FF;
  15 |   color: #123456789;
     :          ^^^^^^^^^^
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     `----
 
   x ComponentValue
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :   ^^^^^^^^^^^
  17 |   color: #aa\61;
     `----
@@ -938,7 +938,7 @@
   x Declaration
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :   ^^^^^^^^^^^
  17 |   color: #aa\61;
     `----
@@ -946,7 +946,7 @@
   x DeclarationName
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :   ^^^^^
  17 |   color: #aa\61;
     `----
@@ -954,7 +954,7 @@
   x Ident
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :   ^^^^^
  17 |   color: #aa\61;
     `----
@@ -962,7 +962,7 @@
   x ComponentValue
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :          ^^^^
  17 |   color: #aa\61;
     `----
@@ -970,7 +970,7 @@
   x Color
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :          ^^^^
  17 |   color: #aa\61;
     `----
@@ -978,14 +978,14 @@
   x HexColor
     ,-[$DIR/tests/fixture/hex-colors/input.css:15:1]
  15 |   color: #123456789;
- 16 |   color: #xyz;
+ 16 |   color: #abc;
     :          ^^^^
  17 |   color: #aa\61;
     `----
 
   x ComponentValue
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :   ^^^^^^^^^^^^^
  18 | }
@@ -993,7 +993,7 @@
 
   x Declaration
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :   ^^^^^^^^^^^^^
  18 | }
@@ -1001,7 +1001,7 @@
 
   x DeclarationName
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :   ^^^^^
  18 | }
@@ -1009,7 +1009,7 @@
 
   x Ident
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :   ^^^^^
  18 | }
@@ -1017,7 +1017,7 @@
 
   x ComponentValue
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :          ^^^^^^
  18 | }
@@ -1025,7 +1025,7 @@
 
   x Color
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :          ^^^^^^
  18 | }
@@ -1033,7 +1033,7 @@
 
   x HexColor
     ,-[$DIR/tests/fixture/hex-colors/input.css:16:1]
- 16 |   color: #xyz;
+ 16 |   color: #abc;
  17 |   color: #aa\61;
     :          ^^^^^^
  18 | }
diff --git a/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/output.json b/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/output.json
index 7c498de24a71..361a49e4a91b 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/output.json
+++ b/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/output.json
@@ -2557,14 +2557,22 @@
                       },
                       "value": [
                         {
-                          "type": "HexColor",
+                          "type": "IdSelector",
                           "span": {
                             "start": 916,
                             "end": 919,
                             "ctxt": 0
                           },
-                          "value": "id",
-                          "raw": "id"
+                          "text": {
+                            "type": "Ident",
+                            "span": {
+                              "start": 916,
+                              "end": 919,
+                              "ctxt": 0
+                            },
+                            "value": "id",
+                            "raw": "id"
+                          }
                         }
                       ]
                     }
diff --git a/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/span.swc-stderr
index 00cd4d5e86be..9a23588593e8 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/span.swc-stderr
+++ b/crates/swc_css_parser/tests/fixture/vendor/csstree/basic/span.swc-stderr
@@ -3411,7 +3411,7 @@
  30 |     }
     `----
 
-  x Color
+  x IdSelector
     ,-[$DIR/tests/fixture/vendor/csstree/basic/input.css:28:1]
  28 |         --custom2: ([]) !important;
  29 |         background: element(#id);
@@ -3419,7 +3419,7 @@
  30 |     }
     `----
 
-  x HexColor
+  x Ident
     ,-[$DIR/tests/fixture/vendor/csstree/basic/input.css:28:1]
  28 |         --custom2: ([]) !important;
  29 |         background: element(#id);
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/span.swc-stderr
deleted file mode 100644
index 2dc649916a5c..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :   ^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :            ^^^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :            ^^^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css:1:1]
- 1 | a { value: #\30hash }
-   :            ^^^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/span.swc-stderr
deleted file mode 100644
index 7100275c8e60..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :   ^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :            ^^^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :            ^^^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css:1:1]
- 1 | a { value: #\68 ash }
-   :            ^^^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/span.swc-stderr
deleted file mode 100644
index 75de548c392c..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :   ^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :     ^^^^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :            ^^^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :            ^^^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css:1:1]
- 1 | a { value: #0h\61sh }
-   :            ^^^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/span.swc-stderr
deleted file mode 100644
index 96fb52c6d516..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :   ^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :     ^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :     ^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :            ^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :            ^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css:1:1]
- 1 | a { value: #x\, }
-   :            ^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/span.swc-stderr
deleted file mode 100644
index a6ffa3fffaed..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :   ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :     ^^^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :     ^^^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :            ^^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :            ^^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css:1:1]
- 1 | a { value: #h\61sh }
-   :            ^^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/span.swc-stderr
deleted file mode 100644
index b2bc22867353..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :   ^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :     ^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :     ^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :            ^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :            ^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css:1:1]
- 1 | a { value: #\,x }
-   :            ^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/span.swc-stderr
deleted file mode 100644
index b0ccadbc4b7e..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^^^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :   ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :     ^^^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :     ^^^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :            ^^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :            ^^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css:1:1]
- 1 | a { value: #\68ash }
-   :            ^^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/span.swc-stderr
deleted file mode 100644
index 455f53b7415f..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :   ^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :     ^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :     ^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :            ^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :            ^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css:1:1]
- 1 | a { value: #\2cx }
-   :            ^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/span.swc-stderr b/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/span.swc-stderr
deleted file mode 100644
index 3078adcc63ea..000000000000
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/span.swc-stderr
+++ /dev/null
@@ -1,114 +0,0 @@
-
-  x Stylesheet
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x Rule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x QualifiedRule
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^^^^^^^^^^^^^^^^^^
-   `----
-
-  x SelectorList
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x ComplexSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x CompoundSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x TypeSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x TagNameSelector
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x WqName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   : ^
-   `----
-
-  x SimpleBlock
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :   ^^^^^^^^^^^^^^^^
-   `----
-
-  x LBrace
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :   ^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :     ^^^^^^^^^^^^^
-   `----
-
-  x Declaration
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :     ^^^^^^^^^^^^^
-   `----
-
-  x DeclarationName
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :     ^^^^^
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :     ^^^^^
-   `----
-
-  x ComponentValue
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :            ^^^^^^
-   `----
-
-  x Color
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :            ^^^^^^
-   `----
-
-  x HexColor
-   ,-[$DIR/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css:1:1]
- 1 | a { value: #x\2c }
-   :            ^^^^^^
-   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.json
similarity index 91%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.json
index fd26f5f6a8bf..f090929ad66e 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 20,
                   "ctxt": 0
                 },
-                "value": "0hash",
-                "raw": "\\30hash"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "hash",
+                    "raw": "\\68 ash"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.swc-stderr
new file mode 100644
index 000000000000..61619b72bf7d
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/span.swc-stderr
new file mode 100644
index 000000000000..2fef41e8186a
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-1/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :   ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :            ^^^^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('hash' type=inline), raw: "\\68 ash" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-1/input.css:1:1]
+ 1 | a { value: #\68 ash }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.json
similarity index 91%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.json
index df303a3b74ba..3c3d51ff1a2d 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/BKyQWW5j9vRP-kr41nqcjg/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 20,
                   "ctxt": 0
                 },
-                "value": "hash",
-                "raw": "\\68 ash"
+                "token": {
+                  "Hash": {
+                    "is_id": false,
+                    "value": "0hash",
+                    "raw": "0h\\61sh"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.swc-stderr
new file mode 100644
index 000000000000..521c27c9953f
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/span.swc-stderr
new file mode 100644
index 000000000000..929bb2acebab
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-2/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :   ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :            ^^^^^^^^
+   `----
+
+  x Hash { is_id: false, value: Atom('0hash' type=inline), raw: "0h\\61sh" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-2/input.css:1:1]
+ 1 | a { value: #0h\61sh }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.json
similarity index 92%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.json
index 95fbe4c4e036..39c940b20d1e 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 16,
                   "ctxt": 0
                 },
-                "value": ",x",
-                "raw": "\\,x"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "x,",
+                    "raw": "x\\,"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.swc-stderr
new file mode 100644
index 000000000000..c2b48ea646b6
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :            ^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/span.swc-stderr
new file mode 100644
index 000000000000..5647b98cfc64
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-3/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :   ^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :     ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :     ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :            ^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('x,' type=inline), raw: "x\\," }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-3/input.css:1:1]
+ 1 | a { value: #x\, }
+   :            ^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.json
similarity index 91%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.json
index 9c1a10858861..270f1e922f74 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/HDNE73X9waUrBkTAzz-20g/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 19,
                   "ctxt": 0
                 },
-                "value": "hash",
-                "raw": "h\\61sh"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "hash",
+                    "raw": "h\\61sh"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.swc-stderr
new file mode 100644
index 000000000000..c839da122114
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :            ^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/span.swc-stderr
new file mode 100644
index 000000000000..cf9bc7fefc44
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-4/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :   ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :     ^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :     ^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :            ^^^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('hash' type=inline), raw: "h\\61sh" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-4/input.css:1:1]
+ 1 | a { value: #h\61sh }
+   :            ^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Ys7z8C2qi5O_HM9ElZQrUQ/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.json
similarity index 92%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.json
index ef2c74872bd1..3ad64c98ed3c 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/Fm7gvlx7uRyvrfzUC7rJxg/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 16,
                   "ctxt": 0
                 },
-                "value": "x,",
-                "raw": "x\\,"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": ",x",
+                    "raw": "\\,x"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.swc-stderr
new file mode 100644
index 000000000000..ddaab24f8ad9
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :            ^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/span.swc-stderr
new file mode 100644
index 000000000000..c717db0c34c9
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-5/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :   ^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :     ^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :     ^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :            ^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom(',x' type=inline), raw: "\\,x" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-5/input.css:1:1]
+ 1 | a { value: #\,x }
+   :            ^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.json
similarity index 91%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.json
index 32aa153f8aeb..3e13d3439186 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/bdiLSVQWZCfQNNwD_OM6qA/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 19,
                   "ctxt": 0
                 },
-                "value": "ڊsh",
-                "raw": "\\68ash"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "ڊsh",
+                    "raw": "\\68ash"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.swc-stderr
new file mode 100644
index 000000000000..5ae01fcbfe91
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :            ^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/span.swc-stderr
new file mode 100644
index 000000000000..7e7648230c70
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-6/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :   ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :     ^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :     ^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :            ^^^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('ڊsh' type=inline), raw: "\\68ash" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-6/input.css:1:1]
+ 1 | a { value: #\68ash }
+   :            ^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.json
similarity index 92%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.json
index f5da74db3613..bd1b2a5b05b5 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/eivsIn6ub-xYiqErLqd8oA/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 17,
                   "ctxt": 0
                 },
-                "value": ",x",
-                "raw": "\\2cx"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": ",x",
+                    "raw": "\\2cx"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.swc-stderr
new file mode 100644
index 000000000000..a90c493363bc
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :            ^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/span.swc-stderr
new file mode 100644
index 000000000000..5065cf15067b
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-7/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :   ^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :     ^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :     ^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :            ^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom(',x' type=inline), raw: "\\2cx" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-7/input.css:1:1]
+ 1 | a { value: #\2cx }
+   :            ^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.json
similarity index 92%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.json
index 767e8567389e..b3722d836a37 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/gxBoWO36fKxIuYwPzrWyKQ/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 18,
                   "ctxt": 0
                 },
-                "value": "x,",
-                "raw": "x\\2c "
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "x,",
+                    "raw": "x\\2c "
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.swc-stderr
new file mode 100644
index 000000000000..bceea8f8267b
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :            ^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/span.swc-stderr
new file mode 100644
index 000000000000..f3dd30acc07b
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character-8/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :   ^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :     ^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :     ^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :            ^^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('x,' type=inline), raw: "x\\2c " }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character-8/input.css:1:1]
+ 1 | a { value: #x\2c }
+   :            ^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/input.css
similarity index 100%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/486QvEO8dmLFsXYp6xgKVw/input.css
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character/input.css
diff --git a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/output.json b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.json
similarity index 91%
rename from crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/output.json
rename to crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.json
index 361d82f1ee27..d12439b18ba8 100644
--- a/crates/swc_css_parser/tests/fixture/vendor/esbuild/misc/C4I0cdQcSbpaGOS-V8fwew/output.json
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.json
@@ -106,14 +106,19 @@
             },
             "value": [
               {
-                "type": "HexColor",
+                "type": "PreservedToken",
                 "span": {
                   "start": 12,
                   "end": 20,
                   "ctxt": 0
                 },
-                "value": "0hash",
-                "raw": "0h\\61sh"
+                "token": {
+                  "Hash": {
+                    "is_id": true,
+                    "value": "0hash",
+                    "raw": "\\30hash"
+                  }
+                }
               }
             ],
             "important": null
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.swc-stderr
new file mode 100644
index 000000000000..3754ebcf7f1a
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/output.swc-stderr
@@ -0,0 +1,6 @@
+
+  x Expected hash, ident (with named color, system color, 'transparent' or 'currentColor' value) or function (with color function name) token
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/span.swc-stderr b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/span.swc-stderr
new file mode 100644
index 000000000000..73172379dad2
--- /dev/null
+++ b/crates/swc_css_parser/tests/recovery/value/hash/invalid-character/span.swc-stderr
@@ -0,0 +1,108 @@
+
+  x Stylesheet
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x Rule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x QualifiedRule
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^^^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x SelectorList
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x ComplexSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x CompoundSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x TypeSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x TagNameSelector
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x WqName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   : ^
+   `----
+
+  x SimpleBlock
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :   ^^^^^^^^^^^^^^^^^^^
+   `----
+
+  x LBrace
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :   ^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x Declaration
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :     ^^^^^^^^^^^^^^^^
+   `----
+
+  x DeclarationName
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :     ^^^^^
+   `----
+
+  x Ident
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :     ^^^^^
+   `----
+
+  x ComponentValue
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :            ^^^^^^^^
+   `----
+
+  x Hash { is_id: true, value: Atom('0hash' type=inline), raw: "\\30hash" }
+   ,-[$DIR/tests/recovery/value/hash/invalid-character/input.css:1:1]
+ 1 | a { value: #\30hash }
+   :            ^^^^^^^^
+   `----
diff --git a/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.css b/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.css
index bd37bad25ff6..745bd9e1dadd 100644
--- a/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.css
@@ -3,10 +3,10 @@ div {
   backdrop-filter: blur(2px);
 }
 div {
-  background: -webkit-filter(url('image.jpg'), blur(2px));
-  background: filter(url('image.jpg'), blur(2px));
+  background: -webkit-filter(url("image.jpg"), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 div {
-  background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
-  background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+  background: url(image.jpg), -webkit-filter(url("image.jpg"), blur(2px));
+  background: url(image.jpg), filter(url("image.jpg"), blur(2px));
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.defaults-not-ie-11.css
index 236148899260..5e9ad1d0640c 100644
--- a/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/advanced-filter/output.defaults-not-ie-11.css
@@ -3,8 +3,8 @@ div {
   backdrop-filter: blur(2px);
 }
 div {
-  background: filter(url('image.jpg'), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 div {
-  background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+  background: url(image.jpg), filter(url("image.jpg"), blur(2px));
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/animation/output.css b/crates/swc_css_prefixer/tests/fixture/animation/output.css
index 90d7a87a98b4..4f5f0b4c2527 100644
--- a/crates/swc_css_prefixer/tests/fixture/animation/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/animation/output.css
@@ -23,10 +23,10 @@
   animation-iteration-count: infinite;
 }
 .class {
-  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-  -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-  -o-animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
-  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
+  -moz-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
+  -o-animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
+  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
 }
 .class {
   -webkit-animation-direction: alternate;
diff --git a/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
index 4139fb262e19..955615153a60 100644
--- a/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/animation/output.defaults-not-ie-11.css
@@ -11,7 +11,7 @@
   animation-iteration-count: infinite;
 }
 .class {
-  animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+  animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
 }
 .class {
   animation-direction: alternate;
diff --git a/crates/swc_css_prefixer/tests/fixture/autofill/output.css b/crates/swc_css_prefixer/tests/fixture/autofill/output.css
index aae1785d0108..dc345b4b19c6 100644
--- a/crates/swc_css_prefixer/tests/fixture/autofill/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/autofill/output.css
@@ -4,6 +4,6 @@ input:-webkit-autofill {
 input:autofill {
   border: 3px solid blue;
 }
-input:AUTOFILL {
+input:autofill {
   border: 3px solid blue;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css
index aae1785d0108..dc345b4b19c6 100644
--- a/crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/autofill/output.defaults-not-ie-11.css
@@ -4,6 +4,6 @@ input:-webkit-autofill {
 input:autofill {
   border: 3px solid blue;
 }
-input:AUTOFILL {
+input:autofill {
   border: 3px solid blue;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/backdrop/output.css b/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
index a0e6f0ada770..3112ebc4acf6 100644
--- a/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/backdrop/output.css
@@ -1,9 +1,9 @@
 dialog::-webkit-backdrop {
-  background: rgba(255, 0, 0, .25);
+  background: rgba(255, 0, 0, 0.25);
 }
 dialog::-ms-backdrop {
-  background: rgba(255, 0, 0, .25);
+  background: rgba(255, 0, 0, 0.25);
 }
 dialog::backdrop {
-  background: rgba(255, 0, 0, .25);
+  background: rgba(255, 0, 0, 0.25);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
index 4da4b5366dde..526cdf44d23b 100644
--- a/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/backdrop/output.defaults-not-ie-11.css
@@ -1,3 +1,3 @@
 dialog::backdrop {
-  background: rgba(255, 0, 0, .25);
+  background: rgba(255, 0, 0, 0.25);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/background/output.css b/crates/swc_css_prefixer/tests/fixture/background/output.css
index 56e667adf8c1..dcb630612e3d 100644
--- a/crates/swc_css_prefixer/tests/fixture/background/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/background/output.css
@@ -10,14 +10,14 @@
   background-image: image-set(url(foo.jpg) 2x);
 }
 .class {
-  background: -webkit-filter(url('image.jpg'), blur(2px));
-  background: filter(url('image.jpg'), blur(2px));
+  background: -webkit-filter(url("image.jpg"), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 .class {
-  background: -webkit-filter(url('image.jpg'), blur(2px));
-  background: filter(url('image.jpg'), blur(2px));
+  background: -webkit-filter(url("image.jpg"), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 .class {
-  background: url(image.jpg), -webkit-filter(url('image.jpg'), blur(2px));
-  background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+  background: url(image.jpg), -webkit-filter(url("image.jpg"), blur(2px));
+  background: url(image.jpg), filter(url("image.jpg"), blur(2px));
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/background/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/background/output.defaults-not-ie-11.css
index c78977a43a3e..d58d5e430332 100644
--- a/crates/swc_css_prefixer/tests/fixture/background/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/background/output.defaults-not-ie-11.css
@@ -10,11 +10,11 @@
   background-image: image-set(url(foo.jpg) 2x);
 }
 .class {
-  background: filter(url('image.jpg'), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 .class {
-  background: filter(url('image.jpg'), blur(2px));
+  background: filter(url("image.jpg"), blur(2px));
 }
 .class {
-  background: url(image.jpg), filter(url('image.jpg'), blur(2px));
+  background: url(image.jpg), filter(url("image.jpg"), blur(2px));
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/calc/output.css b/crates/swc_css_prefixer/tests/fixture/calc/output.css
index d73abc2b3c39..f29b9f27809c 100644
--- a/crates/swc_css_prefixer/tests/fixture/calc/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/calc/output.css
@@ -26,7 +26,7 @@ div {
   width: -webkit-calc(1 + (2 * 2));
   width: -moz-calc(1 + (2 * 2));
   width: calc(1 + (2 * 2));
-  width: calc(1 + cAlC(2 * 2));
+  width: calc(1 + calc(2 * 2));
 }
 .multi-line {
   width: -webkit-calc(1 + (2 * 2));
@@ -73,8 +73,8 @@ div {
   width: calc((1 + calc(2 * 2)) * 10px);
   width: -webkit-calc((1 + (2 * 2)) * 10px);
   width: -moz-calc((1 + (2 * 2)) * 10px);
-  width: CALC((1 + (2 * 2)) * 10px);
-  width: CALC((1 + CALC(2 * 2)) * 10px);
+  width: calc((1 + (2 * 2)) * 10px);
+  width: calc((1 + calc(2 * 2)) * 10px);
   padding: -webkit-calc((1 + (2 * 2)) * 10px) -webkit-calc((1 + (2 * 2)) * 10px);
   padding: -moz-calc((1 + (2 * 2)) * 10px) -moz-calc((1 + (2 * 2)) * 10px);
   padding: calc((1 + (2 * 2)) * 10px) calc((1 + (2 * 2)) * 10px);
diff --git a/crates/swc_css_prefixer/tests/fixture/calc/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/calc/output.defaults-not-ie-11.css
index 05736e7ac512..f806876761fe 100644
--- a/crates/swc_css_prefixer/tests/fixture/calc/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/calc/output.defaults-not-ie-11.css
@@ -11,7 +11,7 @@ div {
   opacity: calc(1 + calc(2 * 2));
 }
 .mixed-casing {
-  width: calc(1 + cAlC(2 * 2));
+  width: calc(1 + calc(2 * 2));
 }
 .multi-line {
   width: calc(1 + calc(2 * 2));
@@ -36,7 +36,7 @@ div {
 }
 .foo {
   width: calc((1 + calc(2 * 2)) * 10px);
-  width: CALC((1 + CALC(2 * 2)) * 10px);
+  width: calc((1 + calc(2 * 2)) * 10px);
   padding: calc((1 + calc(2 * 2)) * 10px) calc((1 + calc(2 * 2)) * 10px);
   padding: calc((1 + -webkit-calc(2 * 2)) * 10px);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.css b/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.css
index 5297ce26839c..5afb84238f61 100644
--- a/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.css
@@ -2,23 +2,23 @@ a {
   -webkit-appearance: NONE;
   -moz-appearance: NONE;
   -ms-appearance: NONE;
-  APPEARANCE: NONE;
+  appearance: NONE;
 }
 b {
   -webkit-appearance: AUTO;
   -moz-appearance: AUTO;
   -ms-appearance: AUTO;
-  APPEARANCE: AUTO;
+  appearance: AUTO;
 }
 c {
-  -WEBKIT-APPEARANCE: NONE;
+  -webkit-appearance: NONE;
   -moz-appearance: NONE;
   -ms-appearance: NONE;
-  APPEARANCE: NONE;
+  appearance: NONE;
 }
 d {
   -webkit-appearance: NONE;
   -moz-appearance: NONE;
   -ms-appearance: NONE;
-  APPEARANCE: NONE;
+  appearance: NONE;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.defaults-not-ie-11.css
index 21d6ccb5f65c..488a67336014 100644
--- a/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/case-insensivity/output.defaults-not-ie-11.css
@@ -1,16 +1,16 @@
 a {
   -webkit-appearance: NONE;
-  APPEARANCE: NONE;
+  appearance: NONE;
 }
 b {
   -webkit-appearance: AUTO;
-  APPEARANCE: AUTO;
+  appearance: AUTO;
 }
 c {
-  -WEBKIT-APPEARANCE: NONE;
-  APPEARANCE: NONE;
+  -webkit-appearance: NONE;
+  appearance: NONE;
 }
 d {
   -webkit-appearance: NONE;
-  APPEARANCE: NONE;
+  appearance: NONE;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
index c7bead8d3753..70ea755b19b1 100644
--- a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.css
@@ -16,13 +16,13 @@ h2 {
 }
 h3 {
   background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
-  background-image: cross-fade(.59 url(foo.png), url(bar.png));
+  background-image: cross-fade(0.59 url(foo.png), url(bar.png));
 }
 .foo {
   background-image: -webkit-cross-fade(-webkit-linear-gradient(white, black), -webkit-radial-gradient(circle closest-corner, white, black), 0.59);
-  background-image: cross-fade(.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
-  background-image: cross-fade(.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
-  background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(0.59 -moz-linear-gradient(white, black), -moz-radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(0.59 -o-linear-gradient(white, black), -o-radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(0.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
 }
 .class {
   background-image: -webkit-cross-fade(url(white.png), url(black.png), 0);
diff --git a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
index 9c62441fb9f7..8acdaf9a500c 100644
--- a/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/cross-fade/output.defaults-not-ie-11.css
@@ -16,11 +16,11 @@ h2 {
 }
 h3 {
   background-image: -webkit-cross-fade(url(foo.png), url(bar.png), 0.59);
-  background-image: cross-fade(.59 url(foo.png), url(bar.png));
+  background-image: cross-fade(0.59 url(foo.png), url(bar.png));
 }
 .foo {
   background-image: -webkit-cross-fade(linear-gradient(white, black), radial-gradient(circle closest-corner, white, black), 0.59);
-  background-image: cross-fade(.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
+  background-image: cross-fade(0.59 linear-gradient(white, black), radial-gradient(circle closest-corner, white, black));
 }
 .class {
   background-image: -webkit-cross-fade(url(white.png), url(black.png), 0);
diff --git a/crates/swc_css_prefixer/tests/fixture/cursor/output.css b/crates/swc_css_prefixer/tests/fixture/cursor/output.css
index 107983b02711..5c90d3ac0d51 100644
--- a/crates/swc_css_prefixer/tests/fixture/cursor/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/cursor/output.css
@@ -41,7 +41,7 @@
   cursor: grabbing;
 }
 .class {
-  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -webkit-grab;
-  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, -moz-grab;
-  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, GRAB;
+  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image_set(url(foo.jpg) 2x) 5 5, -webkit-grab;
+  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image_set(url(foo.jpg) 2x) 5 5, -moz-grab;
+  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image_set(url(foo.jpg) 2x) 5 5, GRAB;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css
index a957b94a10f1..be6f4207e019 100644
--- a/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/cursor/output.defaults-not-ie-11.css
@@ -29,5 +29,5 @@
   cursor: grabbing;
 }
 .class {
-  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), IMAGE_SET(url(foo.jpg) 2x) 5 5, GRAB;
+  cursor: url(cursor_1.svg) 4 5, url(cursor_2.svg), image_set(url(foo.jpg) 2x) 5 5, GRAB;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/filter/output.css b/crates/swc_css_prefixer/tests/fixture/filter/output.css
index a5845b1ae259..e2315b5a60fc 100644
--- a/crates/swc_css_prefixer/tests/fixture/filter/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/filter/output.css
@@ -13,11 +13,11 @@ a {
   transition: filter 2s;
 }
 div {
-  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
+  filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
 }
 b {
   filter: alpha(opacity=100);
 }
 em {
-  filter: Alpha(opacity=100);
+  filter: alpha(opacity=100);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css
index 26ec654af3b3..f5a494430dd7 100644
--- a/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/filter/output.defaults-not-ie-11.css
@@ -7,11 +7,11 @@ a {
   transition: filter 2s;
 }
 div {
-  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
+  filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
 }
 b {
   filter: alpha(opacity=100);
 }
 em {
-  filter: Alpha(opacity=100);
+  filter: alpha(opacity=100);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/font-face-format/output.css b/crates/swc_css_prefixer/tests/fixture/font-face-format/output.css
index 0770c9bbc953..f03bb9840c65 100644
--- a/crates/swc_css_prefixer/tests/fixture/font-face-format/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/font-face-format/output.css
@@ -10,9 +10,9 @@
   src: format("woff"), format("truetype"), format("opentype"), format("woff2"), format("embedded-opentype"), format("collection"), format("svg");
   src: format(woff), format(truetype), format(opentype), format(woff2), format(embedded-opentype), format(collection), format(svg);
 }
-@Font-face{
-  src: FORMAT("woff");
-  src: FORMAT(WOFF);
+@font-face{
+  src: format("woff");
+  src: format(WOFF);
 }
 @font-face{
   src: format("woff");
diff --git a/crates/swc_css_prefixer/tests/fixture/font-face-format/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/font-face-format/output.defaults-not-ie-11.css
index 0770c9bbc953..f03bb9840c65 100644
--- a/crates/swc_css_prefixer/tests/fixture/font-face-format/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/font-face-format/output.defaults-not-ie-11.css
@@ -10,9 +10,9 @@
   src: format("woff"), format("truetype"), format("opentype"), format("woff2"), format("embedded-opentype"), format("collection"), format("svg");
   src: format(woff), format(truetype), format(opentype), format(woff2), format(embedded-opentype), format(collection), format(svg);
 }
-@Font-face{
-  src: FORMAT("woff");
-  src: FORMAT(WOFF);
+@font-face{
+  src: format("woff");
+  src: format(WOFF);
 }
 @font-face{
   src: format("woff");
diff --git a/crates/swc_css_prefixer/tests/fixture/gradient/output.css b/crates/swc_css_prefixer/tests/fixture/gradient/output.css
index 3a076a61dbda..55950f44114e 100644
--- a/crates/swc_css_prefixer/tests/fixture/gradient/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/gradient/output.css
@@ -72,10 +72,10 @@ div {
   background: red -moz-linear-gradient(red, blue);
   background: red -o-linear-gradient(red, blue);
   background: red linear-gradient(red, blue);
-  background: url('logo.png'), -webkit-linear-gradient(#fff, #000);
-  background: url('logo.png'), -moz-linear-gradient(#fff, #000);
-  background: url('logo.png'), -o-linear-gradient(#fff, #000);
-  background: url('logo.png'), linear-gradient(#fff, #000);
+  background: url("logo.png"), -webkit-linear-gradient(#fff, #000);
+  background: url("logo.png"), -moz-linear-gradient(#fff, #000);
+  background: url("logo.png"), -o-linear-gradient(#fff, #000);
+  background: url("logo.png"), linear-gradient(#fff, #000);
 }
 .px {
   background: -webkit-linear-gradient(black 0, white 100px);
@@ -170,16 +170,16 @@ div {
   background: linear-gradient(black);
 }
 .background-shorthand {
-  background: -webkit-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
-  background: -moz-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
-  background: -o-radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
-  background: radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
+  background: -webkit-radial-gradient(#fff, transparent) 0 0/ cover no-repeat #f0f;
+  background: -moz-radial-gradient(#fff, transparent) 0 0/ cover no-repeat #f0f;
+  background: -o-radial-gradient(#fff, transparent) 0 0/ cover no-repeat #f0f;
+  background: radial-gradient(#fff, transparent) 0 0/ cover no-repeat #f0f;
 }
 .background-advanced {
-  background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -webkit-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
-  background: -moz-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -moz-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
-  background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -o-radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
-  background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
+  background: -webkit-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -webkit-radial-gradient(#fff, transparent), url(path/to/image.jpg) 50% / cover;
+  background: -moz-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -moz-radial-gradient(#fff, transparent), url(path/to/image.jpg) 50% / cover;
+  background: -o-radial-gradient(5px 15px, ellipse farthest-corner, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), -o-radial-gradient(#fff, transparent), url(path/to/image.jpg) 50% / cover;
+  background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#fff, transparent), url(path/to/image.jpg) 50% / cover;
 }
 .multiradial {
   -webkit-mask-image: -webkit-radial-gradient(100% 50%, circle closest-corner, #000, transparent);
@@ -265,5 +265,5 @@ a {
   background: -webkit-linear-gradient(99.5deg, white, black), -webkit-linear-gradient(220deg, black, white), -webkit-linear-gradient(45deg, black, white);
   background: -moz-linear-gradient(99.5deg, white, black), -moz-linear-gradient(220deg, black, white), -moz-linear-gradient(45deg, black, white);
   background: -o-linear-gradient(99.5deg, white, black), -o-linear-gradient(220deg, black, white), -o-linear-gradient(45deg, black, white);
-  background: linear-gradient(350.5DEG, white, black), linear-gradient(-130DEG, black, white), linear-gradient(45DEG, black, white);
+  background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/gradient/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/gradient/output.defaults-not-ie-11.css
index 7b943569b3f4..39e82089b1e3 100644
--- a/crates/swc_css_prefixer/tests/fixture/gradient/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/gradient/output.defaults-not-ie-11.css
@@ -36,7 +36,7 @@ div {
 }
 .second {
   background: red linear-gradient(red, blue);
-  background: url('logo.png'), linear-gradient(#fff, #000);
+  background: url("logo.png"), linear-gradient(#fff, #000);
 }
 .px {
   background: linear-gradient(black 0, white 100px);
@@ -83,10 +83,10 @@ div {
   background: linear-gradient(black);
 }
 .background-shorthand {
-  background: radial-gradient(#FFF, transparent) 0 0/ cover no-repeat #F0F;
+  background: radial-gradient(#fff, transparent) 0 0/ cover no-repeat #f0f;
 }
 .background-advanced {
-  background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#FFF, transparent), url(path/to/image.jpg) 50% / cover;
+  background: radial-gradient(ellipse farthest-corner at 5px 15px, rgba(214, 168, 18, 0.7) 0%, rgba(255, 21, 177, 0.7) 50%, rgba(210, 7, 148, 0.7) 95%), radial-gradient(#fff, transparent), url(path/to/image.jpg) 50% / cover;
 }
 .multiradial {
   -webkit-mask-image: radial-gradient(circle closest-corner at 100% 50%, #000, transparent);
@@ -124,5 +124,5 @@ div {
   background: linear-gradient(0turn, green, blue);
 }
 a {
-  background: linear-gradient(350.5DEG, white, black), linear-gradient(-130DEG, black, white), linear-gradient(45DEG, black, white);
+  background: linear-gradient(350.5deg, white, black), linear-gradient(-130deg, black, white), linear-gradient(45deg, black, white);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/image-set/output.css b/crates/swc_css_prefixer/tests/fixture/image-set/output.css
index 0827ac23077e..2562ac2c8249 100644
--- a/crates/swc_css_prefixer/tests/fixture/image-set/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/image-set/output.css
@@ -4,44 +4,44 @@ a {
 }
 h1 {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  background-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  background-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-border-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  -moz-border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
-  -o-border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  -moz-border-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
+  -o-border-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
   border-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  border-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
   mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  mask: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
   mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  mask-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   list-style: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  list-style: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  list-style: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   list-style-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  list-style-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  list-style-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  content: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .broken {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x) "test";
-  content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
+  content: image-set("foo@1x.png" 1x, "foo@2x.png" 2x) "test";
 }
 a {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url(foo@2x.png) 2x);
diff --git a/crates/swc_css_prefixer/tests/fixture/image-set/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/image-set/output.defaults-not-ie-11.css
index 2989139dd2e5..fa45cbb99f91 100644
--- a/crates/swc_css_prefixer/tests/fixture/image-set/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/image-set/output.defaults-not-ie-11.css
@@ -4,41 +4,41 @@ a {
 }
 h1 {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  background-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  background-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  background-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   border-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  border-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  border-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
   mask: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  mask: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   -webkit-mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
   mask-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  mask-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  mask-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   list-style: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  list-style: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  list-style: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   list-style-image: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  list-style-image: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  list-style-image: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .class {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x);
-  content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x);
+  content: image-set("foo@1x.png" 1x, "foo@2x.png" 2x);
 }
 .broken {
   content: -webkit-image-set(url("foo@1x.png") 1x, url("foo@2x.png") 2x) "test";
-  content: image-set('foo@1x.png' 1x, "foo@2x.png" 2x) "test";
+  content: image-set("foo@1x.png" 1x, "foo@2x.png" 2x) "test";
 }
 a {
   background-image: -webkit-image-set(url("foo@1x.png") 1x, url(foo@2x.png) 2x);
diff --git a/crates/swc_css_prefixer/tests/fixture/overflow/output.css b/crates/swc_css_prefixer/tests/fixture/overflow/output.css
index 36ca665bd386..4265554cb602 100644
--- a/crates/swc_css_prefixer/tests/fixture/overflow/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/overflow/output.css
@@ -44,7 +44,7 @@ html.double-overflow {
   foo-overflow: hidden auto;
 }
 .content {
-  content: 'overflow: hidden auto;';
+  content: "overflow: hidden auto;";
 }
 .important {
   overflow-x: hidden !important;
diff --git a/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css
index c8f6e2acd16d..1da8dbf42815 100644
--- a/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/overflow/output.defaults-not-ie-11.css
@@ -35,7 +35,7 @@ html.double-overflow {
   foo-overflow: hidden auto;
 }
 .content {
-  content: 'overflow: hidden auto;';
+  content: "overflow: hidden auto;";
 }
 .important {
   overflow: hidden auto !important;
diff --git a/crates/swc_css_prefixer/tests/fixture/place/output.css b/crates/swc_css_prefixer/tests/fixture/place/output.css
index a4afbf7260dd..9b3c6ec683c0 100644
--- a/crates/swc_css_prefixer/tests/fixture/place/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/place/output.css
@@ -21,7 +21,7 @@ a {
   justify-self: center;
   place-self: center;
 }
-A {
+a {
   -webkit-align-content: space-between;
   -ms-flex-line-pack: justify;
   align-content: space-between;
@@ -30,19 +30,19 @@ A {
   -moz-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
-  PLACE-CONTENT: space-between center;
+  place-content: space-between center;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -moz-box-align: center;
   -ms-flex-align: center;
   align-items: center;
   justify-items: normal;
-  PLACE-ITEMS: center normal;
+  place-items: center normal;
   -webkit-align-self: auto;
   -ms-flex-item-align: auto;
   align-self: auto;
   justify-self: center;
-  PLACE-SELF: auto center;
+  place-self: auto center;
 }
 b {
   -webkit-align-content: space-between;
@@ -156,7 +156,7 @@ e {
   foo-place-content: first second;
 }
 .content {
-  content: 'place-content: first second;';
+  content: "place-content: first second;";
 }
 .important {
   -webkit-align-content: first !important;
diff --git a/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css
index 95f8c2efad7b..e37e7bc837bf 100644
--- a/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/place/output.defaults-not-ie-11.css
@@ -3,10 +3,10 @@ a {
   place-items: center normal;
   place-self: center;
 }
-A {
-  PLACE-CONTENT: space-between center;
-  PLACE-ITEMS: center normal;
-  PLACE-SELF: auto center;
+a {
+  place-content: space-between center;
+  place-items: center normal;
+  place-self: auto center;
 }
 b {
   place-content: space-between;
@@ -48,7 +48,7 @@ e {
   foo-place-content: first second;
 }
 .content {
-  content: 'place-content: first second;';
+  content: "place-content: first second;";
 }
 .important {
   place-content: first second !important;
diff --git a/crates/swc_css_prefixer/tests/fixture/resolution/output.css b/crates/swc_css_prefixer/tests/fixture/resolution/output.css
index 934e22f163a1..e922129f4117 100644
--- a/crates/swc_css_prefixer/tests/fixture/resolution/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/resolution/output.css
@@ -1,7 +1,7 @@
-@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
+@import url("styles.css") screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
 @import url("styles.css") supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (max-width: 400px);
 @import url("styles.css") supports(not ((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox))) screen and (max-width: 400px);
-@import url('styles.css') supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
+@import url("styles.css") supports((display: flex) or (display: -webkit-box) or (display: -webkit-flex) or (display: -moz-box) or (display: -ms-flexbox)) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2), screen and (min--moz-device-pixel-ratio: 2);
 @media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {
   .class {
     color: red;
@@ -88,7 +88,7 @@
 @media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {}
 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
 @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
-@media (min-resolution: 113.38DPCM), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {
+@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3), (min--moz-device-pixel-ratio: 3) {
   .class {
     color: red;
   }
diff --git a/crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css
index 554cd1f70c1b..f4a92c6b8761 100644
--- a/crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/resolution/output.defaults-not-ie-11.css
@@ -1,7 +1,7 @@
-@import url('styles.css') screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
+@import url("styles.css") screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
 @import url("styles.css") supports(display: flex) screen and (max-width: 400px);
 @import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
-@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
+@import url("styles.css") supports(display: flex) screen and (min-resolution: 2dppx), screen and (-webkit-min-device-pixel-ratio: 2);
 @media (min-resolution: 2dppx), (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2), (-webkit-min-device-pixel-ratio: 2) {
   .class {
     color: red;
@@ -73,7 +73,7 @@
 @media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {}
 @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}
 @media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}
-@media (min-resolution: 113.38DPCM), (-webkit-min-device-pixel-ratio: 3) {
+@media (min-resolution: 113.38dpcm), (-webkit-min-device-pixel-ratio: 3) {
   .class {
     color: red;
   }
diff --git a/crates/swc_css_prefixer/tests/fixture/selection/output.css b/crates/swc_css_prefixer/tests/fixture/selection/output.css
index 5d657d2b7f7a..55b8d1ac178b 100644
--- a/crates/swc_css_prefixer/tests/fixture/selection/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/selection/output.css
@@ -10,6 +10,6 @@
 ::selection {
   color: red;
 }
-::SeLeCtIoN {
+::selection {
   color: red;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/selection/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/selection/output.defaults-not-ie-11.css
index 813466031790..eae053d90576 100644
--- a/crates/swc_css_prefixer/tests/fixture/selection/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/selection/output.defaults-not-ie-11.css
@@ -4,6 +4,6 @@
 ::selection {
   color: red;
 }
-::SeLeCtIoN {
+::selection {
   color: red;
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/transform/output.css b/crates/swc_css_prefixer/tests/fixture/transform/output.css
index d6091a34bab9..5a8f5d5b370f 100644
--- a/crates/swc_css_prefixer/tests/fixture/transform/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/transform/output.css
@@ -13,16 +13,16 @@ a {
   transition: -moz-transform 1s;
   transition: -o-transform 1s;
   transition: transform 1s;
-  -webkit-transform: rotateX(45deg);
-  -moz-transform: rotateX(45deg);
-  transform: rotateX(45deg);
+  -webkit-transform: rotatex(45deg);
+  -moz-transform: rotatex(45deg);
+  transform: rotatex(45deg);
 }
 b {
-  -webkit-transform: translateX(45deg);
-  -moz-transform: translateX(45deg);
-  -ms-transform: translateX(45deg);
-  -o-transform: translateX(45deg);
-  transform: translateX(45deg);
+  -webkit-transform: translatex(45deg);
+  -moz-transform: translatex(45deg);
+  -ms-transform: translatex(45deg);
+  -o-transform: translatex(45deg);
+  transform: translatex(45deg);
   -webkit-transform-origin: 0 0;
   -moz-transform-origin: 0 0;
   -ms-transform-origin: 0 0;
@@ -30,9 +30,9 @@ b {
   transform-origin: 0 0;
 }
 em {
-  -webkit-transform: rotateZ(45deg);
-  -moz-transform: rotateZ(45deg);
-  transform: rotateZ(45deg);
+  -webkit-transform: rotatez(45deg);
+  -moz-transform: rotatez(45deg);
+  transform: rotatez(45deg);
 }
 @-webkit-keyframes anim {
   from {
@@ -66,7 +66,7 @@ em {
   transform-style: flat;
 }
 .class {
-  -webkit-transform: perspective(500px) rotateY(3deg);
-  -moz-transform: perspective(500px) rotateY(3deg);
-  transform: perspective(500px) rotateY(3deg);
+  -webkit-transform: perspective(500px) rotatey(3deg);
+  -moz-transform: perspective(500px) rotatey(3deg);
+  transform: perspective(500px) rotatey(3deg);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css
index cf300743ca30..0aeb7c2c8e62 100644
--- a/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/transform/output.defaults-not-ie-11.css
@@ -3,14 +3,14 @@
 }
 a {
   transition: transform 1s;
-  transform: rotateX(45deg);
+  transform: rotatex(45deg);
 }
 b {
-  transform: translateX(45deg);
+  transform: translatex(45deg);
   transform-origin: 0 0;
 }
 em {
-  transform: rotateZ(45deg);
+  transform: rotatez(45deg);
 }
 @keyframes anim {
   from {
@@ -21,5 +21,5 @@ em {
   transform-style: flat;
 }
 .class {
-  transform: perspective(500px) rotateY(3deg);
+  transform: perspective(500px) rotatey(3deg);
 }
diff --git a/crates/swc_css_prefixer/tests/fixture/transition/output.css b/crates/swc_css_prefixer/tests/fixture/transition/output.css
index fb284f3edf10..391dcf9a525f 100644
--- a/crates/swc_css_prefixer/tests/fixture/transition/output.css
+++ b/crates/swc_css_prefixer/tests/fixture/transition/output.css
@@ -91,11 +91,11 @@ input[type=range]::-webkit-slider-thumb {
 }
 button::-moz-submit-invalid {
   opacity: 1;
-  -webkit-transform: translateX(45px);
-  -moz-transform: translateX(45px);
-  -ms-transform: translateX(45px);
-  -o-transform: translateX(45px);
-  transform: translateX(45px);
+  -webkit-transform: translatex(45px);
+  -moz-transform: translatex(45px);
+  -ms-transform: translatex(45px);
+  -o-transform: translatex(45px);
+  transform: translatex(45px);
   -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
   -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
   -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
@@ -107,11 +107,11 @@ button::-moz-submit-invalid {
 @supports ((transition: opacity 0.5s 2s, transform 0.5s 0.5s) or (-webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s) or (-moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s) or (-o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s) or (transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s)) {
   button::-moz-submit-invalid {
     opacity: 1;
-    -webkit-transform: translateX(45px);
-    -moz-transform: translateX(45px);
-    -ms-transform: translateX(45px);
-    -o-transform: translateX(45px);
-    transform: translateX(45px);
+    -webkit-transform: translatex(45px);
+    -moz-transform: translatex(45px);
+    -ms-transform: translatex(45px);
+    -o-transform: translatex(45px);
+    transform: translatex(45px);
     -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
     -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
     -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
@@ -122,11 +122,11 @@ button::-moz-submit-invalid {
   }
   button {
     opacity: 1;
-    -webkit-transform: translateX(45px);
-    -moz-transform: translateX(45px);
-    -ms-transform: translateX(45px);
-    -o-transform: translateX(45px);
-    transform: translateX(45px);
+    -webkit-transform: translatex(45px);
+    -moz-transform: translatex(45px);
+    -ms-transform: translatex(45px);
+    -o-transform: translatex(45px);
+    transform: translatex(45px);
     -webkit-transition: opacity 0.5s 2s, -webkit-transform 0.5s 0.5s;
     -moz-transition: opacity 0.5s 2s, -moz-transform 0.5s 0.5s;
     -o-transition: opacity 0.5s 2s, -o-transform 0.5s 0.5s;
diff --git a/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css b/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css
index 40469a605709..085eb533fa2b 100644
--- a/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css
+++ b/crates/swc_css_prefixer/tests/fixture/transition/output.defaults-not-ie-11.css
@@ -31,18 +31,18 @@ input[type=range]::-webkit-slider-thumb {
 }
 button::-moz-submit-invalid {
   opacity: 1;
-  transform: translateX(45px);
+  transform: translatex(45px);
   transition: opacity 0.5s 2s, transform 0.5s 0.5s;
 }
 @supports (transition: opacity 0.5s 2s, transform 0.5s 0.5s) {
   button::-moz-submit-invalid {
     opacity: 1;
-    transform: translateX(45px);
+    transform: translatex(45px);
     transition: opacity 0.5s 2s, transform 0.5s 0.5s;
   }
   button {
     opacity: 1;
-    transform: translateX(45px);
+    transform: translatex(45px);
     transition: opacity 0.5s 2s, transform 0.5s 0.5s;
   }
 }
diff --git a/crates/swc_css_utils/src/lib.rs b/crates/swc_css_utils/src/lib.rs
index b47d7cc4a824..33343f96a7fb 100644
--- a/crates/swc_css_utils/src/lib.rs
+++ b/crates/swc_css_utils/src/lib.rs
@@ -1,6 +1,6 @@
 #![deny(clippy::all)]
 
-use std::{borrow::Cow, char::REPLACEMENT_CHARACTER, f64::consts::PI, str};
+use std::{borrow::Cow, f64::consts::PI, str};
 
 use once_cell::sync::Lazy;
 use serde::{Deserialize, Serialize};
@@ -161,7 +161,7 @@ pub static NAMED_COLORS: Lazy<AHashMap<JsWord, NamedColor>> = Lazy::new(|| {
 });
 
 #[inline]
-fn is_escape_not_required(value: &str, raw: Option<&str>) -> bool {
+fn is_escape_not_required(value: &str) -> bool {
     if value.is_empty() {
         return true;
     }
@@ -183,7 +183,6 @@ fn is_escape_not_required(value: &str, raw: Option<&str>) -> bool {
 
     value.chars().all(|c| {
         match c {
-            REPLACEMENT_CHARACTER if raw.is_some() => false,
             '\x00' => false,
             '\x01'..='\x1f' | '\x7F' => false,
             '-' | '_' => true,
@@ -201,9 +200,9 @@ fn is_escape_not_required(value: &str, raw: Option<&str>) -> bool {
 }
 
 // https://drafts.csswg.org/cssom/#serialize-an-identifier
-pub fn serialize_ident<'a>(value: &'a str, raw: Option<&str>, minify: bool) -> Cow<'a, str> {
+pub fn serialize_ident(value: &str, minify: bool) -> Cow<'_, str> {
     // Fast-path
-    if is_escape_not_required(value, raw) {
+    if is_escape_not_required(value) {
         return Cow::Borrowed(value);
     }
 
@@ -223,12 +222,6 @@ pub fn serialize_ident<'a>(value: &'a str, raw: Option<&str>, minify: bool) -> C
     // by the concatenation of, for each character of the identifier:
     for (i, c) in value.chars().enumerate() {
         match c {
-            // Old browser hacks with `\0` and other - IE
-            REPLACEMENT_CHARACTER if raw.is_some() => {
-                result.push_str(raw.unwrap());
-
-                return Cow::Owned(result);
-            }
             // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD).
             '\x00' => {
                 result.push(char::REPLACEMENT_CHARACTER);
diff --git a/crates/swc_css_visit/src/lib.rs b/crates/swc_css_visit/src/lib.rs
index 27189d764aa5..0f96ddf7e9cb 100644
--- a/crates/swc_css_visit/src/lib.rs
+++ b/crates/swc_css_visit/src/lib.rs
@@ -57,6 +57,7 @@ define!({
         LayerName(Box<LayerName>),
         SupportsCondition(Box<SupportsCondition>),
         Declaration(Box<Declaration>),
+        IdSelector(Box<IdSelector>),
     }
 
     pub struct Ident {