feat: add is_vendor_prefixed to property nodes

Author: bartveneman

src/arena.ts

@@ -69,6 +69,7 @@ export const FLAG_IMPORTANT = 1 << 0 // Has !important
 export const FLAG_HAS_ERROR = 1 << 1 // Syntax error
 export const FLAG_LENGTH_OVERFLOW = 1 << 2 // Node > 65k chars
 export const FLAG_HAS_BLOCK = 1 << 3 // Has { } block (for style rules and at-rules)
+export const FLAG_VENDOR_PREFIXED = 1 << 4 // Has vendor prefix (-webkit-, -moz-, -ms-, -o-)
 
 export class CSSDataArena {
 	private buffer: ArrayBuffer

src/css-node.ts

@@ -38,6 +38,7 @@ import {
 	FLAG_IMPORTANT,
 	FLAG_HAS_ERROR,
 	FLAG_HAS_BLOCK,
+	FLAG_VENDOR_PREFIXED,
 } from './arena'
 
 // Node type constants (numeric for performance)
@@ -138,11 +139,9 @@ export class CSSNode {
 		return this.arena.has_flag(this.index, FLAG_IMPORTANT)
 	}
 
-	// Check if this has a vendor prefix (lazy computation for performance)
+	// Check if this has a vendor prefix (flag-based for performance)
 	get is_vendor_prefixed(): boolean {
-		const name = this.name
-		if (!name) return false
-		return name.startsWith('-webkit-') || name.startsWith('-moz-') || name.startsWith('-ms-') || name.startsWith('-o-')
+		return this.arena.has_flag(this.index, FLAG_VENDOR_PREFIXED)
 	}
 
 	// Check if this node has an error

src/parser.test.ts

@@ -1,7 +1,5 @@
 import { describe, test, expect } from 'vitest'
-import { Parser } from './parser'
-// TODO: the node types should be re-exported from parser
-import { NODE_STYLESHEET, NODE_STYLE_RULE, NODE_AT_RULE, NODE_DECLARATION } from './arena'
+import { Parser, NODE_STYLESHEET, NODE_STYLE_RULE, NODE_AT_RULE, NODE_DECLARATION } from './parser'
 
 describe('Parser', () => {
 	describe('basic parsing', () => {
@@ -201,12 +199,12 @@ describe('Parser', () => {
 			test('should parse @import', () => {
 				const source = '@import url("style.css");'
 				const parser = new Parser(source, { parse_atrule_preludes: false })
-			const root = parser.parse()
+				const root = parser.parse()
 
-			const atRule = root.first_child!
-			expect(atRule.type).toBe(NODE_AT_RULE)
-			expect(atRule.name).toBe('import')
-			expect(atRule.has_children).toBe(false)
+				const atRule = root.first_child!
+				expect(atRule.type).toBe(NODE_AT_RULE)
+				expect(atRule.name).toBe('import')
+				expect(atRule.has_children).toBe(false)
 			})
 
 			test('should parse @namespace', () => {
@@ -708,6 +706,138 @@ describe('Parser', () => {
 		})
 	})
 
+	describe('vendor prefix detection', () => {
+		test('should detect -webkit- vendor prefix', () => {
+			let source = '.box { -webkit-transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('-webkit-transform')
+			expect(decl.is_vendor_prefixed).toBe(true)
+		})
+
+		test('should detect -moz- vendor prefix', () => {
+			let source = '.box { -moz-transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('-moz-transform')
+			expect(decl.is_vendor_prefixed).toBe(true)
+		})
+
+		test('should detect -ms- vendor prefix', () => {
+			let source = '.box { -ms-transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('-ms-transform')
+			expect(decl.is_vendor_prefixed).toBe(true)
+		})
+
+		test('should detect -o- vendor prefix', () => {
+			let source = '.box { -o-transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('-o-transform')
+			expect(decl.is_vendor_prefixed).toBe(true)
+		})
+
+		test('should not detect vendor prefix for standard properties', () => {
+			let source = '.box { transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('transform')
+			expect(decl.is_vendor_prefixed).toBe(false)
+		})
+
+		test('should not detect vendor prefix for properties with hyphens', () => {
+			let source = '.box { background-color: red; }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('background-color')
+			expect(decl.is_vendor_prefixed).toBe(false)
+		})
+
+		test('should not detect vendor prefix for custom properties', () => {
+			let source = ':root { --primary-color: blue; }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('--primary-color')
+			expect(decl.is_vendor_prefixed).toBe(false)
+		})
+
+		test('should detect vendor prefix with multiple vendor-prefixed properties', () => {
+			let source = '.box { -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, webkit, moz, standard] = rule.children
+
+			expect(webkit.name).toBe('-webkit-transform')
+			expect(webkit.is_vendor_prefixed).toBe(true)
+
+			expect(moz.name).toBe('-moz-transform')
+			expect(moz.is_vendor_prefixed).toBe(true)
+
+			expect(standard.name).toBe('transform')
+			expect(standard.is_vendor_prefixed).toBe(false)
+		})
+
+		test('should detect vendor prefix for complex property names', () => {
+			let source = '.box { -webkit-border-top-left-radius: 5px; }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('-webkit-border-top-left-radius')
+			expect(decl.is_vendor_prefixed).toBe(true)
+		})
+
+		test('should not detect vendor prefix for similar but non-vendor properties', () => {
+			// Edge case: property that starts with hyphen but isn't a vendor prefix
+			let source = '.box { border-radius: 5px; }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let [_selector, decl] = rule.children
+			expect(decl.name).toBe('border-radius')
+			expect(decl.is_vendor_prefixed).toBe(false)
+		})
+
+		test('should return false for nodes without names', () => {
+			// Nodes like selectors or at-rules without property names
+			let source = 'body { }'
+			let parser = new Parser(source)
+			let root = parser.parse()
+
+			let rule = root.first_child!
+			let selector = rule.first_child!
+			// Selectors have text but checking is_vendor_prefixed should be safe
+			expect(selector.is_vendor_prefixed).toBe(false)
+		})
+	})
+
 	describe('complex real-world scenarios', () => {
 		test('should parse complex nested structure', () => {
 			let source = `

src/parser.ts

@@ -1,6 +1,16 @@
 // CSS Parser - Builds AST using the arena
 import { Lexer } from './lexer'
-import { CSSDataArena, NODE_STYLESHEET, NODE_STYLE_RULE, NODE_SELECTOR, NODE_DECLARATION, NODE_AT_RULE, FLAG_IMPORTANT, FLAG_HAS_BLOCK } from './arena'
+import {
+	CSSDataArena,
+	NODE_STYLESHEET,
+	NODE_STYLE_RULE,
+	NODE_SELECTOR,
+	NODE_DECLARATION,
+	NODE_AT_RULE,
+	FLAG_IMPORTANT,
+	FLAG_HAS_BLOCK,
+	FLAG_VENDOR_PREFIXED,
+} from './arena'
 import { CSSNode } from './css-node'
 import { ValueParser } from './value-parser'
 import { SelectorParser } from './selector-parser'
@@ -17,6 +27,8 @@ import {
 } from './token-types'
 import { trim_boundaries } from './string-utils'
 
+const MINUS_HYPHEN = 45
+
 export interface ParserOptions {
 	skip_comments?: boolean
 	parse_values?: boolean
@@ -272,6 +284,15 @@ export class Parser {
 		this.arena.set_content_start(declaration, prop_start)
 		this.arena.set_content_length(declaration, prop_end - prop_start)
 
+		// Check for vendor prefix and set flag if detected
+		if (this.source.charCodeAt(prop_start) === MINUS_HYPHEN && this.source.charCodeAt(prop_start + 1) !== MINUS_HYPHEN) {
+			let prop_length = prop_end - prop_start
+			// Check for -webkit- (8 chars min), -moz- (5 chars), -ms- (4 chars), -o- (3 chars)
+			if (prop_length >= 3 && this.source.indexOf('-', prop_start + 2) !== -1) {
+				this.arena.set_flag(declaration, FLAG_VENDOR_PREFIXED)
+			}
+		}
+
 		// Track value start (after colon, skipping whitespace)
 		let value_start = this.lexer.token_start
 		let value_end = value_start