Serialize feature values as CSS component values

w3c/csswg-drafts#11041

Author: cdoublev

__tests__/value.js

@@ -3794,7 +3794,13 @@ describe('<mf-plain>', () => {
             .toMatchObject(list([name, delimiter(':'), value], ' ', ['<mf-plain>']))
     })
     test('valid', () => {
-        expect(parse('<mf-plain>', 'min-width: 1px', true, mediaQueryContext)).toBe('min-width: 1px')
+        const valid = [
+            ['orientation: PORTRAIT', 'orientation: portrait'],
+            ['color: 1.0', 'color: 1'],
+            ['min-width: 0', 'min-width: 0px'],
+            ['aspect-ratio: 1', 'aspect-ratio: 1 / 1'],
+        ]
+        valid.forEach(([input, expected]) => expect(parse('<mf-plain>', input, true, mediaQueryContext)).toBe(expected))
     })
 })
 describe('<mf-range>', () => {
@@ -3821,10 +3827,8 @@ describe('<mf-range>', () => {
             .toMatchObject(list([name, comparator, value], ' ', ['<mf-range>']))
     })
     test('valid', () => {
-        expect(parse('<mf-range>', 'width < 1px', true, mediaQueryContext))
-            .toBe('width < 1px')
-        expect(parse('<mf-range>', '0 / 0 < aspect-ratio < 1 / 1', true, mediaQueryContext))
-            .toBe('0 / 0 < aspect-ratio < 1 / 1')
+        expect(parse('<mf-range>', 'width < 0', true, mediaQueryContext)).toBe('width < 0px')
+        expect(parse('<mf-range>', '0 < aspect-ratio < 1', true, mediaQueryContext)).toBe('0 / 1 < aspect-ratio < 1 / 1')
     })
 })
 describe('<opentype-tag>', () => {

lib/parse/postprocess.js

@@ -909,7 +909,13 @@ function postParseMediaFeaturePlain(declaration, { context, input }, parser) {
     const unprefixed = name.value.replace(/(min|max)-/, '')
     const definition = descriptors[getMediaFeatureContextName(context)][unprefixed].value
     input = getInputComponentValuesFromMatch(value, input.data)
-    return parser.parseCSSValue(input, definition, context) ? declaration : null
+    const validated = parser.parseCSSValue(input, definition, context)
+    if (validated) {
+        validated.types.push('<mf-value>')
+        declaration.splice(2, 1, validated)
+        return declaration
+    }
+    return null
 }
 
 /**
@@ -924,14 +930,23 @@ function postParseMediaFeaturePlain(declaration, { context, input }, parser) {
  */
 function postParseMediaFeatureRange(range, { context, input }, parser) {
     const name = range.find(component => component.types.at(-1) === '<mf-name>')
-    const values = range
-        .filter(component => component.types.at(-1) === '<mf-value>')
-        .map(value => getInputComponentValuesFromMatch(value, input.data))
     const { type, value: definition } = descriptors[getMediaFeatureContextName(context)][name.value]
-    if (type === 'range' && values.every(value => parser.parseCSSValue(value, definition, context))) {
-        return range
+    if (type !== 'range') {
+        return null
     }
-    return null
+    for (let component of range.splice(0, range.length)) {
+        if (component.types.at(-1) === '<mf-value>') {
+            if (name.value === 'aspect-ratio') debugger;
+            const value = getInputComponentValuesFromMatch(component, input.data)
+            component = parser.parseCSSValue(value, definition, context)
+            if (!component) {
+                return null
+            }
+            component.types.push('<mf-value>')
+        }
+        range.push(component)
+    }
+    return range
 }
 
 /**