eslint: Unknown property 'css' found react/no-unknown-property

[chrisweb]

Current behavior:

eslint react plugin (eslint-plugin-react) emits error that the "css" property is unknown

the rule documentation is here: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md

the error appears if you use a version of eslint-plugin-react > 7.31.1

To reproduce:

https://codesandbox.io/s/interesting-raman-2ko96i?file=/src/App.tsx

I did not use the emotion codesandbox template but created a new codesandbox with nodejs as environment, to have a terminal and to be able to run the "npm run lint" command in that terminal (I think you need to be logged in codesanbox to run commands in the terminal)

In the App.tsx I listed the steps I did to create this example

Expected behavior:

no linting error "Unknown property 'css' found react/no-unknown-property"

Environment information:

"@emotion/css": "11.10.0",
"@emotion/react": "11.10.4",
"@emotion/styled": "11.10.4",
"react": "18.2.0",
"react-dom": "18.2.0",
"eslint": "8.23.0",
"eslint-plugin-react": "7.31.4",

As suggested by ljharb, in the issue 3384 over at eslint-plugin-react, here is a ticket for emotion js

[ljharb]

Namely, that emotion should at least support, and ideally require, the attribute name to have a data- prefix, instead of just “css”.

[srmagura]

You should configure that ESLint rule to ignore the css prop. The rule is not smart enough to know that you are using @emotion/react to handle the css prop before it reaches the DOM element.

Namely, that emotion should at least support, and ideally require, the attribute name to have a data- prefix, instead of just “css”.

Allowing/requiring users to write data-css={...} would be misleading, because the value of the css prop is not placed on the DOM element as a data attribute.

[ljharb]

It’s already misleading, because DOM elements can’t have a css attribute.

[chrisweb]

ljharb suggested some solutions to the problem in his follow up comment jsx-eslint/eslint-plugin-react#3384 (comment) and then sjarva gave an example of a simple solution in her comment jsx-eslint/eslint-plugin-react#3384 (comment) (based on suggestion in the edited comment jsx-eslint/eslint-plugin-react#3384 (comment) from diegohaz, to use ignore). The solution is to use ignore, to exclude the rule to check for the css property used by emotion, which in my opinion is great as it allows to keep the rule activ but also exclude css and hence fix the linting error

The rule is already configurable with ignore, so the users of emotion should add css as ignored property, when configuring this rule:

eslintrc.js version:

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

eslintrc.json version

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

Also worth mentioning is probably that if you want to apply this extra rule only to a file or a group of files you can use the overrides key: eslint overrides configuration

I used this suggestion using "eslint-plugin-react": "7.31.5" and it fixed my linting

@srmagura: so this ticket probably more a "documentation update" issue than a "bug" issue, having an emotion documentation page, that explains how to add the extra configuration if using the "eslint react" plugin, would help users that use emotion for the first time, similar to that emotion documentation page that is also there to explain how to configure tsconfig for typescript users

[chrisweb]

@srmagura I added a PR for a documentation update that you might want to consider: #2882