fix: comma-separated declaration values parsed as Raw nodes (#101)

* Initial plan

* Fix comma-separated declaration values parsed as Raw nodes

- Import Comma and LeftCurlyBracket tokens in DeclarationList.js
- Fix isElementSelectorStart() to properly handle comma-separated values
- Use positive check for LeftCurlyBracket instead of negative exclusion
- Ensure pseudo-class detection only returns true when followed by {
- Add test cases for comma-separated declaration values

Fixes regression introduced in v3.6.7 where properties like background-attachment,
font-family, and transition with comma-separated values were incorrectly parsed
as Raw nodes instead of Declaration nodes.

Co-authored-by: nzakas <38546+nzakas@users.noreply.github.com>

* Improve code clarity in isElementSelectorStart function

- Restructure control flow for better readability
- Handle colon case explicitly with clearer logic
- Add more descriptive comments
- Separate declaration and selector detection paths

Co-authored-by: nzakas <38546+nzakas@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: nzakas <38546+nzakas@users.noreply.github.com>

Author: Copilot

fixtures/ast/declarationList/DeclarationList.json

@@ -292,5 +292,108 @@
                 }
             ]
         }
+    },
+    "comma-separated values": {
+        "source": "background-attachment: scroll, scroll;",
+        "generate": "background-attachment:scroll,scroll",
+        "ast": {
+            "type": "DeclarationList",
+            "children": [
+                {
+                    "type": "Declaration",
+                    "important": false,
+                    "property": "background-attachment",
+                    "value": {
+                        "type": "Value",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "name": "scroll"
+                            },
+                            {
+                                "type": "Operator",
+                                "value": ","
+                            },
+                            {
+                                "type": "Identifier",
+                                "name": "scroll"
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    },
+    "multiple comma-separated values": {
+        "source": "font-family: Arial, sans-serif;",
+        "generate": "font-family:Arial,sans-serif",
+        "ast": {
+            "type": "DeclarationList",
+            "children": [
+                {
+                    "type": "Declaration",
+                    "important": false,
+                    "property": "font-family",
+                    "value": {
+                        "type": "Value",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "name": "Arial"
+                            },
+                            {
+                                "type": "Operator",
+                                "value": ","
+                            },
+                            {
+                                "type": "Identifier",
+                                "name": "sans-serif"
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    },
+    "comma-separated with dimensions": {
+        "source": "transition: opacity 1s, transform 0.5s;",
+        "generate": "transition:opacity 1s,transform 0.5s",
+        "ast": {
+            "type": "DeclarationList",
+            "children": [
+                {
+                    "type": "Declaration",
+                    "important": false,
+                    "property": "transition",
+                    "value": {
+                        "type": "Value",
+                        "children": [
+                            {
+                                "type": "Identifier",
+                                "name": "opacity"
+                            },
+                            {
+                                "type": "Dimension",
+                                "value": "1",
+                                "unit": "s"
+                            },
+                            {
+                                "type": "Operator",
+                                "value": ","
+                            },
+                            {
+                                "type": "Identifier",
+                                "name": "transform"
+                            },
+                            {
+                                "type": "Dimension",
+                                "value": "0.5",
+                                "unit": "s"
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
     }
 }

lib/syntax/node/DeclarationList.js

@@ -8,7 +8,9 @@ import {
     LeftSquareBracket,
     Colon,
     Ident,
-    RightCurlyBracket
+    RightCurlyBracket,
+    LeftCurlyBracket,
+    Comma
 } from '../../tokenizer/index.js';
 
 const AMPERSAND = 0x0026;       // U+0026 AMPERSAND (&)
@@ -38,12 +40,17 @@ function isElementSelectorStart() {
 
     const nextTokenType = this.lookupTypeNonSC(1);
 
-    // Simple case: if next token is not colon, semicolon, or closing brace, it's likely a selector
-    if (nextTokenType !== Colon && nextTokenType !== Semicolon && nextTokenType !== RightCurlyBracket) {
+    // If next token is a left curly bracket, it's definitely a selector (e.g., "div { ... }")
+    if (nextTokenType === LeftCurlyBracket) {
         return true;
     }
 
-    // Special handling for colon case - could be pseudo-class/pseudo-element
+    // If next token is semicolon, comma, or closing brace, it's definitely a declaration
+    if (nextTokenType === Semicolon || nextTokenType === Comma || nextTokenType === RightCurlyBracket) {
+        return false;
+    }
+
+    // Special handling for colon case - could be pseudo-class/pseudo-element or property
     if (nextTokenType === Colon) {
         // Look ahead further to see what follows the colon
         const afterColonType = this.lookupTypeNonSC(2);
@@ -52,12 +59,19 @@ function isElementSelectorStart() {
         // check what comes after that
         if (afterColonType === Ident) {
             const afterPseudoType = this.lookupTypeNonSC(3);
-            // If it's followed by { or other selector tokens, it's a selector
-            // If it's followed by ; or } or EOF, it's not a selector (property)
-            return afterPseudoType !== Semicolon && afterPseudoType !== RightCurlyBracket && afterPseudoType !== 0; // 0 is EOF
+            // If it's followed by {, it's definitely a selector (e.g., "div:hover { ... }")
+            if (afterPseudoType === LeftCurlyBracket) {
+                return true;
+            }
+            // Otherwise, it's a property (e.g., "transition: opacity 1s")
+            return false;
         }
+        // If after colon there's not an identifier, it's a property
+        return false;
     }
 
+    // For other token types (dimensions, numbers, strings, etc.), assume it's a declaration
+    // This handles cases like multi-value properties
     return false;
 }