fix: correct value line/column instead of values always having line 1 (#69)

Author: bartveneman

src/parse-value.test.ts

@@ -18,6 +18,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(13)
 				expect(value?.length).toBe(3)
 				expect(value?.end).toBe(16)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(14)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const value = getValue('div {\n  color: red;\n}')
+				expect(value?.start).toBe(15)
+				expect(value?.length).toBe(3)
+				expect(value?.end).toBe(18)
+				expect(value?.line).toBe(2)
+				expect(value?.column).toBe(10)
 			})
 		})
 
@@ -27,6 +38,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(15)
 				expect(value?.length).toBe(3)
 				expect(value?.end).toBe(18)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(16)
+			})
+
+			it('should have correct line and column on line 3', () => {
+				const value = getValue('div {\n  /* comment */\n  opacity: 0.5;\n}')
+				expect(value?.start).toBe(33)
+				expect(value?.length).toBe(3)
+				expect(value?.end).toBe(36)
+				expect(value?.line).toBe(3)
+				expect(value?.column).toBe(12)
 			})
 		})
 
@@ -36,6 +58,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(13)
 				expect(value?.length).toBe(5)
 				expect(value?.end).toBe(18)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(14)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const value = getValue('div {\n  width: 100px;\n}')
+				expect(value?.start).toBe(15)
+				expect(value?.length).toBe(5)
+				expect(value?.end).toBe(20)
+				expect(value?.line).toBe(2)
+				expect(value?.column).toBe(10)
 			})
 		})
 
@@ -45,6 +78,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(15)
 				expect(value?.length).toBe(7)
 				expect(value?.end).toBe(22)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(16)
+			})
+
+			it('should have correct line and column on line 4', () => {
+				const value = getValue('div {\n  /* line 2 */\n  /* line 3 */\n  content: "hello";\n}')
+				expect(value?.start).toBe(47)
+				expect(value?.length).toBe(7)
+				expect(value?.end).toBe(54)
+				expect(value?.line).toBe(4)
+				expect(value?.column).toBe(12)
 			})
 		})
 
@@ -54,6 +98,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(13)
 				expect(value?.length).toBe(7)
 				expect(value?.end).toBe(20)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(14)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const value = getValue('div {\n  color: #ff0000;\n}')
+				expect(value?.start).toBe(15)
+				expect(value?.length).toBe(7)
+				expect(value?.end).toBe(22)
+				expect(value?.line).toBe(2)
+				expect(value?.column).toBe(10)
 			})
 		})
 
@@ -63,6 +118,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(13)
 				expect(value?.length).toBe(14)
 				expect(value?.end).toBe(27)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(14)
+			})
+
+			it('should have correct line and column on line 3', () => {
+				const value = getValue('div {\n  /* comment */\n  color: rgb(255, 0, 0);\n}')
+				expect(value?.start).toBe(31)
+				expect(value?.length).toBe(14)
+				expect(value?.end).toBe(45)
+				expect(value?.line).toBe(3)
+				expect(value?.column).toBe(10)
 			})
 		})
 
@@ -74,6 +140,19 @@ describe('Value Node Types', () => {
 				expect(comma?.start).toBe(24)
 				expect(comma?.length).toBe(1)
 				expect(comma?.end).toBe(25)
+				expect(comma?.line).toBe(1)
+				expect(comma?.column).toBe(25)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const root = parse('div {\n  font-family: Arial, sans-serif;\n}')
+				const decl = root.first_child?.first_child?.next_sibling?.first_child
+				const comma = decl?.values[1]
+				expect(comma?.start).toBe(26)
+				expect(comma?.length).toBe(1)
+				expect(comma?.end).toBe(27)
+				expect(comma?.line).toBe(2)
+				expect(comma?.column).toBe(21)
 			})
 		})
 
@@ -85,6 +164,19 @@ describe('Value Node Types', () => {
 				expect(paren?.start).toBe(18)
 				expect(paren?.length).toBe(13)
 				expect(paren?.end).toBe(31)
+				expect(paren?.line).toBe(1)
+				expect(paren?.column).toBe(19)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const root = parse('div {\n  width: calc((100% - 50px) / 2);\n}')
+				const func = root.first_child?.first_child?.next_sibling?.first_child?.values[0]
+				const paren = func?.children[0]
+				expect(paren?.start).toBe(20)
+				expect(paren?.length).toBe(13)
+				expect(paren?.end).toBe(33)
+				expect(paren?.line).toBe(2)
+				expect(paren?.column).toBe(15)
 			})
 		})
 
@@ -94,6 +186,17 @@ describe('Value Node Types', () => {
 				expect(value?.start).toBe(18)
 				expect(value?.length).toBe(16)
 				expect(value?.end).toBe(34)
+				expect(value?.line).toBe(1)
+				expect(value?.column).toBe(19)
+			})
+
+			it('should have correct line and column on line 2', () => {
+				const value = getValue('div {\n  background: url("image.png");\n}')
+				expect(value?.start).toBe(20)
+				expect(value?.length).toBe(16)
+				expect(value?.end).toBe(36)
+				expect(value?.line).toBe(2)
+				expect(value?.column).toBe(15)
 			})
 		})
 	})

src/parse-value.ts

@@ -35,12 +35,13 @@ export class ValueParser {
 
 	// Parse a declaration value range into value nodes
 	// Returns array of value node indices
-	parse_value(start: number, end: number): number[] {
+	parse_value(start: number, end: number, start_line: number, start_column: number): number[] {
 		this.value_end = end
 
-		// Position lexer at value start
+		// Position lexer at value start with provided line/column
 		this.lexer.pos = start
-		this.lexer.line = 1
+		this.lexer.line = start_line
+		this.lexer.column = start_column
 
 		let nodes: number[] = []
 
@@ -126,8 +127,8 @@ export class ValueParser {
 			node_type,
 			start,
 			end - start,
-			this.lexer.line,
-			this.lexer.column
+			this.lexer.token_line,
+			this.lexer.token_column
 		)
 		// Skip set_content_start_delta since delta = start - start = 0 (already zero-initialized)
 		this.arena.set_content_length(node, end - start)
@@ -161,8 +162,8 @@ export class ValueParser {
 			str_equals('url', func_name_substr) ? URL : FUNCTION,
 			start,
 			0, // length unknown yet
-			this.lexer.line,
-			this.lexer.column
+			this.lexer.token_line,
+			this.lexer.token_column
 		)
 		this.arena.set_content_start_delta(node, 0)
 		this.arena.set_content_length(node, name_end - start)
@@ -287,8 +288,8 @@ export class ValueParser {
 			PARENTHESIS,
 			start,
 			0, // length unknown yet
-			this.lexer.line,
-			this.lexer.column
+			this.lexer.token_line,
+			this.lexer.token_column
 		)
 
 		// Parse parenthesized content (everything until matching ')')
@@ -348,8 +349,8 @@ export function parse_value(value_string: string): CSSNode[] {
 	// Create value parser
 	const value_parser = new ValueParser(arena, value_string)
 
-	// Parse the entire source as a value
-	const node_indices = value_parser.parse_value(0, value_string.length)
+	// Parse the entire source as a value (starting at line 1, column 1)
+	const node_indices = value_parser.parse_value(0, value_string.length, 1, 1)
 
 	// Wrap each node index in a CSSNode
 	return node_indices.map((index) => new CSSNode(arena, value_string, index))

src/parse.ts

@@ -322,6 +322,8 @@ export class Parser {
 
 		// Track value start (after colon, skipping whitespace)
 		let value_start = this.lexer.token_start
+		let value_start_line = this.lexer.token_line
+		let value_start_column = this.lexer.token_column
 		let value_end = value_start
 
 		// Parse value (everything until ';' or '}')
@@ -367,7 +369,8 @@ export class Parser {
 
 			// Parse value into structured nodes (only if enabled)
 			if (this.parse_values_enabled && this.value_parser) {
-				let valueNodes = this.value_parser.parse_value(trimmed[0], trimmed[1])
+				// Let the lexer track line/column as it advances through whitespace
+				let valueNodes = this.value_parser.parse_value(value_start, trimmed[1], value_start_line, value_start_column)
 
 				// Link value nodes as children of the declaration
 				this.arena.append_children(declaration, valueNodes)