Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React does not recognize the maskType prop on a DOM element #643

Closed
zprjk opened this issue Dec 1, 2021 · 4 comments · Fixed by #673 · 4 remaining pull requests
Closed

React does not recognize the maskType prop on a DOM element #643

zprjk opened this issue Dec 1, 2021 · 4 comments · Fixed by #673 · 4 remaining pull requests

Comments

@zprjk
Copy link

zprjk commented Dec 1, 2021

🐛 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.

image

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
Copy link

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
Copy link
Owner

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

@zprjk
Copy link
Author

zprjk commented Dec 1, 2021

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
Copy link
Author

zprjk commented Dec 2, 2021

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment