feat(css/parser): Normalize and improve function name (#6667)

crates/jsdoc/tests/fixtures/constanttag.debug

@@ -42,7 +42,7 @@
                         ),
                         ctxt: #0,
                     },
-                    value: Atom('constant' type=dynamic),
+                    value: Atom('constant' type=static),
                 },
                 tag: Const(
                     ConstTag {

crates/swc_atoms/words.txt

@@ -85,6 +85,57 @@
 -ms-high-contrast-adjust
 -ms-hyphens
 -ms-interpolation-mode
+-moz-any
+-moz-calc
+-moz-document
+-moz-keyframes
+*
+-infinity
+-moz-activehyperlinktext
+-moz-any
+-moz-buttondefault
+-moz-buttonhoverface
+-moz-buttonhovertext
+-moz-calc
+-moz-cellhighlight
+-moz-cellhighlighttext
+-moz-combobox
+-moz-comboboxtext
+-moz-default-background-color
+-moz-default-color
+-moz-dialog
+-moz-dialogtext
+-moz-document
+-moz-dragtargetzone
+-moz-eventreerow
+-moz-html-cellhighlight
+-moz-html-cellhighlighttext
+-moz-hyperlinktext
+-moz-keyframes
+-moz-mac-accentdarkestshadow
+-moz-mac-accentdarkshadow
+-moz-mac-accentface
+-moz-mac-accentlightesthighlight
+-moz-mac-accentlightshadow
+-moz-mac-accentregularhighlight
+-moz-mac-accentregularshadow
+-moz-mac-chrome-active
+-moz-mac-chrome-inactive
+-moz-mac-focusring
+-moz-mac-menuselect
+-moz-mac-menushadow
+-moz-mac-menutextselect
+-moz-menubarhovertext
+-moz-menubartext
+-moz-menuhover
+-moz-menuhovertext
+-moz-nativehyperlinktext
+-moz-oddtreerow
+-moz-visitedhyperlinktext
+-moz-win-accentcolor
+-moz-win-accentcolortext
+-moz-win-communicationstext
+-moz-win-mediatext
 -ms-keyframes
 -ms-region-fragment
 -ms-scroll-chaining
@@ -832,16 +883,22 @@ _extends
 _toConsumableArray
 a
 abbr
+abs
 abstract
 accent-color
 accept
 accesskey
+acos
 acronym
 action
+activeborder
+activecaption
+activetext
 actuate
 add
 address
 after
+aliceblue
 align-content
 align-items
 align-self
@@ -877,7 +934,9 @@ animation-timing-function
 annotation
 annotation-xml
 anonymous
+antiquewhite
 any
+appWorkspace
 appearance
 apple-touch-icon
 apple-touch-icon-precomposed
@@ -889,6 +948,8 @@ application/ld+json
 application/x-javascript
 application/xhtml+xml
 apply
+aqua
+aquamarine
 arcrole
 area
 arguments
@@ -898,10 +959,13 @@ aria-owns
 article
 as
 aside
+asin
 aspect-ratio
 assert
 asserts
 async
+atan
+atan2
 attributeName
 attributeType
 attributename
@@ -912,9 +976,11 @@ autocomplete
 avoid
 await
 azimuth
+azure
 b
 backdrop-filter
 backface-visibility
+background
 background-attachment
 background-blend-mode
 background-clip
@@ -937,15 +1003,21 @@ bdi
 bdo
 before
 begin
+beige
 bgsound
 big
 bigint
+bisque
+black
+blanchedalmond
 blink
 block
 block-overflow
 block-size
 blocking
 blockquote
+blue
+blueviolet
 body
 bold
 boolean
@@ -1017,24 +1089,38 @@ break
 break-after
 break-before
 break-inside
+brown
+burlywood
 button
+buttonborder
+buttonface
+buttonhighlight
+buttonshadow
+buttontext
+cadetblue
 calc
 calcMode
 calcmode
 call
 canvas
 canvastext
+cap
 caption
 caption-side
+captiontext
 caret-color
 caret-shape
 case
 catch
 center
+ch
 character-variant
 charset
+chartreuse
+chocolate
 circle
 cite
+clamp
 class
 classid
 clear
@@ -1052,6 +1138,7 @@ colgroup
 collection
 color
 color-adjust
+color-contrast
 color-index
 color-mix
 color-profile
@@ -1073,6 +1160,7 @@ columns
 command
 concat
 const
+constant
 constructor
 contain
 contain-intrinsic-block-size
@@ -1085,12 +1173,23 @@ content-box
 content-security-policy
 contenteditable
 continue
+coral
+cornflowerblue
+cornsilk
+cos
 counter-increment
 counter-reset
 counter-set
 counter-style
+cqb
+cqh
+cqi
+cqmax
+cqmin
+cqw
 createClass
 createReactClass
+crimson
 crossorigin
 cubic-bezier
 cue
@@ -1100,12 +1199,34 @@ currentColor
 currentcolor
 cursor
 custom-media
+cyan
 d
+darkblue
+darkcyan
+darkgoldenrod
+darkgray
+darkgreen
+darkgrey
+darkkhaki
+darkmagenta
+darkolivegreen
+darkorange
+darkorchid
+darkred
+darksalmon
+darkseagreen
+darkslateblue
+darkslategray
+darkslategrey
+darkturquoise
+darkviolet
 data
 datalist
 dd
 debugger
 declare
+deeppink
+deepskyblue
 default
 definitionURL
 definitionurl
@@ -1123,6 +1244,8 @@ dfn
 dialog
 diffuseConstant
 diffuseconstant
+dimgray
+dimgrey
 dir
 direction
 discard
@@ -1133,6 +1256,7 @@ div
 dl
 do
 document
+dodgerblue
 dpcm
 dpi
 dppx
@@ -1143,6 +1267,7 @@ dvi
 dvmax
 dvmin
 dvw
+e
 ease
 ease-in
 ease-in-out
@@ -1163,6 +1288,7 @@ env
 eval
 even
 ex
+exp
 export
 exportparts
 extends
@@ -1218,7 +1344,9 @@ fespecularlighting
 fespotlight
 fetile
 feturbulence
+field
 fieldset
+fieldtext
 figcaption
 figure
 file
@@ -1229,6 +1357,7 @@ filter
 filterUnits
 filterunits
 finally
+firebrick
 first-child
 first-letter
 first-line
@@ -1242,6 +1371,7 @@ flex-grow
 flex-shrink
 flex-wrap
 float
+floralwhite
 flow
 flow-from
 flow-into
@@ -1277,26 +1407,38 @@ for
 forced-color-adjust
 foreignObject
 foreignobject
+forestgreen
 form
 formaction
 format
+fr
 frame
 frameset
 from
 from-image
+fuchsia
 function
 future
 g
+gainsboro
 get
+ghostwhite
 global
 glyph
 glyphRef
 glyphref
+gold
+goldenrod
 grad
 gradientTransform
 gradientUnits
 gradienttransform
 gradientunits
+gray
+graytext
+green
+greenyellow
+grey
 grid
 grid-auto-columns
 grid-auto-flow
@@ -1325,11 +1467,14 @@ headers
 height
 hgroup
 highlight
+highlighttext
 historical-forms
 hkern
+honeydew
 horizontal-tb
 host
 host-context
+hotpink
 hr
 href
 hsl
@@ -1339,6 +1484,7 @@ http-equiv
 hwb
 hyphenate-character
 hyphens
+hypot
 hz
 i
 ic
@@ -1359,7 +1505,15 @@ import
 important
 importmap
 in
+inactiveborder
+inactivecaption
+inactivecaptiontext
+indianred
+indigo
 infer
+infinity
+infobackground
+infotext
 inherit
 initial
 initial-letter
@@ -1388,6 +1542,7 @@ itemprop
 itemref
 itemtype
 iterator
+ivory
 jump-end
 jump-start
 justify-content
@@ -1411,12 +1566,17 @@ keypoints
 keysplines
 keytimes
 keywords
+khaki
 khz
+lab
 label
 lang
 language
 last-child
 last-of-type
+lavender
+lavenderblush
+lawngreen
 layer
 lch
 left
@@ -1425,6 +1585,7 @@ left-middle
 left-top
 legacy
 legend
+lemonchiffon
 length
 lengthAdjust
 lengthadjust
@@ -1432,6 +1593,23 @@ let
 letter-spacing
 lh
 li
+lightblue
+lightcoral
+lightcyan
+lightgoldenrodyellow
+lightgray
+lightgreen
+lightgrey
+lightpink
+lightsalmon
+lightseagreen
+lightskyblue
+lightslategray
+lightslategrey
+lightsteelblue
+lightyellow
+lime
+limegreen
 limitingConeAngle
 limitingconeangle
 line
@@ -1443,12 +1621,15 @@ line-through
 linear
 linearGradient
 lineargradient
+linen
 link
+linktext
 list-item
 list-style-image
 list-style-type
 listing
 local
+log
 longdesc
 lr
 lr-tb
@@ -1460,6 +1641,7 @@ lvi
 lvmax
 lvmin
 lvw
+magenta
 main
 malignmark
 manual
@@ -1484,6 +1666,8 @@ markerWidth
 markerheight
 markerunits
 markerwidth
+marktext
+maroon
 marquee
 mask
 mask-border
@@ -1515,6 +1699,7 @@ math-shift
 math-style
 matrix
 matrix3d
+max
 max-aspect-ratio
 max-block-size
 max-color
@@ -1531,12 +1716,24 @@ max-width
 maxlength
 media
 medium
+mediumaquamarine
+mediumblue
+mediumorchid
+mediumpurple
+mediumseagreen
+mediumslateblue
+mediumspringgreen
+mediumturquoise
+mediumvioletred
 menu
+menutext
 meta
 metadata
 meter
 mglyph
 mi
+midnightblue
+min
 min-aspect-ratio
 min-block-size
 min-color
@@ -1549,12 +1746,16 @@ min-inline-size
 min-monochrome
 min-resolution
 min-width
+mintcream
 missing-glyph
+mistyrose
 mix-blend-mode
 mixed
 mm
 mn
 mo
+moccasin
+mod
 module
 monochrome
 mozmm
@@ -1563,7 +1764,10 @@ ms
 mtext
 name
 namespace
+nan
 nav
+navajowhite
+navy
 nest
 never
 new
@@ -1599,6 +1803,9 @@ offset-rotate
 oklab
 oklch
 ol
+oldlace
+olive
+olivedrab
 onabort
 onafterprint
 onautocomplete
@@ -1704,6 +1911,9 @@ opentype
 optgroup
 option
 or
+orange
+orangered
+orchid
 order
 ornaments
 orphans
@@ -1746,7 +1956,12 @@ page-break-after
 page-break-before
 page-break-inside
 paint-order
+palegoldenrod
+palegreen
+paleturquoise
+palevioletred
 panose-1
+papayawhip
 param
 part
 past
@@ -1761,15 +1976,20 @@ patterncontentunits
 patterntransform
 patternunits
 pc
+peachpuff
 perspective
 perspective-origin
+peru
+pi
 picture
 ping
+pink
 place-content
 place-items
 place-self
 placeholder
 plaintext
+plum
 pointer-events
 points
 pointsAtX
@@ -1782,6 +2002,8 @@ polygon
 polyline
 position
 poster
+pow
+powderblue
 pre
 preload
 preserveAlpha
@@ -1799,6 +2021,7 @@ property
 protected
 pt
 public
+purple
 px
 q
 rad
@@ -1809,7 +2032,9 @@ rbc
 rcap
 rch
 readonly
+rebeccapurple
 rect
+red
 refX
 refY
 refx
@@ -1846,6 +2071,7 @@ right-top
 rl
 rlh
 role
+rosybrown
 rotate
 rotate3d
 rotateX
@@ -1860,6 +2086,7 @@ row-gap
 row-reverse
 rows
 rowspan
+royalblue
 rp
 rt
 rtc
@@ -1872,14 +2099,20 @@ ruby-position
 ruby-text
 run-in
 s
+saddlebrown
+salmon
 samp
 sandbox
+sandybrown
 satisfies
 scale
 scale3d
 scaleX
 scaleY
 scaleZ
+scalex
+scaley
+scalez
 script
 scroll
 scroll-behavior
@@ -1916,11 +2149,17 @@ scroll-snap-type-x
 scroll-snap-type-y
 scroll-timeline-axis
 scroll-timeline-name
+scrollbar
 scrollbar-color
 scrollbar-gutter
 scrollbar-width
+seagreen
+seashell
 section
 select
+selecteditem
+selecteditemtext
+selector
 separate
 set
 shadow
@@ -1930,6 +2169,10 @@ shape-outside
 show
 sideways-lr
 sideways-rl
+sienna
+sign
+silver
+sin
 size
 sizes
 skew
@@ -1937,10 +2180,15 @@ skewX
 skewY
 skewx
 skewy
+skyblue
+slateblue
+slategray
+slategrey
 slice
 slot
 slotted
 small
+snow
 solid
 solidColor
 source
@@ -1955,6 +2203,8 @@ specularexponent
 speculationrules
 spreadMethod
 spreadmethod
+springgreen
+sqrt
 src
 srcdoc
 srcset
@@ -1964,6 +2214,7 @@ startoffset
 static
 stdDeviation
 stddeviation
+steelblue
 step-end
 step-start
 steps
@@ -1986,6 +2237,7 @@ super
 supports
 surfaceScale
 surfacescale
+svb
 svg
 svh
 svi
@@ -2005,6 +2257,7 @@ table-cell
 table-layout
 tableValues
 tablevalues
+tan
 target
 targetX
 targetY
@@ -2015,6 +2268,7 @@ tb-lr
 tb-rl
 tbody
 td
+teal
 template
 text
 text-align-last
@@ -2055,11 +2309,18 @@ tfoot
 th
 thead
 this
+thistle
+threeddarkshadow
+threedface
+threedhighlight
+threedlightshadow
+threedshadow
 throw
 time
 title
 to
 toString
+tomato
 top
 top-center
 top-left
@@ -2083,6 +2344,8 @@ translate3d
 translateX
 translateY
 translateZ
+translatey
+translatez
 transparent
 tref
 true
@@ -2091,6 +2354,7 @@ try
 tspan
 tt
 turn
+turquoise
 type
 typeof
 u
@@ -2122,6 +2386,8 @@ viewTarget
 viewbox
 viewport
 viewtarget
+violet
+visitedtext
 vkern
 vmax
 vmin
@@ -2129,12 +2395,18 @@ void
 vw
 wbr
 weight
+wheat
 where
 while
+white
 white-space
+whitesmoke
 widows
 width
 will-change
+window
+windowframe
+windowtext
 with
 woff
 woff2
@@ -2161,8 +2433,13 @@ xml:space
 xmlns
 xmlns:xlink
 xmp
+xyz
+xyz-d50
+xyz-d65
 yChannelSelector
 ychannelselector
+yellow
+yellowgreen
 yield
 z-index
 zoom

crates/swc_css_ast/src/at_rule.rs

@@ -36,6 +36,15 @@ impl PartialEq<str> for AtRuleName {
     }
 }
 
+impl PartialEq<JsWord> for AtRuleName {
+    fn eq(&self, other: &JsWord) -> bool {
+        match self {
+            AtRuleName::DashedIdent(v) => v.value == *other,
+            AtRuleName::Ident(v) => v.value == *other,
+        }
+    }
+}
+
 #[ast_node]
 #[derive(Eq, Hash, Is, EqIgnoreSpan)]
 pub enum AtRulePrelude {

crates/swc_css_ast/src/base.rs

@@ -1,4 +1,5 @@
 use is_macro::Is;
+use swc_atoms::JsWord;
 use swc_common::{ast_node, util::take::Take, EqIgnoreSpan, Span};
 
 use crate::{
@@ -100,12 +101,39 @@ impl Take for SimpleBlock {
     }
 }
 
+#[ast_node]
+#[derive(Eq, Hash, Is, EqIgnoreSpan)]
+pub enum FunctionName {
+    #[tag("Ident")]
+    Ident(Ident),
+    #[tag("DashedIdent")]
+    DashedIdent(DashedIdent),
+}
+
+impl PartialEq<str> for FunctionName {
+    fn eq(&self, other: &str) -> bool {
+        match self {
+            FunctionName::DashedIdent(v) => *v == *other,
+            FunctionName::Ident(v) => *v == *other,
+        }
+    }
+}
+
+impl PartialEq<JsWord> for FunctionName {
+    fn eq(&self, other: &JsWord) -> bool {
+        match self {
+            FunctionName::DashedIdent(v) => v.value == *other,
+            FunctionName::Ident(v) => v.value == *other,
+        }
+    }
+}
+
 #[ast_node("Function")]
 #[derive(Eq, Hash, EqIgnoreSpan)]
 pub struct Function {
     /// Span starting from the `lo` of identifier and to the end of `)`.
     pub span: Span,
-    pub name: Ident,
+    pub name: FunctionName,
     pub value: Vec<ComponentValue>,
 }
 
@@ -267,6 +295,24 @@ pub enum DeclarationName {
     DashedIdent(DashedIdent),
 }
 
+impl PartialEq<str> for DeclarationName {
+    fn eq(&self, other: &str) -> bool {
+        match self {
+            DeclarationName::DashedIdent(v) => *v == *other,
+            DeclarationName::Ident(v) => *v == *other,
+        }
+    }
+}
+
+impl PartialEq<JsWord> for DeclarationName {
+    fn eq(&self, other: &JsWord) -> bool {
+        match self {
+            DeclarationName::DashedIdent(v) => v.value == *other,
+            DeclarationName::Ident(v) => v.value == *other,
+        }
+    }
+}
+
 #[ast_node("ImportantFlag")]
 #[derive(Eq, Hash, EqIgnoreSpan)]
 pub struct ImportantFlag {

crates/swc_css_ast/src/lib.rs

@@ -32,3 +32,26 @@ macro_rules! matches_eq_ignore_ascii_case {
         )* false
     }};
 }
+
+/// Returns true if the given value matches one of the given patterns.
+///
+/// The type of value and patterns should be identical.
+///
+/// # Examples
+///
+/// ```
+/// use swc_atoms::JsWord;
+/// use swc_atoms::js_word;
+/// use swc_css_ast::*;
+///
+/// assert!(matches_eq!(JsWord::from("a"), js_word!("a")));
+/// assert!(matches_eq!("a", "a"));
+/// ```
+#[macro_export]
+macro_rules! matches_eq {
+    ($value:expr, $($pat:expr),*) => {{
+        $(
+            $value == $pat ||
+        )* false
+    }};
+}

crates/swc_css_codegen/src/lib.rs

@@ -1315,6 +1315,14 @@ where
         write_raw!(self, ")");
     }
 
+    #[emitter]
+    fn emit_function_name(&mut self, n: &FunctionName) -> Result {
+        match n {
+            FunctionName::Ident(n) => emit!(self, n),
+            FunctionName::DashedIdent(n) => emit!(self, n),
+        }
+    }
+
     #[emitter]
     fn emit_color_profile_name(&mut self, n: &ColorProfileName) -> Result {
         match n {

crates/swc_css_codegen/tests/fixture.rs

@@ -286,12 +286,6 @@ impl VisitMut for NormalizeTest {
         }
     }
 
-    fn visit_mut_function(&mut self, n: &mut Function) {
-        n.visit_mut_children_with(self);
-
-        n.name.value = n.name.value.to_lowercase().into();
-    }
-
     fn visit_mut_pseudo_class_selector(&mut self, n: &mut PseudoClassSelector) {
         n.visit_mut_children_with(self);
 

crates/swc_css_compat/src/compiler/color_alpha_parameter.rs

@@ -1,45 +1,42 @@
 use swc_atoms::js_word;
-use swc_css_ast::{AbsoluteColorBase, ComponentValue};
+use swc_css_ast::{AbsoluteColorBase, ComponentValue, FunctionName};
 
 use crate::compiler::Compiler;
 
 impl Compiler {
     pub(crate) fn process_color_alpha_parameter(&mut self, n: &mut AbsoluteColorBase) {
         if let AbsoluteColorBase::Function(function) = n {
-            let name = function.name.value.to_ascii_lowercase();
-
             if let Some(ComponentValue::AlphaValue(_) | ComponentValue::Function(_)) =
                 function.value.last()
             {
-                if !matches!(
+                let name = match &mut function.name {
-                    name,
+                    FunctionName::Ident(name) => name,
-                    js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla")
+                    _ => {
-                ) {
                         return;
                     }
+                };
 
-                match name {
+                if name.value == js_word!("rgb") {
-                    js_word!("rgb") => {
+                    name.value = js_word!("rgba");
-                        function.name.value = js_word!("rgba");
+                    name.raw = None;
-                        function.name.raw = None;
+                } else if name.value == js_word!("hsl") {
-                    }
+                    name.value = js_word!("hsla");
-                    js_word!("hsl") => {
+                    name.raw = None;
-                        function.name.value = js_word!("hsla");
-                        function.name.raw = None;
-                    }
-                    _ => {}
                 }
             } else {
-                match name {
+                let name = match &mut function.name {
-                    js_word!("rgba") => {
+                    FunctionName::Ident(name) => name,
-                        function.name.value = js_word!("rgb");
+                    _ => {
-                        function.name.raw = None;
+                        return;
                     }
-                    js_word!("hsla") => {
+                };
-                        function.name.value = js_word!("hsl");
+
-                        function.name.raw = None;
+                if name.value == js_word!("rgba") {
-                    }
+                    name.value = js_word!("rgb");
-                    _ => {}
+                    name.raw = None;
+                } else if name.value == js_word!("hsla") {
+                    name.value = js_word!("hsl");
+                    name.raw = None;
                 }
             }
         }

crates/swc_css_compat/src/compiler/color_hex_alpha.rs

@@ -2,7 +2,7 @@ use swc_atoms::js_word;
 use swc_common::DUMMY_SP;
 use swc_css_ast::{
     AbsoluteColorBase, AlphaValue, Color, ComponentValue, Delimiter, DelimiterValue, Function,
-    Ident, Number,
+    FunctionName, Ident, Number,
 };
 use swc_css_utils::{hex_to_rgba, round_alpha};
 
@@ -43,11 +43,11 @@ impl Compiler {
             *n = ComponentValue::Color(Box::new(Color::AbsoluteColorBase(
                 AbsoluteColorBase::Function(Function {
                     span: hex_color.span,
-                    name: Ident {
+                    name: FunctionName::Ident(Ident {
                         span: DUMMY_SP,
                         value: js_word!("rgba"),
                         raw: None,
-                    },
+                    }),
                     value: vec![
                         ComponentValue::Number(Box::new(Number {
                             span: DUMMY_SP,

crates/swc_css_compat/src/compiler/color_hwb.rs

@@ -1,7 +1,7 @@
 use swc_atoms::js_word;
 use swc_css_ast::{
-    AbsoluteColorBase, AlphaValue, Angle, ComponentValue, Delimiter, DelimiterValue, Hue, Ident,
+    AbsoluteColorBase, AlphaValue, Angle, ComponentValue, Delimiter, DelimiterValue, FunctionName,
-    Number, Percentage,
+    Hue, Ident, Number, Percentage,
 };
 use swc_css_utils::{angle_to_deg, hwb_to_rgb, to_rgb255};
 
@@ -95,7 +95,7 @@ impl Compiler {
 
     pub(crate) fn process_color_hwb(&mut self, n: &mut AbsoluteColorBase) {
         if let AbsoluteColorBase::Function(function) = n {
-            if function.name.value != js_word!("hwb") {
+            if function.name != js_word!("hwb") {
                 return;
             }
 
@@ -120,11 +120,11 @@ impl Compiler {
 
             if a == 1.0 {
                 *n = AbsoluteColorBase::Function(swc_css_ast::Function {
-                    name: Ident {
+                    name: FunctionName::Ident(Ident {
                         value: js_word!("rgb"),
                         span: Default::default(),
                         raw: None,
-                    },
+                    }),
                     value: vec![
                         ComponentValue::Number(Box::new(Number {
                             value: rgb[0].round(),
@@ -154,11 +154,11 @@ impl Compiler {
                 });
             } else {
                 *n = AbsoluteColorBase::Function(swc_css_ast::Function {
-                    name: Ident {
+                    name: FunctionName::Ident(Ident {
                         value: js_word!("rgba"),
                         span: Default::default(),
                         raw: None,
-                    },
+                    }),
                     value: vec![
                         ComponentValue::Number(Box::new(Number {
                             value: rgb[0].round(),

crates/swc_css_compat/src/compiler/color_space_separated_parameters.rs

@@ -2,7 +2,7 @@ use std::mem::take;
 
 use swc_atoms::js_word;
 use swc_common::DUMMY_SP;
-use swc_css_ast::{AbsoluteColorBase, ComponentValue, Delimiter, DelimiterValue};
+use swc_css_ast::{matches_eq, AbsoluteColorBase, ComponentValue, Delimiter, DelimiterValue};
 
 use crate::compiler::Compiler;
 
@@ -12,11 +12,12 @@ impl Compiler {
         n: &mut AbsoluteColorBase,
     ) {
         if let AbsoluteColorBase::Function(function) = n {
-            let name = function.name.value.to_ascii_lowercase();
+            if !matches_eq!(
-
+                function.name,
-            if !matches!(
+                js_word!("rgb"),
-                name,
+                js_word!("rgba"),
-                js_word!("rgb") | js_word!("rgba") | js_word!("hsl") | js_word!("hsla")
+                js_word!("hsl"),
+                js_word!("hsla")
             ) {
                 return;
             }

crates/swc_css_compat/src/compiler/legacy_rgb_and_hsl.rs

@@ -1,7 +1,9 @@
 use std::f64::consts::PI;
 
 use swc_atoms::js_word;
-use swc_css_ast::{AbsoluteColorBase, AlphaValue, Angle, ComponentValue, Hue, Number, Percentage};
+use swc_css_ast::{
+    matches_eq, AbsoluteColorBase, AlphaValue, Angle, ComponentValue, Hue, Number, Percentage,
+};
 use swc_css_utils::{clamp_unit_f64, round_alpha};
 
 use crate::compiler::Compiler;
@@ -9,10 +11,8 @@ use crate::compiler::Compiler;
 impl Compiler {
     pub(crate) fn process_rgb_and_hsl(&mut self, n: &mut AbsoluteColorBase) {
         if let AbsoluteColorBase::Function(function) = n {
-            let name = function.name.value.to_ascii_lowercase();
+            let is_rgb = matches_eq!(function.name, js_word!("rgb"), js_word!("rgba"));
-
+            let is_hsl = matches_eq!(function.name, js_word!("hsl"), js_word!("hsla"));
-            let is_rgb = matches!(name, js_word!("rgb") | js_word!("rgba"));
-            let is_hsl = matches!(name, js_word!("hsl") | js_word!("hsla"));
 
             if is_rgb {
                 function.value = function

crates/swc_css_lints/src/rules/custom_property_no_missing_var_function.rs

@@ -1,3 +1,4 @@
+use swc_atoms::js_word;
 use swc_css_ast::*;
 use swc_css_visit::{Visit, VisitWith};
 
@@ -37,8 +38,7 @@ impl Visit for CustomPropertyNoMissingVarFunction {
     }
 
     fn visit_function(&mut self, function: &Function) {
-        self.in_var_function
+        self.in_var_function.push(function.name == js_word!("var"));
-            .push(function.name.value.eq_str_ignore_ascii_case("var"));
         function.visit_children_with(self);
         self.in_var_function.pop();
     }

crates/swc_css_lints/tests/rules/fail/custom-property-no-missing-var-function/output.swc-stderr

@@ -46,7 +46,7 @@
  7 | :root { --bar: 0; } a { color: --foo(--bar); }
    `----
 
-  x Unexpected missing var function for '--bar'.
+  x Unexpected missing var function for '--foo'.
    ,-[$DIR/tests/rules/fail/custom-property-no-missing-var-function/input.css:6:1]
  6 | :root { --foo: pink; }  a { color: --foo, red; }
  7 | :root { --bar: 0; } a { color: --foo(--bar); }

crates/swc_css_minifier/src/compressor/color.rs

@@ -119,11 +119,11 @@ macro_rules! make_color {
 
                 Color::AbsoluteColorBase(AbsoluteColorBase::Function(Function {
                     span: $span,
-                    name: Ident {
+                    name: FunctionName::Ident(Ident {
                         span: DUMMY_SP,
                         value: js_word!("rgba"),
                         raw: None,
-                    },
+                    }),
                     value: vec![
                         ComponentValue::Number(Box::new(Number {
                             span: DUMMY_SP,
@@ -387,7 +387,7 @@ impl Compressor {
                 name,
                 value,
                 ..
-            })) if matches!(&*name.value, "rgb" | "rgba") => {
+            })) if name == &js_word!("rgb") || name == &js_word!("rgba") => {
                 let rgba: Vec<_> = value
                     .iter()
                     .filter(|n| {
@@ -425,7 +425,7 @@ impl Compressor {
                 name,
                 value,
                 ..
-            })) if matches!(&*name.value, "hsl" | "hsla") => {
+            })) if name == &js_word!("hsl") || name == &js_word!("hsla") => {
                 let hsla: Vec<_> = value
                     .iter()
                     .filter(|n| {
@@ -465,7 +465,7 @@ impl Compressor {
                 name,
                 value,
                 ..
-            })) if matches!(&*name.value, "hwb") => {
+            })) if name == &js_word!("hwb") => {
                 let h = match self.get_hue(value.get(0).as_ref()) {
                     Some(value) => value,
                     _ => return,

crates/swc_css_minifier/src/compressor/easing_function.rs

@@ -10,9 +10,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 span,
-            }) if name.value.eq_ignore_ascii_case(&js_word!("cubic-bezier"))
+            }) if name == &js_word!("cubic-bezier") && function_value.len() == 7 => {
-                && function_value.len() == 7 =>
-            {
                 if let (
                     first,
                     second,
@@ -81,9 +79,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 span,
-            }) if name.value.eq_ignore_ascii_case(&js_word!("steps"))
+            }) if name == &js_word!("steps") && function_value.len() == 3 => {
-                && function_value.len() == 3 =>
-            {
                 match (&function_value[0], &function_value[2]) {
                     (
                         ComponentValue::Integer(box Integer {

crates/swc_css_minifier/src/compressor/math/mod.rs

@@ -1,13 +1,10 @@
 use swc_atoms::js_word;
 use swc_css_ast::*;
 
-pub fn is_calc_function_name(ident: &Ident) -> bool {
+pub fn is_calc_function_name(function_name: &FunctionName) -> bool {
-    matches_eq_ignore_ascii_case!(
+    *function_name == js_word!("calc")
-        ident.value,
+        || *function_name == js_word!("-webkit-calc")
-        js_word!("calc"),
+        || *function_name == js_word!("-moz-calc")
-        js_word!("-webkit-calc"),
-        js_word!("-moz-calc")
-    )
 }
 
 pub fn transform_calc_value_into_component_value(calc_value: &CalcValue) -> Option<ComponentValue> {

crates/swc_css_minifier/src/compressor/mod.rs

@@ -341,8 +341,8 @@ impl VisitMut for Compressor {
     }
 
     fn visit_mut_function(&mut self, n: &mut Function) {
-        if matches_eq_ignore_ascii_case!(
+        if matches_eq!(
-            n.name.value,
+            n.name,
             js_word!("rotate"),
             js_word!("skew"),
             js_word!("skewx"),

crates/swc_css_minifier/src/compressor/transform_function.rs

@@ -1,4 +1,5 @@
 use swc_atoms::js_word;
+use swc_common::Spanned;
 use swc_css_ast::*;
 
 use super::Compressor;
@@ -10,9 +11,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("translate"))
+            }) if name == &js_word!("translate") && function_value.len() == 3 => {
-                && function_value.len() == 3 =>
-            {
                 match (function_value.get(0), function_value.get(2)) {
                     (
                         Some(first),
@@ -30,11 +29,11 @@ impl Compressor {
                         })),
                         Some(second),
                     ) if *first_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("translateY"),
+                            value: js_word!("translatey"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![second.clone()];
                     }
                     _ => {}
@@ -44,9 +43,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("translate3d"))
+            }) if name == &js_word!("translate3d") && function_value.len() == 5 => {
-                && function_value.len() == 5 =>
-            {
                 match (
                     function_value.get(0),
                     function_value.get(2),
@@ -63,11 +60,11 @@ impl Compressor {
                         })),
                         Some(third),
                     ) if *first_number == 0 && *second_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("translateZ"),
+                            value: js_word!("translatez"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![third.clone()];
                     }
                     _ => {}
@@ -77,9 +74,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("scale"))
+            }) if name == &js_word!("scale") && function_value.len() == 3 => {
-                && function_value.len() == 3 =>
-            {
                 match (function_value.get(0), function_value.get(2)) {
                     (
                         Some(
@@ -102,11 +97,11 @@ impl Compressor {
                             ..
                         })),
                     ) if *second_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("scaleX"),
+                            value: js_word!("scalex"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![first.clone()];
                     }
                     (
@@ -116,11 +111,11 @@ impl Compressor {
                         })),
                         Some(second),
                     ) if *first_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("scaleY"),
+                            value: js_word!("scaley"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![second.clone()];
                     }
                     _ => {}
@@ -130,9 +125,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("scale3d"))
+            }) if name == &js_word!("scale3d") && function_value.len() == 5 => {
-                && function_value.len() == 5 =>
-            {
                 match (
                     function_value.get(0),
                     function_value.get(2),
@@ -149,11 +142,11 @@ impl Compressor {
                             ..
                         })),
                     ) if *second_number == 1 && *third_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("scaleX"),
+                            value: js_word!("scalex"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![first.clone()];
                     }
                     (
@@ -167,11 +160,11 @@ impl Compressor {
                             ..
                         })),
                     ) if *first_number == 1 && *third_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("scaleY"),
+                            value: js_word!("scaley"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![second.clone()];
                     }
                     (
@@ -185,11 +178,11 @@ impl Compressor {
                         })),
                         Some(third),
                     ) if *first_number == 1 && *second_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("scaleZ"),
+                            value: js_word!("scalez"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![third.clone()];
                     }
                     _ => {}
@@ -199,9 +192,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("matrix3d"))
+            }) if name == &js_word!("matrix3d") && function_value.len() == 31 => {
-                && function_value.len() == 31 =>
-            {
                 match (
                     function_value.get(0),
                     function_value.get(1),
@@ -288,11 +279,11 @@ impl Compressor {
                         && *fifteenth_number == 0
                         && *sixteenth_number == 1 =>
                     {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
                             value: js_word!("matrix"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![
                             first.clone(),
                             first_comma.clone(),
@@ -314,9 +305,7 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("rotate3d"))
+            }) if name == &js_word!("rotate3d") && function_value.len() == 7 => {
-                && function_value.len() == 7 =>
-            {
                 match (
                     function_value.get(0),
                     function_value.get(2),
@@ -338,11 +327,11 @@ impl Compressor {
                         })),
                         Some(fourth_value),
                     ) if *first_number == 1 && *second_number == 0 && *third_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("rotateX"),
+                            value: js_word!("rotatex"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![fourth_value.clone()];
                     }
                     (
@@ -360,11 +349,11 @@ impl Compressor {
                         })),
                         Some(fourth_value),
                     ) if *first_number == 0 && *second_number == 1 && *third_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("rotateY"),
+                            value: js_word!("rotatey"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![fourth_value.clone()];
                     }
                     (
@@ -382,11 +371,11 @@ impl Compressor {
                         })),
                         Some(fourth_value),
                     ) if *first_number == 0 && *second_number == 0 && *third_number == 1 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
                             value: js_word!("rotate"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![fourth_value.clone()];
                     }
                     _ => {}
@@ -396,23 +385,19 @@ impl Compressor {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("rotatez"))
+            }) if name == &js_word!("rotatez") && function_value.len() == 1 => {
-                && function_value.len() == 1 =>
+                *name = FunctionName::Ident(Ident {
-            {
+                    span: name.span(),
-                *name = Ident {
-                    span: name.span,
                     value: js_word!("rotate"),
                     raw: None,
-                };
+                });
             }
 
             ComponentValue::Function(box Function {
                 name,
                 value: function_value,
                 ..
-            }) if name.value.eq_ignore_ascii_case(&js_word!("skew"))
+            }) if name == &js_word!("skew") && function_value.len() == 3 => {
-                && function_value.len() == 3 =>
-            {
                 match (function_value.get(0), function_value.get(2)) {
                     (
                         Some(first),
@@ -421,11 +406,11 @@ impl Compressor {
                             ..
                         })),
                     ) if *second_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("skewX"),
+                            value: js_word!("skewx"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![first.clone()];
                     }
 
@@ -436,11 +421,11 @@ impl Compressor {
                         })),
                         Some(second),
                     ) if *first_number == 0 => {
-                        *name = Ident {
+                        *name = FunctionName::Ident(Ident {
-                            span: name.span,
+                            span: name.span(),
-                            value: js_word!("skewY"),
+                            value: js_word!("skewy"),
                             raw: None,
-                        };
+                        });
                         *function_value = vec![second.clone()];
                     }
                     _ => {}

crates/swc_css_minifier/tests/fixture/compress_angle/output.min.css

@@ -1 +1 @@
-.deg{transform:rotate(0);transform:rotate(9deg);transform:rotate(-9deg);transform:rotate(10deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(350deg);transform:rotate(-9deg);transform:rotate(0);transform:rotate(360.5deg);transform:rotate(-360.5deg);transform:rotate(1deg);transform:rotate(-1deg)}.grad{transform:rotate(0);transform:rotate(9grad);transform:rotate(-9grad);transform:rotate(9deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(800.5grad);transform:rotate(-800.5grad);transform:rotate(821grad);transform:rotate(-821grad)}.rad{transform:rotate(0);transform:rotate(1rad);transform:rotate(1.5rad);transform:rotate(-1.5rad)}.turn{transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0)}.cross{transform:rotate(90deg);transform:rotate(1.57rad);transform:rotate(3.1416rad)}.class1{transform:rotate(0)}.class2{transform:skew(0,0)}.class3{transform:skewx(0)}.class4{transform:skewy(0)}.class5{transform:rotate3d(10,10,10,0)}.class6{transform:rotatex(0)}.class7{transform:rotatey(0)}.class8{transform:rotate(0)}.class9,.class10{transform:rotate(0)}.class11{transform:rotate(0)}@keyframes spinner-border{to{transform:rotate(360deg)}}
+.deg{transform:rotate(0);transform:rotate(9deg);transform:rotate(-9deg);transform:rotate(10deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(350deg);transform:rotate(-9deg);transform:rotate(0);transform:rotate(360.5deg);transform:rotate(-360.5deg);transform:rotate(1deg);transform:rotate(-1deg)}.grad{transform:rotate(0);transform:rotate(9grad);transform:rotate(-9grad);transform:rotate(9deg);transform:rotate(180deg);transform:rotate(0);transform:rotate(800.5grad);transform:rotate(-800.5grad);transform:rotate(821grad);transform:rotate(-821grad)}.rad{transform:rotate(0);transform:rotate(1rad);transform:rotate(1.5rad);transform:rotate(-1.5rad)}.turn{transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0);transform:rotate(180deg);transform:rotate(0)}.cross{transform:rotate(90deg);transform:rotate(1.57rad);transform:rotate(3.1416rad)}.class1{transform:rotate(0)}.class2{transform:skew(0,0)}.class3{transform:skewx(0)}.class4{transform:skewy(0)}.class5{transform:rotate3d(10,10,10,0)}.class6{transform:rotatex(0)}.class7{transform:rotatey(0)}.class8,.class9,.class10,.class11{transform:rotate(0)}@keyframes spinner-border{to{transform:rotate(360deg)}}

crates/swc_css_modules/tests/fixture/index-loader-syntax.modules.transform.json

@@ -1,14 +1,14 @@
 {
-  "blue": [
-    {
-      "type": "local",
-      "name": "__local__blue"
-    }
-  ],
   "foo": [
     {
       "type": "local",
       "name": "__local__foo"
     }
+  ],
+  "blue": [
+    {
+      "type": "local",
+      "name": "__local__blue"
+    }
   ]
 }

crates/swc_css_parser/src/parser/input.rs

@@ -1,8 +1,8 @@
 use std::{borrow::Cow, fmt::Debug, mem::take};
 
-use swc_atoms::{Atom, JsWord};
+use swc_atoms::Atom;
 use swc_common::{BytePos, Span, Spanned, SyntaxContext};
-use swc_css_ast::{ComponentValue, ListOfComponentValues, Token, TokenAndSpan};
+use swc_css_ast::{ComponentValue, FunctionName, ListOfComponentValues, Token, TokenAndSpan};
 
 use super::PResult;
 use crate::error::{Error, ErrorKind};
@@ -224,7 +224,7 @@ type SpanLike = (BytePos, BytePos);
 #[derive(Debug)]
 enum TokenOrBlock<'a> {
     Token(&'a TokenAndSpan),
-    Function(Box<(Span, JsWord, Atom)>),
+    Function(Box<(Span, FunctionName)>),
     LBracket(SpanLike),
     LParen(SpanLike),
     LBrace(SpanLike),
@@ -279,11 +279,7 @@ impl<'a> Input<'a> {
                             function.name.span_hi() + BytePos(1),
                             Default::default(),
                         ),
-                        function.name.value.clone(),
+                        function.name.clone(),
-                        match &function.name.raw {
-                            Some(raw) => raw.clone(),
-                            _ => Atom::from(function.name.value.clone()),
-                        },
                     ))));
                 }
 
@@ -381,13 +377,26 @@ impl<'a> Input<'a> {
                         TokenOrBlock::Token(token_and_span) => {
                             return Ok(Cow::Borrowed(token_and_span))
                         }
-                        TokenOrBlock::Function(function) => TokenAndSpan {
+                        TokenOrBlock::Function(function) => {
+                            let name = match function.1 {
+                                FunctionName::Ident(name) => match name.raw {
+                                    Some(raw) => (name.value, raw),
+                                    _ => (name.value.clone(), Atom::from(name.value)),
+                                },
+                                FunctionName::DashedIdent(name) => match name.raw {
+                                    Some(raw) => (format!("--{}", name.value).into(), raw),
+                                    _ => (name.value.clone(), Atom::from(name.value)),
+                                },
+                            };
+
+                            TokenAndSpan {
                                 span: function.0,
                                 token: Token::Function {
-                                value: function.1,
+                                    value: name.0,
-                                raw: function.2,
+                                    raw: name.1,
-                            },
                                 },
+                            }
+                        }
                         TokenOrBlock::LBracket(span) => TokenAndSpan {
                             span: Span::new(span.0, span.1, Default::default()),
                             token: Token::LBracket,

crates/swc_css_parser/src/parser/syntax/mod.rs

@@ -196,7 +196,7 @@ where
                     at_rule.span = span!(self, span.lo);
 
                     // Canonicalization against a grammar
-                    if self.ctx.need_canonicalize {
+                    if !is_dashed_ident && self.ctx.need_canonicalize {
                         at_rule = self.canonicalize_at_rule_prelude(at_rule)?;
                     }
 
@@ -214,7 +214,7 @@ where
                     at_rule.span = span!(self, span.lo);
 
                     // Canonicalization against a grammar
-                    if self.ctx.need_canonicalize {
+                    if !is_dashed_ident && self.ctx.need_canonicalize {
                         at_rule = self.canonicalize_at_rule_prelude(at_rule)?;
                         at_rule = self.canonicalize_at_rule_block(at_rule)?;
                     }
@@ -605,14 +605,17 @@ where
         //
         // Return nothing.
         let span = self.input.cur_span();
-        let is_dashed_ident = match cur!(self) {
+        let declaration_name = match cur!(self) {
-            Token::Ident { value, .. } => value.starts_with("--"),
+            Token::Ident { value, .. } => value,
             _ => {
                 return Err(Error::new(span, ErrorKind::Expected("ident")));
             }
         };
+        let is_dashed_ident = declaration_name.starts_with("--");
         let name = if is_dashed_ident {
-            DeclarationName::DashedIdent(self.parse()?)
+            let ident = self.parse()?;
+
+            DeclarationName::DashedIdent(ident)
         } else {
             let mut ident: Ident = self.parse()?;
 
@@ -923,16 +926,25 @@ where
         // Create a function with its name equal to the value of the current input token
         // and with its value initially set to an empty list.
         let span = self.input.cur_span();
-        let ident = match bump!(self) {
+        let function_name = match bump!(self) {
             Token::Function { value, raw } => (value, raw),
             _ => {
                 unreachable!()
             }
         };
-        let name = Ident {
+        let is_dashed_ident = function_name.0.starts_with("--");
+        let name = if is_dashed_ident {
+            FunctionName::DashedIdent(DashedIdent {
                 span: Span::new(span.lo, span.hi - BytePos(1), Default::default()),
-            value: ident.0,
+                value: function_name.0[2..].into(),
-            raw: Some(ident.1),
+                raw: Some(function_name.1),
+            })
+        } else {
+            FunctionName::Ident(Ident {
+                span: Span::new(span.lo, span.hi - BytePos(1), Default::default()),
+                value: function_name.0.to_ascii_lowercase(),
+                raw: Some(function_name.1),
+            })
         };
         let mut function = Function {
             span: Default::default(),
@@ -975,7 +987,7 @@ where
         function.span = span!(self, span.lo);
 
         // Canonicalization against a grammar
-        if self.ctx.need_canonicalize {
+        if !is_dashed_ident && self.ctx.need_canonicalize {
             function = self.canonicalize_function_value(function)?;
         }
 

crates/swc_css_parser/src/parser/util.rs

@@ -267,11 +267,10 @@ where
         &mut self,
         mut function: Function,
     ) -> PResult<Function> {
-        let function_name = function.name.value.to_ascii_lowercase();
         let locv = self.create_locv(function.value);
 
         function.value = match self.parse_according_to_grammar(&locv, |parser| {
-            parser.parse_function_values(&function_name)
+            parser.parse_function_values(&function.name)
         }) {
             Ok(values) => values,
             Err(err) => {

crates/swc_css_parser/tests/fixture/at-rule/import/output.json

@@ -1057,7 +1057,7 @@
               "end": 494,
               "ctxt": 0
             },
-            "value": "LAYER",
+            "value": "layer",
             "raw": "LAYER"
           },
           "value": [
@@ -1547,7 +1547,7 @@
                 "end": 709,
                 "ctxt": 0
               },
-              "value": "SUPPORTS",
+              "value": "supports",
               "raw": "SUPPORTS"
             },
             "value": [
@@ -9192,7 +9192,7 @@
               "end": 4755,
               "ctxt": 0
             },
-            "value": "LAYER",
+            "value": "layer",
             "raw": "LAYER"
           },
           "value": [
@@ -9239,7 +9239,7 @@
                 "end": 4773,
                 "ctxt": 0
               },
-              "value": "SUPPORTS",
+              "value": "supports",
               "raw": "SUPPORTS"
             },
             "value": [

crates/swc_css_parser/tests/fixture/at-rule/keyframe/output.json

@@ -256,7 +256,7 @@
                           "end": 158,
                           "ctxt": 0
                         },
-                        "value": "translateX",
+                        "value": "translatex",
                         "raw": "translateX"
                       },
                       "value": [
@@ -354,7 +354,7 @@
                           "end": 209,
                           "ctxt": 0
                         },
-                        "value": "translateX",
+                        "value": "translatex",
                         "raw": "translateX"
                       },
                       "value": [
@@ -1566,7 +1566,7 @@
                           "end": 718,
                           "ctxt": 0
                         },
-                        "value": "translateX",
+                        "value": "translatex",
                         "raw": "translateX"
                       },
                       "value": [
@@ -1664,7 +1664,7 @@
                           "end": 769,
                           "ctxt": 0
                         },
-                        "value": "translateX",
+                        "value": "translatex",
                         "raw": "translateX"
                       },
                       "value": [

crates/swc_css_parser/tests/fixture/at-rule/supports/output.json

@@ -4161,13 +4161,13 @@
                   "ctxt": 0
                 },
                 "name": {
-                  "type": "Ident",
+                  "type": "DashedIdent",
                   "span": {
                     "start": 1709,
                     "end": 1718,
                     "ctxt": 0
                   },
-                  "value": "--element",
+                  "value": "element",
                   "raw": "--element"
                 },
                 "value": [

crates/swc_css_parser/tests/fixture/at-rule/supports/span.swc-stderr

@@ -6331,7 +6331,7 @@
  52 |     [--self] {
     `----
 
-  x Ident
+  x DashedIdent
     ,-[$DIR/tests/fixture/at-rule/supports/input.css:50:1]
  50 | 
  51 | @supports (--element(".minwidth")) {
@@ -8977,7 +8977,7 @@
  89 |         }
     `----
 
-  x Ident { value: Atom('black' type=inline), raw: "black" }
+  x Ident { value: Atom('black' type=static), raw: "black" }
     ,-[$DIR/tests/fixture/at-rule/supports/input.css:87:1]
  87 |         from {
  88 |             color: black;
@@ -9163,7 +9163,7 @@
  92 |         }
     `----
 
-  x Ident { value: Atom('white' type=inline), raw: "white" }
+  x Ident { value: Atom('white' type=static), raw: "white" }
     ,-[$DIR/tests/fixture/at-rule/supports/input.css:90:1]
  90 |         to {
  91 |             color: white
@@ -9527,7 +9527,7 @@
  101 |     body {
      `----
 
-  x Ident { value: Atom('green' type=inline), raw: "green" }
+  x Ident { value: Atom('green' type=static), raw: "green" }
      ,-[$DIR/tests/fixture/at-rule/supports/input.css:99:1]
   99 | 
  100 | @supports (--foo: green) {
@@ -11493,7 +11493,7 @@
  126 |         }
      `----
 
-  x Ident { value: Atom('black' type=inline), raw: "black" }
+  x Ident { value: Atom('black' type=static), raw: "black" }
      ,-[$DIR/tests/fixture/at-rule/supports/input.css:124:1]
  124 |         from {
  125 |             color: black;
@@ -11679,7 +11679,7 @@
  129 |         }
      `----
 
-  x Ident { value: Atom('white' type=inline), raw: "white" }
+  x Ident { value: Atom('white' type=static), raw: "white" }
      ,-[$DIR/tests/fixture/at-rule/supports/input.css:127:1]
  127 |         to {
  128 |             color: white

crates/swc_css_parser/tests/fixture/at-rule/unknown/span.swc-stderr

@@ -6686,7 +6686,7 @@
  50 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/fixture/at-rule/unknown/input.css:48:1]
  48 |     
  49 |     color: red;

crates/swc_css_parser/tests/fixture/dashed-ident/input.css

@@ -13,3 +13,7 @@
 
 @--custom {}
 @--library1-custom {}
+
+.class {
+    --vendor-property: --vendor-function("test");
+}

crates/swc_css_parser/tests/fixture/dashed-ident/output.json

@@ -2,7 +2,7 @@
   "type": "Stylesheet",
   "span": {
     "start": 1,
-    "end": 172,
+    "end": 234,
     "ctxt": 0
   },
   "rules": [
@@ -559,6 +559,138 @@
         },
         "value": []
       }
+    },
+    {
+      "type": "QualifiedRule",
+      "span": {
+        "start": 173,
+        "end": 233,
+        "ctxt": 0
+      },
+      "prelude": {
+        "type": "SelectorList",
+        "span": {
+          "start": 173,
+          "end": 179,
+          "ctxt": 0
+        },
+        "children": [
+          {
+            "type": "ComplexSelector",
+            "span": {
+              "start": 173,
+              "end": 179,
+              "ctxt": 0
+            },
+            "children": [
+              {
+                "type": "CompoundSelector",
+                "span": {
+                  "start": 173,
+                  "end": 179,
+                  "ctxt": 0
+                },
+                "nestingSelector": null,
+                "typeSelector": null,
+                "subclassSelectors": [
+                  {
+                    "type": "ClassSelector",
+                    "span": {
+                      "start": 173,
+                      "end": 179,
+                      "ctxt": 0
+                    },
+                    "text": {
+                      "type": "Ident",
+                      "span": {
+                        "start": 174,
+                        "end": 179,
+                        "ctxt": 0
+                      },
+                      "value": "class",
+                      "raw": "class"
+                    }
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "block": {
+        "type": "SimpleBlock",
+        "span": {
+          "start": 180,
+          "end": 233,
+          "ctxt": 0
+        },
+        "name": {
+          "type": "PreservedToken",
+          "span": {
+            "start": 180,
+            "end": 181,
+            "ctxt": 0
+          },
+          "token": "LBrace"
+        },
+        "value": [
+          {
+            "type": "Declaration",
+            "span": {
+              "start": 186,
+              "end": 230,
+              "ctxt": 0
+            },
+            "name": {
+              "type": "DashedIdent",
+              "span": {
+                "start": 186,
+                "end": 203,
+                "ctxt": 0
+              },
+              "value": "vendor-property",
+              "raw": "--vendor-property"
+            },
+            "value": [
+              {
+                "type": "Function",
+                "span": {
+                  "start": 205,
+                  "end": 230,
+                  "ctxt": 0
+                },
+                "name": {
+                  "type": "DashedIdent",
+                  "span": {
+                    "start": 205,
+                    "end": 222,
+                    "ctxt": 0
+                  },
+                  "value": "vendor-function",
+                  "raw": "--vendor-function"
+                },
+                "value": [
+                  {
+                    "type": "PreservedToken",
+                    "span": {
+                      "start": 223,
+                      "end": 229,
+                      "ctxt": 0
+                    },
+                    "token": {
+                      "String": {
+                        "value": "test",
+                        "raw": "\"test\""
+                      }
+                    }
+                  }
+                ]
+              }
+            ],
+            "important": null
+          }
+        ]
+      }
     }
   ]
 }

crates/swc_css_parser/tests/fixture/dashed-ident/span.swc-stderr

@@ -15,7 +15,11 @@
  12 | |   }
  13 | |   
  14 | |   @--custom {}
- 15 | `-> @--library1-custom {}
+ 15 | |   @--library1-custom {}
+ 16 | |   
+ 17 | |   .class {
+ 18 | |       --vendor-property: --vendor-function("test");
+ 19 | `-> }
     `----
 
   x Rule
@@ -307,7 +311,7 @@
  8 | }
    `----
 
-  x Ident { value: Atom('blue' type=inline), raw: "blue" }
+  x Ident { value: Atom('blue' type=static), raw: "blue" }
    ,-[$DIR/tests/fixture/dashed-ident/input.css:6:1]
  6 | .foo {
  7 |     --fg-color: blue;
@@ -634,3 +638,155 @@
  15 | @--library1-custom {}
     :                    ^
     `----
+
+  x Rule
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 |     
+ 17 | ,-> .class {
+ 18 | |       --vendor-property: --vendor-function("test");
+ 19 | `-> }
+    `----
+
+  x QualifiedRule
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 |     
+ 17 | ,-> .class {
+ 18 | |       --vendor-property: --vendor-function("test");
+ 19 | `-> }
+    `----
+
+  x SelectorList
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    : ^^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x ComplexSelector
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    : ^^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x CompoundSelector
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    : ^^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x SubclassSelector
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    : ^^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x ClassSelector
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    : ^^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x Ident
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    :  ^^^^^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x SimpleBlock
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 |     
+ 17 | ,-> .class {
+ 18 | |       --vendor-property: --vendor-function("test");
+ 19 | `-> }
+    `----
+
+  x LBrace
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:16:1]
+ 16 | 
+ 17 | .class {
+    :        ^
+ 18 |     --vendor-property: --vendor-function("test");
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x Declaration
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x DeclarationName
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :     ^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x DashedIdent
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :     ^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :                        ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x Function
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :                        ^^^^^^^^^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x DashedIdent
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :                        ^^^^^^^^^^^^^^^^^
+ 19 | }
+    `----
+
+  x ComponentValue
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :                                          ^^^^^^
+ 19 | }
+    `----
+
+  x String { value: Atom('test' type=inline), raw: "\"test\"" }
+    ,-[$DIR/tests/fixture/dashed-ident/input.css:17:1]
+ 17 | .class {
+ 18 |     --vendor-property: --vendor-function("test");
+    :                                          ^^^^^^
+ 19 | }
+    `----

crates/swc_css_parser/tests/fixture/function/unknown/output.json

@@ -182,42 +182,31 @@
                   "ctxt": 0
                 },
                 "name": {
-                  "type": "Ident",
+                  "type": "DashedIdent",
                   "span": {
                     "start": 38,
                     "end": 42,
                     "ctxt": 0
                   },
-                  "value": "--fn",
+                  "value": "fn",
                   "raw": "--fn"
                 },
                 "value": [
                   {
-                    "type": "Length",
+                    "type": "PreservedToken",
                     "span": {
                       "start": 43,
                       "end": 48,
                       "ctxt": 0
                     },
-                    "value": {
+                    "token": {
-                      "type": "Number",
+                      "Dimension": {
-                      "span": {
-                        "start": 43,
-                        "end": 46,
-                        "ctxt": 0
-                      },
                         "value": 100.0,
-                      "raw": "100"
+                        "raw_value": "100",
-                    },
+                        "unit": "px",
-                    "unit": {
+                        "type": "integer",
-                      "type": "Ident",
+                        "raw_unit": "px"
-                      "span": {
+                      }
-                        "start": 46,
-                        "end": 48,
-                        "ctxt": 0
-                      },
-                      "value": "px",
-                      "raw": "px"
                     }
                   }
                 ]
@@ -251,42 +240,31 @@
                   "ctxt": 0
                 },
                 "name": {
-                  "type": "Ident",
+                  "type": "DashedIdent",
                   "span": {
                     "start": 61,
                     "end": 69,
                     "ctxt": 0
                   },
-                  "value": "--fn--fn",
+                  "value": "fn--fn",
                   "raw": "--fn--fn"
                 },
                 "value": [
                   {
-                    "type": "Length",
+                    "type": "PreservedToken",
                     "span": {
                       "start": 70,
                       "end": 75,
                       "ctxt": 0
                     },
-                    "value": {
+                    "token": {
-                      "type": "Number",
+                      "Dimension": {
-                      "span": {
-                        "start": 70,
-                        "end": 73,
-                        "ctxt": 0
-                      },
                         "value": 100.0,
-                      "raw": "100"
+                        "raw_value": "100",
-                    },
+                        "unit": "px",
-                    "unit": {
+                        "type": "integer",
-                      "type": "Ident",
+                        "raw_unit": "px"
-                      "span": {
+                      }
-                        "start": 73,
-                        "end": 75,
-                        "ctxt": 0
-                      },
-                      "value": "px",
-                      "raw": "px"
                     }
                   }
                 ]

crates/swc_css_parser/tests/fixture/function/unknown/span.swc-stderr

@@ -235,7 +235,7 @@
  4 |     prod: --fn--fn(100px);
    `----
 
-  x Ident
+  x DashedIdent
    ,-[$DIR/tests/fixture/function/unknown/input.css:2:1]
  2 |     prod: fn(100px);
  3 |     prod: --fn(100px);
@@ -251,7 +251,7 @@
  4 |     prod: --fn--fn(100px);
    `----
 
-  x Dimension
+  x Dimension(DimensionToken { value: 100.0, raw_value: "100", unit: Atom('px' type=static), type_flag: Integer, raw_unit: "px" })
    ,-[$DIR/tests/fixture/function/unknown/input.css:2:1]
  2 |     prod: fn(100px);
  3 |     prod: --fn(100px);
@@ -259,30 +259,6 @@
  4 |     prod: --fn--fn(100px);
    `----
 
-  x Length
-   ,-[$DIR/tests/fixture/function/unknown/input.css:2:1]
- 2 |     prod: fn(100px);
- 3 |     prod: --fn(100px);
-   :                ^^^^^
- 4 |     prod: --fn--fn(100px);
-   `----
-
-  x Number
-   ,-[$DIR/tests/fixture/function/unknown/input.css:2:1]
- 2 |     prod: fn(100px);
- 3 |     prod: --fn(100px);
-   :                ^^^
- 4 |     prod: --fn--fn(100px);
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/function/unknown/input.css:2:1]
- 2 |     prod: fn(100px);
- 3 |     prod: --fn(100px);
-   :                   ^^
- 4 |     prod: --fn--fn(100px);
-   `----
-
   x ComponentValue
    ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
  3 |     prod: --fn(100px);
@@ -331,7 +307,7 @@
  5 | }
    `----
 
-  x Ident
+  x DashedIdent
    ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
  3 |     prod: --fn(100px);
  4 |     prod: --fn--fn(100px);
@@ -347,34 +323,10 @@
  5 | }
    `----
 
-  x Dimension
+  x Dimension(DimensionToken { value: 100.0, raw_value: "100", unit: Atom('px' type=static), type_flag: Integer, raw_unit: "px" })
    ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
  3 |     prod: --fn(100px);
  4 |     prod: --fn--fn(100px);
    :                    ^^^^^
  5 | }
    `----
-
-  x Length
-   ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
- 3 |     prod: --fn(100px);
- 4 |     prod: --fn--fn(100px);
-   :                    ^^^^^
- 5 | }
-   `----
-
-  x Number
-   ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
- 3 |     prod: --fn(100px);
- 4 |     prod: --fn--fn(100px);
-   :                    ^^^
- 5 | }
-   `----
-
-  x Ident
-   ,-[$DIR/tests/fixture/function/unknown/input.css:3:1]
- 3 |     prod: --fn(100px);
- 4 |     prod: --fn--fn(100px);
-   :                       ^^
- 5 | }
-   `----

crates/swc_css_parser/tests/fixture/value/color/output.json

@@ -491,7 +491,7 @@
                     "end": 171,
                     "ctxt": 0
                   },
-                  "value": "rGb",
+                  "value": "rgb",
                   "raw": "rGb"
                 },
                 "value": [
@@ -2419,7 +2419,7 @@
                     "end": 812,
                     "ctxt": 0
                   },
-                  "value": "rGbA",
+                  "value": "rgba",
                   "raw": "rGbA"
                 },
                 "value": [
@@ -3850,7 +3850,7 @@
                     "end": 1299,
                     "ctxt": 0
                   },
-                  "value": "HsL",
+                  "value": "hsl",
                   "raw": "HsL"
                 },
                 "value": [

crates/swc_css_parser/tests/recovery/at-rule/media/wrong-stylesheet/span.swc-stderr

@@ -164,7 +164,7 @@
  3 |     main {
    `----
 
-  x Ident { value: Atom('teal' type=inline), raw: "teal" }
+  x Ident { value: Atom('teal' type=static), raw: "teal" }
    ,-[$DIR/tests/recovery/at-rule/media/wrong-stylesheet/input.css:1:1]
  1 | @media print {
  2 |     color: teal;

crates/swc_css_parser/tests/recovery/at-rule/page/without-page/span.swc-stderr

@@ -232,7 +232,7 @@
  4 | }
    `----
 
-  x Ident { value: Atom('blue' type=inline), raw: "blue" }
+  x Ident { value: Atom('blue' type=static), raw: "blue" }
    ,-[$DIR/tests/recovery/at-rule/page/without-page/input.css:2:1]
  2 |     content: "foo";
  3 |     color: blue;

crates/swc_css_parser/tests/recovery/at-rule/supports/non-standard-prelude/output.json

@@ -47,13 +47,13 @@
                   "ctxt": 0
                 },
                 "name": {
-                  "type": "Ident",
+                  "type": "DashedIdent",
                   "span": {
                     "start": 12,
                     "end": 21,
                     "ctxt": 0
                   },
-                  "value": "--element",
+                  "value": "element",
                   "raw": "--element"
                 },
                 "value": [
@@ -1496,13 +1496,13 @@
                                           "ctxt": 0
                                         },
                                         "name": {
-                                          "type": "Ident",
+                                          "type": "DashedIdent",
                                           "span": {
                                             "start": 356,
                                             "end": 362,
                                             "ctxt": 0
                                           },
-                                          "value": "--func",
+                                          "value": "func",
                                           "raw": "--func"
                                         },
                                         "value": [

crates/swc_css_parser/tests/recovery/at-rule/supports/non-standard-prelude/span.swc-stderr

@@ -95,7 +95,7 @@
  2 |     [--self] {
    `----
 
-  x Ident
+  x DashedIdent
    ,-[$DIR/tests/recovery/at-rule/supports/non-standard-prelude/input.css:1:1]
  1 | @supports (--element(".minwidth", { "minWidth": 300 })) {
    :            ^^^^^^^^^
@@ -1428,7 +1428,7 @@
  20 |     * { background: red; }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/at-rule/supports/non-standard-prelude/input.css:18:1]
  18 | 
  19 | @supports ([color: red]) {
@@ -1836,7 +1836,7 @@
  24 |     * { background: red; }
     `----
 
-  x Ident
+  x DashedIdent
     ,-[$DIR/tests/recovery/at-rule/supports/non-standard-prelude/input.css:22:1]
  22 | 
  23 | @supports ([[[[[{ --func(color: { red }) }]]]]]) {
@@ -1940,7 +1940,7 @@
  24 |     * { background: red; }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/at-rule/supports/non-standard-prelude/input.css:22:1]
  22 | 
  23 | @supports ([[[[[{ --func(color: { red }) }]]]]]) {

crates/swc_css_parser/tests/recovery/cdo-and-cdc/span.swc-stderr

@@ -651,7 +651,7 @@
  21 | }
     `----
 
-  x Ident { value: Atom('blue' type=inline), raw: "blue" }
+  x Ident { value: Atom('blue' type=static), raw: "blue" }
     ,-[$DIR/tests/recovery/cdo-and-cdc/input.css:19:1]
  19 | 
  20 |     color: blue;

crates/swc_css_parser/tests/recovery/declaration/important-1/span.swc-stderr

@@ -123,7 +123,7 @@
  3 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/declaration/important-1/input.css:1:1]
  1 | a {
  2 |     color: red !importan;

crates/swc_css_parser/tests/recovery/declaration/important/span.swc-stderr

@@ -136,7 +136,7 @@
  3 | }
    `----
 
-  x Ident { value: Atom('white' type=inline), raw: "white" }
+  x Ident { value: Atom('white' type=static), raw: "white" }
    ,-[$DIR/tests/recovery/declaration/important/input.css:1:1]
  1 | .a {
  2 |     color: white !!important;
@@ -312,7 +312,7 @@
  7 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/declaration/important/input.css:5:1]
  5 | .class {
  6 |     color: red red red !important !important;
@@ -344,7 +344,7 @@
  7 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/declaration/important/input.css:5:1]
  5 | .class {
  6 |     color: red red red !important !important;
@@ -376,7 +376,7 @@
  7 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/declaration/important/input.css:5:1]
  5 | .class {
  6 |     color: red red red !important !important;
@@ -568,7 +568,7 @@
  11 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:9:1]
   9 | .class {
  10 |     color: red red red !important!important   ;
@@ -600,7 +600,7 @@
  11 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:9:1]
   9 | .class {
  10 |     color: red red red !important!important   ;
@@ -632,7 +632,7 @@
  11 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:9:1]
   9 | .class {
  10 |     color: red red red !important!important   ;
@@ -824,7 +824,7 @@
  15 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:13:1]
  13 | .class {
  14 |     color: red red red /* test*/ !important /*test*/ !important /*test*/ ;
@@ -856,7 +856,7 @@
  15 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:13:1]
  13 | .class {
  14 |     color: red red red /* test*/ !important /*test*/ !important /*test*/ ;
@@ -888,7 +888,7 @@
  15 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:13:1]
  13 | .class {
  14 |     color: red red red /* test*/ !important /*test*/ !important /*test*/ ;
@@ -1096,7 +1096,7 @@
  19 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:17:1]
  17 | .class {
  18 |     color: red red red !important !important!important;
@@ -1128,7 +1128,7 @@
  19 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:17:1]
  17 | .class {
  18 |     color: red red red !important !important!important;
@@ -1160,7 +1160,7 @@
  19 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:17:1]
  17 | .class {
  18 |     color: red red red !important !important!important;
@@ -1400,7 +1400,7 @@
  23 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:21:1]
  21 | .class {
  22 |     color: red red red /* test */ ! /*test */ important /* test */ ! /* test */ important /* test */;
@@ -1432,7 +1432,7 @@
  23 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:21:1]
  21 | .class {
  22 |     color: red red red /* test */ ! /*test */ important /* test */ ! /* test */ important /* test */;
@@ -1464,7 +1464,7 @@
  23 | }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/declaration/important/input.css:21:1]
  21 | .class {
  22 |     color: red red red /* test */ ! /*test */ important /* test */ ! /* test */ important /* test */;

crates/swc_css_parser/tests/recovery/declaration/wrong-name/span.swc-stderr

@@ -147,7 +147,7 @@
  3 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/declaration/wrong-name/input.css:1:1]
  1 | a {
  2 |     20: red;

crates/swc_css_parser/tests/recovery/delim-token/at-sign/span.swc-stderr

@@ -155,7 +155,7 @@
  3 | }
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/delim-token/at-sign/input.css:1:1]
  1 | a {
  2 |     color: @ red;

crates/swc_css_parser/tests/recovery/hacks/span.swc-stderr

@@ -19316,7 +19316,7 @@
  245 |     _background: white;
      `----
 
-  x Ident { value: Atom('black' type=inline), raw: "black" }
+  x Ident { value: Atom('black' type=static), raw: "black" }
      ,-[$DIR/tests/recovery/hacks/input.css:243:1]
  243 | a {
  244 |     *color : black;

crates/swc_css_parser/tests/recovery/ie-progid/output.json

@@ -456,7 +456,7 @@
                     "end": 172,
                     "ctxt": 0
                   },
-                  "value": "Blur",
+                  "value": "blur",
                   "raw": "Blur"
                 },
                 "value": [
@@ -608,7 +608,7 @@
                     "end": 227,
                     "ctxt": 0
                   },
-                  "value": "Wheel",
+                  "value": "wheel",
                   "raw": "Wheel"
                 },
                 "value": [

crates/swc_css_parser/tests/recovery/rules/unclosed-brackets/span.swc-stderr

@@ -285,7 +285,7 @@
    :                 ^^^
    `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
    ,-[$DIR/tests/recovery/rules/unclosed-brackets/input.css:4:1]
  4 | 
  5 | .class { color: red }
@@ -448,7 +448,7 @@
    :                 ^^^^
    `----
 
-  x Ident { value: Atom('blue' type=inline), raw: "blue" }
+  x Ident { value: Atom('blue' type=static), raw: "blue" }
    ,-[$DIR/tests/recovery/rules/unclosed-brackets/input.css:6:1]
  6 | 
  7 | .class { color: blue }

crates/swc_css_parser/tests/recovery/style-blocks-contents/basic/span.swc-stderr

@@ -399,7 +399,7 @@
  7 |     }
    `----
 
-  x Ident { value: Atom('green' type=inline), raw: "green" }
+  x Ident { value: Atom('green' type=static), raw: "green" }
    ,-[$DIR/tests/recovery/style-blocks-contents/basic/input.css:5:1]
  5 |         ident
  6 |         color: green;
@@ -834,7 +834,7 @@
  15 |         }
     `----
 
-  x Ident { value: Atom('red' type=inline), raw: "red" }
+  x Ident { value: Atom('red' type=static), raw: "red" }
     ,-[$DIR/tests/recovery/style-blocks-contents/basic/input.css:13:1]
  13 |             ident
  14 |             color: red 

crates/swc_css_prefixer/src/prefixer.rs

@@ -127,7 +127,7 @@ impl VisitMut for CrossFadeFunctionReplacerOnLegacyVariant<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         n.visit_mut_children_with(self);
 
-        if n.name.value.eq_str_ignore_ascii_case(self.from) {
+        if n.name == *self.from {
             let mut transparency_values = vec![];
 
             for group in n.value.split_mut(|n| {
@@ -217,8 +217,16 @@ impl VisitMut for CrossFadeFunctionReplacerOnLegacyVariant<'_> {
 
             n.value = new_value;
 
-            n.name.value = self.to.into();
+            match &mut n.name {
-            n.name.raw = None;
+                FunctionName::Ident(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+                FunctionName::DashedIdent(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+            }
         }
     }
 }
@@ -265,13 +273,21 @@ impl VisitMut for ImageSetFunctionReplacerOnLegacyVariant<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         let old_in_function = self.in_function;
 
-        self.in_function = n.name.value.eq_str_ignore_ascii_case(self.from);
+        self.in_function = n.name == *self.from;
 
         n.visit_mut_children_with(self);
 
-        if n.name.value.eq_str_ignore_ascii_case(self.from) {
+        if n.name == *self.from {
-            n.name.value = self.to.into();
+            match &mut n.name {
-            n.name.raw = None;
+                FunctionName::Ident(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+                FunctionName::DashedIdent(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+            }
         }
 
         self.in_function = old_in_function;
@@ -300,9 +316,17 @@ impl VisitMut for LinearGradientFunctionReplacerOnLegacyVariant<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         n.visit_mut_children_with(self);
 
-        if &*n.name.value.to_ascii_lowercase() == self.from {
+        if n.name == *self.from {
-            n.name.value = self.to.into();
+            match &mut n.name {
-            n.name.raw = None;
+                FunctionName::Ident(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+                FunctionName::DashedIdent(name) => {
+                    name.value = self.to.into();
+                    name.raw = None;
+                }
+            }
 
             let first = n.value.get(0);
 
@@ -526,10 +550,8 @@ impl VisitMut for CalcReplacer<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         let old_inside_calc = self.inside_calc;
 
-        let name = n.name.value.to_ascii_lowercase();
+        let is_webkit_calc = n.name == js_word!("-webkit-calc");
-
+        let is_moz_calc = n.name == js_word!("-moz-calc");
-        let is_webkit_calc = matches!(name, js_word!("-webkit-calc"));
-        let is_moz_calc = matches!(name, js_word!("-moz-calc"));
 
         if self.to.is_none() && (is_webkit_calc || is_moz_calc) {
             return;
@@ -541,14 +563,24 @@ impl VisitMut for CalcReplacer<'_> {
             return;
         }
 
-        self.inside_calc = matches!(name, js_word!("calc")) || is_webkit_calc || is_moz_calc;
+        let is_calc = n.name == js_word!("calc");
+
+        self.inside_calc = is_calc || is_webkit_calc || is_moz_calc;
 
         n.visit_mut_children_with(self);
 
-        if matches!(name, js_word!("calc")) {
+        if is_calc {
             if let Some(to) = self.to {
-                n.name.value = to.clone();
+                match &mut n.name {
-                n.name.raw = None;
+                    FunctionName::Ident(name) => {
+                        name.value = to.into();
+                        name.raw = None;
+                    }
+                    FunctionName::DashedIdent(name) => {
+                        name.value = to.into();
+                        name.raw = None;
+                    }
+                }
             }
         }
 
@@ -563,11 +595,11 @@ impl VisitMut for CalcReplacer<'_> {
         }
 
         if let CalcValue::Function(function) = n {
-            let name = function.name.value.to_ascii_lowercase();
+            if matches_eq!(
-
+                function.name,
-            if matches!(
+                js_word!("calc"),
-                name,
+                js_word!("-webkit-calc"),
-                js_word!("calc") | js_word!("-webkit-calc") | js_word!("-moz-calc")
+                js_word!("-moz-calc")
             ) {
                 let calc_sum = match function.value.get(0) {
                     Some(ComponentValue::CalcSum(calc_sum)) => *calc_sum.clone(),
@@ -599,7 +631,7 @@ impl VisitMut for FontFaceFormatOldSyntax {
     fn visit_mut_function(&mut self, n: &mut Function) {
         n.visit_mut_children_with(self);
 
-        if !n.name.value.eq_ignore_ascii_case(&js_word!("format")) {
+        if !(n.name == js_word!("format")) {
             return;
         }
 
@@ -2524,10 +2556,10 @@ impl VisitMut for Prefixer {
                 }
             }
 
-            js_word!("filter") => match &n.value[0] {
+            js_word!("filter") => match &n.value.get(0) {
-                ComponentValue::PreservedToken(_) => {}
+                Some(ComponentValue::PreservedToken(_)) => {}
-                ComponentValue::Function(function)
+                Some(ComponentValue::Function(function)) if function.name == js_word!("alpha") => {}
-                    if function.name.value.eq_ignore_ascii_case(&js_word!("alpha")) => {}
+                None => {}
                 _ => {
                     add_declaration!(Prefix::Webkit, js_word!("-webkit-filter"), None);
                 }
@@ -2708,18 +2740,18 @@ impl VisitMut for Prefixer {
 
                 let has_3d_function = n.value.iter().any(|n| match n {
                     ComponentValue::Function(function)
-                        if matches_eq_ignore_ascii_case!(
+                        if matches_eq!(
-                            &*function.name.value,
+                            function.name,
-                            "matrix3d",
+                            js_word!("matrix3d"),
-                            "translate3d",
+                            js_word!("translate3d"),
-                            "translatez",
+                            js_word!("translatez"),
-                            "scale3d",
+                            js_word!("scale3d"),
-                            "scalez",
+                            js_word!("scalez"),
-                            "rotate3d",
+                            js_word!("rotate3d"),
-                            "rotatex",
+                            js_word!("rotatex"),
-                            "rotatey",
+                            js_word!("rotatey"),
-                            "rotatez",
+                            js_word!("rotatez"),
-                            "perspective"
+                            js_word!("perspective")
                         ) =>
                     {
                         true

crates/swc_css_utils/src/lib.rs

@@ -41,9 +41,16 @@ impl VisitMut for FunctionNameReplacer<'_> {
     fn visit_mut_function(&mut self, n: &mut Function) {
         n.visit_mut_children_with(self);
 
-        if n.name.value.eq_str_ignore_ascii_case(self.from) {
+        match &mut n.name {
-            n.name.value = self.to.into();
+            FunctionName::Ident(name) if name.value.eq_str_ignore_ascii_case(self.from) => {
-            n.name.raw = None;
+                name.value = self.to.into();
+                name.raw = None;
+            }
+            FunctionName::DashedIdent(name) if name.value.eq_str_ignore_ascii_case(self.from) => {
+                name.value = self.to.into();
+                name.raw = None;
+            }
+            _ => {}
         }
     }
 }

crates/swc_css_visit/src/lib.rs

@@ -154,9 +154,14 @@ define!({
         pub value: DelimiterValue,
     }
 
+    pub enum FunctionName {
+        Ident(Ident),
+        DashedIdent(DashedIdent),
+    }
+
     pub struct Function {
         pub span: Span,
-        pub name: Ident,
+        pub name: FunctionName,
         pub value: Vec<ComponentValue>,
     }