Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

parseToRgb / parseToHsl float precision expected by the regex #634

Open
johannpinson opened this issue Feb 9, 2023 · 0 comments · May be fixed by #653
Open

parseToRgb / parseToHsl float precision expected by the regex #634

johannpinson opened this issue Feb 9, 2023 · 0 comments · May be fixed by #653

Comments

@johannpinson
Copy link

johannpinson commented Feb 9, 2023 •
edited
Loading

  • polished version: 4.2.2

The bug looks similar to the #610 with the alpha which fail from a 3-digit decimal. But this bug is about the hue/saturation/lightness values.

polished/src/color/parseToRgb.js

Line 14 in a6c55c8

const hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i

Because the parseToHsl can return a "long" float decimal, using it as a literal string can generate error.
The code below is in a bug reproduction logic, because the lib allow to use the hsl as an object (HslColor | HslColor types).

Additional context

But my goal is to get/generate hsl props programmatically from a hex/rgb value without doing extra work like Math.round() / parseFloat() / .toFixed() since the polished lib looks to already do it for other functions/methods.

Exemple of expected result from using the parseToHsl result:
image

Mixin/Helper/Shorthand Usage

const {parseToRgb, parseToHsl, hsl} = require('polished')

const color = 'rgba(65 0 4 / 100%)'
const colorInHsl = parseToHsl(color)

const colorInHslStrInt = `hsl(${Math.round(colorInHsl.hue)}deg ${Math.round(colorInHsl.saturation * 100)}% ${Math.round(colorInHsl.lightness * 100)}%)`
const colorInHslStrToFixed = `hsl(${(colorInHsl.hue).toFixed(2)}deg ${(colorInHsl.saturation * 100).toFixed(1)}% ${(colorInHsl.lightness * 100).toFixed(1)}%)`
const colorInHslStrRawFloat = `hsl(${colorInHsl.hue}deg ${colorInHsl.saturation * 100}% ${colorInHsl.lightness * 100}%)`

console.log(colorInHsl) // log Object {hue: 356.3076923076923, saturation: 1, lightness: 0.12745098039215685, alpha: 1}
console.log(hsl(colorInHsl)) // log "#410004" 

console.log(colorInHslStrInt) // log "hsl(356deg 100% 13%)"
console.log(colorInHslStrToFixed) // log "hsl(356.31deg 100.0% 12.7%)"
console.log(colorInHslStrRawFloat) // log "hsl(356.3076923076923deg 100% 12.745098039215685%)"

console.log(parseToRgb(colorInHslStrInt)) // 'from int' => works
console.log(parseToRgb(colorInHslStrToFixed)) // 'from fixed float' => works because it respects the regex
console.log(parseToRgb(colorInHslStrFloat)) // 'from raw float' => error

What You Are Seeing

// CJS
PolishedError: An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#5 for more information.

// ESM - Node
NonErrorEmittedError: (Emitted value instead of an instance of Error) Error: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.

What You Expected To See

Object {red: 66, green: 0, blue: 4}

or possible parseToHsl return:

Object {hue: 356.31, saturation: 1, lightness: 0.127, alpha: 1}
// lightness property has 3 decimal to allow the conversion into `12.7%`

Reproduction

Runkit example
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(parseToRgb): extend float precision to more than one digit davidenke/polished
1 participant
@johannpinson