breaking: remove .name property from Declaration nodes (#138)

closes #135

Author: bartveneman

src/api.test.ts

@@ -768,7 +768,7 @@ describe('CSSNode', () => {
 				expect(clone.type).toBe(DECLARATION)
 				expect(clone.type_name).toBe('Declaration')
 				expect(clone.text).toBe('color: red;')
-				expect(clone.name).toBe('color')
+				expect(clone.name).toBe(undefined)
 				expect(clone.property).toBe('color')
 				expect(clone.value).toBe('red')
 				expect(clone.children).toEqual([])
@@ -838,7 +838,7 @@ describe('CSSNode', () => {
 				expect(clone.type).toBe(DECLARATION)
 				expect(clone.type_name).toBe('Declaration')
 				expect(clone.property).toBe('color')
-				expect(clone.name).toBe('color')
+				expect(clone.name).toBe(undefined)
 				expect(clone.value).toBe('red')
 				expect(clone.is_important).toBe(true)
 			})

src/css-node.ts

@@ -208,6 +208,13 @@ export class CSSNode {
 		return this.arena
 	}
 
+	private get_content(): string {
+		let start = this.arena.get_content_start(this.index)
+		let length = this.arena.get_content_length(this.index)
+		if (length === 0) return ''
+		return this.source.substring(start, start + length)
+	}
+
 	/** Get node type as number (for performance) */
 	get type(): CSSNodeType {
 		return this.arena.get_type(this.index) as CSSNodeType
@@ -225,20 +232,20 @@ export class CSSNode {
 		return this.source.substring(start, start + length)
 	}
 
-	/** Get the "content" text (property name for declarations, at-rule name for at-rules, layer name for import layers) */
-	get name(): string {
-		let start = this.arena.get_content_start(this.index)
-		let length = this.arena.get_content_length(this.index)
-		if (length === 0) return ''
-		return this.source.substring(start, start + length)
+	/** Get the "content" text (at-rule name for at-rules, layer name for import layers) */
+	get name(): string | undefined {
+		if (this.type === DECLARATION) return
+		return this.get_content()
 	}
 
 	/**
 	 * Alias for name (for declarations: "color" in "color: blue")
 	 * More semantic than `name` for declaration nodes
 	 */
-	get property(): string {
-		return this.name
+	get property(): string | undefined {
+		let { type } = this
+		if (type !== DECLARATION && type !== MEDIA_FEATURE) return
+		return this.get_content()
 	}
 
 	/**
@@ -370,17 +377,17 @@ export class CSSNode {
 		switch (this.type) {
 			case DECLARATION:
 				// Check property name (e.g., -webkit-transform)
-				return is_vendor_prefixed(this.name)
+				return is_vendor_prefixed(this.get_content())
 			case PSEUDO_CLASS_SELECTOR:
 			case PSEUDO_ELEMENT_SELECTOR:
 				// Check pseudo-class/element name without colons (e.g., -webkit-autofill, -webkit-scrollbar)
-				return is_vendor_prefixed(this.name)
+				return is_vendor_prefixed(this.get_content())
 			case AT_RULE:
 				// Check at-rule name (e.g., -webkit-keyframes from @-webkit-keyframes)
-				return is_vendor_prefixed(this.name)
+				return is_vendor_prefixed(this.get_content())
 			case FUNCTION:
 				// Check function name (e.g., -webkit-gradient from -webkit-gradient())
-				return is_vendor_prefixed(this.name)
+				return is_vendor_prefixed(this.get_content())
 			case IDENTIFIER:
 				// Check identifier value (e.g., -webkit-sticky)
 				return is_vendor_prefixed(this.text)
@@ -654,7 +661,7 @@ export class CSSNode {
 
 		// 2. Extract type-specific properties (only if meaningful)
 		if (this.name) plain.name = this.name
-		if (this.type === DECLARATION) plain.property = this.name
+		if (this.property) plain.property = this.property
 
 		// 3. Handle value types
 		if (this.value !== undefined && this.value !== null) {

src/parse-declaration.test.ts

@@ -62,48 +62,48 @@ describe('parse_declaration', () => {
 		test('simple declaration', () => {
 			const node = parse_declaration('color: red')
 			expect(node.type).toBe(DECLARATION)
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 			expect(node.is_important).toBe(false)
 		})
 
 		test('declaration with semicolon', () => {
 			const node = parse_declaration('color: red;')
 			expect(node.type).toBe(DECLARATION)
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 		})
 
 		test('declaration without semicolon', () => {
 			const node = parse_declaration('color: red')
 			expect(node.type).toBe(DECLARATION)
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 		})
 
 		test('declaration with whitespace variations', () => {
 			const node = parse_declaration('color : red')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 		})
 
 		test('declaration with leading and trailing whitespace', () => {
 			const node = parse_declaration('  color: red  ')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 		})
 
 		test('empty value', () => {
 			const node = parse_declaration('color:')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			// Empty values return null (consistent with main parser)
 			expect(node.first_child!.text).toBe('')
 			expect(node.first_child!.children).toHaveLength(0)
 		})
 
 		test('empty value with semicolon', () => {
 			const node = parse_declaration('color:;')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			// Empty values return null (consistent with main parser)
 			expect(node.first_child!.text).toBe('')
 		})
@@ -112,28 +112,28 @@ describe('parse_declaration', () => {
 	describe('!important Flag', () => {
 		test('declaration with !important', () => {
 			const node = parse_declaration('color: red !important')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 			expect(node.is_important).toBe(true)
 		})
 
 		test('declaration with !important and semicolon', () => {
 			const node = parse_declaration('color: red !important;')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 			expect(node.is_important).toBe(true)
 		})
 
 		test('historic !ie variant', () => {
 			const node = parse_declaration('color: red !ie')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 			expect(node.is_important).toBe(true)
 		})
 
 		test('any identifier after ! is treated as important', () => {
 			const node = parse_declaration('color: red !foo')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 			expect(node.is_important).toBe(true)
 		})
@@ -147,37 +147,37 @@ describe('parse_declaration', () => {
 	describe('Vendor Prefixes', () => {
 		test('-webkit- vendor prefix', () => {
 			const node = parse_declaration('-webkit-transform: rotate(45deg)')
-			expect(node.name).toBe('-webkit-transform')
+			expect(node.property).toBe('-webkit-transform')
 			expect(node.is_vendor_prefixed).toBe(true)
 		})
 
 		test('-moz- vendor prefix', () => {
 			const node = parse_declaration('-moz-appearance: none')
-			expect(node.name).toBe('-moz-appearance')
+			expect(node.property).toBe('-moz-appearance')
 			expect(node.is_vendor_prefixed).toBe(true)
 		})
 
 		test('-ms- vendor prefix', () => {
 			const node = parse_declaration('-ms-filter: blur(5px)')
-			expect(node.name).toBe('-ms-filter')
+			expect(node.property).toBe('-ms-filter')
 			expect(node.is_vendor_prefixed).toBe(true)
 		})
 
 		test('-o- vendor prefix', () => {
 			const node = parse_declaration('-o-transition: all 0.3s')
-			expect(node.name).toBe('-o-transition')
+			expect(node.property).toBe('-o-transition')
 			expect(node.is_vendor_prefixed).toBe(true)
 		})
 
 		test('non-prefixed property', () => {
 			const node = parse_declaration('transform: rotate(45deg)')
-			expect(node.name).toBe('transform')
+			expect(node.property).toBe('transform')
 			expect(node.is_vendor_prefixed).toBe(false)
 		})
 
 		test('custom property is not vendor prefixed', () => {
 			const node = parse_declaration('--custom-color: blue')
-			expect(node.name).toBe('--custom-color')
+			expect(node.property).toBe('--custom-color')
 			expect(node.is_vendor_prefixed).toBe(false)
 		})
 	})
@@ -301,7 +301,7 @@ describe('parse_declaration', () => {
 
 		test('property with colon but value with invalid token', () => {
 			const node = parse_declaration('color: red')
-			expect(node.name).toBe('color')
+			expect(node.property).toBe('color')
 			expect(node.first_child!.text).toBe('red')
 		})
 	})
@@ -312,9 +312,9 @@ describe('parse_declaration', () => {
 			expect(node.type).toBe(DECLARATION)
 		})
 
-		test('node.name returns property name', () => {
+		test('node.property returns property name', () => {
 			const node = parse_declaration('background-color: blue')
-			expect(node.name).toBe('background-color')
+			expect(node.property).toBe('background-color')
 		})
 
 		test('node.value returns raw value string', () => {

src/parse-selector.test.ts

@@ -1023,7 +1023,7 @@ describe('Selector Nodes', () => {
 				const attr_selector = root.first_child?.first_child
 				expect(attr_selector?.type_name).toBe('AttributeSelector')
 				expect(attr_selector?.value).toBe('"value"')
-				expect(attr_selector?.property).toBe('data-test')
+				expect(attr_selector?.name).toBe('data-test')
 				expect(attr_selector?.attr_operator).toBe(ATTR_OPERATOR_EQUAL)
 				expect(attr_selector?.attr_flags).toBe(ATTR_FLAG_NONE)
 			})
@@ -1035,7 +1035,7 @@ describe('Selector Nodes', () => {
 				const attr_selector = root.first_child?.first_child
 				expect(attr_selector?.type_name).toBe('AttributeSelector')
 				expect(attr_selector?.value).toBe('"value"')
-				expect(attr_selector?.property).toBe('data-test')
+				expect(attr_selector?.name).toBe('data-test')
 				expect(attr_selector?.attr_operator).toBe(ATTR_OPERATOR_EQUAL)
 				expect(attr_selector?.attr_flags).toBe(ATTR_FLAG_NONE)
 				expect(attr_selector?.text).toBe(input)