React does not recognize the maskType prop on a DOM element

[zprjk]

🐛 Bug Report

Warning: React does not recognize the maskType prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase masktype instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I believe this change made this bug appear: #621

To Reproduce

I'm sorry but don't know how to demonstrate this bug as we speak. I have a React UI lib where I bundle with Rollup and use it in Create React App(CRA).

// EDIT: codesandbox.io/s/react-does-not-recognize-the-masktype-6r344

Using:

My UI Lib:
"rollup": "^2.60.2"
"@svgr/rollup": "^6.0.0"

// with the config
svgr({
 ref: true,
 titleProp: true,
 svgo: false,
})

-----------------------
App (CRA):
"react": "^17.0.2"
"react-dom": "^17.0.2"
"react-scripts": "4.0.3"
"my-ui-lib": "x"

[open-collective-bot]

Hey @zprjk 👋,
Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.
If you use SVGR at work, you can also ask your company to sponsor us ❤️.

[gregberge]

Hmm, maybe React is wrong on this one, as mentioned in #336 (comment), it appears to be a valid property.

[zprjk]

I think this example should be enough to demonstrate for the time being

https://codesandbox.io/s/react-does-not-recognize-the-masktype-6r344

[zprjk]

@gregberge There were some development in the issue above where I reported to Facebook/React. They say it's an
css property and not an attribute.

Trying to figure out the spec:
MDN states it's an css prop: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-type
w3c spec link: https://www.w3.org/TR/css-masking-1/#propdef-mask-type (css prop I.. I guess??)

To ensure what they say is true, I checked other prop maskUnits:
mdn: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/maskUnits
w3c: https://www.w3.org/TR/css-masking-1/#MaskElement (you have to scroll down a bit)
Both state this is an element attribute

Now what's interesting I searched in w3c spec for mask-type= and saw this Example 9:
https://www.w3.org/TR/css-masking-1/#the-mask-mode (scroll down)
Disclaimer I'm not a SVG savy but this is a way to style the svg element directly ? Meaning by writing mask-type and not maskType

In my example if I switch to mask-type and refresh it and see something happening meaning it works