inline-style-prefixer icon indicating copy to clipboard operation
inline-style-prefixer copied to clipboard

Incorrectly prefixes a mask-image property with a radial-gradient value

Open jaydenseric opened this issue 4 years ago • 1 comments

With this style object:

{
  maskImage: 'radial-gradient(closest-side, black, transparent)'
}

Using inline-style-prefixer (via fela-preset-web), the resulting prefixed properties and rules are all unusable in Chrome:

-webkit-mask-image: -webkit-radial-gradient(closest-side, black, transparent),-moz-radial-gradient(closest-side, black, transparent),radial-gradient(closest-side, black, transparent);
mask-image: -webkit-radial-gradient(closest-side, black, transparent);
mask-image: -moz-radial-gradient(closest-side, black, transparent);
mask-image: radial-gradient(closest-side, black, transparent);
Screen Shot 2021-02-03 at 11 18 10 pm

Here is the correct result from stylis (via styled-jsx), that works in Chrome:

-webkit-mask-image: radial-gradient(closest-side,black,transparent);
mask-image: radial-gradient(closest-side,black,transparent);
Screen Shot 2021-02-03 at 11 17 39 pm

jaydenseric avatar Feb 03 '21 12:02 jaydenseric

Is there a workaround we can use before this bug is fixed?

jaydenseric avatar Feb 03 '21 12:02 jaydenseric