Minor things

Author: cdoublev

lib/parse/postprocess.js

@@ -486,11 +486,11 @@ function postParseFamilyName(name, node) {
  *
  * It represents the substitution with the first valid value.
  */
-function postParseFirstValid(substitution, node, { parseCSSGrammar }) {
+function postParseFirstValid(substitution, node, { parseCSSValue }) {
     const { context } = node
     const { declaration: { definition } } = context
     for (let value of substitution.value) {
-        if ((value = parseCSSGrammar(value, definition, context))) {
+        if ((value = parseCSSValue(value, definition, context))) {
             return value
         }
     }
@@ -950,10 +950,10 @@ function postParseMediaFeaturePlain(declaration, node, parser) {
     const unprefixed = name.value.replace(/(min|max)-/, '')
     const definition = descriptors[getMediaFeatureContextName(context)][unprefixed].value
     const list = getInputComponentValuesFromMatch(value, input.data)
-    const validated = parser.parseCSSValue(list, definition, context)
-    if (validated) {
-        validated.types.push('<mf-value>')
-        declaration.splice(2, 1, validated)
+    const match = parser.parseCSSGrammar(list, definition, context)
+    if (match) {
+        match.types.push('<mf-value>')
+        declaration.splice(2, 1, match)
         return declaration
     }
     return error(node)
@@ -972,7 +972,7 @@ function postParseMediaFeaturePlain(declaration, node, parser) {
  * It represents the range values with the result from parsing them against the
  * feature value definition.
  */
-function postParseMediaFeatureRange(range, node, { parseCSSValue }) {
+function postParseMediaFeatureRange(range, node, { parseCSSGrammar }) {
     const { context, input } = node
     const name = range.find(value => value.types.at(-1) === '<mf-name>')
     const { type, value: definition } = descriptors[getMediaFeatureContextName(context)][name.value]
@@ -981,8 +981,8 @@ function postParseMediaFeatureRange(range, node, { parseCSSValue }) {
     }
     for (let value of range.splice(0)) {
         if (value.types.at(-1) === '<mf-value>') {
-            const list = getInputComponentValuesFromMatch(value, input.data)
-            value = parseCSSValue(list, definition, context)
+            value = getInputComponentValuesFromMatch(value, input.data)
+            value = parseCSSGrammar(value, definition, context)
             if (!value) {
                 return error(node)
             }
@@ -995,7 +995,6 @@ function postParseMediaFeatureRange(range, node, { parseCSSValue }) {
 
 /**
  * @param {object[]} list
- * @param {Parser} [parser]
  * @returns {object[]}
  * @see {@link https://drafts.csswg.org/cssom-1/#parse-a-media-query-list}
  * @see {@link https://drafts.csswg.org/mediaqueries-5/#typedef-media-query-list}
@@ -1251,30 +1250,27 @@ function postParsePseudoClassSelector(selector, node, parser) {
         return selector
     }
     const [colon, pseudo] = selector
-    const { name, value } = pseudo
+    let { name, value } = pseudo
     // Functional pseudo-class
     if (name) {
-        const lowercase = name.toLowerCase()
-        const definition = pseudos.classes.functions[lowercase]
-        if (definition && isValidPseudoClass(lowercase, node)) {
-            const value = parser.parseCSSValue(input.current.value, definition, { ...context, function: node })
-            if (value instanceof SyntaxError) {
-                return value
-            }
+        name = name.toLowerCase()
+        const definition = pseudos.classes.functions[name]
+        if (definition && isValidPseudoClass(name, node)) {
+            value = parser.parseCSSGrammar(input.current.value, definition, { ...context, function: node })
             if (value) {
-                const fn = { ...pseudo, name: lowercase, value }
+                const fn = { ...pseudo, name, value }
                 return list([colon, fn], '', ['<pseudo-class-selector>'])
             }
         }
         return error(node)
     }
     // Pseudo-class identifier
-    let lowercase = value.toLowerCase()
-    if (pseudos.classes.aliases.has(lowercase)) {
-        lowercase = pseudos.classes.aliases.get(lowercase)
+    value = value.toLowerCase()
+    if (pseudos.classes.aliases.has(value)) {
+        value = pseudos.classes.aliases.get(value)
     }
-    if (pseudos.classes.identifiers.includes(lowercase) && isValidPseudoClass(lowercase, node)) {
-        const identifier = { ...pseudo, value: lowercase }
+    if (pseudos.classes.identifiers.includes(value) && isValidPseudoClass(value, node)) {
+        const identifier = { ...pseudo, value }
         return list([colon, identifier], '', ['<pseudo-class-selector>'])
     }
     return null
@@ -1315,36 +1311,33 @@ function isValidPseudoElement(key, node) {
  * It represents a legacy pseudo-element as a non-legacy pseudo-element.
  */
 function postParsePseudoElementSelector(selector, node, parser) {
+    const { context, input } = node
     if (selector.types.includes('<legacy-pseudo-element-selector>')) {
         const [colon, pseudo] = selector
         const pseudoClass = list([colon, pseudo], '', ['<pseudo-class-selector>'])
         selector = list([colon, pseudoClass], '', ['<pseudo-element-selector>'])
     }
     const [, [colon, pseudo]] = selector
-    const { name, value } = pseudo
-    const { context, input } = node
+    let { name, value } = pseudo
     // Functional pseudo-element
     if (name) {
-        const lowercase =  name.toLowerCase()
-        const definition = pseudos.elements.functions[lowercase]
-        if (definition && isValidPseudoElement(lowercase, node)) {
-            const value = parser.parseCSSValue(input.current.value, definition.value, { ...context, function: node })
-            if (value instanceof SyntaxError) {
-                return value
-            }
+        name = name.toLowerCase()
+        const definition = pseudos.elements.functions[name]
+        if (definition && isValidPseudoElement(name, node)) {
+            value = parser.parseCSSGrammar(input.current.value, definition.value, { ...context, function: node })
             if (value) {
-                const fn = { ...pseudo, name: lowercase, value }
+                const fn = { ...pseudo, name, value }
                 const pseudoClass = list([colon, fn], '', ['<pseudo-class-selector>'])
                 return list([colon, pseudoClass], '', ['<pseudo-element-selector>'])
             }
         }
         return error(node)
     }
     // Pseudo-element identifier
-    const lowercase = value.toLowerCase()
-    const isDefined = pseudos.elements.identifiers[lowercase] ?? (lowercase.startsWith('-webkit-') && !context.strict)
-    if (isDefined && isValidPseudoElement(lowercase, node)) {
-        const identifier = { ...pseudo, value: lowercase }
+    value = value.toLowerCase()
+    const isDefined = pseudos.elements.identifiers[value] ?? (value.startsWith('-webkit-') && !context.strict)
+    if (isDefined && isValidPseudoElement(value, node)) {
+        const identifier = { ...pseudo, value }
         const pseudoClass = list([colon, identifier], '', ['<pseudo-class-selector>'])
         return list([colon, pseudoClass], '', ['<pseudo-element-selector>'])
     }
@@ -1558,7 +1551,7 @@ function postParseSyntax(syntax, node) {
  * the CSS value definition syntax.
  */
 function postParseSyntaxString(syntax, node, parser) {
-    return parser.parseCSSGrammar(syntax.value, '<syntax>', node.context) ?? error(node)
+    return parser.parseCSSValue(syntax.value, '<syntax>', node.context) ?? error(node)
 }
 
 /**

lib/parse/replace.js

@@ -109,7 +109,7 @@ function resolveColorChannelDefinition(node) {
     const { context: { trees } } = node
     // Find the deepest tree whose context is a color function
     for (let index = trees.length; 0 < index; --index) {
-        const { [index - 1]: { context: { replaced, function: fn } }} = trees
+        const { [index - 1]: { context: { replaced, function: fn } } } = trees
         if (fn) {
             const { definition: { name } } = fn
             // Ignore trees of numeric substitution functions and their arguments

lib/serialize.js

@@ -20,7 +20,7 @@ const whiteSpace = require('./values/white-space.js')
 // UAs must support at least 20 repetitions
 const MAX_REPETITIONS = 20
 
-const sRGBColorFunctions = ['hex-color', 'hsl', 'hsla', 'hwb', 'rgb', 'rgba']
+const sRGBColorFunctions = ['hsl', 'hsla', 'hwb', 'rgb', 'rgba']
 
 /**
  * @param {object} alpha