refactor(css/ast): Refactor dashed ident (#6198)

crates/swc_atoms/words.txt

@@ -726,6 +726,7 @@ counter-style
 createClass
 createReactClass
 cubic-bezier
+custom-media
 cursor
 data
 datalist

crates/swc_css_codegen/src/lib.rs

@@ -1140,7 +1140,7 @@ where
                         })) => false,
                         _ => !self.config.minify,
                     },
-                    ComponentValue::Ident(_) => match next {
+                    ComponentValue::Ident(_) | ComponentValue::DashedIdent(_) => match next {
                         Some(ComponentValue::SimpleBlock(SimpleBlock { name, .. })) => {
                             if name.token == Token::LParen {
                                 true
@@ -1509,12 +1509,16 @@ where
     #[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), "--");
+
             let serialized = serialize_ident(&n.value, n.raw.as_deref(), false);
 
             write_raw!(self, n.span, &serialized);

crates/swc_css_codegen/tests/fixture/declaration/custom-properties/input.css

@@ -69,7 +69,7 @@ div {
 @supports ( . --x : y , z ) { a { color: red; } }
 
 * {
-    counter-reset: -- --a -a;
+    counter-reset: --a --a -a;
     --dash:-;
 }
 
@@ -102,3 +102,7 @@ div {
     counter-increment: -a;
     content: counter(-a);
 }
+
+* {
+    counter-reset: --a "string";
+}

crates/swc_css_codegen/tests/fixture/declaration/custom-properties/output.css

@@ -161,7 +161,7 @@ div {
   }
 }
 * {
-  counter-reset: -- --a -a;
+  counter-reset: --a --a -a;
   --dash: -;
 }
 #test_1 span::before {
@@ -188,3 +188,6 @@ div {
   counter-increment: -a;
   content: counter(-a);
 }
+* {
+  counter-reset: --a "string";
+}

crates/swc_css_lints/src/rules/custom_property_no_missing_var_function.rs

@@ -51,7 +51,7 @@ impl Visit for CustomPropertyNoMissingVarFunction {
             self.ctx.report(
                 dashed_ident,
                 format!(
-                    "Unexpected missing var function for '{}'.",
+                    "Unexpected missing var function for '--{}'.",
                     dashed_ident.value
                 ),
             );