Refactorize substitution functions parsing

All substitution functions are now parsed more consistently.

The name is parsed against a grammar instead of simply matching an identifier,
which adds support for any aliased/mapped names.

The context is then validated to return an error when it is missing a dependency
for the substitution, except for arbitrary substitutions, to allow declaration
value definitions like @property/initial-value to match them.

The input is then parsed against the corresponding production, to allow applying
specific transition actions.

Author: cdoublev

lib/parse/parser.js

@@ -953,14 +953,14 @@ function parseCSSArbitrarySubstitution(value, context) {
         return null
     }
     const { definition: { cascading, elemental } } = getRule(context)
-    for (const { cascade, element, name, type = `<${name}()>` } of substitutions.arbitrary) {
+    for (const { cascade, definition, element, name } of substitutions.arbitrary) {
         if (!elemental && (element || (cascade && !cascading))) {
             continue
         }
         if (isFailure(parseCSSGrammar(value.name, name, context))) {
             continue
         }
-        return parseCSSGrammar([value], type, context) ?? error({ message: 'Invalid substitution' })
+        return parseCSSGrammar([value], definition, context) ?? error({ message: 'Invalid substitution' })
     }
     return null
 }
@@ -1009,19 +1009,25 @@ function parseCSSArbitrarySubstitutionContainingValue(input, context) {
  */
 function parseCSSValueSubstitution(input, context) {
     const { definition: { elemental } } = getRule(context)
-    for (const { element, name, pending } of substitutions.whole) {
-        if (elemental || !element) {
-            const match = parseCSSGrammar(input, `<${name}()>`, context, 'greedy')
-            if (isError(match)) {
-                return match
-            }
-            if (match) {
-                if (pending) {
-                    context.globals.set('pending', true)
-                }
-                return match
-            }
+    const next = input.next()
+    if (next?.types[0] !== '<function>') {
+        return null
+    }
+    for (const { definition, element, name, pending } of substitutions.whole) {
+        if (isFailure(parseCSSGrammar(next.name, name, context))) {
+            continue
+        }
+        if (element && !elemental) {
+            return error({ message: 'Invalid substitution' })
+        }
+        const match = parseCSSGrammar(input, definition, context, 'greedy')
+        if (isFailure(match)) {
+            return error({ message: 'Invalid substitution' })
+        }
+        if (pending) {
+            context.globals.set('pending', true)
         }
+        return match
     }
     return null
 }

lib/parse/replace.js

@@ -78,29 +78,35 @@ function getPercentageResolutionType({ definition: { name }, parent }) {
  */
 function replaceNumeric(node, parser) {
 
+    const topLevel = !isProducedBy(node, '<calc-value>')
     const { context, definition, input, parent } = node
+    const next = input.next()
+
+    if (next?.types[0] !== '<function>') {
+        if (definition.name === '<number>' && topLevel) {
+            return replaceWithColorChannelKeyword(node, parser)
+        }
+        return null
+    }
 
     // Do not try replacing <dimension> produced by a CSS dimension type
     if (definition.name === '<dimension>' && parent?.definition.type === 'non-terminal') {
         return null
     }
 
-    const name = input.next().name?.toLowerCase()
-    const topLevel = !isProducedBy(node, '<calc-value>')
-
-    const fn = name && substitutions.numeric.find(definition => definition.name === name)
-
-    if (fn) {
+    for (const { definition, element, name } of substitutions.numeric) {
 
-        if (fn.element && !getRule(node)?.definition.elemental) {
+        if (isFailure(parser.parseCSSGrammar(next.name, name, context))) {
+            continue
+        }
+        if (element && !getRule(node)?.definition.elemental) {
             return error(node)
         }
 
         if (topLevel) {
             context.globals.set('calc-terms', 0)
         }
-
-        const match = parser.parseCSSGrammar(input, `<${name}()>`, node, 'lazy')
+        const match = parser.parseCSSGrammar(input, definition, node, 'lazy')
 
         if (isFailure(match)) {
             return error(node)
@@ -127,10 +133,6 @@ function replaceNumeric(node, parser) {
         }
         return match
     }
-    // Try replacing <number> at the top-level of a color function
-    if (definition.name === '<number>' && topLevel) {
-        return replaceWithColorChannelKeyword(node, parser)
-    }
     return null
 }
 

lib/values/substitutions.js

@@ -10,12 +10,12 @@ const properties = require('../properties/definitions.js')
  * @see {@link https://drafts.csswg.org/css-variables-2/#funcdef-var}
  */
 const arbitrary = [
-    { name: '<dashed-ident>', element: true, type: '<dashed-function>' },
-    { name: 'attr', element: true },
-    { name: 'env' },
-    { name: 'inherit', cascade: true },
-    { name: 'random-item', element: true },
-    { name: 'var', cascade: true },
+    { definition: '<dashed-function>', element: true, name: '<dashed-ident>' },
+    { definition: '<attr()>', element: true, name: 'attr', },
+    { definition: '<env()>', name: 'env' },
+    { definition: '<inherit()>', cascade: true, name: 'inherit' },
+    { definition: '<random-item()>', element: true, name: 'random-item' },
+    { definition: '<var()>', cascade: true, name: 'var' },
 ]
 
 /**
@@ -39,33 +39,33 @@ const image = ['paint']
  * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-sibling-index}
  */
 const numeric = [
-    { name: 'abs' },
-    { name: 'acos' },
-    { name: 'asin' },
-    { name: 'atan' },
-    { name: 'atan2' },
-    { name: 'calc-interpolate', element: true },
-    { name: 'calc-mix' },
-    { name: 'calc' },
-    { name: 'clamp' },
-    { name: 'cos' },
-    { name: 'exp' },
-    { name: 'hypot' },
-    { name: 'log' },
-    { name: 'max' },
-    { name: 'min' },
-    { name: 'mod' },
-    { name: 'pow' },
-    { name: 'progress' },
-    { name: 'random', element: true },
-    { name: 'rem' },
-    { name: 'round' },
-    { name: 'sibling-count', element: true },
-    { name: 'sibling-index', element: true },
-    { name: 'sign' },
-    { name: 'sin' },
-    { name: 'sqrt' },
-    { name: 'tan' },
+    { definition: '<abs()>', name: 'abs' },
+    { definition: '<acos()>', name: 'acos' },
+    { definition: '<asin()>', name: 'asin' },
+    { definition: '<atan()>', name: 'atan' },
+    { definition: '<atan2()>', name: 'atan2' },
+    { definition: '<calc-interpolate()>', name: 'calc-interpolate', element: true },
+    { definition: '<calc-mix()>', name: 'calc-mix' },
+    { definition: '<calc()>', name: 'calc' },
+    { definition: '<clamp()>', name: 'clamp' },
+    { definition: '<cos()>', name: 'cos' },
+    { definition: '<exp()>', name: 'exp' },
+    { definition: '<hypot()>', name: 'hypot' },
+    { definition: '<log()>', name: 'log' },
+    { definition: '<max()>', name: 'max' },
+    { definition: '<min()>', name: 'min' },
+    { definition: '<mod()>', name: 'mod' },
+    { definition: '<pow()>', name: 'pow' },
+    { definition: '<progress()>', name: 'progress' },
+    { definition: '<random()>', name: 'random', element: true },
+    { definition: '<rem()>', name: 'rem' },
+    { definition: '<round()>', name: 'round' },
+    { definition: '<sibling-count()>', name: 'sibling-count', element: true },
+    { definition: '<sibling-index()>', name: 'sibling-index', element: true },
+    { definition: '<sign()>', name: 'sign' },
+    { definition: '<sin()>', name: 'sin' },
+    { definition: '<sqrt()>', name: 'sqrt' },
+    { definition: '<tan()>', name: 'tan' },
 ]
 
 /**
@@ -74,9 +74,9 @@ const numeric = [
  * @see {@link https://drafts.csswg.org/css-values-5/#funcdef-toggle}
  */
 const whole = [
-    { name: 'first-valid' },
-    { name: 'interpolate', element: true, pending: true },
-    { name: 'toggle', element: true, pending: true },
+    { definition: '<first-valid()>', name: 'first-valid' },
+    { definition: '<interpolate()>', name: 'interpolate', element: true, pending: true },
+    { definition: '<toggle()>', name: 'toggle', element: true, pending: true },
 ]
 
 module.exports = {