Fix validating "size" nested in a math function

The validation got the node representing the math function when looking for the
first root node that has calc-size() in its context, while it expected to get
the root node representing the calc-size() arguments.

Author: cdoublev

lib/parse/replace.js

@@ -3,7 +3,7 @@ import * as substitutions from '../values/substitutions.js'
 import { colorFunctionKeywords, colorSpaceKeywords, colorSpaces } from '../values/colors.js'
 import { consumeComponentValues, parseArbitrarySubstitution, parseGrammar } from './parser.js'
 import { dimensionTypes, getCalculationType, matchNumericType } from './types.js'
-import { findContext, findFunction, findParent, findSibling, getFunction, getFunctionName, getRule, isProducedBy } from '../utils/context.js'
+import { findContext, findFunction, findParent, findSibling, getFunction, getRule, isProducedBy } from '../utils/context.js'
 import { isDelimiter, isFailure } from '../utils/value.js'
 import { create as createError } from '../error.js'
 import { simplifyCalculation } from './simplify.js'
@@ -150,7 +150,7 @@ function replaceWithArbitrarySubstitution(node) {
  */
 function replaceWithCalcSizeKeyword(node) {
     const { context, input } = node
-    const basis = context.trees.findLast(node => getFunctionName(node) === 'calc-size')?.children[0]
+    const basis = context.trees.findLast(node => node.context.definition.name === 'calc-size')?.children[0]
     if (basis && basis.value.value !== 'any') {
         const match = parseGrammar(input, 'size', node, 'lazy')
         if (!isFailure(match)) {

test/value.js

@@ -2591,7 +2591,7 @@ describe('<calc-size()>', () => {
         assert.representation('<calc-size()>', 'calc-size(any, 1px)', size, context)
     })
     test('valid', () => {
-        assert.valid('<calc-size()>', 'CALC-SIZE(AUTO, 1 * 1% + 1px + size)', 'calc-size(auto, 1% + 1px + size)', context)
+        assert.valid('<calc-size()>', 'CALC-SIZE(AUTO, 1 * 1% + 1px + calc(size))', 'calc-size(auto, 1% + 1px + size)', context)
     })
 })
 describe('<color>', () => {