Allow replacing <dimension> with a numeric substitution

Before this commit, math functions could only replace CSS dimension types like
<length>, <angle>, etc... which are all defined as <dimension>. This type was
directly used for type checking the math function.

But they must also be allowed to replace a standalone <dimension> in <mf-value>
and since f2f2a0f, in <progress-source> and <input-position>.

<mf-value> did not need type checking because it is entirely validated against
the grammar of the corresponding <mf-name> in a postprocessing action.

<progress-source> and <input-position> have <dimension> replaced with <calc-sum>
type checked in a postprocessing action. This will be removed in next commit.

A math function replacing a standalone <dimension> must simply match one the CSS
dimension types that a math function can resolve to.

Author: cdoublev

__tests__/value.js

@@ -1565,15 +1565,16 @@ describe('<calc()>', () => {
             ['<length>', 'calc(1px * 1%)'],
             ['<length>', 'calc(1px / 1%)'],
             ['<length>', 'calc(1% / 1px)'],
+            ['<dimension>', 'calc(1n)'],
+            ['<dimension>', 'calc(1px + 1s)'],
+            ['<dimension> | <percentage>', 'calc(1px + 1%)'],
             ['<percentage>', 'calc(1)'],
             ['<percentage>', 'calc(1px)'],
             ['<percentage>', 'calc(1% + 1)'],
             ['<percentage>', 'calc(1% - 1)'],
             ['<percentage>', 'calc(1 / 1%)'],
             ['<percentage>', 'calc(1% * 1%)'],
             ['<percentage>', 'calc(1% / 1%)'],
-            // <dimension> does not match a type that a math function can resolve to
-            ['<dimension>', 'calc(1n)'],
             // 0 is parsed as <number> in calculations
             ['<length>', 'calc(0 + 1px)'],
             ['<length>', 'calc(0 - 1px)'],
@@ -1641,6 +1642,7 @@ describe('<calc()>', () => {
             // <number>, <dimension>, <percentage>
             ['<number>', 'CALC(1)', 'calc(1)'],
             ['<length>', 'calc(1px)'],
+            ['<dimension>', 'calc(1px)'],
             ['<percentage>', 'calc(1%)'],
             // <calc-keyword>
             ['<number>', 'calc(e)', `calc(${Math.E.toFixed(6)})`],

lib/parse/replace.js

@@ -1,7 +1,7 @@
 
 const { colorFunctionKeywords, colorSpaces, colorSpaceKeywords } = require('../values/colors.js')
+const { dimensionTypes, getCalculationType, matchNumericType } = require('./types.js')
 const { findSibling, isProducedBy } = require('../utils/context.js')
-const { getCalculationType, matchNumericType } = require('./types.js')
 const createError = require('../error.js')
 const { isDelimiter } = require('../utils/value.js')
 const { simplifyCalculation } = require('./simplify.js')
@@ -37,6 +37,35 @@ function replaceForgivingSelector({ context, input }, parser) {
     return null
 }
 
+/**
+ * @param {object} node
+ * @returns {string|string[]}
+ */
+function getReplacedNumericType({ definition: { name } }) {
+    switch (name) {
+        case '<dimension>':
+            return dimensionTypes
+        case '<integer>':
+            return '<number>'
+        default:
+            return name
+    }
+}
+
+/**
+ * @param {object} node
+ * @returns {string|null}
+ */
+function getPercentageResolutionType({ definition: { name }, parent }) {
+    if (name === '<dimension>' || name === '<percentage>') {
+        return null
+    }
+    if (parent?.definition.type === '|' && parent.definition.value.some(definition => definition.name === '<percentage>')) {
+        return name
+    }
+    return null
+}
+
 /**
  * @param {object} node
  * @param {object} parser
@@ -46,6 +75,12 @@ function replaceForgivingSelector({ context, input }, parser) {
 function replaceNumeric(node, parser) {
 
     const { context, definition, input, parent } = node
+
+    // 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>')
 
@@ -74,14 +109,11 @@ function replaceNumeric(node, parser) {
         if (topLevel && !isProducedBy(node, '<mf-value>')) {
 
             const { name, range } = definition
-            const replacedType = name === '<integer>' ? '<number>' : name
-            const hasResolutionType = name !== '<percentage>'
-                && parent?.definition.type === '|'
-                && parent.definition.value.some(definition => definition.name === '<percentage>')
-            const resolutionType = hasResolutionType ? name : null
-            const numericType = getCalculationType(match, resolutionType)
-
-            if (matchNumericType(numericType, replacedType, resolutionType)) {
+            const replacedType = getReplacedNumericType(node)
+            const resolutionType = getPercentageResolutionType(node)
+            const type = getCalculationType(match, resolutionType)
+
+            if (matchNumericType(type, replacedType, resolutionType)) {
                 return {
                     ...match,
                     range,
@@ -176,6 +208,7 @@ module.exports = {
     '<angle>': replaceNumeric,
     '<calc-keyword>': replaceCalcKeyword,
     '<complex-real-selector>': replaceForgivingSelector,
+    '<dimension>': replaceNumeric,
     '<flex>': replaceNumeric,
     '<frequency>': replaceNumeric,
     '<integer>': replaceNumeric,