-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implement latest CSS Color Level 4 parsing (#190)
* Baseline css color parser * Parser improvements * Switch over all parsing to new parser. * Add tests for #187 * Add tests & fixes re #167, #155, #153 * Update the ranges for lab/lch/oklab/oklch to match CSS reference ranges. * Add docs on newly-exported parse fns
- Loading branch information
Showing
32 changed files
with
829 additions
and
320 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,38 @@ | ||
| import hueToDeg from '../util/hue.js'; | ||
| import { | ||
| hue, | ||
| per, | ||
| num_per, | ||
| hue_none, | ||
| per_none, | ||
| num_per_none, | ||
| c, | ||
| s | ||
| } from '../util/regex.js'; | ||
| import { Tok } from '../parse.js'; | ||
|
|
||
| /* | ||
| hsl() regular expressions. | ||
| Reference: https://drafts.csswg.org/css-color/#the-hsl-notation | ||
| */ | ||
| const hsl_old = new RegExp( | ||
| `^hsla?\\(\\s*${hue}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$` | ||
| ); | ||
| const hsl_new = new RegExp( | ||
| `^hsla?\\(\\s*${hue_none}${s}${per_none}${s}${per_none}\\s*(?:\\/\\s*${num_per_none}\\s*)?\\)$` | ||
| ); | ||
|
|
||
| const parseHsl = color => { | ||
| let match = color.match(hsl_old) || color.match(hsl_new); | ||
| if (!match) return; | ||
| let res = { mode: 'hsl' }; | ||
| function parseHsl(color, parsed) { | ||
| if (!parsed || (parsed[0] !== 'hsl' && parsed[0] !== 'hsla')) { | ||
| return undefined; | ||
| } | ||
| const res = { mode: 'hsl' }; | ||
| const [, h, s, l, alpha] = parsed; | ||
|
|
||
| if (match[3] !== undefined) { | ||
| res.h = +match[3]; | ||
| } else if (match[1] !== undefined && match[2] !== undefined) { | ||
| res.h = hueToDeg(match[1], match[2]); | ||
| if (h.type !== Tok.None) { | ||
| if (h.type === Tok.Percentage) { | ||
| return undefined; | ||
| } | ||
| res.h = h.value; | ||
| } | ||
|
|
||
| if (match[4] !== undefined) { | ||
| res.s = Math.min(Math.max(0, match[4] / 100), 1); | ||
| if (s.type !== Tok.None) { | ||
| if (s.type === Tok.Hue) { | ||
| return undefined; | ||
| } | ||
| res.s = s.type === Tok.Number ? s.value : s.value / 100; | ||
| } | ||
|
|
||
| if (match[5] !== undefined) { | ||
| res.l = Math.min(Math.max(0, match[5] / 100), 1); | ||
| if (l.type !== Tok.None) { | ||
| if (l.type === Tok.Hue) { | ||
| return undefined; | ||
| } | ||
| res.l = l.type === Tok.Number ? l.value : l.value / 100; | ||
| } | ||
|
|
||
| if (match[6] !== undefined) { | ||
| res.alpha = match[6] / 100; | ||
| } else if (match[7] !== undefined) { | ||
| res.alpha = +match[7]; | ||
| if (alpha.type !== Tok.None) { | ||
| res.alpha = alpha.type === Tok.Number ? alpha.value : alpha.value / 100; | ||
| } | ||
|
|
||
| return res; | ||
| }; | ||
| } | ||
|
|
||
| export default parseHsl; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import hueToDeg from '../util/hue.js'; | ||
| import { hue, per, num_per, c } from '../util/regex.js'; | ||
|
|
||
| /* | ||
| hsl() regular expressions for legacy format | ||
| Reference: https://drafts.csswg.org/css-color/#the-hsl-notation | ||
| */ | ||
| const hsl_old = new RegExp( | ||
| `^hsla?\\(\\s*${hue}${c}${per}${c}${per}\\s*(?:,\\s*${num_per}\\s*)?\\)$` | ||
| ); | ||
|
|
||
| const parseHslLegacy = color => { | ||
| let match = color.match(hsl_old); | ||
| if (!match) return; | ||
| let res = { mode: 'hsl' }; | ||
|
|
||
| if (match[3] !== undefined) { | ||
| res.h = +match[3]; | ||
| } else if (match[1] !== undefined && match[2] !== undefined) { | ||
| res.h = hueToDeg(match[1], match[2]); | ||
| } | ||
|
|
||
| if (match[4] !== undefined) { | ||
| res.s = Math.min(Math.max(0, match[4] / 100), 1); | ||
| } | ||
|
|
||
| if (match[5] !== undefined) { | ||
| res.l = Math.min(Math.max(0, match[5] / 100), 1); | ||
| } | ||
|
|
||
| if (match[6] !== undefined) { | ||
| res.alpha = match[6] / 100; | ||
| } else if (match[7] !== undefined) { | ||
| res.alpha = +match[7]; | ||
| } | ||
| return res; | ||
| }; | ||
|
|
||
| export default parseHslLegacy; |
Oops, something went wrong.