Open
Description
polished
version: 4.3.1JSS-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.