[Docs] no-unknown-property: add a mention about using ignores prope…

…rties with libraries that add props

CHANGELOG.md

@@ -14,6 +14,10 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: add onMouseMoveCapture as valid react-specific attribute ([#3390][] @sjarva)
 * [`no-unknown-property`]: make onLoad and onError be accepted on more elements ([#3390][] @sjarva)
 
+### Changed
+
+* [Docs] [`no-unknown-property`]: add a mention about using ignores properties with libraries that add props ([#3390][] @sjarva)
+
 [#3390]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3390
 [#3388]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3388
 

docs/rules/no-unknown-property.md

@@ -43,7 +43,6 @@ var AnotherComponent = <Foo.bar for="bar" />;
 // Custom web components are ignored
 var MyElem = <div class="foo" is="my-elem"></div>;
 var AtomPanel = <atom-panel class="foo"></atom-panel>;
-
 ```
 
 ## Rule Options
@@ -57,6 +56,23 @@ var AtomPanel = <atom-panel class="foo"></atom-panel>;
 - `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
 - `ignore`: optional array of property and attribute names to ignore during validation.
 
+If you are using a library that passes something as a prop to JSX elements, it is recommended to add those props to the ignored properties.
+
+For example, if you use [emotion](https://emotion.sh/docs/introduction) and its [`css` prop](https://emotion.sh/docs/css-prop)),
+add the following to your `.eslintrc` config file:
+
+```js
+...
+"react/no-unknown-property": ['error', { ignore: ['css'] }]
+...
+```
+
+Now, the following code passes:
+
+```jsx
+var StyledDiv = <div css={{ color: 'pink' }}></div>;
+```
+
 ## When Not To Use It
 
 If you are not using JSX you can disable this rule.

tests/lib/rules/no-unknown-property.js

@@ -94,6 +94,10 @@ ruleTester.run('no-unknown-property', rule, {
       code: '<div someProp="bar"></div>;',
       options: [{ ignore: ['someProp'] }],
     },
+    {
+      code: '<div css={{flex: 1}}></div>;',
+      options: [{ ignore: ['css'] }],
+    },
 
     // aria-* attributes should work
     { code: '<button aria-haspopup="true">Click me to open pop up</button>;' },