Skip to content

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

@jaydenseric

Description

@jaydenseric

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions