eslint-plugin-react: [7.31.4] `no-unknown-property` throwing on valid props

emotion’s css property: the only solutions I can think of here are a) emotion users disable this rule, b) hardcode “css” as an allowed property in the rule (ick), or c) allow the rule to be configurable so users can specify their own properties to ignore.

(Like @diegohaz already said in the modified issue comment) The rule is already configurable with ignore, so the users of emotion should add css as ignored property, when configuring this rule:

...
"react/no-unknown-property": ['error', { ignore: ['css'] }]
...

@ljharb I made a commit that adds this to the rule documentation in #3390

Also having issue with css property of emotion library

I upgraded to 7.31.4 and I’m still seeing this with playsInline with the video element.

Good news is that 7.31.4 fixed all the other false positives.

I also get Unknown property 'scrolling' found on <iframe>

@ljharb @peter-resmed I opened a ticket in the emotion js repository: https://github.com/emotion-js/emotion/issues/2878

also I confirm @guyellis message about playsInline MDN Video HTML Element attribute playsInline, @sjarva could you please add that one too, to your PR #3385? Thank you for all the fixes you already added to that PR

Also getting an issue with the fill attribute on g

custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

React does allow custom attributes without data- in certain circumstances. I guess a lot of people would expect the lint rule to work accordingly to that.

@diegohaz Please upgrade to v7.31.4. Are you still seeing these issues?

@Meemaw @christian98 @Primajin @dermoumi a fix for these will be out later today.

@peter-resmed custom attributes that don’t start with data- are invalid - is there an issue filed on emotion for this?

I am also getting this error on defaultChecked

Unknown property defaultChecked found  react/no-unknown-property

In the React rendering lifecycle, the value attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a defaultValue or defaultChecked attribute instead of value.

Same thing for onPointerDown (and probably other pointer events https://reactjs.org/blog/2018/05/23/react-v-16-4.html)

Getting an unknown property “controls” error as well, on a video element

Hello, I am using the latest version of eslint-plugin-react (^7.31.5), and that one is still to correct Error: Unknown property ‘controls’ found react/no-unknown-property (in a video player)

Cheers for the rapid fix 😃

First of all a big thank you for the quick turn around ❤️

Regarding emotion css - I guess the cleanest way would be to feed an ignore pattern or list of things to ignore. css per-se is not a valid HTML attribute but total valid react prop in the context of emotion-css. I’m pretty sure other libraries add other funky attributes / props so I’d vote for allowlisting them. 🤞🏻

It also fails when explicitly passing <div children={...} />, which should work just like <div>{...}</div>