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.

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

parseToRgb fails when using CSS color functions #655

Open
lodybo opened this issue Sep 5, 2024 · 0 comments
Open

parseToRgb fails when using CSS color functions #655

lodybo opened this issue Sep 5, 2024 · 0 comments

Comments

@lodybo
Copy link

lodybo commented Sep 5, 2024

  • polished version: 4.3.1
  • JSS-in_CSS library and version: @storybook/addon-actions 8.2.9 and @storybook/blocks 8.2.9
  • Any relevant JS library and version: Storybook 8.2.9

Mixin/Helper/Shorthand Usage

const { parseToRgb } = require('polished');

const rgbString = 'rgb(0, 48, 86)';
const colorMixString = 'color-mix(in srgb, rgb(0, 48, 86) calc(100%), rgb(255, 255, 255))';

console.log(parseToRgb(rgbString)); // { red: 0, green: 48, blue: 86 }
console.log(parseToRgb(colorMixString)); // PolishedError: Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.

What You Are Seeing

When using CSS Color functions like color-mix, parseToRgb() fails because it checks for HEX, RGB or HSL notation. If none can be found it exits with the error shown above.

Because of this error, Storybook fails. No docs pages can be rendered but the components work when viewing them on the canvas page.

What You Expected To See

I expected to see the docs page of each component. We're using color-mix in order to generate hues from certain base colors, and color-mix is currently supported in the main browsers.

Reproduction

Here's a link to Runkit: https://runkit.com/lodybo/polished---parsetorgb-bug-with-color-mix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant