Support calc() expressions in all properties

[Jym77]

New plan of attack… (post #1416 )

• Replace the hybrid Length value in alfa-style with the one from alfa-css/src/value/numeric.
• Switch all Length usage from alfa-css/src/calculation/numeric to alfa-css/src/value/numeric. This will probably require to provide a parseBase function in the later that can only parse non-calculated lengths (as a temporary solution). This will also need to expose all methods from the former on the later.
• Wherever Length is used as a "final" value type (i.e. in alfa-style), replace parseBase with parse (i.e. accept calculation and provide a resolve helper). There may also be places in alfa-media that will need update.
  Note: some style properties do not accept negative values, and this is treated differently for calculated and non-calculated values: Range checking.
  Note: this will likely require to buff up the new Length with methods from the old one (isZero, …)
  Note: it seems that calculation in media queries need to be parenthesised (min-width: (10px + 10px), not min-width: 10px + 10px), need to find normative reference for that.
• At this point, it should be possible to strip down calculation/numeric/length to only what is needed in math expressions.
• Repeat the switch for other numeric types (number, integer, percentage, angle).
  Note: it might be worth re-introducing a common Dimension abstraction on the new side also.
• Add the dimension-percentage types we need, i.e. length-percentage and angle-percentage.
  Note: it might be worth having an abstraction here also.
  Note: it might be worth recording in the type whether the non-calculated value is holding a dimension or a percentage.
• At this point, it should be possible to completely get rid of alfa-style/src/property/value/compound.ts.
• Use layout to resolve width and other CSS properties #1444
• Add type Value.Parser<V> = Parser<Slice<Token>, V, string> since we use it everywhere.
• Clean up existing values to explicitly add implements Resolvable where relevant.
• Update the other value types in alfa-css in order to use src/value/numeric rather than src/calculation/numeric. It is likely best to first introduce a parseBase to parse non-calculated values for easy migration.
  • box
  • collection
  • color
  • image
  • keyword
  • position
  • shadow
  • shape
  • string
  • transform
• Strip down src/calculation/numeric to its bare minimum; remove Math inheritance from Value (rename resolve2 to resolve); remove src/calculation/numeric inheritance from Value; move src/value.ts back in src/value/value.ts.
• Clean up: use Value.HasCalculation directly in extends clause, instead of having an explicit CALC parameter.
• Clean up the parseBase that shouldn't be needed anymore.
  Note: need to check if all contexts actually allow calculations (e.g. media queries).
• Export from alfa-css the numeric values rather than calculation; clean up any remaining "deep imports" to @siteimprove/alfa-css/src/value/numeric
• Clean up the workarounds in R62 serialisation. Clean up disambiguation of this constraint in CSS types. #1426
• Consider having a Canonical abstraction for all types, corresponding to the resolved and computed version of the type; maybe also hide away the Calculated an Fixed abstractions.
• Lift partiallyResolve as a member method, returning resolve() by default, add it to Resolvable interface.
• Properly use Resolvable interface everywhere.
• Clean up: use the parser helpers in tests.
• Clean up: make the sub-values properly Serialisable so that the correct JSON is used instead of top-level Value.JSON?
• Properly use the calculated value in "final" places (mostly alfa-style).
• 🎉

---

After #980, easy support of calc() was added in #1201.
We now need to go through all properties and add support where relevant. Can also wait until the need arises…

• background
• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-repeat-x
• background-repeat-y
• background-size
• border
• border-block
• border-block-color
• border-block-end
• border-block-end-color
• border-block-end-style
• border-block-end-width
• border-block-start
• border-block-start-color
• border-block-start-style
• border-block-start-width
• border-block-style
• border-block-width
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-end-end-radius
• border-end-start-radius
• border-image
• border-image-outset.ts
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width
• border-inline
• border-inline-color
• border-inline-end
• border-inline-end-color
• border-inline-end-style
• border-inline-end-width
• border-inline-start
• border-inline-start-color
• border-inline-start-style
• border-inline-start-width
• border-inline-style
• border-inline-width
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-start-end-radius
• border-start-start-radius
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-shadow
• clip
• clip-path
• color
• cursor
• display
• flex-direction
• flex-flow
• flex-wrap
• float
• font
• font-family
• font-size
• font-stretch
• font-style
• font-variant
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-weight
• height
• inset
• inset-block
• inset-block-end
• inset-block-start
• inset-inline
• inset-inline-end
• inset-inline-start
• left
• letter-spacing
• line-height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• min-height
• min-width
• opacity
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• position
• right
• rotate
• text-align
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness
• text-indent
• text-overflow
• text-shadow
• text-transform
• top
• transform
• vertical-align
• visibility
• white-space
• width
• word-spacing

---

• Follow up on DEV-13509 (outline-offset, outline-width).