Allow unsupported length units to be used

[kristerkari]

This PR adds support to allow valid CSS length units to be passed through the parser.

The supported units are based on the list in MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/length

Why?

I'm planning on adding support for CSS viewport units to React Native. Viewport units need to be parsed to pixels at runtime, so I need the raw value from the parser, e.g. 20vw.

Currently css-to-react-native only supports parsing values with pixels and throws for any other unit. By removing that restriction we can allow valid CSS units and let React Native throw an error if the unit is not supported.

By allowing the use of other CSS length units, anyone who uses this parser can easily build custom support for other units in react-native, e.g. rem unit.

ping @jacobp100

[jacobp100]

Is it easier to just modify length to allow the extra units?

[kristerkari]

Is it easier to just modify length to allow the extra units?

LENGTH token type converts the unit to number (LENGTH: regExpToken(lengthRe, Number)), I can not use the same token type.

I thought about using the same regex, but I decided to make a separate regex to make it clear in the code that those units are not supported and that the LENGTH token type is only used when parsing pixel values.

I can combine the regexes if you think that it's better that way.

[jacobp100]

Cool! As an idea, we could extend the transform function for a token to pass in the entire match, then have length universally support all units.

But that also might be something we don’t want. Your call—I’m happy either way!

[kristerkari]

We should probably go with what is easiest to understand for someone who reads the code.

The good thing about my current approach is that it makes a clear separation between what is supported by the parser and what is not. The good thing about your suggestion is that it would simplify the code as we would not have to pass the 2 token types around.

[jacobp100]

Good points! Let’s do this!

[kristerkari]

@jacobp100 Thanks! Could you also do a new release with these changes?

[jacobp100]

Published now. Sorry for the delay :)

Edit: Added you as a maintainer on NPM, so you should be able to publish too now!

[kristerkari]

Thanks a lot!