[feat] New rule `react-dom/no-string-style-prop`

[karlhorky]

Describe the problem

Copying over #85 (comment):

---

We're migrating most of our eslint-plugin-react rules to eslint-plugin-react-x, eslint-plugin-react-dom and eslint-plugin-react-naming-convention today, and I came across one other scenario for non-TypeScript environments like MDX:

The following correctness rules in eslint-plugin-react can be enforced by TypeScript with appropriate tsconfig.json settings:

• react/style-prop-object

We have found it useful to be able to lint for incorrect style prop values in non-TS environments like MDX.

Describe the solution you'd like

The suggestion by @Rel1cx seems nice:

A no-string-style-prop rule can be added to eslint-plugin-react-x eslint-plugin-react-dom to enforce this.

Comment: #85 (comment)

Alternatives considered

--

Additional context

No response

[karlhorky]

@Rel1cx nice, react-dom/no-string-style-prop looks great thanks!

Would you be open to supporting the allow option for components to ignore? For example, Expo's StatusBar component uses a string style prop 🤔 I have this in my ESLint config to ignore components named StatusBar:

  'react/style-prop-object': [
    'warn',
    {
      allow: [
        // Allow expo-status-bar style prop, which is a string,
        // eg: <StatusBar style="auto" />
        // https://github.com/expo/expo/blob/999572cd1036529ffa3a28a0490dd7c0f6f0d731/packages/expo-status-bar/src/StatusBar.types.ts#L2
        'StatusBar',
      ],
    },
  ],

[karlhorky]

Opened a separate issue for that to not lose it in this closed issue:

• [feat] react-dom/no-string-style-prop - allow option #1217