Add support for decimals in hsla colors and some tests for strings->colors #9915
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
src/color/constants.ts
Outdated
| @@ -99,7 +99,7 @@ export const reRGBa = () => | |||
| * So the spec does not allow `hsl(30 , 45% 35, 49%)` but this will work anyways for us. | |||
| */ | |||
| export const reHSLa = () => | |||
| /^hsla?\(\s*([+-]?\d{1,3})\s*[\s|,]\s*(\d{1,3}%)\s*[\s|,]\s*(\d{1,3}%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i; | |||
| /^hsla?\(\s*([+-]?[\d\.]+)\s*[\s|,]\s*([\d\.]+%)\s*[\s|,]\s*([\d\.]+%)\s*(?:\s*[,/]\s*(\d*(?:\.\d+)?%?)\s*)?\)$/i; | |||
There was a problem hiding this comment.
if the regex for RGBA for numbers with decimals are good enough, can you use the same notation in the regex?
There was a problem hiding this comment.
Ok I'll copy the regex from ReRGBa and re-test
src/color/Color.ts
Outdated
| @@ -254,12 +255,14 @@ export class Color { | |||
| * @see http://http://www.w3.org/TR/css3-color/#hsl-color | |||
| */ | |||
| static sourceFromHsl(color: string): TRGBAColorSource | undefined { | |||
| const match = color.match(reHSLa()); | |||
| const noNone = color.replaceAll('none', '0'); | |||
There was a problem hiding this comment.
what is this none use case? is it specific of svg? in that case it should be solved in the svg parser ( in a different PR )
There was a problem hiding this comment.
yes svg allows you to use 'none' instead of '0'. I will move it to the parser
There was a problem hiding this comment.
no leave it for another PR. don't keep adding stuff to the same pr. That is a different topic, 'none' is probably already handled somewhere
williamforster
force-pushed
the
color-tests
branch
from
612e9e1
to
dfc03eb
Compare
I have added support for numerals with decimal places when parsing hsla colors.
These can appear in svg files especially, they are otherwise rendered black.
I also added some jest tests to support this.
Thanks !