Eslint-plugin-react: Does jsx-pascal-case break <script crossorigin src="..."></script>?

[corysimmons]

Using prettier-eslint with react/recommended.
Trying to set script tags within JSX.
React recommends adding crossorigin attribute.
Prettier keeps pascal-casing the attribute to crossOrigin.

Possible bug?

[ljharb]

If so, that'd be a bug with prettier, not this plugin. Does it happen when you use eslint by itself?

[ljharb]

(jsx-pascal-case applies to component names, not to attribute names)

[ljharb]

It might be the no-unknown-property rule, which explicitly has crossOrigin in it: https://github.com/yannickcr/eslint-plugin-react/blob/master/lib/rules/no-unknown-property.js#L115

[corysimmons]

@ljharb Thanks for investigating this so quickly! Yeah, it definitely "felt" hard-coded so I think that's the right thing.

I think this should be upgraded to a bug and discussed/fixed. It definitely conflicts with React as React is expecting lowercase crossorigin (and explicitly throws an error when it encounters crossOrigin). https://reactjs.org/docs/cross-origin-errors.html

[corysimmons]

@ljharb Thank you! =)

[jzDev]

It seems there was a confusion on the attribute name convention for crossorigin.
The correct naming convention is documented in the React DOM Elements documentation.

The previous reference was not a JSX implementation.

I created a PR to fix this issue. https://github.com/yannickcr/eslint-plugin-react/pull/1659

[corysimmons]

@jzDev Interesting. I think crossorigin was working as expected and the pascal casing was breaking it, which is why I opened the issue in the first place, but maybe I have a donkey brain.