Skip to content

parseToRgb fails when using CSS color functions #655

Open
@lodybo

Description

@lodybo
  • 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions