feat: add vendor-prefix support in mediafeature (#225)

- Add `value` getter to `CSSNode` for `MEDIA_FEATURE` nodes, returning
the
  first child node or `null` for boolean features like `(hover)`
- Add `MEDIA_FEATURE` case to `is_vendor_prefixed` getter, checking the
  feature name (e.g. `-ms-high-contrast` → `true`)
- Add `value: CSSNode | null` to the `MediaFeature` type; remove
`WithChildren`
for consistency with `Declaration`, which also hides children in favour
of
  a typed `value` accessor
- Update tests to use `feature.value` instead of `feature.children`

Author: bartveneman

src/css-node.ts

@@ -347,6 +347,10 @@ export class CSSNode {
 			return first_child // VALUE node (when parse_values=true)
 		}
 
+		if (type === MEDIA_FEATURE) {
+			return first_child ?? null
+		}
+
 		if (type === DIMENSION) {
 			return parse_dimension(text).value
 		}
@@ -506,6 +510,9 @@ export class CSSNode {
 			case IDENTIFIER:
 				// Check identifier value (e.g., -webkit-sticky)
 				return is_vendor_prefixed(this.text)
+			case MEDIA_FEATURE:
+				// Check property name (e.g., -ms-high-contrast)
+				return is_vendor_prefixed(this.get_content())
 			default:
 				return false
 		}

src/node-types.ts

@@ -462,13 +462,14 @@ export type MediaQuery = CSSNode &
 		clone(options?: CloneOptions): ToPlain<MediaQuery>
 	}
 
-export type MediaFeature = CSSNode &
-	WithChildren & {
-		readonly type: typeof MEDIA_FEATURE
-		/** Feature name, e.g. "min-width" */
-		readonly property: string
-		clone(options?: CloneOptions): ToPlain<MediaFeature>
-	}
+export type MediaFeature = CSSNode & {
+	readonly type: typeof MEDIA_FEATURE
+	/** Feature name, e.g. "min-width" */
+	readonly property: string
+	/** Feature value node, or null for boolean features like (hover) */
+	readonly value: CSSNode | null
+	clone(options?: CloneOptions): ToPlain<MediaFeature>
+}
 
 export type MediaType = CSSNode & {
 	readonly type: typeof MEDIA_TYPE

src/parse-atrule-prelude.test.ts

@@ -515,8 +515,7 @@ describe('At-Rule Prelude Nodes', () => {
 					| undefined
 
 				expect(feature?.property).toBe('orientation')
-				expect(feature?.children.length).toBe(1)
-				expect(feature?.children[0].type).toBe(IDENTIFIER)
+				expect(feature?.value?.type).toBe(IDENTIFIER)
 			})
 
 			test('should extract feature name from boolean feature', () => {
@@ -533,7 +532,7 @@ describe('At-Rule Prelude Nodes', () => {
 				expect(feature?.property).toBe('hover')
 			})
 
-			test('should parse feature values as typed children', () => {
+			test('should parse feature value as typed node', () => {
 				const css = '@media (min-width: 768px) { }'
 				const ast = parse(css)
 				const atRule = ast.first_child! as Atrule
@@ -545,34 +544,53 @@ describe('At-Rule Prelude Nodes', () => {
 					| undefined
 
 				expect(feature?.property).toBe('min-width')
-				expect(feature?.children.length).toBe(1)
-				expect(feature?.children[0].type).toBe(DIMENSION)
+				expect(feature?.value?.type).toBe(DIMENSION)
 			})
 
-			test('should parse identifier value as child', () => {
+			test('should parse identifier value', () => {
 				const css = '@media (orientation: portrait) { }'
 				const ast = parse(css)
 				const atRule = ast.first_child! as Atrule
 				const queryChildren =
 					((atRule.prelude as AtrulePrelude | null)?.children[0] as MediaQuery | undefined)
 						?.children || []
-				const feature = queryChildren.find((c) => c.type === MEDIA_FEATURE)
+				const feature = queryChildren.find((c) => c.type === MEDIA_FEATURE) as
+					| MediaFeature
+					| undefined
 
-				expect(feature?.children.length).toBe(1)
-				expect(feature?.children[0].type).toBe(IDENTIFIER)
-				expect(feature?.children[0].text).toBe('portrait')
+				expect(feature?.value?.type).toBe(IDENTIFIER)
+				expect(feature?.value?.text).toBe('portrait')
 			})
 
-			test('should have no children for boolean features', () => {
+			test('should have null value for boolean features', () => {
 				const css = '@media (hover) { }'
 				const ast = parse(css)
 				const atRule = ast.first_child! as Atrule
 				const queryChildren =
 					((atRule.prelude as AtrulePrelude | null)?.children[0] as MediaQuery | undefined)
 						?.children || []
-				const feature = queryChildren.find((c) => c.type === MEDIA_FEATURE)
+				const feature = queryChildren.find((c) => c.type === MEDIA_FEATURE) as
+					| MediaFeature
+					| undefined
+
+				expect(feature?.value).toBeNull()
+			})
+
+			test('should parse vendor-prefixed media feature (-ms-high-contrast: active)', () => {
+				const css = '@media (-ms-high-contrast: active) {}'
+				const ast = parse(css)
+				const atRule = ast.first_child! as Atrule
+				const queryChildren =
+					((atRule.prelude as AtrulePrelude | null)?.children[0] as MediaQuery | undefined)
+						?.children || []
+				const feature = queryChildren.find((c) => c.type === MEDIA_FEATURE) as
+					| MediaFeature
+					| undefined
 
-				expect(feature?.children.length).toBe(0)
+				expect(feature?.property).toBe('-ms-high-contrast')
+				expect(feature?.is_vendor_prefixed).toBe(true)
+				expect(feature?.value?.type).toBe(IDENTIFIER)
+				expect(feature?.value?.text).toBe('active')
 			})
 
 			test('should parse range syntax with single comparison', () => {