Add utility function to split string into component values

[johannesodland]

When parsing component values passed as a string to rangeStart, rangeEnd and inset we have previously used str.split(), either with a single whitespace or with a regex with various issues:

• 'calc(2 * 10px) auto'.split(' ') returns ['calc(2', '*', '10px)', 'auto'], breaking apart functions
• 'calc(2 * 10px) auto'.split(/(?<!\([^\)]*)\s(?![^\(]*\))/) returns ['calc(2 * 10px)', 'auto'] as expected, but causes an error in browsers without support for lookahead

This PR adds a utility function splitIntoComponentValues(input) that splits a string with multiple component values into an array of individual component value strings. These can then be processed either as keywords or be further parsed using CSSNumericValue.parse().

splitIntoComponentValues('calc(2 * 10px) calc(2 * 5px)');
// [('calc(2 * 10px)', 'calc(2 * 5px)']

splitIntoComponentValues('10px 10px').map(val => CSSNumbericValue.parse(val));
// [new CSSUnitValue(10, 'px'), new CSSUnitValue(10, 'px')]

[johannesodland]

@bramus Rebased to account for changes from #153

[bramus]

Overall structure looks good. A few remarks to address.

[johannesodland]

Overall structure looks good. A few remarks to address.

Thanks for the review @bramus 🙏

I think I've addressed all your remarks: https://github.com/flackr/scroll-timeline/compare/1afa09f2c7a3c39efc4a348f0940fd6fb6b03085..8e1896c3c547119a6bafed25ffd764f0efd786b4

[bramus]

Just came to the realization one can perfectly author something like animation-range: calc(0% + 50px)calc(100% - 50px) – with no spaces between the start and end – which isn’t handled by splitIntoComponentValues().

Now, I don’t think anyone would write such a declaration and consider this be an extreme edge case, so I’m fine with merging this as is.

/ping @flackr for an opinion on this.

[johannesodland]

Just came to the realization one can perfectly author something like animation-range: calc(0% + 50px)calc(100% - 50px) – with no spaces between the start and end – which isn’t handled by splitIntoComponentValues().

We could easily handle that in splitIntoComponentValues() when we consume the end parenthesis.

[johannesodland]

Updated the PR to support calc(...)calc(...):

https://github.com/flackr/scroll-timeline/compare/8e1896c3c547119a6bafed25ffd764f0efd786b4..14cde5bf6812b437282c49603ec79b10b8d702e4